1 - Ajustando espaçamento com margens no CSS

HTML:

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

CSS:

.container__imagem {

    margin: 2em 0em 4em 0em;
}

2 - Criando espaçamento uniforme em uma seção com CSS

HTML:

<div class = "container__caixa__div">

CSS:

.container__caixa__div {

    margin: 0 7em;
}

3 - Centralizando elementos com CSS

.main__principal {

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

4 - Implementando seção com imagem e texto

HTML:

<section class = "container container__secundario">

                <img src = "Imagens/Plataformas.png" alt = "Site da Alura aberto em um computador e em um celular" class = "container__secundario__imagem">

                <div class = "container__secundario__descricao">

                    <h2 class = "container__secundario__titulo"> Assista do seu jeito </h2>
                    <p class = "container__secundario__texto"> Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer. </p>

                </div>

            </section>

5 - Estilizando a seção com CSS

CSS:

.container__secundario {

    margin: 0 10em;
    align-items: center;
}

.container__secundario__imagem {

    width: 80%;
}

.container__secundario__titulo {

    font-weight: 700;
    font-size: 48px;
    color: var(--cor-primaria);
}

.container__secundario__texto {

    color: var(--cor-secundaria);
    font-size: 16px;
}

6 - Construindo a terceira seção do projeto

HTML:

<section class = "container container__secundario">

                <div class = "container__secundario__descricao">

                    <p class = "container__secundario__texto"> Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser. </p>

                    <a href = "http://www.alura.com.br/" class = "container__botao container__botao__secundario"> Assine o Combo+ </a>
                </div>

                <img src = "Imagens/Telas.png" alt = "Telas abertas no site da Alura" class = "container__secundario__imagem">
            </section>

CSS:

.container__secundario {

    margin: 0 10em;
    align-items: center;
}

.container__secundario__imagem {

    width: 80%;
    margin: 0 3em;
}

.container__secundario__titulo {

    font-weight: 700;
    font-size: 48px;
    color: var(--cor-primaria);
    margin-bottom: 0.2em;
}

.container__secundario__texto {

    color: var(--cor-secundaria);
    font-size: 16px;
}

.container__botao__secundario {

    display: inline-block;
     margin-top: 1em;
}

7 - Criando uma nova seção com estilo reutilizado

HTML:

<section class = "container container__secundario">

                <img src = "Imagens/Notebook.png" alt = "Notebook com o site da Alura aberto" class = "container__secundario__imagem">

                <div class = "container__caixa__div">

                    <h2 class = "container__secundario__titulo"> Baixe seus cursos </h2>
                    <p class = "container__secundario__texto"> Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet. </p>
                </div>
            </section>