Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Problemas na parte de sobre mim e nos ícones das redes

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

Boa tarde, tudo bem?

A minha parte sobre mim aparece em baixo da foto e não direciona para a outra aba, e a parte dos ícones não ficou dentro dos quadrados. Pode me ajudar?

Código html:

Home Sobre mim

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá! Sou Maria Rita, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?

Acesse minhas redes: 

                <a class="apresentacao__links__link" href="https://github.com/MariaRitaanjos" > Github</a>
            <img src="./assets/github.png">
            Github
                </a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/maria-rita-anjos-0a5b42200/" > linkedin</a>
                <img src="./assets/linkedin.png">
                linkedin
                    </a>
                    <a class="apresentacao__links__link" href="https://www.instagram.com/mritaanjos/" > instagram</a>
                <img src="./assets/instagram.png">
               instagram
                    </a>
            </div>
        </section>

<img src="./assets/imagem.jpeg" alt="foto da Maria Rita";

Desenvolvido por Maria Rita

Home Sobre mim 
<main class="apresentacao">
    <section class="apresentacao__conteudo>
        <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
        <p>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>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>
    <img src=".assets/imagem.png" alt="Foto da Joana Santos programando">
</main>

<footer class="rodape">
    <p>Desenvolvido por Alura.</p>
</footer>
7 respostas
por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

código CSS: @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

:root{ --cor-primaria:#ED5264; --cor-secundaria:#F6F6F6; --cor-terciaria:#0A181E; --cor-hover: #272727;

--fonte-principal: '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(var--cor-secundaria);

}

.cabecalho{

padding: 2% 0% 0% 15%;

}

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

}

.cabecalho__menu__link{ font-family: var(--fonte-secundaria); font-size: 24px; font-weight:600; color:var(--cor-terciaria); text-decoration: none;

}

.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: 50px; font-family: var(--fonte-principal); }

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

}

.apresentacao__conteudo__texto{ font-size: 50px; font-family: var(--fonte-secundaria); } .apresentacao__links{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px;

}

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

}

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

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

}

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

}

por Diogo Mainart Monteiro
| 71.7k xp | 32 posts

Oii Maria, você pode colocar seu código dentro da formatação para código? Os fóruns interpretam tags html como código então não consigo ver o código completo.

Para colocar na formatação clique no </> ou coloque seu código no meio desses caracteres(deixando 3 antes e 3 depois do código):

Para ter certeza que funcionou clica no icone de olhinho na mesma barra do </>

por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

Código em HTML:

<!DOCTYPE html>
<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>Portifolio</title>
    <link rel="stylesheet" href="./styles/style.css"
</head>
<body>
    <header class= "cabecalho">
        <nave class="cabecalho__menu">
            <a class="cabecalho__menu__link" href="index.html">Home</a>
            <a class="cabecalho__menu__link" href="about.html/">Sobre mim</a>
        </nave>
    </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 Front-end de qualidade! <strong></h1>
                    <p class="apresentacao__conteudo__texto">
            Olá! Sou Maria Rita, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. 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/MariaRitaanjos" > Github</a>
                <img src="./assets/github.png">
                Github
                    </a>
                    <a class="apresentacao__links__link" href="https://www.linkedin.com/in/maria-rita-anjos-0a5b42200/" > linkedin</a>
                    <img src="./assets/linkedin.png">
                    linkedin
                        </a>
                        <a class="apresentacao__links__link" href="https://www.instagram.com/mritaanjos/" > instagram</a>
                    <img src="./assets/instagram.png">
                   instagram
                        </a>
                </div>
            </section>

   <img src="./assets/imagem.jpeg" alt="foto da Maria Rita";
    </main>
    <footer class="rodape">
        <p>
            Desenvolvido por Maria Rita
        </p>
    </footer>
</body>
</html>
<!DOCTYPE html>
<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>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>
        </nav>
    </header>

    <main class="apresentacao">
        <section class="apresentacao__conteudo>
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p>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>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>
        <img src=".assets/imagem.png" alt="Foto da Joana Santos programando">
    </main>

    <footer class="rodape">
        <p>Desenvolvido por Alura.</p>
    </footer>

</body>
</html>
por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

Código em CSS

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


 :root{
--cor-primaria:#ED5264;
--cor-secundaria:#F6F6F6;
--cor-terciaria:#0A181E;
--cor-hover: #272727;

--fonte-principal: '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(var--cor-secundaria);
}

.cabecalho{

    padding: 2% 0% 0% 15%;

}

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


}

.cabecalho__menu__link{
    font-family: var(--fonte-secundaria);
    font-size: 24px;
    font-weight:600;
    color:var(--cor-terciaria);
    text-decoration: none;



}

.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: 50px;
    font-family: var(--fonte-principal);
}

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


    }
.apresentacao__conteudo__texto{
    font-size: 50px;
    font-family: var(--fonte-secundaria);
}
.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;

}


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

}



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

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

}

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

}
por Diogo Mainart Monteiro
| 71.7k xp | 32 posts

A pagina sobre mim está em baixo da imagem pq você está com duas tags html dentro do seu documento, elas deves estar em dois arquivos diferentes. As imagens não estão dentro do quadrado porque eles estão fora da tag <a>. Nos cursos da Alura você vai ver que pode colocar um background-image na tag.

Se precisar de ajuda para implementar só chamar aqui!

solução!
por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

Boa Noite, a questão das fuguras consegui ajustar. Como faço para separar essas duas tag de html nos arquivos diferentes?

Muito obrigada pela ajuda desde já!

Abraços

por MARIA RITA PITOL DOS ANJOS
| 48.6k xp | 23 posts

Boa noite, agradeço pela ajuda, dei mais uma olhadinha nas aulas e ajustei, agora foi