This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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