Olá, gostei muito dos exercícios e desafios, a cada aula, é algo a mais pra eu implementar, na medida que vou evoluindo, pretendo refatorar os códigos para melhor leitura pros devs, e melhorar a aplicação também, vamo q vamo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="container">
<p class="texto-destaque">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. <br/> Alias nisi
tenetur quisquam aliquam ducimus cumque reprehenderit voluptatem,
aspernatur officia quidem eveniet <br/> aliquid maiores quas fugit adipisci
rem facere deserunt non!
</p>
<img
class="layout-image"
src="https://cdn-cm.freepik.com/resources/792c27d7-2a4c-4bb8-a76f-877a3ecf9d28.jpg?token=exp=1737670404~hmac=ccfec1dbaba7ef5a25510c590a20591a499a10bf11fb9406aa8d3866a8b53864"
alt=""
/>
<div class="container-vertical">
<div>Item 1</div>
<div>Item 2</div>
</div>
<div class="responsivo-container">
<div>Conteúdo 1</div>
<div>Conteúdo 2</div>
</div>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
background: radial-gradient(circle,rgb(216, 140, 232),rgb(13, 215, 233));
height: 100vh;
box-sizing: border-box;
}
.container {
display: flex;
align-items: center;
justify-content: space-around;
}
.layout-image{
height:500px;
}
.container-vertical{
display: flex;
align-items: center;
height: 300px;
}
.responsivo-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
