[Projeto] Desafios Aula 02 - Header, footer

01 Personalizando o rodapé do seu site
HTML

 <footer class="rodape">
            <p>Desenvolvido por Anderson Alencar</p>
        </footer>

CSS

.rodape{
background-color: #22d4fd;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
color: #000000;
font-weight: 700;
}

02 Ajustando o espaçamento interno da apresentação

HTML

<main class="apresentacao"></main>

CSS

.apresentacao{
    /* margin: 8% 15%; */
    padding: 7% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

03 Removendo o height para adaptar o layout

CSS

body{
    /* height: 100vh; */
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

04 Estilizando o cabeçalho com CSS

HTML

<header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="#home">Home</a>
            <a class="cabecalho__menu__link" href="#sobre">Sobre</a>
            <a class="cabecalho__menu__link" href="#contato">Contato</a>
        </nav>

CSS - Mouse sobre texto

.cabecalho {
  background-color: #000000;
  padding: 20px;
}

.cabecalho__menu {
  display: flex;
  justify-content: center;
  gap: 40px; 
}

.cabecalho__link {
  font-size: 24px;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  padding: 10px 20px;
  transition: color 0.3s ease;
}

.cabecalho__link:hover {
  color: #22D4FD;
}

05 Ajustando o espaçamento interno dos links

CSS

.apresentacao__links__link{
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    border: 2px solid #0000ff;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}