Resolução de Atividades - "10 Lista de exercícios"

1 - Criando a estrutura HTML Alura Plus

HTML:

<!DOCTYPE html>

<html lang = "pt-br">

    <head>

        <meta charset = "UTF-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">

        <title> Alura Plus: Alura + Alura Língua com o Combo+ </title>

    </head>

    <body>

    </body>
    
</html>

2 - Conectando o CSS e preparando o ambiente de desenvolvimento

HTML:

<link rel = "stylesheet" href = "styles.css">

3 - Definindo cores com variáveis CSS

CSS:

:root {

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

body {

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

HTML:

<main>

            <h1> Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único. </h1>
            
</main>

4 - Aplicando estilo global com seletor universal

CSS:

* {

    margin: 0;
    padding: 0;
}

5 - Inserção de imagem com tag img

<img src = "Imagens/Combo.png" alt = "Alura + Alura Língua = Combo+">

6 - Estilizando uma imagem de fundo com CSS

HTML:

        <main>

            <section class = "main__principal container">

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

        </main>

CSS:

.main__principal {

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

.container {

    height: 100vh;
}