Vamos a realizar un card, que el resultado final, me ha gustado bastante.
La fotografía utilizada, se encuentra sin modificarla, está recién salida del terminal móvil, por lo que tiene la calidad que tiene, pero para el ejemplo va perfecta.
Esta card, se puede utilizar en una página web, y pinchan en el botón podemos hacer que nos lleve a otra web que tengamos creada.
El código HTML5:
<!DOCTYPE html><html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practica</title>
<link rel="stylesheet" href="">
</head>
<body>
<header class="header">
<h1 class="title">Práctica Card Ofrenda Floral 2022</h1>
</header>
<article class="card">
<img src="Afloral.jpg" alt="Ofrenda Floral" class="img">
<div class="contenedor">
<h2 class="titulo">Ofrenda Floral 2022</h2>
<p class="copy">El Domingo, 11 de Septiembre se realizó la Ofrenda Floral de Almonte a El Rocío.</p>
<a href="#" class="boton">Entra ahora</a>
</div>
</article>
</body>
</html>
Como se observa todavía no se encuentra enlazada a nuestro archivo css, pero esto se haría donde hemos puesto señalada de otro color el texto.
El código del archivo css es:
margin: 0;
padding: 0;
}
.header{
padding: 40px 0px;
margin-bottom: 60px;
background: #5A5849;
color: white;
}
.title{
text-align: center;
}
.card{
width:300px;
margin: 20px auto;/*centramos el card*/
padding: 0px 0px 30px 0px;/*padding abajo solamente*/
border-radius: 5px;
box-shadow: 5px 6px 11px 0px rgba(20,18,20,0.75);
}
.img{
width:100%;
height: 230px;
object-fit: cover;
border-radius: 5px 5px 0px 0px;
display: block;
}
.contenedor{
width: 90%;
margin: 0 auto;
overflow: hidden;
}
.titulo{
text-align: center;
color:#292B34;
margin:20px 0 10px;
}
.copy{
text-align: center;
}
.boton{
display: block;
padding: 15px 0px;
background: #292B34;
color: white;
text-decoration: none;
text-align: center;
border-radius: 5px;
width: 150px;
margin: 0 auto;
margin-top:20px;
}
A mi jucio ha quedado muy chula, tanto el título de la práctica, como la card con sus colores, y su sombra.
No hay comentarios:
Publicar un comentario
Gracias por participar en esta página.