Paso 01. Creación del HTML
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body></body></html>Paso 02. Creación del body.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><section><divclass="card"><imgsrc="https://images.pexels.com/photos/726478/pexels-photo-726478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="shark_01"><p>Shark</p><p>01</p></div><div></div><divclass="card"><imgsrc="https://images.pexels.com/photos/7826551/pexels-photo-7826551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="shark_02"><p>Shark</p><p>02</p></div></section></body></html>Paso 03. Creación del estilo.
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><style>section{
width: 100%;
display: flex;
justify-content: center;
flex-direction:row;
}
@media (max-width:799px){
section{
flex-direction:column;
}
}
.card{
width: 400px;
height: 400px;
background: papayawhip;
border-radius: 20px;
overflow: hidden;
}
.cardimg{
width: 100%;
}
.cardp{
text-align: center;
}
.cardp:nth-child(3){
color:RED
}
</style></head><body><section><divclass="card"><imgsrc="https://images.pexels.com/photos/726478/pexels-photo-726478.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="shark_01"><p>Shark</p><p>01</p></div><div></div><divclass="card"><imgsrc="https://images.pexels.com/photos/7826551/pexels-photo-7826551.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"alt="shark_02"><p>Shark</p><p>02</p></div></section></body></html>Saludos!
