Skip to content

Instantly share code, notes, and snippets.

@ChouJustice
Created Apr 22, 2022
Embed
What would you like to do?
<div class="container pt-3">
<h2>商品區</h2>
<div class="row latestProduct">
<div class="col-12 col-md-4">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img src="~/image/brooke-lark-V4MBq8kue3U-unsplash.jpg" class="h-100" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<div class="card-title text-black bg-white p-2 rounded opacity-75">
<h3>商品001</h3>
<p>好吃,好吃,好好吃。</p>
</div>
</div>
</a>
</div>
<div class="col-12 col-md-8 d-flex flex-wrap align-items-stretch g-1">
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden">
<img src="~/image/aliet-kitchen-JBIK4QZOFfc-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品001</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/aliona-gumeniuk-GAauSStia3s-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品003</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/cristina-matos-albers-Ltv7a5m8i4c-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品004</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/fidel-fernando-BSG5ZLVh8S4-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品005</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/gaby-dyson-QX814A1w3j4-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品006</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/pushpak-dsilva-2UeBOL7UD34-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品007</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/mae-mu-kID9sxbJ3BQ-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品008</b></h5>
</div>
</a>
</div>
<div class="col-12 col-md-3">
<a href="#" class="card text-white rounded-3 overflow-hidden h-100">
<img class="h-100" src="~/image/kobby-mendez-idTwDKt2j2o-unsplash.jpg" alt="">
<div class="card-img-overlay d-flex flex-column justify-content-end">
<h5 class="card-title text-black bg-white p-2 rounded opacity-75"><b>商品001</b></h5>
</div>
</a>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment