nekoya/web
nekoya/web
1
0
Fork 0
mirror of https://gitlab.com/nekoya/web.git synced 2025-02-16 18:31:58 +01:00
Code Issues Projects Releases Packages 1 Wiki Activity

Redesign Card

Browse source
This commit is contained in:
Moe Poi ~ 2021-09-26 22:25:14 +07:00
parent 27f3dd0391
commit bdd1b848c7
1 changed files with 59 additions and 109 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

168
product-list.html
View file

@ -136,160 +136,110 @@
<div class="container-fluid mt-3"> <div class="container-fluid mt-3">
<div class="row justify-content-around"> <div class="row justify-content-around">
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_1.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_1.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1 (GX0997)</h5>
<div class="col-md-8"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<div class="card-body"> tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<h5 class="card-title">Adidas NMD_R1 (GX0997)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_2.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_2.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1 (G55575)</h5>
<div class="col-md-8"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<div class="card-body"> tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<h5 class="card-title">Adidas NMD_R1 (G55575)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_3.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_3.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1
<div class="col-md-8"> (FV1740)</h5>
<div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<h5 class="card-title">Adidas NMD_R1 tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
(FV1740)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_10.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_4.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1A (FX6794)</h5>
<div class="col-md-8"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<div class="card-body"> tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<h5 class="card-title">Adidas NMD_R1 PRIMBLUE (GZ9256)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_5.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_5.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1 (GZ7944)</h5>
<div class="col-md-8"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<div class="card-body"> tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<h5 class="card-title">Adidas NMD_R1 (GZ7944)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_6.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_6.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1
<div class="col-md-8"> (GZ7943)</h5>
<div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<h5 class="card-title">Adidas NMD_R1 tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
(GZ7943)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_7.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_7.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1
<div class="col-md-8"> (FY3566)</h5>
<div class="card-body"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<h5 class="card-title">Adidas NMD_R1 tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
(FY3566)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="card mx-3 my-3" style="max-width: 450px;"> <div class="col-lg-3 col-md-6 p-3">
<div class="row no-gutters"> <div class="card">
<div class="col-md-4"> <img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_8.webp">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_8.webp"> <div class="card-body">
</div> <h5 class="card-title">Adidas NMD_R1 (GX0996)</h5>
<div class="col-md-8"> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
<div class="card-body"> tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<h5 class="card-title">Adidas NMD_R1 (GX0996)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html"> <a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button> <button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a> </a>
</div>
</div>
</div>
</div>
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img alt="Item Image" class="img-fluid lazyload" src="./assets/Product_9.webp">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Adidas NMD_R1
(FY3565)</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor
tempus scelerisque. Nunc sed bibendum ante, eget imperdiet purus. Curabitur.</p>
<a href="product.html">
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>