1
resposta

[Projeto] Currículo

Inclusive quando fui olhar o a opinião do instrutor vi que tem como ainda pegar dentro de ".apresentacao__conteudo__texto" e colocar os links em partes como o colocar no nome todo da formação transformando tudo em link ou só separando colocando "certificado" depois de cada formação como link para os certificados.

HTML Curriculo

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Currículo</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>
<main class="apresentacao">
 <section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Currículo</h1>
<p class="apresentacao__conteudo__texto">
 Apresentação e informações principais
</p>
<h2 class="apresentacao__conteudo__titulo">Experiências</h2>
 <ul class="apresentacao__conteudo__texto">
<li>Empresa 1 (2020 - 2022) - Gestora de processos</li>
<li>Empresa 2 (2022 - 2023) - Gestora de projetos</li>
<li>Empresa 3 (2024 - 2025 ) - Auxiliar administrativo </li>
 </ul>
<h2 class="apresentacao__conteudo__titulo">Estudos</h2>
<div class="apresentacao__conteudo__texto">
<ul class="apresentacao__conteudo__texto">
<li>Graduação em Engenharia de Produção - UNIT - <a href="linkdocertificado">certificado</a>
                        </li>
                        <li>Curso Formação Green Belt - RL & Associados - <a href="linkdocertificado">certificado</a>
                        </li>
                        <li>Curso Front-end - Alura - <a href="linkdocertificado">certificado</a></li>
                    </ul>
                </div>
            </section>
            <img src="./assets/imagem.png" alt="Foto da Joana Santos programando">
        </main>
    </main>
    <footer class="rodape">
        <p>Desenvolvido por Stephanie</p>
    </footer>
</body>
</html>

HTML Sobre mim

<!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></main>
    <footer class="rodape">
        <p>Desenvolvido por Stephanie</p>
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
* {margin: 0;
padding: 0;}
body {
    /*height: 100vh;*/
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;}
.titulo-destaque {
    color: #22D4FD;}
.apresentacao {
    padding: 5% 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__conteudo__texto a{
    text-decoration: none;
    color: #22D4FD;}
.apresentacao_botoes {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;}
.apresentação_botoes_subtítulo {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;}
.apresentacao_link {
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    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;
    font-family: 'Montserrat', sans-serif;}
.apresentacao_link:hover {
    background-color: #272727;
    padding: 3%;}
.rodape {
    padding: 24px;
    color: #000000;
    background-color: #22D4FD;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;}
.cabecalho {
    padding: 2% 0% 0% 15%;}
.cabecalho_menu {
    display: flex;
    gap: 80px;}
.cabecalho_menu_link {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
    color: #22D4FD;
    text-decoration: none;}
.cabecalho_menu_link:hover {
    color: #272727;}
1 resposta

Oi, Stephanie! Tudo bem?

Parabéns por concluir mais esse desafio! A estrutura do seu currículo ficou muito bacana e é excelente ver que você analisou o código do instrutor e explorou as diferentes formas de ancorar os links dos certificados. Ambas as formas (linkar o nome todo ou só a palavra "certificado") estão certas.

Só um observação: Notei que você acabou abrindo a tag <main> duas vezes seguidas logo após o cabeçalho (<main><main class="apresentacao">) e, consequentemente, fechando duas vezes no final (</main></main>).

Pelas boas práticas da semântica do HTML5, devemos ter apenas uma tag <main> visível por página, pois ela é o grande sinalizador para os navegadores e leitores de tela de onde começa o conteúdo principal do seu site.

Para corrigir, basta apagar essa primeira <main> solta e deixar apenas a que tem a sua classe, ficando assim:

    </header>
    <main class="apresentacao">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Currículo</h1>

Detalhe bobo, mas só para evitar erros.

Bons estudos!

Sucesso

Imagem da comunidade