Como posso fazer para colocar a imagem ao lado do que esta escrito e não acima?
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!
Como posso fazer para colocar a imagem ao lado do que esta escrito e não acima?
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}
.titulo-destaque{
color: #22D4FD;
}
.apresentacao{
margin: 10% 20%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo{
width: 615px ;
height: 482px;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: 'Krona One', sans-serif;
}
.apresentacao__conteudo__paragrafo{
font-size: 24px;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__links{
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 32px;
align-items: center;
}
.apresentacao__links_link{
display: flex;
justify-content: center;
flex-direction: column;
border: 2px solid #22D4FD;
background-color: #000000;
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
align-items:center;
}
.apresentacao__links_link:hover{
color: #F6F6F6;
border: 2px inset #f9fffc;
font-size: 26px;
}
.apresentacao__conteudo__redes{
font-weight: 400;
font-size: 24px;
font-family: 'Krona One', sans-serif;
}
<!DOCTYPE html>
<html lang="en">
<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="css/styles.css">
<title>Portifolio</title>
</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 Adonis Lucas, desenvolvedor Front-end com especialidade em React,
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__conteudo__redes">Acesse minhas redes</h2>
<a class="apresentacao__links_link" href="https://cursos.alura.com.br/course/html-css-cabecalho-footer-variaveis-css/task/119361" target="_blank">
<img src="/assests/instagram.png">
Instagram
</a>
<a class="apresentacao__links_link" href="" target="_blank">
<img src="/assests/github.png">
Github
</a>
<a class="apresentacao__links_link" href="" target="_blank">
<img src="/assests/linkedin.png">
Linkedin
</a>
</div>
</section>
<img src="/assests/ImagemMulher.png" alt="Imagem de uma mulher no computador" >
</main>
<footer>
</footer>
</body>
</html>
Oii, Adonis! Tudo bem?
Para fazer isso é preciso ajustar o CSS atribuído ao img e também revisar alguns pontos:
Primeiro, toda vez que alterar alguma parte do código, salve ele para ter certeza que a alteração seja validade. Depois, certifique-se que a tela em que você está abrindo o projeto esteja totalmente aberta.
Vamos ao código agora:
Na sua classe .apresentacao__links_link{} você pode retirar a propriedade flex-direction: column; , pois ele alinhará o conteúdo um embaixo do outro. Você pode ver um exemplo clicando aqui.
Caso você queira, pode adicionar a propriedade como gap, que define os espaços entre linhas e colunas de forma assertiva. Por exemplo:
.apresentacao__links__link{
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid #22D4FD;
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #F6F6F6;
font-family: 'Montserrat', sans-serif;
}
Retire o flex-direction: column;, salve e faça o teste para ver se alinham corretamente. Depois, fique à vontade para testar o código, adicionando o gap.
Espero que dê certo. Qualquer dúvida, conte comigo!
Bons estudos, Adonis!