- Obtener enlace
- X
- Correo electrónico
- Otras aplicaciones
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin:0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: .2s linear;
font-family: "Century Gothic";
}
.cont {
background: linear-gradient(45deg,blueviolet,lightgreen);
padding: 15px 9%;
padding-bottom: 100px;
}
.box-cont {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
gap:15px;
/*border: 1px solid black;*/
}
.box {
/*border: 1px solid red;*/
box-shadow: 0 5px 10px rgba(0,0,0,.2);
border-radius:5px;
background: #fff;
text-align: center;
padding: 30px 20px;
}
img {
width: 60%;
height: 150px;
object-fit: cover;
}
h3{
color:#444;
font-size: 18px;
padding: 10px 0;
}
p{
color:#777;
font-size: 13px;
line-height: 1.3;
}
.btn{
margin-top: 5px;
display: inline-block;
background: white;
color:red;
font-size: 17px;
border-radius: 5px;
padding: 8px 18px;
border: 1px solid red;
}
.btn:hover{
letter-spacing: 1px;
}
.box:hover{
box-shadow: 0 10px 15px rgba(0,0,0,.8);
transform: scale(1.0);
}
@media (max-width: 630px){
.box-cont {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
gap:10px;
/*border: 1px solid black;*/
}
}
</style>
</head>
<body>
<div class="cont">
<div class="box-cont">
<div class="box">
<img src="2.jpg" alt="">
<h3>Aceite Cañuelas 900 cc</h3>
<p>Es obtenido a partir de semillas de girasol cuidadosamente seleccionadas, es muy rico en vitamina E.</p>
<a href="" class="btn">$950</a>
</div>
<div class="box">
<img src="2.jpg" alt="">
<h3>Aceite Cañuelas 900 cc</h3>
<p>Es obtenido a partir de semillas de girasol cuidadosamente seleccionadas, es muy rico en vitamina E.</p>
<a href="" class="btn">$950</a>
</div>
<div class="box">
<img src="2.jpg" alt="">
<h3>Aceite Cañuelas 900 cc</h3>
<p>Es obtenido a partir de semillas de girasol cuidadosamente seleccionadas, es muy rico en vitamina E.</p>
<a href="" class="btn">$950</a>
</div>
<div class="box">
<img src="2.jpg" alt="">
<h3>Aceite Cañuelas 900 cc</h3>
<p>Es obtenido a partir de semillas de girasol cuidadosamente seleccionadas, es muy rico en vitamina E.</p>
<a href="" class="btn">$950</a>
</div>
<div class="box">
<img src="2.jpg" alt="">
<h3>Aceite Cañuelas 900 cc</h3>
<p>Es obtenido a partir de semillas de girasol cuidadosamente seleccionadas, es muy rico en vitamina E.</p>
<a href="" class="btn">$950</a>
</div>
</div>
</div>
</body>
</html>
Post publicado por:
www.facebook.com/alfreinformatica
Comentarios
Publicar un comentario