Entrar Ainda não tem acesso?
1
resposta

[Projeto] Header e Footer

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando header e footer e atividade Lista de exercícios

por Estudante
| 33.6k xp | 46 posts
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');

*{
    margin: 0;
    padding: 0;
}

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

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao {
    /* margin: 10% 15%; valores antes de footer e header*/
    padding:8% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column ;
    gap:40px ;

}

.apresentacao__conteudo__titulo {
  font-size: 36px;
  font-family: 'Krona One', sans-serif;
}

.apresentacao__conteudo__texto {
  font-size: 24px;
  font-family: 'Montserrat', sans-serif;
}
.apresentacao__links {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
}

.apresentacao__links__subtitulo {
  font-family: 'krona One', sains-serif;
  font-weight: 400;
  font-size:24px ;

}

.apresentacao__links__link{
  /* background-color: #22D4FD; */
  display: flex;
  justify-content: center;
  gap: 16px;
  border: 2px solid #22D4FD;
  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;
}

.apresentacao__links__link:hover{
  background-color: #272727;
}

.hover-name{
 transition: background-color 0.3s ease-in-out; /*transição suave  para que a mudança de cor ocorra gradualmente*/
}
.hover-name:hover{
  background-color: #ac5fa3; /* Cor ao passar o mouse */
}

.apresentacao__links__link:hover {
  border: 2px solid #0000FF; /* Adiciona uma borda azul ao passar o mouse */
}

/*usar a fonte 'Montserrat', tamanho 24px e peso 400. Além disso, o rodapé deve ter um padding de 24px*/
.rodape{ 
  padding: 24px;
  color: #000000;
  background-color: #22D4FD;
  text-align: center;
  font-family: 'Montserrat',sans-serif;
  font-size: 24px;
  font-weight: 400;

}
.cabecalho__menu__link {
  padding: 10px 15px;
  font-size: 20px;
  color: #333;
  margin: 0 10px;
  padding: 5px 10px;
  text-decoration: none;
}

.cabecalho__menu__link:hover {
  color: #ac5fa3;
  transition: background-color 0.3s ease-in-out;
}

.cabecalho__menu {
  display: flex;
  justify-content: center;
  align-items:center;
  background-color:#22D4FD;
  font-family: 'Montserrat',sans-serif;
}

Header HTML:

<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
         <a class="cabecalho__menu__link">Home</a>
         <a class="cabecalho__menu__link">Sobre mim</a>   
        </nav>
    </header>

Footer HTML:

<footer class="rodape">
        <p>Desenvolvido por Alura</p>
    </footer>
1 resposta
por Mike de Sousa
| 1382.8k xp | 2499 posts
Alura Scuba Team Suporte Educacional

Olá, estudante, como vai?

O código está bem organizado e atende às especificações do exercício. No CSS, na classe .apresentacao__links__subtitulo, há um pequeno erro de digitação no nome da fonte. O correto seria 'Krona One', sans-serif em vez de 'krona One', sains-serif. Além disso, o padding dos links no cabeçalho foi definido duas vezes na classe .cabecalho__menu__link. Você pode manter apenas uma definição para evitar redundância.

Fora isso, o seu código está muito bem organizado e segue as boas práticas de HTML e CSS. Continue praticando e compartilhando seus exercícios. O fórum está à disposição para qualquer dúvida que surgir.

Alura Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!