Olá Pessoal, alguém poderia me auxiliar referente a colocar a Imagem ao Lado do Texto estou com dificuldades de entender onde eu consigo fazer essa alteração
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!
Olá Pessoal, alguém poderia me auxiliar referente a colocar a Imagem ao Lado do Texto estou com dificuldades de entender onde eu consigo fazer essa alteração
CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
:root {
--cor-primaria: #987D9A;
--cor-secundaria: #2F3645;
--cor-terciaria: #EECEB9;
--cor-hover: #FEFBD8;
--fonte-primaria: 'Krona One', sans-serif;
--fonte-secundaria: 'Montserrat', sans-serif;
}
*{
margin: 0;
padding: 0;
}
body{
box-sizing: border-box;
background-color: var(--cor-primaria);
color: var(--cor-secundaria);
}
.cabecalho{
padding: 2% 0% 0% 12%;
}
.cabecalho__menu{
display: flex;
gap: 80px;
}
.cabecalho__menu__link{
font-family: var(--fonte-secundaria);
font-size: 24px;
font-weight: 600;
color: var(--cor-terciaria);
text-decoration: none;
}
.apresentacao{
padding: 5% 15%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo{
width: 615px;
display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: var(--fonte-primaria);
img;
}
.titulo-destaque{
color: var(--cor-terciaria);
}
.apresentacao__conteudo__texto{
font-size: 14px;
font-family: var(--fonte-secundaria);
}
.apresentacao__links{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentacao__links__subtitulo{
font-family: var(--fonte-primaria);
font-weight: 400;
font-size: 24px;
}
.apresentacao__links__link{
display: flex;
justify-content: center;
gap: 16px;
border: 2px solid var(--cor-terciaria);
width: 378px;
text-align: center;
border-radius: 8px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: var(--cor-secundaria);
font-family: var(--fonte-secundaria);
}
.conteiner {
display:flex;
align-items: center;
}
.apresentacao__links__link:hover{
background-color: var(--cor-hover);
}
.rodape{
color: var(--cor-primaria);
background-color: var(--cor-terciaria);
padding: 24px;
text-align: center;
font-family: var(--fonte-secundaria);
font-size: 24px;
font-weight: 400;
}
<!DOCTYPE html>
<html lang="pt-nr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Makes</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="MAKES.html">Maquiagem Social</a>
<a class="cabecalho__menu__link" href="contato.html">contatos</a>
<a class="cabecalho__menu__link" href="galeria.hrml">Galeria</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">O que é Maquiagem Social?</h1>
<p>A maquiagem social é um estilo de maquiagem voltado para ocasiões do dia a dia e eventos sociais. O objetivo principal é realçar a beleza natural da pessoa, mantendo um visual elegante e apropriado para diferentes tipos de eventos. Aqui estão algumas características típicas da maquiagem social:
Elegância e Sofisticação: A maquiagem social é geralmente mais sutil e refinada, em comparação com a maquiagem para ocasiões mais glamorosas ou artísticas. Ela visa criar um look polido e apropriado para eventos como casamentos, festas, almoços e reuniões sociais.
Ajuste ao Ocasião: A maquiagem é adaptada para diferentes tipos de eventos e horários, desde um visual mais leve e natural para eventos diurnos até um look mais sofisticado para eventos noturnos.
Versatilidade: A maquiagem social é projetada para ser versátil e adequada para uma ampla gama de ocasiões. Pode incluir desde um look natural e fresco até um visual mais elaborado, dependendo da preferência e do evento.
Foco na Beleza Natural: Ao invés de criar um visual dramático, a maquiagem social procura realçar as características naturais da pessoa, como a forma dos olhos, o contorno do rosto e a textura da pele.</p>
<div class="conteiner">
<img src="assets/fotopagina2redonda.png" alt="Foto tamires" style="width: 40%;">
</div>
</main>
<footer class="rodape">
<p>Desenvolvido por Caique O. copyright 2024</p>
</footer>
</body>
</html>
Oi, Paulo, tudo bem?
Para que você consiga fazer com que a imagem fique ao lado do texto, você pode remover a tag <div> que contém a tag <img> de dentro da tag <section>. Lembre-se também de fechar a tag <section>, pois no código que você compartilhou, esta tag não está fechada. O resultado com as alterações ficaria assim:
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">O que é Maquiagem Social?</h1>
<p>A maquiagem social é um estilo de maquiagem voltado para ocasiões do dia a dia e eventos sociais. O
objetivo principal é realçar a beleza natural da pessoa, mantendo um visual elegante e apropriado para
diferentes tipos de eventos. Aqui estão algumas características típicas da maquiagem social:
Elegância e Sofisticação: A maquiagem social é geralmente mais sutil e refinada, em comparação com a
maquiagem para ocasiões mais glamorosas ou artísticas. Ela visa criar um look polido e apropriado para
eventos como casamentos, festas, almoços e reuniões sociais.
Ajuste ao Ocasião: A maquiagem é adaptada para diferentes tipos de eventos e horários, desde um visual
mais leve e natural para eventos diurnos até um look mais sofisticado para eventos noturnos.
Versatilidade: A maquiagem social é projetada para ser versátil e adequada para uma ampla gama de
ocasiões. Pode incluir desde um look natural e fresco até um visual mais elaborado, dependendo da
preferência e do evento.
Foco na Beleza Natural: Ao invés de criar um visual dramático, a maquiagem social procura realçar as
características naturais da pessoa, como a forma dos olhos, o contorno do rosto e a textura da pele.</p>
</section>
<div class="conteiner">
<img src="assets/fotopagina2redonda.png" alt="Foto tamires" style="width: 40%;">
</div>
</main>
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Muito Obrigado Rodrigo deu certo, vou ficar atento sobre as dicas que me passou me ajudou demais!!