Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Resolução de Atividades - "09 Faça como eu fiz"

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Iniciando o projeto e atividade Faça como eu fiz

por Victor Moreira Rodrigues
| 26.9k xp | 92 posts
Estudante

HTML

<!DOCTYPE html>

<html lang = "pt-br">

    <head>

        <title> Alura Plus: Combo Especial </title>
        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <link rel = "stylesheet" href = "styles.css">

    </head>

    <body>

        <section class = "container principal">

          <h1> Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único. </h1>  
          <img src = "Imagens/Combo.png" alt = "Alura + Alura Língua = Combo+">

        </section>

    </body>
</html>

CSS:

:root {

    --cor-fundo: #00030C;
    --cor-primaria: #FFFFFF;
    --cor-destaque-botao: #167BF7;
    --cor-secundaria: #C0C0C0;
}

* {
    margin: 0;
    padding: 0;
}

body {

    background-color: var(--cor-fundo);
    color: var(--cor-primaria);
}

.principal {

    background-image: url("Imagens/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
}

.container {

    height: 100vh;
}
1 resposta
solução!
por Rafaela Petelin Silvério
| 1191.9k xp | 2678 posts
Alura Scuba Team

Oi, Victor! Como vai?

Agradeço por compartilhar seu código com a comunidade Alura.

Notei que você utilizou variáveis no CSS para manter as cores organizadas, isso torna o projeto mais fácil de atualizar depois. Também ficou legal a forma como trouxe a imagem de fundo na classe principal.

Uma dica interessante para o futuro é usar a propriedade min-height em vez de apenas height quando precisar adaptar o layout em diferentes telas. Veja este exemplo: 


.container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Esse código garante que o conteúdo fique sempre centralizado e ocupa pelo menos a altura da tela.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!