Desafio | HTML e CSS: cabeçalho, footer e variáveis CSS

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meu Portifolio</title>
    <link rel="stylesheet" href="style4.css">
</head>
<body>
    <header></header>
    <main class="apresentacao">
            <section>
                <h1>Eleve seu negócio digital a outro nivel <strong class="titulo-destaque"> com um Front-end de qualidade.</strong></h1>
                <p class="apresentacao__conteudo__texto">Olá, meu nome é Miguel Sousa Monteiro, e eu sou um programador que posso fazer sua ideia se tornar realidade da forma que preferir. </p>                      
                <h2>Para falar comigo me mande uma mensagem no Direct.</h2>
                <div class="apresentacao__links">
                    <h2 class="apresentacao__links__subtitulo"> Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://Instragam.com/miguel_s_monteiro">Instragam</a>
                <a class="apresentacao__links__link" href="https://Linkedin.com/in/miguel-sousa-monteiro-66a046214?utm_source=share&ut...">Linkedin</a>
                </div>
            </section>
                <img src="img.jpg" alt="Desenvolvedor">
                           
             
</body>
</html>

h1{ color: white; } p1{ color: white; } body{ height: 100vh; background-color: #2c2828; color: white; }

div{

} img { width: 326px; height: 250px; padding: 25px 10px; border:none; border-radius: 50px; justify-content:baseline;}

section {
margin:3;
font-family:Courier;
font-size: 12px;
margin: 0;
padding: 0;
line-height: 1.2;
text-align: center;}
a{
    background-color: white;
    color: #121b1b;
    text-align:end
}
header {
color: white;
text-align: center;
font-size: 32px;}

.p1 {
font-family: Arial;}

strong {
color: rgb(13, 174, 164)

}

main {
text-align: center;
display:flow-root;
padding:0;}

.g1 {
background-color:#E6E8E6; 
font-size: 10px; 
font-family: Arial; 
height: 8em; 
width: 8em; 
color: #348888; 
border-radius: 55px; 
padding: 25px 10px; 
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
transition: background-color 0.3s ease-in-out, color 0.3s ease; 
border: none; 
cursor: pointer; }

.g1:hover {
background-color: #CED0CE; 
color: #524d4d; }  

.g2  {   background-color:#E6E8E6; 
font-size: 10px; 
font-family: Arial; 
height: 8em; 
width: 8em;
color: #348888; 
border-radius: 55px; 
padding: 25px 10px; 
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); 
transition: background-color 0.3s ease-in-out, color 0.3s ease; 
border: none;
cursor: pointer; }

.g2:hover:hover {
background-color: #CED0CE; 
color: #524d4d; }

.g3 {       
background-color:#E6E8E6; 
font-size: 10px; 
font-family: Arial; 
height: 8em;
width: 8em; 
 color: #348888; 
border-radius: 55px; 
padding: 25px 10px; 
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out, color 0.3s ease; 
border: none; 
cursor: pointer; }  
 
.g3:hover:hover {
background-color: #CED0CE; 
color: #524d4d; }

.apresentacao__link{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    background-color: #348888;
    color: #5bc0c0;
}

.apresentacao__links__link {
    border: 2px solid #22d4fd;
    color: #29146d;
    width: 378px;
    border-radius: 8px;

    }
    
    .apresentacao__link__subtitulo {
        font-family: 'Krona One', sans-serif;
        font-weight: 400;
        font-size: 24px;

}

Oi, Miguel! Como vai?

Obrigada por compartilhar seu código com a comunidade Alura.

Gostei de como você estruturou seu HTML, tornando a apresentação do seu portfólio clara e bem organizada. Um ponto importante é a utilização das classes para estilização no CSS, o que facilita bastante a manutenção do código.

Para melhorar ainda mais, você pode corrigir a referência ao Instagram, pois o link contém um erro no nome da plataforma. Além disso, notei que algumas pseudoclasse hover foram repetidas na classe .g2, o que pode gerar conflito. Você pode corrigir assim:


.g2:hover {  
    background-color: #CED0CE;  
    color: #524d4d;  
}

Isso ajusta o efeito de hover, evitando duplicações.

Parabéns pelo bom trabalho :)

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