Programar no siempre tiene que ser una tarea formal, también podemos divertirnos. En este tutorial explicaré brevemente cómo hacer esta cosa en HTML.
Primero colocamos la estructura traidiconal de HTML. Si no te la sabes solo escribe “!” en tu editor de código y pulsa Enter.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
Justo en el meta pondremos todas nuestras características gráficas de CSS.
<style>
section{
width: 100%;
display: flex;
justify-content: center;
}
.card{
width: 300px;
height: 300px;
background-color: rgb(249, 122, 122);
border-radius: 20px;
overflow: hidden;
}
.card img{
width: 100%;
}
.card h4{
text-align: center;
font-size: medium;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
</style>
</head>
En el body escribiremos el texto y colocaremos la imagen. El source puede ser perfectamente desde internet.
<body>
<section>
<div class="card">
<img src="https://th.bing.com/th/id/OIP.ow3tzT_nxR3mD9H8sNQnjwHaEq?pid=ImgDet&rs=1" alt="">
<h4>Jess después del jale y unos cursos, <br>
con unas chelas bien merecidas</h4>
</div>
</section>
</body>
</html>```
¡Y listo! Ya tienes tu mona china oriunda de México tomándose unas chelitas después de un largo día.Curso de Frontend Developer
0 Comentarios
para escribir tu comentario
