Entrar Ainda não tem acesso?
3
respostas

[Dúvida] Imagens extremamentes grandes.

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS, no capítulo Criando ícones clicáveis e atividade Posicionando os ícones

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

A minha imagem esta extremamente grande eu poderia ate criar uma classe para ela que eu modificaria o tamanho dela porem me deparei com o seguinte problema que para alinha-la com o flexbox nao daria certo por nao estar na mesma classe irei mandar meu codigo para darem uma olhada quem pode me ajudar fico extremamente grato.

SEGUE O CODIGO ABAIXO:

<!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="style.css">
 
</head>
<body>
  <header>  </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__botomleft" href="https://www.instagram.com/levilima_bjj" > Instagram</a>
           <img src="./assets/instagram.png" alt="texto alternativo do instagram">
           <a class="apresentacao__links__botomright" href="https://www.github.com/Levisaoo"> Github </a>
           <img src="./assets/github.png" alt="texto alternativo do github">
           <a class="apresentacao__links__botoom" href="https://www.linkedin.com/in/levi-lima-936b44275/">Linkedin</a>
           <img src="./assets/linkedin.png" alt="texto alternativo do linkedin">
           
     </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>
        <img  src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
  </main>
  <footer>  </footer>


</body>
</html>

Agora segue o CSS:

3 respostas
por Levi Lima Santana
| 114.9k xp | 370 posts
Auxiliar de TI 
@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=Montserrat&family=Roboto+Slab:wght@500&display=swap');

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

}

body {
    height: 100vh; /* altura da pagina */
    background-color: #383939; /* cor de sua pagina */
    color: #aee637;
} 

.title-destaque {
  
color: black

}

#apresentacao {
    margin: 10% 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*/
    
}

img {
margin: 35px;
height: 550px;
width: 488px;
border: double black 10px;


}

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

.apresentacao__conteudo__titulo {

font-size:  25px;
font-family: 'Roboto Slab', serif;

}

.apresentacao__conteudo__texto {

font-size: 15px;
font-family: Minhafonte,sans-serif;

}

.apresentacao__links {

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

}

.apresentacao__links__subtitulo {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 24px;
    
    }

.apresentacao__links__botomleft {   

    /* background-color: #38c958; */
    border: solid 2px #aee637;
    width: 378px;
    height: 65px;
    text-align: center;
    border-radius: 8px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    margin: 10px;
    padding: 21.5px 0;
    text-decoration: none;
    color: #f6f6f6;
    
   /* 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__botomright {

/* background-color: #38c958; */
border  : solid 2px #aee637;
width: 378px;
height: 65px;
text-align: center; /* a propiedade text-align centraliza apenas o texto que esta na classe */
border-radius: 8px; /* arredonda suas bordas */
font-size: 18px;
font-family: 'Montserrat', sans-serif;
font-weight: 600; /* Peso da fonte em questao da tonalidade */
margin: 10px;
padding: 21.5px 0; /* o padding aqui foi centralizado sempre que nos termos que centralizar ou modificar as posiçoes entao se colocarmos mais de uma numeração a primeira sempre começara na vertical depois horizontal */
text-decoration: none; /* Essa propiedade e a decoração do texto */
color: #f6f6f6;


}

.apresentacao__links__botoom {

/* border: 3px groove  blueviolet; */
/*border-bottom: 3px dotted brown;
border-top: 3px dotted brown;
border-left: 3px dotted brown;
border-right: 3px dotted brown;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px; */
 /* border-radius: 8px; */
 border: solid #aee637 2px;
margin: 10px;
width: 378px;
height: 65px;
text-align: center;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: white;
font-weight: 600;
padding: 21.5px 0;
font-size: 18px;
border-radius: 8px;



}

Coloquei o css aqui pois nao colbe no outro.

outra duvida a alura possui um curso que mostre como criar em si um site mesmo do zero so por duvida

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

O html saiu bugado vou reenviar

<!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="style.css">
 
</head>
<body>
  <header>  </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__botomleft" href="https://www.instagram.com/levilima_bjj" > Instagram</a>
           <img src="./assets/instagram.png" alt="texto alternativo do instagram">
           <a class="apresentacao__links__botomright" href="https://www.github.com/Levisaoo"> Github </a>
           <img src="./assets/github.png" alt="texto alternativo do github">
           <a class="apresentacao__links__botoom" href="https://www.linkedin.com/in/levi-lima-936b44275/">Linkedin</a>
           <img src="./assets/linkedin.png" alt="texto alternativo do linkedin">
           
     </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>
        <img  src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
  </main>
  <footer>  </footer>


</body>
</html>
por Estudante
| 569.5k xp | 1338 posts

Oi

Parece que você está enfrentando um problema com o tamanho da imagem e sua tentativa de alinhá-la com o Flexbox. Para resolver isso, você pode seguir algumas abordagens:

  1. Classe para Imagem: Adicione uma classe à sua imagem para aplicar estilos específicos. Dessa forma, você pode controlar o tamanho da imagem e alinhá-la adequadamente com o Flexbox. Por exemplo:

    <img class="apresentacao__imagem" src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">

    E no seu CSS, adicione regras para essa classe:

    .apresentacao__imagem {
   margin: 35px;
   height: 100%; /* Use uma porcentagem para manter a proporção da imagem */
   width: auto; /* Isso permite que a largura se ajuste automaticamente à altura */
   border: double black 10px;
}

  2. Ajuste no Flexbox: Certifique-se de que a imagem está dentro do mesmo contêiner flexível (#apresentacao). Se precisar, você pode adicionar um contêiner extra para agrupar a imagem e a seção de conteúdo. Isso pode facilitar o controle do layout.

    Exemplo:

    <main id="apresentacao">
   <section class="apresentacao__conteudo">
      <!-- Seu conteúdo aqui -->
   </section>
   <div class="apresentacao__imagem-container">
      <img src="./assets/foto minha.jpeg" alt="texto alternativo imagem do Levi">
   </div>
</main>

    E no CSS:

    #apresentacao {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.apresentacao__imagem-container {
   margin: 35px;
}

.apresentacao__imagem {
   height: 100%;
   width: auto;
   border: double black 10px;
}

Essas são algumas sugestões com base nas informações fornecidas.