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

[Bug] Imagem desregulada e na fica responsivo.

Referente ao curso HTML e CSS: trabalhando com responsividade e publicação de projetos, no capítulo Adaptando elementos e atividade Descubra a super unidade de medida

por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

Minha imagem esta ficando super desregulada e nao consigo a responsividade ja tentei de tudo irei mandar o codigo fonte para ver se alguem saiba oque esta acontencendo.

HTML index

  <!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> portifólio </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="experiencias.html">Experiências</a>
    </nav>
    </header>
    
    <main id="apresentacao">
      <section class="apresentacao__conteudo">
            <h1 class="apresentacao__conteudo__titulo">Explorando o mundo do desenvolvimento <strong class="title-destaque">front-end com entusiasmo! </strong>
            </h1>
              <p class="apresentacao__conteudo__texto">Olá! Sou Levi Lima Santana, da escola de tecnologia alura e estou aprendendo a programar. Quero me aprofundar cada vez mais nessa area e estou super feliz com esse meu primeiro projeto.</p>
          <div class="apresentacao__links"> <!-- a tag div serve para estruturarmos e agruparmos as tags sem precisao de ser semantica como tambem aplicarmos estilos e dividirmos as tags html -->
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
            <a class="apresentacao__links__navegacao" href="https://www.instagram.com/levilima_bjj" >
              <img src="./assets/instagram.png" alt="foto instagram"> Instagram</a>
            <a class="apresentacao__links__navegacao" href="https://www.github.com/Levisaoo"> 
              <img src="./assets/github.png" alt="foto github"> Github </a>
              <a class="apresentacao__links__navegacao" href="https://www.linkedin.com/in/levi-lima-936b44275/"> 
                <img src="./assets/linkedin.png" alt="foto linkedin">
              Linkedin </a>
      </section> <!--separa os elementos dentro de um container para melhor estrutura mais clara trazendo tambem uma estilizaçao mais clara criando uma seção para eles-->
          </div>
          <div >
          <img  class="apresentacao__image" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
        </div>
    </main>
    <footer>
      <div class="rodape">
      <p> Desenvolvido por Levi Lima Dev Junior. </p> 
    </div> 
    </footer>


  </body>
  </html>
7 respostas
solução!
por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

HTML Experiencias

<!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">
    <link rel="stylesheet" href="./styles/style.css">
    <title>Experiências</title>
</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="experiencias.html">Experiências</a>
     </nav>
     </header>
     <main id="apresentacao">
        <section class="container__descricao">
         <ul>
         <h1 class="container__descricao__titulo">Currículo:</h1>
         <div class="container__descricao__texto">
          <li>Cursando Engenharia de Software na Anhanguera.</li>
          <li>Atua na área de redes com especialidade em TELECOM.</li>
          <li>CFTV ip e Cloud.</li>
          <li>Certificado Pela Intelbras Itec.</li>
          <li>Atuo na área a cerca de 5 anos.</li>
        </div>
         </ul>
         <ul>
          <h1 class="container__descricao__titulo">Experiencias:</h1>
          <div class="container__descricao__texto">
          <li>Telecomunicação PABX IP e Cloud.</li>
          <li>CFTV IP e CLOUD.</li>
          <li>Desenvolvedor Front-End Junior.</li>
          <li>Tecnólogo em segurança eletronica de alarmes e sensores ip.</li>
        </div>
         </ul>
         <ul>
          <h1 class="container__descricao__titulo">Estudos:</h1>
          <div class="container__descricao__texto">
          <li>Segurança Defensiva</li>
          <li>HTML, CSS, JAVASCRIPT</li>
          <li>Redes de computadores</li>
          <li>Energia Solar</li>
        </div>
         </ul>
        </section>
        <div >
            <img  class="apresentacao__image" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
          </div>
    </main>
    <footer>
        <div class="rodape">
        <p> Desenvolvido por Levi Lima Dev Junior. </p> 
      </div> 
      </footer>
</body>
</html>
por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

HTML About

<!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">
    <link rel="stylesheet" href="./styles/style.css">
    <title>Sobre Mim!</title>
</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="experiencias.html"> Experiências</a>
     </nav>
     </header>
     <main id="apresentacao">
      <section class="container__descricao__ex">
         <h1 class="apresentacao__conteudo__titulo__ex">Sobre Mim</h1>
         <p class="apresentacao__conteudo__texto__ex">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__ex" >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  class="apresentacao__image" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">

     </main>
     <footer></footer>
</body>
</html>
por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@font-face {  
    font-family: Minhafonte;
    src: url('fonte/JMH\ Typewriter-Bold.otf'); 
  }  /* O font face serve para importarmos fontes de sites sem que precise usar do google fonts outros modelos tendo varias bibliotecas.      */
  
  @import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

  @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

  :root { /* variaveis css com escopo global */
    --cor-primaria: #383939;
    --cor-secundaria: black;
    --cor-terceraria: #aee637;
    --cor-quarteraria:  #f6f6f6;

    --cor-hover1: black;
    --cor-hover2: #aee637;
     
    --fonte-montserrat: 'Montserrat', sans-serif;
    --fonte-roboto: 'Roboto Slab', sans-serif;
    --fonte-minha:  Minhafonte,sans-serif;
    --fonte-kronaone: 'Krona One', sans-serif;
  }

* {
/* reset css */
margin: 0;
padding: 0;
box-sizing: border-box; /* define o tamanho em que o elemento e calculado */

}

body {
  /* nao possue mais nessecidade pois utrapassou o limite de 100vh  height: 100vh; /* altura da pagina */
    background-color: var(--cor-primaria); /* cor de sua pagina */
    color: var(--cor-terceraria);
}


.cabecalho{
padding: 2% 0% 0% 15%;


}

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

}

.cabecalho__menu__link{
font-family: var(--fonte-montserrat);
font-size: 1.5rem;
font-weight: 600;
color: var(--cor-terceraria);
text-decoration: none;

}

.cabecalho__menu__link:hover{
    color: var(--cor-hover1) ;
}


#apresentacao {
    padding: 5% 15%;
    display: flex; /* declara o container onde o conteudo esta flexbox para posicionamentos dos elementos PAI */
    align-items: center; /* alinha os itens elementos da pagina FILHO*/
    justify-content: space-between; /* justifica o conteudo dando espaçamentos nele FILHO*/
    
}

.apresentacao__image {
    height: 550px;
    width: 488px;
    width: auto; /* Isso permite que a largura se ajuste automaticamente à altura */
    border: double var(--cor-secundaria) 10px;
    margin: 35px;

}

.apresentacao__image:hover{
box-shadow: var(--cor-hover2) 3px 1px 1px 3px;
border-radius: 22px;
padding: 5px;
}


.apresentacao__conteudo {
    
    width: 615px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 35px;
}

.apresentacao__conteudo__titulo {

font-size:  1.6rem; /* 1rem = 16px */   
font-family: 'Roboto Slab', serif;

}

.apresentacao__conteudo__titulo:hover{
color: var(--cor-hover1);
    
}

.title-destaque {
  
    color: var(--cor-secundaria)
    
    }
    
    .title-destaque:hover{
        color: var(--cor-hover2);
    }

.apresentacao__conteudo__texto {

font-size: 1rem;
font-family: var(--fonte-minha);

}

.apresentacao__links {

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

}

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

.apresentacao__links__navegacao{   

    /* background-color: #38c958; */
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    border: solid 2px var(--cor-terceraria);
    width: 378px;
    height: 65px;
    text-align: center;
    border-radius: 8px;
    font-size: 1.2rem;
   font-family: var(--fonte-kronaone); 
    font-weight: 600;
    margin: 10px;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--cor-quarteraria);
    
   /* border: 20px double green;  podemos escrever menos codigos utilizando apenas o border */
  /* border-top: 30px solid blue; estiliza apenas a borda de cima */

}

.apresentacao__links__navegacao:hover{
    background-color: var(--cor-hover1);
    color: var(--cor-hover2);
    border-radius: 15px;
    padding: 8%;
}




.rodape{
color: var(--cor-secundaria);
background-color: var(--cor-terceraria);
padding: 20px;
text-align: center;
font-family: var(--fonte-montserrat);
font-size: 1.25rem ;
font-weight: 400;
}


.container__descricao{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.container__descricao__titulo{
    color: var(--cor-secundaria);
    padding-bottom: 10px;
por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

font-family: var(--fonte-montserrat); }

.container__descricao__texto{ font-family: var(--fonte-montserrat); text-decoration: none; }

/* //////////////////////////////////////////////////////////////////////////// */

.container__descricao__ex{ display: flex; flex-direction: column; gap: 20px; }

.apresentacao__conteudo__titulo__ex{ font-family: var(--fonte-montserrat); color: var(--cor-secundaria); }

.apresentacao__conteudo__titulo__ex:hover{ color: var(--cor-hover2); }

.apresentacao__conteudo__texto__ex{ font-family: var(--fonte-montserrat); color: var(--cor-terceraria); }

.apresentacao__conteudo__texto__ex:hover{ color: var(--cor-hover1); } ```

por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

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

por Bruno Campos Menezes
| 23.8k xp | 1 posts

Também estou tendo problema parecido, não consegui configurar ainda essa parte do mobile.

por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI

Pois e man não consegui resolver ainda ksksks