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><htmllang="en"><head><metacharset="UTF-8"><metaname="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;
}
.cardimg{
width: 100%;
}
.cardh4{
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><divclass="card"><imgsrc="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.