3
respostas

Me ajuda por favor

3 respostas

Tá dando página não encontrada;

https://github.com/robson-haaland/formulario2.git

tenta agora

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: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

NO CSS: /* Reset e fontes */

  • { margin: 0; padding: 0; box-sizing: border-box; }

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; }