Boa noite!
No meu projeto o ícone Linkedin, github.. ficaram enorme.
Alguém poderia me auxiliar como corrigir esse erro?
Vou publicar o projeto abaixo:
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa noite!
No meu projeto o ícone Linkedin, github.. ficaram enorme.
Alguém poderia me auxiliar como corrigir esse erro?
Vou publicar o projeto abaixo:
HTML
<!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>Portifolio Alex</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__paragrafo">Olá! Sou Alex Medeiros, desenvolvedor Front-end com especialidade em HTML e CSS. 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/alex-medeiros-132a3b88/">
<img src="assets/Logo linkedin.svg" alt="Logo Linkedin">
Linkedin</a>
<a class="apresentacao__links__link" href="https://github.com/alexmst2000">
<img src="./assets/Logo Github.svg" alt="Logo Github">
Github</a>
<a class="apresentacao__links__link" href="https://vercel.com/alexmst2000">
<img src="./assets/Vercel_favicon.svg" alt="Logo Vercel">
Vercel</a>
</div>
</section>
<img src="./assets/alex_perfil.jpeg" alt="Foto Alex Perfil">
</main>
<footer></footer>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family= Krona+One & display = swap');
@import url('https://fonts.googleapis.com/css2?family= Montserrat & display = swap');
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
box-sizing: border-box;
background: black;
color: #F6F6F6;
}
.titulo-destaque {
color:#22D4FD;
}
.apresentacao{
margin: 10% 18%;
display: flex;
align-items: center;
justify-content: space-between;
}
img{
width: 488px;
height: 550px;
border-radius: 40% 10%;
box-shadow: 10px 8px 10px 5px white;
}
.apresentacao__conteudo{
width: 615px;
height: 482px;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-weight: 400;
font-size: 36px;
font-family: 'Krona One', sans-serif;
}
.apresentacao__conteudo__paragrafo{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
padding: 3rem 0 3rem 0;
}
.apresentacao__links{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo{
font-family: 'Krona One', sans-serif;
font-weight: 400;
font-size: 24px;
color: #F6F6F6;
}
.apresentacao__links__link{
/* background-color: #22D4FD; */
/* ctrl + k + c --- abreviação p/ comentar a linha */
border: 2px solid #f5f9fa;
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 16px 0;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
text-decoration: none;
/* box-shadow: 10px 8px 10px 5px rgb(182, 178, 178); */
}
Olá, Alex.
Tudo bem?
Isso acontece porque você atribuiu uma largura e uma altura fixa para tag img no CSS, e referênciou pela tag img mesmo e isso é um problema pois todas imagens vão ficar com esse tamanho, incluindo os icones, no caso todas tags img.
Para corrigir basta criar uma classe para as imagens que você quer alterar o tamanho, para deixar mais genérico, e não referênciar mais pela tag direto.
img{
width: 488px;
height: 550px;
border-radius: 40% 10%;
box-shadow: 10px 8px 10px 5px white;
}Espero ter ajudado, qualquer dúvida manda aqui. Valeu.
@Renan Lima, boa noite!
Muito obrigado pelo auxílio, entendi onde falhei, fiz alterações e agora deu certo!
Vlww