mirror of
https://gitlab.com/nekoya/web.git
synced 2024-11-14 02:16:19 +01:00
Add products page
This commit is contained in:
parent
85078413a0
commit
437aada699
1 changed files with 167 additions and 0 deletions
167
views/pages/products.ejs
Normal file
167
views/pages/products.ejs
Normal file
|
|
@ -0,0 +1,167 @@
|
|||
<html lang="en">
|
||||
|
||||
<%- include('../layouts/header.ejs', {title: 'Products', state: 'products'}); %>
|
||||
|
||||
<body class="bg-color">
|
||||
<%- include('../layouts/navbar.ejs', {types: 'v1', state: 'products'}); %>
|
||||
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<p class="text-white">Type</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="text-white">Gender</p>
|
||||
</div>
|
||||
<div class="col">
|
||||
<p class="text-white">Color</p>
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<p>⠀⠀⠀⠀⠀⠀</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<select class="form-control">
|
||||
<option>All</option>
|
||||
<option>NMD</option>
|
||||
<option>Galaxy</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="form-control">
|
||||
<option>All</option>
|
||||
<option>Men</option>
|
||||
<option>Women</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<select class="form-control">
|
||||
<option>All</option>
|
||||
<option>Black</option>
|
||||
<option>White</option>
|
||||
<option>Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col col-md-auto">
|
||||
<button class="btn btn-primary btn-product-card" type="button">Filter</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid mt-3">
|
||||
<div class="row justify-content-around">
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_1.webp">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_2.webp">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_3.webp">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Adidas NMD_R1
|
||||
(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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_10.webp">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Adidas NMD_R1A (FX6794)</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 class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_5.webp">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_6.webp">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Adidas NMD_R1
|
||||
(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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_7.webp">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Adidas NMD_R1
|
||||
(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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-md-6 p-3">
|
||||
<div class="card">
|
||||
<img alt="Item Image" class="img-fluid lazyload" src="./img/Product_8.webp">
|
||||
<div class="card-body">
|
||||
<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">
|
||||
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%- include('../layouts/footer.ejs', {state: 'products'}); %>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue