Entrar Ainda não tem acesso?
4
respostas

Tem bugs no meu projeto e não consigo identificar.

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Preparando o layout do projeto e atividade Lista de exercícios

por Isabele Brito Da Silva Nascimento
| 26.4k xp | 4 posts
<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>Projeto de Isabele</title>
  
</head>
<link rel="stylesheet" href="style.css">
<body>
  <header>
  <!--Se desafie --> 
  </header>
  <main class="apresentacao">
    <section class="apresentacao__conteudo">
      <h1 class="apresentacao__conteudo__titulo">Hora da prática</h1><strong class="titulo-destaque"></strong>
      <p class="apresentacao__conteudo__texto">Primeiro projeto em html de Isabele do curso one</p>
      <div class="apresentacao__ links">
        <h2 class="apresentacao__links__subtitulo">Acesse minhas redes</h2>
      <a class="apresentacao__links__link" href="https://instagram.com/isabely4525">instagranm</a>
      <a href="https://github.com/IsabeleBrito">github</a>
    </div>
      <img src="Screenshot_20230215-231111[592].png" alt="reunião online">
  </section>
 </main>
  <footer>isabele brito</footer>
</body>
</html>

```@import url('https://fonts.googleapis.com/css2?family=Playwrite+AR:wght@100..400&display=swap');


*{
    margin:0;
    padding:0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: rgb(255, 247, 0);
    color: rgb(226, 43, 43);
}
.titulo-destaque{
 color:>22D4FD;
}
.apresentacao {
    margin: 12%;
    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: 45px;
    font-family: 'Playwrite AR', sans-serif;
}
.apresentacao__conteudo__texto{
    font-size: 40px;
    font-family: 'Playwrite AR' , sans-serif ;
}
.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap:32px;
}
.apresentacao__links__subtitulo{
    font-family:'Playwrite AR',sans-serif;
    font-weight: 400;
    font-size: 24px;

}
.apresentacao__links__link{
    /* background-color: #5522fd; */
    border: 6px solid#22d4fd;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 15px;
    padding: 10px 0;
    text-decoration: none;
    columns: #f6f6f6;
    gap:30px;
}
4 respostas
por Lucas De Souza Rosa
| 26.7k xp | 3 posts
BPO Financeiro

Olá Isabele! Rodei seu código, claro que sem as imagens pois não tenho o arquivo completo, mas fiquei na dúvida, quais seriam os bugs que você identificou e gostaria de arrumar? Pode explicar melhor pra que eu possa tentar te ajudar?

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

por Isabele Brito Da Silva Nascimento
| 26.4k xp | 4 posts

Eu arrastei a imagem e acredito que coloquei certinho no html porém não aparece no meu projeto e consigo ver a imagem ao clicar nela no vs code. Também a distancia dos ícones para o texto. Eu fiz algumas alterações por que estava cobrindo o texto e não consigo identificar o erro.

por Lucas De Souza Rosa
| 26.7k xp | 3 posts
BPO Financeiro

Isabele, quanto a imagem não aparecer no seu projeto, é muito provável que seja realmente um erro de caminho. Recomendo checar se seu arquivo html e sua imagem estão na mesma pasta no seu computador, e conferir o caminho descrito no seu código. É interessante também trocar o nome da imagem para que fique mais fácil de identificá-la no projeto. Já quanto ao espaçamento dos seus links, acredito que você deve utilizar o margin ao invés do padding para adicionar margens do lado de fora do seu objeto, criando assim um espaçamento de um objeto para outro.

por Luiz Felipe
| 64.7k xp | 10 posts

Boa Tarde, Isabele, como Lucas disse provavelmente é algo referente ao caminho. Se a imagem estiver no mesmo diretório do html inicie seu src= com um ./ como no exemplo.

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

No seu caso ficaria

<img src="./Screenshot_20230215-231111[592].png" alt="reunião online">

Verifique também a extensão, se a extensão estiver em caixa alta ex: JPG em vez de jpg ele não importa a imagem. Caso a imagem não estiver no mesmo diretório inicie com ../ para voltar uma pasta.

Sobre os links voce pode distanciar eles usando margin, mas se os dois links do instagram e github tiverem o mesmo estilo(cores/etc) recomendo voce colocar os dois hiperlinks numa div 

    <div class='container_links'>
        <a class="apresentacao__links__link" href="https://instagram.com/isabely4525">instagranm</a>
         <a href="https://github.com/IsabeleBrito">github</a>
    <div>

.container_links{
        display:flex;
        gap: 5px;
}

Usar o flex box pra ter o controle desse espaçamento. sendo o gap: o Espaçamento entre os dois conteúdos.

A vantagem que caso você adicionar novos links nesse container/div eles vão ter o espaçamento ja ajustado sem precisar estilizar mais uma vez ♥ poupando um tempo.