[Projeto] Módulo 03 - Criando header e footer - Lista de Exercício 03

1. Personalizando o rodapé do seu site

✿ HTML:

//código omitido
        <footer class="rodape">
            <p>Desenvolvido por Alura.</p>
        </footer>
//código omitido

✿ CSS:

    .rodape {
        color: #000000;
        background-color: #22D4FD;
        padding: 24px;
        text-align: center;
        font-family: 'Montserrat', sans-serif;
        font-size: 24px;
        font-weight: 400;
    }

1. Ajustando o espaçamento interno da apresentação

✿ CSS:

//código omitido
    .apresentacao {
        padding: 8% 15%;
        display: flex;
        align-items: center;
        justify-content:space-between;
    }
//código omitido

1. Removendo o height para adaptar o layout

✿ CSS:

//código omitido
    body { 
        /* height: 100vh; estava limitando, agora o body pega toda a página */
        box-sizing: border-box;
        background-color: black;
        color: #F6F6F6;
    }
//código omitido

1. Estilizando o cabeçalho com CSS

✿ CSS:

//código omitido
    .cabecalho__menu__link { 
        font-family: 'Montserrat', sans-serif;
        font-size: 24px;
        font-weight: 600;
        color: #22D4FD;
    }
//código omitido

1. Ajustando o espaçamento interno dos links

✿ CSS:

//código omitido
    .cabecalho {
        padding: 2% 0% 0% 15%;
    }

    .cabecalho__menu {
        display: flex;
        gap: 80px;
    }
//código omitido