/* CSS reset */ *, *:before, *:after { margin:0; padding:0; font-family: Arial,sans-serif; } /* remove a linha dos links */ a{ text-decoration: none; } /* esconde as ancoras da tela */ a.links{ display: none; } .content{ width: 500px; min-height: 560px; margin: 0px auto; position: relative; } h1{ font-size: 48px; color: #066a75; padding: 2px 0 10px 0; font-family: Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } h1:after{ content: ' '; display: block; width: 100%; height: 2px; margin-top: 10px; background: -webkit-linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); background: linear-gradient(left, rgba(147,184,189,0) 0%,rgba(147,184,189,0.8) 20%,rgba(147,184,189,1) 53%,rgba(147,184,189,0.8) 79%,rgba(147,184,189,0) 100%); } p{ margin-bottom:15px; } .content p:first-child{ margin: 0px; } label{ color: #405c60; position: relative; } /* placeholder */ ::-webkit-input-placeholder { color: #bebcbc; font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: #bebcbc; font-style: italic; } input { outline: none; } /*estilo dos input, menos o checkbox */ input:not([type="checkbox"]){ width: 95%; margin-top: 4px; padding: 10px; border: 1px solid #b2b2b2; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } /*estilo do botão submit */ input[type="submit"]{ width: 100%!important; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; color: #fff; font-size: 20px; border: 1px solid #fff; margin-bottom: 10px; text-shadow: 0 1px 1px #333; -webkit-border-radius: 5px; border-radius: 5px; transition: all 0.2s linear; } /*estilo do botão submit no hover */ input[type="submit"]:hover{ background: #4ab3c6; } .link{ position: absolute; background: #e1eaeb; color: #7f7c7c; left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px; text-align: right; border-top: 1px solid #dbe5e8; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .link a { font-weight: bold; background: #f7f8f1; padding: 6px; color: rgb(29, 162, 193); margin-left: 10px; border: 1px solid #cbd518; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } .link a:hover { color: #39bfd7; background: #f7f7f7; border: 1px solid #4ab3c6; } #cadastro, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: #f7f7f7; border: 1px solid rgba(147, 184, 189,0.8); -webkit-box-shadow: 5px; border-radius: 5px; -webkit-animation-duration: 0.5s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } /* Efeito ao clicar no botão ( Ir para Login ) */ #paracadastro:target ~ .content #cadastro, #paralogin:target ~ .content #login{ z-index: 2; -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; -webkit-animation-delay: .1s; animation-delay: .1s; } /* Efeito ao clicar no botão ( Cadastre-se ) */ #registro:target ~ .content #login, #paralogin:target ~ .content #cadastro{ -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } /*fadeInLeft*/ @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } /*fadeOutLeft*/ @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } Formulário de Login e Registro com HTML5 e CSS3
Login
Seu gmail:
Sua Senha:
Manter-me logado
Ainda não tem conta? Cadastre-se
Cadastro
Seu nome
Seu e-mail
Sua senha
Já tem conta? Ir para Login
function logar(){ var email = document.getElementById("nome_login"); var senha = document.getElementById("email_login");
if(email.value == "admin@admin.com" && senha.value == "admin"){
localStorage.setItem("acesso", true);
alert("Usuario Autenticado com sucesso!")
window.location.href = "Pesoideal.html";
}else{
alert("Usuario ou senha invalidos!")
}
}
input { font-family: sans-serif; font-size: 16px; color: #333; } body { margin: 0; height: 100vh; padding: 0; border: 0; background: rgb(48, 46, 56); } .form { background-color: rgb(191, 166, 217); height: 380px; width: 420px; border-radius: 8px; margin: 20px auto 20px auto; display: block; box-shadow: 0 0 40px 0 rgb(26, 0, 0); } .linha-um { padding: 20px; } .linha-dois { padding: 20px; } .linha-tres { padding: 20px; } .text-input { width: 220px; height: 30px; border-radius: 10px; background-color: #ffffff; border: none; outline: none; padding: 5px 10px; cursor: pointer; } .text-input:last-child { margin-bottom: 35px; } .text-input:hover { background-color: #c5b5b5; } #calcular { border: none; border-radius: 10px; height: 40px; width: 360px; background-color: #8a5454; color: rgb(255, 255, 255); margin: auto; display: block; outline: none; cursor: pointer; } #calcular:hover { background-color: #13501b; } .text { display: inline-block; margin: 5px 20px 5px 8px; ; } .linha-um { padding: 30px 20px 15px 40px; } .linha-dois { padding: 15px 20px 20px 40px; } .linha-tres { padding: 15px 20px 30px 40px; } .container { display: inline-block; position: relative; padding-left: 30px; cursor: pointer; user-select: none; } .container input { position: absolute; opacity: 0; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #ffffff; border-radius: 50%; }
h1 { font-size: 30px; font-weight: 300; text-align: center; color: #292828; padding-top: 15px; display: block; }
h2 { font-size: 22px; font-weight: 300; text-align: justify; padding-left: 30%; }
h3 { font-size: 24px; font-weight: 300; text-align: center; padding: 15px; }
h3 b { font-size: 32px; font-weight: 300; color: #832e2e; }
.button { background-color: #ffffff; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; position: absolute; left: 34%;
}
.button1 { border-radius: 10px; width: 23%; height: 6%; }
.button1:hover { background-color: #b3b3b3; }
#cadastro { background-color: rgb(161, 161, 161); height: 320px; width: 420px; border-radius: 8px; margin: 20px auto 20px auto; display: block;
box-shadow: 0 0 40px 0 rgb(56, 22, 22);
}
.container:hover input~.checkmark { background-color: #c5b5b5; }
.container input:checked~.checkmark { background-color: #13501b; }
.checkmark:after { content: ""; position: absolute; display: none; }
.container input:checked~.checkmark:after { display: block; }
.container .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid rgb(204, 204, 204); border-width: 0 2px 2px 0; transform: rotate(45deg); } Peso ideal
Calculadora do peso Ideal
O peso ideal é uma avaliação importante que,
além de ajudar a pessoa a perceber
se está acima ou abaixo do peso,
também pode previnir complicações
como obesidade, diabetes ou até mesmo a desnutrição,
que acontece
quando a pessoa está muito abaixo do peso.
Para saber o intervalo de peso considerado ideal para um adulto, insira os dados na calculadora: