_Este tutorial lo hice basado en el tema de tarjetas que nos enseño la teacher en clases pasadas _
1️⃣. primero creamos un archivo html nuevo
luego ponemos una img relevante jeje al tema y le ponemos que se centre la imagen y no se repita
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
background-image: url("https://wp-cdn.typhur.com/wp-content/uploads/2025/01/homemade-pizza-in-air-fryer.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100%
}
tambien se le pone cover para que abarque td la pantalla
2️⃣. **en la parte de body ponemos la img de frente de la tarjeta, el color y el texto **
<body>
<section>
<div class="pizza">
<img src="https://saboraitaliamx.com/wp-content/uploads/2021/02/pizzero.jpg" alt="pizza1" srcset="">
<p>El arte de los pizzeros napolitanos se convirtió en Patrimonio Cultural de la Humanidad por la UNESCO en 2017. Esta distinción reconoce la práctica culinaria de preparar la pizza napolitana en cuatro etapas, desde la elaboración de la masa hasta su cocción en un horno de leña, que se considera una forma de arte transmitida a través de generaciones.</p>
</div>
</section>
</body>
3️⃣. luego editamos el section
section {
width: 100%;
display: grid;
justify-content: center;
}
4️⃣. **editamos el div **
.pizza {
top: 0px;
width: 500px;
height: 600px;
background: rgb(0, 102, 51);
border-radius: 25px;
position: relative;
text-align: left;
border: 10px solid ;
padding: 10px;
word-wrap: break-word;
justify-content: justify;
align-items: justify;
}
5️⃣. **editamos la imagen **
.pizza img {
width: 100%;
height: 68%;
border-radius: 10px;
justify-content: center;
align-items: center;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
}
6️⃣. **editamos por ultimo el p **
.pizza :nth-child(2) {
left: 150px;
font-size: 14px;
position: absolute;
top: 425px;
margin: 0 auto;
width: 200px;
white-space: no-wrap;
font-style: italic;
color: rgb(246, 51, 154)
}
7️⃣. **ya por ultimo cerramos el style y el body **
Cabe recalcar que los estilos en el texto los hice de la manera mas simple y facil de explicar posible para que se mas facil entenderlo, habiendo dicho esto espero que este tutorial les haya servido de algo jeje.
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
