Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Logo ficou muito grande, não sei como diminuir

Olá, a imagem da logo acabou ficando gigantesca e quebrou toda a estilização que eu estou fazendo, alguém sabe o que devo fazer?

--código html:

 <!DOCTYPE html>
 <html lang="pt-br">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <header></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 Camilly Dias, desenvolvedora Front-end com conhecimento em <strong> HTML, CSS e JavaScript.</strong> 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://www.linkedin.com/in/camilly-vit%C3%B3ria-dos-santos-dias-4287aa279/?originalSubdomain=br">
                  <img src="./assets/linkedin.png">
                  Linkedin
               </a>
         </div>
      </section>
         <img src="imagem_nova.jpg" alt="pessoa programando em um computador pessoal">
    </main>
    <footer></footer>
 </body>
 </html>

-- código css:

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

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    box-sizing: border-box;
    background-color: rgb(238, 199, 205);
    color: #bd6ea2;
}

.titulo-destaque{
    color: #FFFFFF;
}

.apresentacao{
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.apresentacao__conteudo{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

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

.apresentacao__conteudo__texto{
    font-size: 20px;
    font-family:  'Montserrat', sans-serif;
}

.apresentacao__links{
   display: flex;
   justify-content: space-between;
   flex-direction: column;
   align-items: center;
   gap: 18px;
   
}

.apresentacao__links__subtitulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 20px;
}

.apresentacao__links__link{
   border: 3px solid #FFFFFF;
   background-color: #bd6ea2;
   display: flex;
   justify-content: center;
   gap: 16px;
   width: 360px;
   text-align: center;
   border-radius: 16px;
   font-size: 24px;
   padding: 18px 0;
   text-decoration: none;
   color: #FFFFFF;
   font-family: 'Montserrat', sans-serif;
}

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

1 resposta
solução!

Consegui resolver, criei uma classe no onde está a imagem da logo e modifiquei sua width para 30px.

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