[Dúvida] Resolução do desafio e dúvida | HTML e CSS: cabeçalho, footer e variáveis CSS

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Guilherme de Freitas Santos

| 39.9k xp | 52 posts

Conteúdo HTML em index.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> com um programador de qualidade!</strong></h1>
            <p class="apresentacao__conteudo__titulo__texto">Olá! Sou Guilherme de Freitas Santos, desenvolvedor Python com grande interesse de estudos nas áreas de <strong class="titulo-destaque"> React, HTML e CSS </strong>. Ademais, eu sou falante de nível intermediário da língua inglesa, bem como sou um futuro aluno de engenharia de computação da Universidade Federal de Ouro Preto (UFOP). Vamos conversar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a  class="apresentacao__links__link" href="https://github.com/rafaballerini">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a  class="apresentacao__links__link" href="https://instagram.com/guifreitasz7">
                    <img src="./assets/instagram.png">
                    Instagram
                </a>
                <a  class="apresentacao__links__link" href="https://x.com/Guilher10001431?t=D2EwNFeoKmyW4a_Wa6aYdg&s=09">
                    <img src="./assets/twitter-novo.png">
                    Twitter
                </a>
            </div>
        </section>
        <div class="apresentacao__links__link__imagem">
            <img src="./assets/IMG_20230602_153845_050.jpg" alt="Foto do estudante de HTML, Guilherme, sorrindo">
        </div>
    </main>
    <footer class="rodape">
        <p>Desenvolvido pelo estudante de HTML Guilherme</p>
    </footer>
</body>
</html>

Conteúdo HTML em about.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__titulo__texto">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
            <p class="apresentacao__conteudo__titulo__texto">Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores ipsum delis forum birol parela maxime infena. Excepteur sint occaecat cupidatat non.
            </p>
        </section>
        <div class= "apresentacao__links__link__imagem">
            <img src="./assets/IMG_20230602_153845_050.jpg" alt="Foto do estudante de HTML, Guilherme, sorrindo">
        </div>
    </main>
    <footer class="rodape">
        <p>Desenvolvido pelo estudante de HTML Guilherme</p>
    </footer>
</body>
</html>

3 respostas

por Guilherme de Freitas Santos

| 39.9k xp | 52 posts

5 dias atrás

Conteúdo HTML em curriculo.html:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./styles/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
            <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
        </nav>
    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Resumo profissional</h1>
            <p class="apresentacao__conteudo__titulo__texto">Jovem profissional recém-formado do Ensino Médio pela Escola Estadual Frei Orlando (18 anos), com grande entusiasmo e proatividade para ingressar na área de programação. Atualmente em processo de formação na plataforma Alura, desenvolvendo habilidades em Python, HTML e CSS, com foco em aplicações práticas e colaborativas. Possui nível intermediário de inglês e será futuro estudante de Engenharia de Computação na Universidade Federal de Ouro Preto (UFOP). Demonstra forte interesse em aprimorar conhecimentos no mundo digital e busca oportunidades para aplicar suas habilidades em um ambiente profissional dinâmico e colaborativo, com o objetivo de se tornar um profissional competente e em constante aprendizado.</p>
            <h2 class="apresentacao__conteudo__titulo">Experiência Profissional:</h2>
            <p class="apresentacao__conteudo__titulo__texto">Professor Particular Contratado | Centro Educacional Supera | [Período (Março/2025 - Presente)]
            </p>
            <h2 class="apresentacao__conteudo__titulo">Formação acadêmica:</h2>
            <p class="apresentacao__conteudo__titulo__texto">Ensino Médio Completo | Escola Estadual Frei Orlando | [Ano de conclusão: 2025]</p>
            <p class="apresentacao__conteudo__titulo__texto">Futuro Estudante de Engenharia de Computação | Universidade Federal de Ouro Preto (UFOP) | [Previsão de início de aulas: Agosto de 2025]
            </p>
            <h2 class="apresentacao__conteudo__titulo">Formação complementar:</h2>
            <p class="apresentacao__conteudo__titulo__texto">Formação em Programação (em andamento) | Alura | [Período (Dezembro de 2024 - Presente)]
            </p>
            <p class="apresentacao__conteudo__titulo__texto">Curso de Inglês (em andamento) | Centro Educacional Supera | [Período (Junho de 2021 - Presente)]</p>
            <h2 class="apresentacao__conteudo__titulo">Habilidades:</h2>
            <p class="apresentacao__conteudo__titulo__texto"><strong class="titulo-destaque">Linguagens de Programação: Python (básico), HTML (básico), CSS (básico)</strong></p>
            <p class="apresentacao__conteudo__titulo__texto"><strong class="titulo-destaque">Idiomas: Inglês (Nível Intermediário - em aprimoramento)</strong></p>
            <p class="apresentacao__conteudo__titulo__texto"><strong class="titulo-destaque">Outras Habilidades: Proatividade, interesse em trabalho colaborativo, certa familiaridade com ambientes digitais.</strong></p>
            <div class="apresentacao__links__link__imagem__dois">
                <img src="./assets/IMG_20250127_172539_586.jpg" alt="Foto do estudante de HTML, Guilherme, sorrindo e feliz com sua aprovação na UFOP(Universidade Federal de Ouro Preto)">
            </div>
        </main>
        <footer class="rodape">
            <p>Desenvolvido pelo estudante de HTML Guilherme</p>
        </footer>
    </body>
    </html>

por Guilherme de Freitas Santos

| 39.9k xp | 52 posts

5 dias atrás

Conteúdo CSS em style.css:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cor-primaria: #FDFBEE;
    --cor-secundaria: #57B4BA;
    --cor-terciaria: #FE4F2D;
    --cor-hover: #FDFAF6;

    --fonte-primaria: "Krona One", sans-serif;
    --fonte-secundaria: "Montserrat", sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

.cabecalho {
    padding: 2% 0% 0% 15%;
}

.cabecalho__menu {
    display: flex;
    gap: 80px;
}

.cabecalho__menu__link {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    font-size: 83px;
    color: var(--cor-terciaria);
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 600;
    padding: 10px 15px;
    text-decoration: none;
}

.apresentacao {
    padding: 4% 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: var(--fonte-primaria);
}

.titulo-destaque {
    color: var(--cor-terciaria);
}

.apresentacao__conteudo__titulo__texto {
    font-size: 24px;
    font-family: var(--fonte-secundaria);
}

.apresentacao__links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.apresentacao__links__subtitulo {
    font-family: var(--fonte-primaria);
    font-size: 24px;
    font-weight: 400px;
}

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    text-align: center;
    border: 2px solid var(--cor-terciaria);
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-secundaria);
    font-family: var(--fonte-secundaria);
}

.apresentacao__links__link:hover {
    background-color: var(--cor-hover);
    cursor: pointer;
}

.apresentacao__links__link__imagem {
    margin-left: 65px;
    margin-top: -200px;
}

.apresentacao__links__link__imagem img {
    width: 400px;
}

.apresentacao__links__link__imagem__dois {
    margin-left: 800px;
    margin-right: 250px;
    margin-top: -600px;
    margin-bottom: 50px;
}

.apresentacao__links__link__imagem__dois img {
    width: 400px;
    margin-top: -1800px;
    margin-bottom: 750px;
}

.rodape{
    color: var(--cor-primaria);
    background-color: var(--cor-terciaria);
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight: 400;
    text-align: center;
    padding: 24px;
    margin-top: 500px;
} 


.cabecalho__menu__link:hover {
    background-color: var(--cor-primaria);
}

Por fim, eu sinto muito, mas eu não consegui subir a imagem de meu currículo.

solução!

por Lorena Garcia

| 9646.9k xp | 14420 posts

Alura Scuba Team Suporte Educacional

3 dias atrás

Oi, Guilherme! Como vai?

Obrigada por compartilhar seu projeto com a comunidade Alura.

Seu portfólio ficou muito bem estruturado! É ótimo ver que você aproveitou o desafio para destacar sua trajetória e montar uma navegação entre páginas clara e funcional. Também curti como você utilizou classes bem nomeadas para os elementos.

Sobre colocar imagem no fórum, você pode printar a tela do seu computador com Windows + Shift + S e salvar em um local fácil em seu computador. E por fim, usar a opção de upload de imagem:

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