Boa noite alguém pode me ajudar! Quero deixar igual a imagem
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Boa noite alguém pode me ajudar! Quero deixar igual a imagem
Tá dando página não encontrada;
Meu brother, eu não consegui acessar o Figma. Mas eu tentei, tentei, agora é só você olhar as cores, mudar alguns tamanhos. A estrutura é essa.
HTML:
NO CSS: /* Reset e fontes */
body { font-family: "Poppins", sans-serif; display: flex; justify-content: center; /* Centraliza horizontalmente / align-items: center; / Centraliza verticalmente / min-height: 100vh; / Ocupa a altura total da tela / background-color: #e6c229; / Fundo amarelo mais forte / padding: 20px; / Para garantir um espaçamento em telas pequenas */ }
/* Container principal / .container { display: flex; justify-content: center; align-items: center; gap: 30px; / Espaçamento entre as seções / background-color: #f8e08e; / Fundo amarelo mais claro / padding: 40px; border-radius: 10px; / Arredonda o container principal / box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); / Adiciona sombra */ }
/* Seção de login / .login-section { background-color: #d9b72f; / Tom intermediário de amarelo / width: 320px; height: 560px; padding: 20px; border-radius: 10px; / Arredonda os cantos */ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.login-section img { width: 80%; /* Ajusta o tamanho da imagem */ margin-bottom: 20px; }
.titulo { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.acesso { font-size: 1.2rem; color: #fff; margin-bottom: 30px; }
/* Botão principal / .botao-principal { font-size: 1rem; color: #fff; background-color: #525047; padding: 15px; border-radius: 25px; / Deixa o botão bem arredondado / border: none; width: 80%; cursor: pointer; transition: 0.3s ease; / Efeito suave ao passar o mouse */ }
.botao-principal:hover { background-color: #f8e08e; /* Botão muda para o amarelo mais claro ao passar o mouse */ color: #36320a; }
a { font-size: 0.9rem; color: #fff; text-decoration: none; margin-top: 20px; }
a:hover { text-decoration: underline; }
/* Seção de registro / .register-section { background-color: #d9b72f; / Mesmo tom da seção de login */ padding: 30px; width: 320px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); }
.register-section h2 { font-size: 1.8rem; margin-bottom: 10px; }
.register-section p { margin-bottom: 20px; }
/* Formulário / .register-section form { display: flex; flex-direction: column; width: 100%; gap: 15px; / Espaçamento entre os campos */ }
.register-section input { padding: 12px; font-size: 1rem; border: 1px solid #e6c229; /* Borda no mesmo tom do fundo principal / border-radius: 25px; / Arredonda os campos */ outline: none; transition: 0.3s ease; }
.register-section input:focus { border-color: #525047; /* Muda a borda ao focar */ }
.botao-secundario { background-color: #525047; color: #fff; border: none; padding: 12px; border-radius: 25px; font-size: 1rem; cursor: pointer; transition: 0.3s ease; }
.botao-secundario:hover { background-color: #f8e08e; /* Muda para o amarelo claro no hover */ color: #36320a; }