1) Personalizando o rodapé do seu site

Imagine que você está desenvolvendo um site e chegou a hora de personalizar o rodapé. O desafio é criar um rodapé estilizado com as seguintes características: deve ter um fundo azul claro (#22D4FD), texto em preto (#000000), e o texto deve ser centralizado e usar a fonte 'Montserrat', tamanho 24px e peso 400. Além disso, o rodapé deve ter um padding de 24px. Use o HTML e CSS fornecidos como base e aplique as modificações necessárias.

style.css
.rodape{
    background-color: #22D4FD;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font: 400;
}

2) Ajustando o espaçamento interno da apresentação

Você ficou responsável por ajustar o layout de uma seção de apresentação em um site. Atualmente, os elementos estão muito próximos das bordas, o que prejudica a estética do site. Sua tarefa é substituir a propriedade margin por padding na classe .apresentacao do CSS, testando valores de porcentagem para encontrar o espaçamento ideal. Comece com 5% e ajuste conforme necessário para obter um visual equilibrado.

padding: 8% 15%; //Espaçamento interno superior e inferior de 8% e esquerdo e direto no valor de 15%
    display: flex; //Visualização do conteudo lado a lado
    align-items: center; //Centralizando os itens em linha
    justify-content: space-between; //Espaçamento entre os ítens

3) Removendo o height para adaptar o layout

Seu site está enfrentando um problema de layout: a propriedade height: 100vh no body está impedindo que o conteúdo se ajuste corretamente na tela, especialmente com a adição de novos elementos como um rodapé. Sua missão é comentar a linha que define height: 100vh no CSS e verificar o impacto dessa mudança no layout do site. Observe como o conteúdo e o rodapé se adaptam à nova configuração.

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

4) Estilizando o cabeçalho com CSS

Você está criando um site e chegou a hora de estilizar o cabeçalho para que ele fique visível e atraente, similar ao projeto no Figma. Você precisa adicionar estilo ao cabeçalho no arquivo style.css, de forma que os links "Home" e "Sobre mim" fiquem alinhados horizontalmente e com uma aparência moderna. Considere usar propriedades como font-size, color, margin, padding, e display. Tente também adicionar um hover para alterar a cor dos links quando o mouse passar por cima.

index.html
<header class="cabecalho"> 
    <nav class="cabecalho__menu"> 
        <a>Home</a> 
        <a>Sobre Mim</a>
    </nav>
</header>

style.css
.cabecalho{
    display: flex;
    width: 299px;
    padding-top: 65px;
    padding-left: 360px;
    justify-content: space-between;
    font-size: 24px;
    color: 22D4FD;	
}

5) Ajustando o espaçamento interno dos links

Com base no estilo atual do cabeçalho, percebe-se que os links podem estar muito próximos um do outro ou da borda do cabeçalho, o que pode afetar a legibilidade e a estética do site. Sua tarefa é ajustar o espaçamento interno (padding) dos links "Home" e "Sobre mim" para garantir que eles tenham um espaçamento adequado em torno do texto. Isso tornará o cabeçalho mais atraente e fácil de usar.

style.css
  .cabecalho__menu__link {
      padding: 10px 15px;
  }