đź’» CĂłdigo HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/catalogo_peliculas.css">
<title>Document</title>
</head>
<body>
<header>
<h1>Catálogo de pelĂculas</h1>
<span>Nombre Empresa, S.A.</span>
<div class="clear"></div>
</header>
<main>
<article class="pelicula">
<img src="https://picsum.photos/id/237/150/220" class="poster">
<div class="info">
<img src="img/flecha_mayor.jpg" class="flecha" >
<h2>PELĂŤCULA 1</h2>
<p class="precio">PRECIO: 56,00€</p>
<p class="descripcion">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed atque distinctio consectetur voluptatum dignissimos. Rerum, maiores modi! Minima tempora mollitia vel quis totam explicabo atque non omnis enim natus praesentium ratione, sed nihil id distinctio voluptatibus eos incidunt, nisi optio eaque? Nam voluptas minus quasi quas maxime id, quod quae eius nesciunt cum, itaque ea nulla tempora accusamus reiciendis inventore illo sed quam enim! Cumque eius vel rerum ipsam itaque voluptatibus at sapiente, praesentium quis eum maiores incidunt nisi quaerat, laboriosam quo eligendi dicta! Eos tempora iste doloribus ab dolore quasi in quam incidunt vel voluptas quia perspiciatis modi pariatur quaerat corrupti vitae magnam maiores, sint ea necessitatibus sapiente sed. Modi aliquid ad quisquam rem quia esse voluptatum nobis ipsum est ea reiciendis libero,
quaerat assumenda quis ab temporibus dolore error incidunt pariatur veniam reprehenderit laboriosam dignissimos labore amet. Harum, nulla at consequuntur rem ut assumenda labore sit repellendus! Ipsam quia accusamus id aliquid eos corrupti officiis architecto eveniet, cum facere consequuntur dolor ipsum porro harum commodi laboriosam, nulla mollitia aut numquam. A vero non iusto. Natus ad quos dolore possimus aspernatur eius placeat iure suscipit.
Quae ratione facere suscipit, repellat vitae quos exercitationem doloremque minima dignissimos eveniet et ducimus?
</p>
</div>
<div class="clear"></div>
</article>
<article class="pelicula">
<img src="https://picsum.photos/id/238/150/220" class="poster">
<div class="info">
<img src="img/flecha_mayor.jpg" class="flecha" >
<h2>PELĂŤCULA 2</h2>
<p class="precio">PRECIO: 60,00€</p>
<p class="descripcion">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, temporibus excepturi. Nulla, dolores? Consequuntur qui blanditiis harum eius sapiente reiciendis sed mollitia temporibus perspiciatis, impedit dolor eveniet, similique consequatur laborum veritatis placeat laboriosam nulla est praesentium quasi, totam assumenda magnam cupiditate magni. Nisi harum quidem blanditiis ea provident tempore, sint culpa quod quasi facilis dolor voluptates, laboriosam incidunt? Voluptatibus nihil neque iusto reiciendis animi? Eius ab modi laborum! Iste sit doloremque repellat deserunt voluptatem ipsam asperiores. Possimus doloribus maiores vero quibusdam praesentium rerum, eaque quas natus est fugit provident nesciunt. Eos recusandae nam tempore fugit, eius est rerum saepe hic esse quae distinctio ad laborum aliquid dolor voluptate vitae neque vero mollitia, magnam,
sed maiores rem? Aperiam voluptates voluptatibus recusandae, vel aliquid quaerat accusantium eius fuga molestias totam. Vero alias error illum deleniti quidem pariatur, nisi ipsam officia fugit consequatur modi delectus architecto eligendi ratione esse! Error corporis velit earum veniam alias omnis sed ducimus sint autem maiores iusto facere, officia tenetur unde rem odio nulla cum sunt illum maxime animi. Iste impedit veniam unde voluptatum molestias, id quod ipsa dolorum non rem laudantium eveniet voluptas deserunt, mollitia repellat vel alias itaque voluptate beatae nam earum nostrum reprehenderit delectus. Nihil eius doloremque illo excepturi iure officia eos ipsa laudantium? Quisquam molestias distinctio est quidem dignissimos id ipsum tenetur, eum voluptas iste? Id mollitia nemo culpa temporibus consectetur! Hic corporis aperiam voluptate rem beatae
culpa nihil nemo quas itaque debitis sequi, eos ratione cupiditate ea vitae! Labore non architecto ad enim.
</p>
</div>
<div class="clear"></div>
</article>
<article class="pelicula">
<img src="https://picsum.photos/id/239/150/220" class="poster">
<div class="info">
<img src="img/flecha_mayor.jpg" class="flecha" >
<h2>PELĂŤCULA 3</h2>
<p class="precio">PRECIO: 56,88€</p>
<p class="descripcion">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam molestiae enim at quaerat nemo beatae id? Aliquam dolores, neque dolore tenetur iusto totam. Magni ducimus ad nam mollitia enim suscipit officiis nesciunt excepturi et praesentium consectetur laudantium quos corrupti obcaecati, molestiae rem reiciendis dignissimos voluptates. Possimus facilis saepe nostrum suscipit magnam unde? Magni doloremque veritatis consectetur, vero veniam quam inventore qui natus soluta, incidunt animi sequi, totam eaque deserunt cum accusantium neque? Rerum ipsa, laudantium soluta ipsum ut officia veniam excepturi! Deleniti corrupti officiis labore corporis et. Modi dolor consequatur libero iusto veritatis consequuntur nisi, quae architecto tenetur magni, neque iure repellendus sint repellat suscipit at ratione error ea quisquam voluptatibus asperiores recusandae.
Qui hic blanditiis iusto in maiores libero! Accusantium cupiditate consequuntur dolorem vitae ducimus id magnam fugiat quod. At fugiat ullam amet, nobis maxime consequatur doloremque ducimus quam quaerat odio eaque eum nemo nesciunt facere aut labore. Ab repellendus nobis incidunt voluptates beatae ut accusamus optio dicta cumque fuga, distinctio, nulla excepturi explicabo dolore cum? Recusandae perferendis quas nemo nostrum ut doloremque maxime. Tenetur illo dignissimos quia praesentium autem nemo accusamus repellendus ipsum impedit suscipit hic accusantium aut repudiandae dolores quisquam, cumque distinctio, minus expedita quaerat. Maxime deleniti nemo quidem magnam. Veritatis soluta velit nihil! Provident atque facilis consectetur ipsam minus tenetur fugit corporis culpa harum, eveniet quod sit voluptatem mollitia commodi, possimus assumenda rerum
omnis architecto sed! Officia ducimus ad facere accusamus a eum id magnam architecto!
</p>
</div>
<div class="clear"></div>
</article>
</main>
</body>
</html>
🎨 Código CSS
header {
background: linear-gradient(
90deg,
#FFFF00 0%,
#D40000 0%,
#D46B00 61%,
#EEB182 100%
);
padding: 10px;
border: 2px solid red;
font-style: oblique;
}
header h1 {
float: left;
margin: 0;
}
header span {
float: right;
font-weight: bold;
}
main {
padding: 20px;
}
.pelicula {
background-color: #fff;
margin-bottom: 30px;
padding: 10px;
min-width: 350px;
}
.poster {
float: left;
border: 6px solid red;
margin-right: 20px;
}
.contenido h2 {
margin: 0;
padding: 5px;
border-top: 3px solid green;
border-bottom: 3px solid green;
color: green;
}
.precio {
margin: 5px 0 10px 0;
padding: 4px 0;
border-top: 3px solid green;
border-bottom: 3px solid green;
font-weight: bold;
font-style: oblique;
}
.texto {
margin-top: 10px;
text-align: justify;
}
.flecha {
float: left;
width: 25px;
margin-top: 8px;
margin-right: 8px;
}
.clear {
clear: both;
}
