Entrar Ainda não tem acesso?
2
respostas

[Projeto] Desafio: crie uma página currículo!

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Navegando entre páginas e atividade Desafio: crie uma página currículo!

por Monica Schroff Machado
| 18.7k xp | 10 posts

INDEX:

<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mudança de Vida</title>
    <link rel="stylesheet" href="./style/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="aboutme.html">Sobre mim</a>
             <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
         </nav>
    </header>
    <main class="conteiner">
        <section class="conteiner__conteudo">
            <h1 class="conteiner__conteudo__titulo">Tá cansado do seu trabalho? <strong class="titulo__destaque">Então bora mudar isso!</strong></h1>
            <p class="conteiner__conteudo__texto">Eu sou veterinária, mas não sou feliz na profissão. Eu amo viajar e trabalho pra poder fazer isso o máximo de vezes que eu puder.
            <strong class="destaque"> Daí pensei: e seu eu pudesse trabalhar de qualquer lugar do mundo? </strong> Estou estudando front end e também penso na parte de UX.
            Vocês podem me acompanhar seguindo nas minhas redes sociais.</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://github.com/monicaschroff">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a class="apresentacao__links__link" href="https://linkedin.com/in/monicaschroff">
                    <img src="./assets/linkedin.png">
                    Linkedin
                </a>    
                <a class="apresentacao__links__link" href="https://instagram.com/mschroff">
                    <img src="./assets/insta.png">
                    Instagram
                </a>
            </div>
        </section>
        <img class="foto__perfil" src="./assets/profile.jpg" alt="Foto de perfil de Monica">  
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Mônica Schroff Machado</p>
    </footer>
</body>
</html>

ABOUT ME:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sobre mim</title>
    <link rel="stylesheet" href="./style/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="aboutme.html">Sobre mim</a>
             <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
         </nav>
    </header>
    <main class="conteiner">
        <section class="conteiner__conteudo">
            <h1 class="conteiner__conteudo__titulo">Sobre mim</h1>
            <p class="conteiner__conteudo__texto">Meu nome é Mônica, tenho 37 anos e me formei em medicina veterinária pela Universidade Federal de Goiás em 2012 e trabalho na área desde então como cirurgiã e patologista veterinária.<br>
            Entrei em contato com o mundo da programação há pouco tempo e achei incrível. Tanto pela área ser interessante e também pela possibilidade de poder trabalhar em qualquer lugar do mundo, me dando a liberdade que tanto procuro.</p>
        </section>
        <img class="foto__perfil" src="./assets/profile.jpg" alt="Foto de perfil de Monica">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Mônica Schroff Machado</p>
    </footer>
</body>
</html>
2 respostas
por Monica Schroff Machado
| 18.7k xp | 10 posts

CURRÍCULO:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currículo</title>
    <link rel="stylesheet" href="./style/style.css">
</head>
<body>
   <body>
    <header class="cabecalho">
         <nav class="cabecalho__menu">
             <a class="cabecalho__menu__link" href="index.html">Home</a>
             <a class="cabecalho__menu__link" href="aboutme.html">Sobre mim</a>
             <a class="cabecalho__menu__link" href="curriculo.html">Currículo</a>
         </nav>
    </header>
    <main class="conteiner">
        <section class="conteiner__conteudo">
            <h1 class="conteiner__conteudo__titulo">Currículo</h1>
            <h2 class="conteiner__conteudo__anos">2006 - 2011</h2>
            <ul>
                <li class="conteiner__conteudo__cursos">Medicina Veterinária - UFG</li>
            </ul>
            <h2 class="conteiner__conteudo__anos">2014 - 2016</h2>
            <ul>
                <li class="conteiner__conteudo__cursos">Extensão universitária em Clínica Cirúrgica de Pequenos Animais - QUALITTAS</li>
            </ul>
            <h2 class="conteiner__conteudo__anos">2025 - atual</h2>
            <ul>
                <li class="conteiner__conteudo__cursos">HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags - ALURA</li><br>
                <li class="conteiner__conteudo__cursos">HTML e CSS: Classes, posicionamento e Flexbox - ALURA</li>
            </ul>
        </section>
        <img class="foto__perfil" src="./assets/profile.jpg" alt="Foto de perfil de Monica">
    </main>
     <footer class="rodape">
        <p>Desenvolvido por Mônica Schroff Machado</p>
    </footer>
</body>
</html>

ARQUIVO CSS: 

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

*{
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    background-color: #3D0301;
    color: pink;
}

.cabecalho {
    padding: 2% 0% 2% 15%;
    background-color: #B03052;
}

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

.cabecalho__menu__link{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    color: #7ED4AD;
    text-decoration: none;
}

.cabecalho__menu__link:hover{
    color: #D76C82 ;
}

.foto__perfil {
    width: 300px;
    border-style: dotted;
    border-color: #7ED4AD;
    border-width: 10px;
    border-radius: 15px;
}

.conteiner {
    padding: 5% 15%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.conteiner__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.conteiner__conteudo__titulo {
    font-size: 36px;
    font-family: "Krona One", sans-serif;
    text-align: center;
    background-color: #7ED4AD;
    color:#B03052;
    padding: 10px;
}

.conteiner__conteudo__titulo:hover {
    color: #D76C82;
}

.conteiner__conteudo__texto {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

.conteiner__conteudo__anos {
    display: inline;
    align-self: flex-start;
    padding: 10px;
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    background-color: #B03052;
}

.conteiner__conteudo__cursos {
    font-size: 20px;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

.destaque {
    color:#7ED4AD;
}

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

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

.apresentacao__links__link {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: 378px;
    color: #D76C82;
    text-align: center;
    border: 2px solid #7ED4AD;
    border-radius: 8px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;   
}

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

.rodape {
    background-color: #B03052;
    color: #7ED4AD;
    padding: 24px;
    text-align: center;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 400;
}
por Mike de Sousa
| 2198.7k xp | 4370 posts
Alura Scuba Team Suporte Educacional

Olá, Monica, como vai?

Seu projeto está muito bem estruturado e cumpre com clareza o objetivo da atividade. Você criou a navegação entre as páginas, apresentou sua trajetória de forma organizada e utilizou os elementos como listas, imagens e seções com coerência.

Um pequeno ajuste que você pode considerar: no arquivo curriculo.html, há uma duplicação da tag <body>. A abertura da segunda <body> pode ser removida, mantendo apenas uma para garantir a conformidade com o HTML.

Parabéns pelo trabalho e obrigado por compartilhar seu progresso. Continue postando no fórum, ele está à disposição para te ajudar no que for preciso.

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