web/product-list.html

308 lines
No EOL
13 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<html lang="en">
<head>
<title>Product List</title>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="theme-color" content="#2f0001">
<link href="assets/favicon.webp" rel="shortcut icon" type="image/png"/>
<link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<style>
.bg-color {
background-color: #1b1c1e;
}
.comp-color {
background-color: #212226;
}
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.card {
border-radius: 20px;
background-color: #212226;
color: white;
}
.btn-product-card {
width: 100%;
background-color: darkred;
border-color: darkred;
border-radius: 10px;
}
.btn-product-card:hover {
background-color: red;
border-color: red;
}
.form-control {
background-color: #212226;
border-color: #212226;
color: white;
}
.form-control:valid {
background-color: #212226;
border-color: #212226;
color: white;
}
</style>
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.webp"
style="margin-top: 0%;" width="80"></a>
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"
class="navbar-toggler"
data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item active">
<a aria-disabled="true" class="nav-link disabled" href="product-list.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<a href="bag.html" class="mt-auto mb-auto" style="color: inherit;"><i class="fas fa-shopping-cart"><span class="ml-2 mt-auto mb-auto">Rp 999.999</span></i></a>
</span>
</div>
</nav>
<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="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" src="./assets/Product_1.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_2.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_3.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_4.webp">
</div>
<div class="col-md-8">
<div class="card-body">
<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">
<button class="btn btn-info btn-product-card" type="button">View Detail</button>
</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" src="./assets/Product_5.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_6.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_7.webp">
</div>
<div class="col-md-8">
<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>
<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" src="./assets/Product_8.webp">
</div>
<div class="col-md-8">
<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 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" 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>
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>