[Projeto] SOBRE O DESAFIOS CURRICULO | HTML e CSS: cabeçalho, footer e variáveis CSS

ACEITO SUJESTÃO CASO ALGO ESTEJA FALTANDO

O meu HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculo</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Currículo</h1>
            <p class="apresentacao__conteudo__texto">Olá, meu nome é Rafael e atualmente estou cursando e estudando com a Alura</p>

            <h2 class="apresentacao__conteudo__titulo">Experiência</h2>
            <ul class="apresentacao__conteudo__lista">
                <li>No momento estudando</li>
                <li>Sem experiência</li>
            </ul>

            <h2 class="apresentacao__conteudo__titulo">Estudos</h2>
            <div class="apresentacao__classe">
                <ul class="apresentacao__lista">
                    <li>Cursando na Alura</li>
                    <li>Conteudo 2</li>
                    <li>Conteudo 3</li>
                </ul>
            </div>
        </section>
        <img src="./assets/img_2.jpg" alt="Uma imagem">
    </main>

    <footer class="rodape">
        <h4>Minhas Sociais</h4>
        <a href="#">
            <img src="./assets/linkedin.png">
        </a>
        <a href="#">
            <img src="./assets/github.png">
        </a>
    </footer>
</body>
</html>

O meu CSS

* {
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    box-sizing: border-box;
}

.apresentacao {
    padding: 5% 20%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: Arial, Helvetica, sans-serif;
}

.apresentacao__conteudo__texto {

    font-size: 22px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 600;
}

.apresentacao__conteudo__lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
}

.apresentacao__classe {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 600;
}

.rodape {
    padding: 24px;
    text-align: center;
    background-color: #000;
    border: 2px solid;
    border-radius: 8px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.rodape a {
    text-decoration: none;
}

Oi, Rafael, tudo bem?

Muito obrigado por compartilhar seu código. Parabéns pela indentação, uso de tags semânticas e personalização do conteúdo e dos estilos apresentados no projeto deste curso. Tenho certeza que sua postagem vai ser uma inspiração as pessoas que estão realizando essa mesma atividade.

Gostaria de fazer apenas um comentário com relação ao idioma atribuído na abertura da tag <html>. Ao invés de colocar lang="en", colocaria lang="pt-BR". Dessa forma, a linguagem padrão do documento seria português do Brasil. O código ficaria assim:

<html lang="pt-BR">

Continue mergulhando em seus estudos e caso tenha dúvidas, conte com o fórum!

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!