Boa tarde! Como sugerido pelo instrutor do curso, eu estou montando uma página pessoal para colocar em prática o aprendizado sobre Front-end. Entretanto estou com dificuldade para usar a propriedade display: inline block para colocar uma imagem ao lado de um bloco de texto. Eu gostaria que a imagem class="img-sobre ficasse do lado direito do texto que está em section class="sobre", assim como a imagem class="img-front" e seu respectivo texto.
Segue o código HTML: `
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width">
<title> Página pessoal de Isabella </title>
<link rel = "stylesheet" href = "reset.css">
<link rel = "stylesheet" href = "style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&family=Open+Sans+Condensed:ital,wght@1,300&display=swap" rel="stylesheet">
</head>
<body>
<header class="cabeçalho">
<div>
<h1><img class="logo" src="imagens/logo.png" alt="Logo Isabella Mendes de Sousa"></h1>
<nav>
<ul>
<li><a href = "home.html">Home</a></li>
<li><a href = "sobre.html">Sobre</a></li>
<li><a href = "contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>
<main class="corpo-home">
<div>
<section class="sobre">
<p><strong>Sobre o site</strong></p>
<h1> O site tem por objetivo a fixação do aprendizado sobre a construção de páginas web utilizando <strong>HTML5</strong> e <strong>CSS3</strong>.
Para isso, foi utilizado o terminal <strong>Sublime Text</strong> em sua última versão.</h1>
<h1> A página apresenta três diferentes abas, sendo <em>Home</em> com a apresentação do projeto, <em>Sobre</em> com a história e informaçãoes relevantes sobre Isabella e <em>Contato</em> com formuário para contato e outros meios de comunicação e redes sociais.</h1>
</section>
<section>
<img class="img-sobre" src="imagens/html e css.jpg" alt="HTML5 e CSS3">
</section>
</section>
</div>
<div>
<section class="informaçoes-adicionais">
<p><strong>Informações Adicionais</strong>
<h1> Todos os logos e desing do site foram criados por <strong>Isabella Mendes de Sousa</strong> com o conhecimento adiquirido no curso de <strong>Front-End</strong> pelo instrutor <strong>Pedro Marins</strong>, oferecido pela plataforma <strong>Alura</strong>.</h1>
</section>
<section>
<img class="img-front" src="imagens/front-end.png" alt="Front-End">
</section>
</div>
</main>
<footer>
<img class = logobranco src="imagens/logobranco.png" alt="Logo branco IMS">
</footer>
</body>Segue o código CSS:
.cabeçalho {
background: #F08080;
padding: 50px 0;
width: 100%;
margin: 0 auto;
}
body {
font-family: 'Montserrat', sans-serif;
}
nav {
position: absolute;
top: 55px;
right: 10px;
}
nav li {
display: inline;
font-size: 20px;
padding: 50px;
}
nav a {
text-transform: uppercase;
text-decoration: none;
color: black;
}
nav a:hover {
color: #FFDEAD;
font-weight: bold;
}
.logo {
width: 400px;
display: inline-block;
margin-left: 40px;
}
.logobranco {
width: 100px;
}
/*CSS Home*/
main {
margin: 20px;
}
main p {
font-size: 40px;
font-weight: bold;
margin-bottom: 10px;
}
main h1:before {
content: "➺";
}
.sobre, .informaçoes-adicionais {
text-align: justify;
width: 50%;
padding: 12px;
margin: 12px 0;
}
.corpo-home h1 {
font-size: 19px;
line-height: 1.5;
}
.corpo-home h1 strong {
font-weight: bold;
font-size: 20px;
}
.sobre h1 em {
font-style: italic;
background: #FFDEAD;
font-size: 17px;
}
.img-sobre {
width: 300px;
}
.sobre {
display: inline-block;
}
.img-sobre {
display: inline-block;
}
.img-front {
width: 300px;
}
/*CSS rodapé*/
footer {
background: url(imagens/bg.jpg);
padding: 40px;
}Obrigada, fico no aguardo!
