Para crear cards que permitan informar a nuestros usuarios de la pagina web que estemos desarrollando, es necesario iniciar con nuestra estructura que dará vida a estas cards.
1. estructura básica HTML:5
<htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Platzi tutorialtitle>
head>
<body>
body>
html>
2. agregamos estructura base de nuestras cards
Creamos un section, junto a ello un div que nos servirá de contenedor y las card que queremos usar.
1805164/pexels-photo-1805164.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="">
Dog
New best friends
1170986/pexels-photo-1170986.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="">
Cat
New best friends
1996330/pexels-photo-1996330.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="">
Horse
New best friends
3. Agregamos nuestro estilo personalizado
Es importante que al usar grid, agregamos un template de columnas que permitirá a su vez ser responsivo para enfrentar distintos tipos de pantalla, ademas de ello, usaremos personalización de colores dependiendo en que numero de posición se encuentra en las card para asignarle los ya mencionados colores.
@import url('https://fonts.googleapis.com/css2?family=Gothic+A1&display=swap');
body {
background-color: #000000;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 30px;
padding: 10px;
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #F8C471;
width: 200px;
padding: 20px;
background-color: #f5f5f5;
border-radius: 20px;
-webkit-box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
-moz-box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
box-shadow: 0px0px81px15pxrgba(248, 196, 113, 0.6);
}
.card:nth-child(2) {
border: 1px solid #dc6aee;
-webkit-box-shadow: 0px0px81px15pxrgb(220, 106, 238, 0.6);
-moz-box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
box-shadow: 0px0px81px15pxrgba(220, 106, 238, 0.6);
}
.card:nth-child(3) {
border: 1px solid #6AC6EE;
-webkit-box-shadow: 0px0px81px15pxrgba(106, 198, 238, 0.6);
-moz-box-shadow: 0px0px81px15pxrgba(106, 198, 238, 0.6);
box-shadow: 0px0px81px15pxrgba(106, 198, 238, 0.6);
}
.cardimg {
box-shadow: 0px0px10px#F8C471;
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
}
.card:nth-child(2)img {
box-shadow: 0px0px10px#dc6aee;
}
.card:nth-child(3)img {
box-shadow: 0px0px10px#6AC6EE;
}
.cardh2,
.cardp {
font-family: 'Gothic A1', sans-serif;
margin: 10px000;
padding: 0;
}
Como ultimo paso tenemos guardar y ya podremos visualizar nuestras cards estilizadas con nuestros mejores amigos.
Recuerda, que la imaginación es el motor que usamos para crear cosas increíbles a lo largo de nuestras vidas. 🙌
Quedo excelente