Olá, pessoal!
Tenho uma página de noticias em criação como exercício de uma formação que estou fazendo, e colocando a mão na massa, vem surgindo algumas dúvidas.
Como já mencionei, é uma página de noticias. Eu tenho sections com duas article cada, gostaria de colocar lado a lado mas não estou conseguindo. Poderiam me explicar como fazer e como funciona a solução?
<section class="entretenimento">
<h2>Entretenimento</h2>
<article>
<img src="./imagens/Velozes-e-Furiosos.jpg" alt="Valozes e Furiosos" />
<header>
<time>24/12/2022 às 22:38</time>
</header>
<h3>Rumor aponta que importante personagem da franquia irá retornar ao filme</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione sed modi tempore rem delectus nostrum
autem molestiae optio magni. Ab, nesciunt non. Neque placeat minima asperiores corporis, expedita
consectetur esse.
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
<article>
<img src="./imagens/panico-na-floresta.jpg" alt="Panico na floresta" />
<header>
<time>24/12/2022 às 22:38</time>
</header>
<h3>Do pior ao melhor filme de terror</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eaque voluptate adipisci, assumenda
vitae ea eveniet dignissimos ipsa quaerat animi cupiditate perferendis nesciunt accusamus vero esse.
Dicta rem perspiciatis nostrum?
</p>
<a href="#" title="Leia a notícia completa">Ler mais</a>
</article>
</section>
.entretenimento p {
color: aqua;
}
.entretenimento img {
width: 640px;
height: 380px;
}
.entretenimento article{
display: inline;
}
.tecnologia p {
color: blueviolet;
}
.tecnologia img {
width: 640px;
height: 380px;
}
No rep do GitHub existe uma branch chamada exercicio_css, lá tem tudo, inclusive as imagens, só não as alterações de tentativa no CSS.
https://github.com/nic37/curso_ebac_frontend/tree/exercicio_css
Muito agradecido!
inline
se nãoinline-block
.. tente.tecnologia article{ display: inline; }