65 lines
1.3 KiB
HTML
65 lines
1.3 KiB
HTML
<div class="container">
|
|
<h2>Our Coffe</h2>
|
|
<div class="coffe-grid">
|
|
% for coffe in products:
|
|
<div class="item">
|
|
<div class="card-img">
|
|
<img src="/img/products/${coffe.image}" alt="${coffe.name}">
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>${coffe.name}</h3>
|
|
<h4>Rp. ${coffe.price}</h4>
|
|
</div>
|
|
</div>
|
|
% endfor
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.container {
|
|
max-width: 860px;
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.container h2 {
|
|
font-size: 2.4rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.coffe-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
gap: 4.2rem;
|
|
}
|
|
|
|
.coffe-grid .card-img {
|
|
width: 200px;
|
|
height: 200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.coffe-grid .item {
|
|
border-radius: 1.2rem;
|
|
background-color: #fdfdfd;
|
|
}
|
|
|
|
.card-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.card-body h3 {
|
|
font-size: 2rem;
|
|
font-weight: 500;
|
|
margin: 0.6rem 0;
|
|
}
|
|
|
|
.card-body h4 {
|
|
font-size: 1.2rem;
|
|
font-weight: 400;
|
|
margin-top: 0.6rem;
|
|
color: #727272;
|
|
}
|
|
</style> |