1
resposta

Desafio de pagina de sucesso do formulário

Estrutura HTML da página de sucesso:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pesquisa Culturama</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Work+Sans&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/sucesso.css">
</head>
<body>
    <header>
        <img src="img/logo-culturama.png" alt="Logo Culturama">
    </header>
    <main>
        <section>
            <img src="img/check1-icon.png" alt="icone de check para confirmar sucesso">

            <h1>Muito obrigado!</h1>

            <p>Os dados foram enviados com sucesso.
            <br>Agradecemos pela sua colaboração.</p>

            <a href="index.html">Ok</a>
        </section>
    </main>
</body>
</html>

Estrutura css da página de sucesso

*{
    padding: 0;
    margin: 0;
}

body{
    background-color: #ffffff;
    font-family: "Work Sans", sans-serif;
}

header img{
    display: block;
    margin: 75px 0 0 360px;
    width: 100px;
}

section img{
    width: 80px;
    display: block;
    margin: 0 auto;
    margin-top: 100px;
}

h1{
    font-family: "Fjalla One", sans-serif;
    text-align: center;
    font-size: 40px;
}

p{
    font-size: 20px;
    text-align: center;
    margin-top: 40px;
}

a{
    color: #ffffff;
    font-size: 20px;
    text-decoration: none;
    background-color: #22e954;
    width: 85px;
    height: 30px;
    display: block;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    margin: 30px auto;
}

a:hover{
    background-color: green;
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Oii Beatriz, tudo bem?

Que capricho no código! Você organizou bem a estrutura semântica do HTML e o CSS está limpo e legível. Parabéns por isso.

Tenho uma observação sobre o posicionamento da logo no header. Você usou margin: 75px 0 0 360px para empurrar a imagem para a direita, mas esse valor fixo em pixels pode causar problemas em telas menores ou maiores: a logo vai ficar desalinhada dependendo do tamanho do monitor.

Uma alternativa mais robusta seria usar Flexbox no header:

header {
    display: flex;
    justify-content: center;
    margin-top: 75px;
}

header img {
    display: block;
    width: 100px;
}

Assim a logo fica centralizada em qualquer largura de tela, sem depender de um valor fixo.

A mesma lógica vale para pensar no section também. O conteúdo já está bem centralizado com margin: 0 auto, ótimo! Mas vale considerar adicionar um max-width na section para o texto não se esticar demais em telas largas.

Conte com a Alura para evoluir seus estudos. Em caso de dúvidas, fico à disposição.

Bons estudos!

Sucesso

Imagem da comunidade