Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Meu código deu erro

Simplesmente, eu não sei o que aconteceu mas meu código está quebrado;

código html.index:

<!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="./style/style.css">
</head>
<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_link" href="index.html">Home</a>
            <a class="cabecalho_link" href="about.html">Sobre mim</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 0 de qualidade <strong></h1></main>
            <p class="apresentacao_paragrafo">Olá! Sou Gato, desenvolvedor Front-end com especialidade em <strong>CSS, html e Javascript/<strong> Sou um Miau de qualidade. Ajudo pequenos negócios e designers a colocarem em prática boas ideias.</p>
            <div class="links">
                <h2  class="apresentacao__links__subtitulo">Acesse minhas redes:</h2> 
                <a class="apresentacao_Link_nav" href="https://github.com/Tna23" Github>  
                   <img src="./assets/github.png">
                    Github
                </a>
                <a  class="apresentacao_Link_nav" href="https://instagram.com/">
                  <img src="./assets/instagram.png">
                  Instagram
             </a>
            </div>
        </section>
        <img class="apresentacao_img" src="./assets/download.png" alt="Gato laranja programador">
<main></main>
<footer class="rodape">
    <p>Desenvolvido por o gato.</p>
</footer>
</body>
</html>

código 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="./style/style.css">
</head>
<body>
    <h1>Sobre mim</h1>
    <header class="cabecalho"> 
        <nav class="cabecalho_menu">
        <a class="cabecalho_link" href="index.html">Home</a>
        <a class="cabecalho_link" href="about.html">Sobre mim</a>
    </header>

    <main class="apresentacao">
    <section  class="apresentacao_conteudo">
            <h1  class="apresentacao_conteudo_titulo">Sobre mim</h1>
            <p class="apresentacao_conteudo_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_texto">Et .</p>
        </section>
        <img class="apresentacao_img" src="./assets/download.png" alt="Gato laranja programador">
    </main>

    <footer classs="rodape">
        <p>Desenvolvido por o gato.</p>
    </footer>
</body>
</html>
    
código css:

por favor me ajudem nesse requisito
2 respostas

código css:

    
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root { 
--cor-primaria: #2C3639;
--cor-secundaria: #DCD7C9;
--cor-terciaria: #A27B5C;
--cor-hover: #3F4E4F;

--font-primaria: 'Krona One', sans-serif;
--font-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_link {
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-terciaria);
text-decoration: none;
}

.apresentacao {
padding: 6% 15%;
display:flex;
align-items: center;
justify-content: space-between; 
gap: 82px;
}

.apresentacao_conteudo {
width: 50%;
display: flex;
flex-direction: column;
gap: 40px;
}

.apresentacao_conteudo_titulo {
font-size: 2.25rem;
font-family: var(--font-primaria); 
}

.titulo-destaque {
color: orange;

}
.presentacao_paragrafo {
font-size: 1.5rem;
font-family: var(--font-secundaria);
}

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

}
.apresentacao__links__subtitulo {
font-family: var(--font-primaria);
font-weight: 400;
font-size: 1.5rem;
}

.apresentacao_Link_nav {
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid var(--cor-terciaria);
width: 50%;
text-align: center;
border-radius: 16px;
font-size: 1.5rem;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--font-secundaria);

}
.apresentacao_Link:hover {
background-color: var(--cor-houver);
}
.apresentacao_img{
width: 50%;

}

.rodape {
padding: 24px;
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
font-family: var(--font-secundaria);
font-size: 1.5rem;
font-weight: 400;
}

@media (max-width: 1200px) {
.cabecalho{
     padding: 10%;  
}
.cabecalho__menu{
    justify-content: center;
}
.apresentacao{
    flex-direction: column-reverse;
}

}
solução!

Oii Thayna, tudo bem?

No seu código tem alguns erros de fechamento de tag (por exemplo: a tag main fechada de forma errada) e tags escritas erradas no Css, o seu código está bem diferente da aula. Nesse começo de estudos, indico que você faça como está na aula e depois quando tiver mais prática, tente pequenas mudanças.

Apliquei os ajustes no código do index.html e arrumei a formatação também:

<body>
    <header class="cabecalho">
        <nav class="cabecalho_menu">
            <a class="cabecalho_link" href="index.html">Home</a>
            <a class="cabecalho_link" href="about.html">Sobre mim</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 0 de qualidade 
            <strong></h1>
            <p class="apresentacao_paragrafo">Olá! Sou Gato, desenvolvedor Front-end com especialidade em <strong>CSS, html e
            Javascript/<strong> Sou um Miau de qualidade. Ajudo pequenos negócios e designers a colocarem em prática
                boas ideias.</p>
            <div class="links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao_Link_nav" href="https://github.com/Tna23" Github>
                    <img src="./assets/github.png">
                        Github
                </a>
                <a class="apresentacao_Link_nav" href="https://instagram.com/">
                    <img src="./assets/instagram.png">
                        Instagram
                </a>
            </div>
        </section>
        <img class="apresentacao_img" src="./assets/download.png" alt="Gato laranja programador">
    </main>
    <footer class="rodape">
        <p>Desenvolvido por o gato.</p>
    </footer>
</body>

No Css, estava assim, faltando a letra A:

.presentacao_paragrafo {
font-size: 1.5rem;
font-family: var(--font-secundaria);
}

Fiz o ajuste para:

  .apresentacao_paragrafo {
        font-size: 1.5rem;
        font-family: var(--font-secundaria);
    }

Desse modo o CSS será reconhecido.

Indico que você veja o código da aula linha por linha para entender o que está diferente do seu, é uma ótima forma de praticar.

Um abraço e bons estudos.