<div class="storeItem">
<h3>
<a>Drip Belt</a>
</h3>
<img src="https://shop.r10s.jp/palm-nut/cabinet/04917692/06046630/imgrc0074381308.jpg" alt="">
<p>Description</p>
<div class="buttonList">
<button>Add to cart</button>
<button>Star</button>
<button>Another one</button>
<button>btn</button>
</div>
</div>
.storeItem {
margin-top: 50px;
background: white;
border: 1px solid #EDEDED;
box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.09);
position: relative;
display: flex;
flex-direction: column;
max-width: 600px;
}
img {
width: 100%;
height: 400px;
object-fit: cover;
}
h3 {
text-align: center;
color: white;
padding: 0 1rem;
transform: skew(-5deg) rotate(-1deg);
margin-top: -3rem;
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}
p {
line-height: 2;
font-weight: 300;
flex-grow: 1;
padding: 0 3rem;
font-size: 1.5rem;
text-align: center;
font-weight: 300;
color: rgb(57, 57, 57);
}
a {
background: #FF0000;
display: inline;
line-height: 1.3;
font-size: 4rem;
text-align: center;
color: white;
padding: 0 1rem;
}
.buttonList{
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-gap: 1px;
background: #E1E1E1;
border-top: 1px solid #E1E1E1;
}
button {
background: white;
border: 0;
font-size: 1rem;
padding: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.