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

[Dúvida] Pagina

Boa noite! Apesar de ter copiado as referências da página inicial para a página ''Sobre mim'' ficar com a mesma formatação, as duas ficaram diferentes. Não consigo encontrar o erro. Além disso, o botão para o LinkedIn também não está funcionando.

Segue nos comentários o restante do código e das imagens do projeto.

<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">Contato </a>
      <a class="cabecalho__menu__link"> Portfólio</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 Front-end de qualidade!</strong></h1>
      <p class="apresentacao__conteudo__titulo__texto"> Olá! Sou Cristina Neves, estudante de ADS com foco em Front-end, React, HTML e CSS.
         Estou sempre em busca de oportunidades para aprender e crescer.
         Adoro experimentar novas tecnologias e soluções criativas para resolver problemas. </p>
      <div class ="apresentacao__links">
         <h2 class="apresentacao__links__subtitulo">Acesse minhas redes: </h2>
         <a class="apresentacao__links__link" href="www.linkedin.com/in/ananevesb"> <img src="assets/linkedin.png"> 
            Linkedin</a>
         <a class= "apresentacao__links__link"href="https://github.com/anacristinaneves"> <img src="assets/github.png">
            Github</a> 
         <a class= "apresentacao__links__link" href="https://instagram.com/cristinanevesb"> <img src="assets/instagram.png">
            Instagram </a>
     
   </div>
   </section>
    <img src="assets/0d031b.png" width="800" height="600" alt="selfie de Cristina Neves"> 
   </main>
   <footer class="rodape">
      <p>Primeiro portfolio criado por Cristina Neves. </p> 
   </footer>
</body>
</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">Contato </a>
            <a class="cabecalho__menu__link"> Portfólio</a>
         </nav>
    </header>
    <main class="apresentacao__about">
        <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Sobre mim</h1>
            <p class="apresentacao__conteudo__titulo__texto">Eu sou Cristina Neves, uma entusiasta da sinergia entre Direito e tecnologia. Com raízes no Ceará e uma jornada acadêmica dupla em Direito e Análise e Desenvolvimento de Sistemas em João Pessoa, trilho um caminho único. 
                O desenvolvimento Front-end é onde meu coração bate mais forte. Transformar linhas de código em interfaces interativas que conectam pessoas à tecnologia é minha paixão. Cada detalhe, cor e disposição são escolhidos meticulosamente para criar experiências que ressoam e cativam.</p>
            <p class="apresentacao__conteudo__titulo__texto">Minha sede por conhecimento não conhece limites. Anseio explorar áreas desafiadoras como Back-end, Segurança da Informação e Data Science. Minha mente curiosa e adaptável me impulsiona a dominar novas habilidades e enfrentar os desafios desses campos emergentes.
                Por trás das interfaces, sou uma pensadora estratégica. Compreendo a interseção da tecnologia com o Direito e busco soluções que harmonizem inovação e responsabilidade. </p>
        </section>
        <img src="assets/0d031b.png" width="600" height="400" alt="selfie de Cristina Neves"> 
    </main>
    <footer class="rodape">
        <p>Primeiro portfolio criado por Cristina Neves. </p> 
    </footer>
    
</body>
</html>
6 respostas
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
*{
    margin: 0;
    padding: 0;
}




*{
 margin: 0;
 padding: 0;

}



body {
    box-sizing: border-box;
    background-image: linear-gradient(to bottom,#0d031b, #230a47 );
    color: #Ffffff
    
}

.cabecalho {
    padding: 2% 5% 2% 17%;
   
}

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

}
.cabecalho__menu__link {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-decoration: none; 
    color:#f6f6f6
}






.titulo-destaque {
    color: #5d22bd

}


.apresentacao {
padding: 2% 17%;
 display: flex;
 align-items: center;
 justify-content: space-between;

}
.apresentacao__about {
    padding: 2% 17%;
    display: flex;
    align-items: right;
    justify-content: space-between; }

.apresentacao__conteudo {
  width: 593px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: "Krona One",sans-serif;
}

.apresentacao__conteudo__titulo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;

}

.apresentacao__links {
  display:flex;
  flex-direction: column;
  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;
    text-align: center;
    border-radius: 8px;
    border: 2px solid #5d22bd;
    font-size: 24px;
    font-weight: 600;
    padding: 16px 0;
    text-decoration: none;
    gap: 16px;
    color: #f6f6f6;
    font-family: 'Montserrat', sans-serif;
    line-height: 36px; /* 150% */
}

.apresentacao__links__link:hover {
    
        -moz-box-shadow: 0px 20px 30px #adaacc;
        -webkit-box-shadow: 10px 20px 30px #adaacc;
        

}

.rodape {
    padding: 24px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 400;

}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Bom dia, Ana! Tudo bem? Vou separar sua dúvida em partes:

  1. Apesar de ter copiado as referências da página inicial para a página ''Sobre mim'' ficar com a mesma formatação, as duas ficaram diferentes.

A única coisa que percebi de diferente entre a página inicial e a sobre mim é que no primeiro html a seção main tem a classe .apresentacao enquanto na segunda tem .apresentacao__about.

Relacionando ao CSS, no primeiro ele vai posicionar a sua foto alinhando ela e o texto no centro. No segundo, vai deixar a imagem alinhada ao topo.

O restante, testando no meu computador, está com o texto com a mesma fonte, cor, tamanho, tanto na página inicial quanto na sobre mim.

Poderia especificar quais partes estão diferentes pra eu entender melhor e ser mais assertiva? ^^

  1. Além disso, o botão para o LinkedIn também não está funcionando.

Nesse caso, para ele acessar diretamente a url que você colocou, pode colocar o https:// antes do www.linkedin.com.br, assim como no link do github e do instagram. Vai ficar assim:

<a class="apresentacao__links__link" href="https://www.linkedin.com/in/ananevesb"> <img src="assets/linkedin.png"> 
            Linkedin</a>

Espero que eu tenha conseguido lhe ajudar. Bons estudos!

GIF

Bom diaa! :)

Em relação, ao primeiro problema relatado, eu anexei um GIF no site imgur para ficar mais elucidativo a minha dúvida, pois ao clicar no ''Sobre mim'' tenho a impressão que ao ser redirecionada para a página, o conteúdo aumenta, principalmente, os dentro da tag header

O segundo problema foi resolvido rsrs Obrigada!

solução!

Oi, Ana!

O pior é que testando seu código aqui exatamente como está ele está na publicação o resultado é que nas duas páginas com a fonte de 24px. Também fiz um gif aqui navegando e mostrando na ferramenta do desenvolvedor disponível no navegador que o css está igual em ambos elementos:

Gif acessando a página home e a sobre mim com a coluna da ferramenta do desenvolvedor na direita, indicando o atributo font-size 24px

Será que a sua página de sobre mim não está com zoom e a outra não?Também podemos testar atualizar a página mas também limpar o cache dela através do atalho CTRL + F5. As vezes as estilizações antigas que estavam ficam armazenadas em cache.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software