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

* - Fixed some things + Reformat codes and beautify codes

Browse source
This commit is contained in:
Matthew Patrick 2021-09-19 13:08:37 +07:00
parent 57a05fdfd2
commit 7fb8c857ea
22 changed files with 1915 additions and 1775 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
about-us.html
View file

@ -2,16 +2,16 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>About Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet">
<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>
body {
@ -88,9 +88,10 @@
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png">
<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">
@ -102,7 +103,7 @@
<a class="nav-link" href="/product-list.html">Products</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="/about-us.html" aria-disabled="true">About Us</a>
<a aria-disabled="true" class="nav-link disabled" href="/about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
@ -110,7 +111,7 @@
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
@ -120,7 +121,7 @@
<br style="display: block;content: ' '; margin: 1vw 0; line-height: 1vw;">
<div class="card bg-dark text-white">
<video src="assets/AboutUs.mp4" muted autoplay loop class="card-img"></video>
<video autoplay class="card-img" loop muted src="assets/AboutUs.mp4"></video>
<div class="card-img-overlay">
<h1 class="card-title"><b>About Us</b></h1>
<p class="card-text">Nekoya is your place for sneakers for the entire family from many name brands. You’ll
@ -135,11 +136,11 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

244
bag.html
View file

@ -2,144 +2,158 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>bag</title>
<link rel="stylesheet" href="stylebag.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylebag.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Shopping Bag</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Shopping Bag</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
<div class="title">
<h3>Shopping Bag</h3>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="title">
<h3>Shopping Bag</h3>
</div>
<div class="full-body">
<div class="body-left">
<table class="table" style="color: white; margin-right: 48px;">
<thead>
<thead>
<tr class="titletr">
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Item Price</th>
<th scope="col">Sub Total</th>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Item Price</th>
<th scope="col">Sub Total</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr class="titletrdes">
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info" >
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>
<div class="container">
<input type="number" name="" id="" value="1" min="1">
<a style="font-size: 10px;" href=""><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>
<div class="container">
<input id="" min="1" name="" type="number" value="1">
<a href="" style="font-size: 10px;"><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
<tr>
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>
<div class="container">
<input type="number" name="" id="" value="1" min="1">
<a style="font-size: 10px;" href=""><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>
<div class="container">
<input id="" min="1" name="" type="number" value="1">
<a href="" style="font-size: 10px;"><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
<tr>
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info" >
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>
<div class="container">
<input type="number" name="" id="" value="1" min="1">
<a style="font-size: 10px;" href=""><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>
<div class="container">
<input id="" min="1" name="" type="number" value="1">
<a href="" style="font-size: 10px;"><u>REMOVE</u></a>
</div>
</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
</tbody>
</tbody>
</table>
</div>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
<a href="checkout.html"> <button class="button">Checkout</button></a>
</div>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between"
style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
<a href="checkout.html">
<button class="button">Checkout</button>
</a>
</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>

210
checkout.html
View file

@ -2,128 +2,143 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>checkout</title>
<link rel="stylesheet" href="stylecheckout.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylecheckout.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Checkout</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Checkout</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
<div class="title">
<h3>Shopping Cart</h3>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="title">
<h3>Shopping Cart</h3>
</div>
<div class="full-body">
<div class="body-left">
<table class="table" style="color: white; margin-right: 48px;">
<thead>
<thead>
<tr class="titletr">
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Item Price</th>
<th scope="col">Sub Total</th>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Item Price</th>
<th scope="col">Sub Total</th>
</tr>
</thead>
<tbody>
</thead>
<tbody>
<tr class="titletrdes">
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info" >
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
<tr>
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
<tr>
<th scope="row" style="display: flex;"><img src="assets/sepatu.png" alt="placeholder image" class="img" height="80px" width="80px">
<div class="info" >
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div></th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
<th scope="row" style="display: flex;"><img alt="placeholder image" class="img" height="80px"
src="assets/sepatu.png" width="80px">
<div class="info">
<p>Fashione Shoes</p>
<p>Size : 8</p>
<p>Qty : 1</p>
</div>
</th>
<td>1</td>
<td>Rp 1.999.999,00</td>
<td>Rp 1.999.999,00</td>
</tr>
</tbody>
</tbody>
</table>
</div>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="card" style="background-color: #212226 ; border-radius: 20px; padding: 30px;">
<div class="body-right" style="margin-left: 48px;">
<div class="card" style="background-color: #212226 ; border-radius: 20px; padding: 30px;">
<h3>SHIPPING DETAILS</h3>
<p>Please enter your delivery address</p>
<form style="border-top: 1px solid white;">
<div class="form-group">
<label for="contactInformation"><b>CONTACT INFORMATION</b></label>
<div style="display: flex;">
<input type="FName" class="form-control" id="exampleInputFName" aria-describedby="fnamehelp" placeholder="First Name">
<input type="Lname" class="form-control" id="exampleInputLName" aria-describedby="lnamehelp" placeholder="Last Name">
</div>
<input type="PhoneNum" class="form-control" id="exampleInputPhoneNum" aria-describedby="PhoneNumber" placeholder="Phone Number">
<small id="phoneHelp" class="form-text text-muted">We'll never share your Phone Number with anyone else.</small>
<label for="contactInformation"><b>CONTACT INFORMATION</b></label>
<div style="display: flex;">
<input aria-describedby="fnamehelp" class="form-control" id="exampleInputFName" placeholder="First Name"
type="FName">
<input aria-describedby="lnamehelp" class="form-control" id="exampleInputLName" placeholder="Last Name"
type="Lname">
</div>
<input aria-describedby="PhoneNumber" class="form-control" id="exampleInputPhoneNum" placeholder="Phone Number"
type="PhoneNum">
<small class="form-text text-muted" id="phoneHelp">We'll never share your Phone Number with anyone
else.</small>
</div>
<div class="form-group">
<label for="contactInformation"><b>ADDRESS</b></label>
<input type="Address1" class="form-control" id="exampleInputAddress1" aria-describedby="Address1" placeholder="Street Address ">
<input type="Address2" class="form-control" id="exampleInputAddress2" aria-describedby="Address2" placeholder="Street Address 2 ">
<input aria-describedby="Address1" class="form-control" id="exampleInputAddress1" placeholder="Street Address "
type="Address1">
<input aria-describedby="Address2" class="form-control" id="exampleInputAddress2" placeholder="Street Address 2 "
type="Address2">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Region</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected><Choose class=""></Choose></option>
<option selected>
<Choose class=""></Choose>
</option>
<option value="1">Indonesia</option>
<option value="2">Japan</option>
<option value="3">United Kingdom</option>
@ -189,12 +204,12 @@
<option value="3">16111</option>
</select>
</div>
<small id="phoneHelp" class="form-text text-muted">Email : budi45@gmail.com</small>
<small class="form-text text-muted" id="phoneHelp">Email : budi45@gmail.com</small>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<input class="form-check-input" id="defaultCheck1" type="checkbox" value="">
<label class="form-check-label" for="defaultCheck1">
My Billing and Shipping information are the same
My Billing and Shipping information are the same
</label>
</div>
</form>
@ -214,17 +229,20 @@
</select>
</div>
</form>
<a href="payment.html"> <button class="button" style="background-color: green; color: white" >Review & Pay</button></a>
<a href="payment.html">
<button class="button" style="background-color: green; color: white">Review & Pay</button>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<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>

60
faq.html
View file

@ -3,12 +3,12 @@
<head>
<title>Frequently Ask Question</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" 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;
@ -39,10 +39,10 @@
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;"
width="80" height="80"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.png"
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">
@ -51,7 +51,7 @@
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="product-list.html" aria-disabled="true">Products</a>
<a aria-disabled="true" class="nav-link" href="product-list.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About Us</a>
@ -62,7 +62,7 @@
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
@ -74,17 +74,17 @@
<div class="card bg-dark">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
type="button"
data-toggle="collapse"
data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<button aria-controls="collapseOne"
aria-expanded="false"
class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
data-target="#collapseOne" data-toggle="collapse" type="button">
How to order ?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div aria-labelledby="headingOne" class="collapse" data-parent="#accordionExample"
id="collapseOne">
<div class="card-body text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor tortor, imperdiet quis
mollis et, malesuada eu eros. Quisque nibh elit, vulputate ac consectetur eget, convallis sed
@ -96,14 +96,14 @@
<div class="card bg-dark">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
type="button" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<button aria-controls="collapseTwo"
aria-expanded="false" class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
data-target="#collapseTwo" data-toggle="collapse" type="button">
How to check order status ?
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordionExample" id="collapseTwo">
<div class="card-body text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor tortor, imperdiet quis
mollis et, malesuada eu eros. Quisque nibh elit, vulputate ac consectetur eget, convallis sed
@ -115,14 +115,14 @@
<div class="card bg-dark">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<button aria-controls="collapseThree"
aria-expanded="false" class="btn btn-link btn-block text-left collapsed text-decoration-none text-white"
data-target="#collapseThree" data-toggle="collapse" type="button">
How to cancel order ?
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div aria-labelledby="headingThree" class="collapse" data-parent="#accordionExample" id="collapseThree">
<div class="card-body text-white">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tortor tortor, imperdiet quis
mollis et, malesuada eu eros. Quisque nibh elit, vulputate ac consectetur eget, convallis sed
@ -134,11 +134,11 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>

74
forgot-password.html
View file

@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>Forgot Password Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
@ -75,17 +75,17 @@
float: left;
}
.form .options-01{
.form .options-01 {
margin-bottom: 50px;
}
.form .options-01 input{
.form .options-01 input {
width: 15px;
height: 15px;
margin-right: 5px;
}
.form .options-01 .remember-me{
.form .options-01 .remember-me {
color: #bbb;
font-size: 6pt;
display: flex;
@ -96,7 +96,7 @@
}
.form .options-01 a{
.form .options-01 a {
color: #888;
font-size: 14px;
font-style: italic;
@ -159,25 +159,25 @@
}
}
@media screen and (max-width: 500px){
.form{
width: 95%;
}
@media screen and (max-width: 500px) {
.form {
width: 95%;
}
.form .user-input{
width: 100%
}
.form .user-input {
width: 100%
}
.form .btn{
width: 100%;
.form .btn {
width: 100%;
}
}
}
</style>
</head>
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" width="5%" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;" width="5%">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">Forgot Password Page</a>
@ -193,41 +193,45 @@
<div class="col">
<div class="card text-white col-md-8 col-lg-6 col-xl-5">
<h1 class="card-header text-white">Forgot Password</h1>
<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_xvrofzfk.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<div class="py-3 text" style="padding: 0% 5%; text-align: center;">
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1"
src="https://assets9.lottiefiles.com/packages/lf20_xvrofzfk.json"></lottie-player>
<div class="py-3 text" style="padding: 0% 5%; text-align: center;">
<a>Enter your email to receive instructions on how to reset your password.</a>
</div>
<div class="card-body">
<form class="px-4 py-3">
<div class="form-group" style="text-align: left;">
<a href="" data-feather="mail" style="font-size: 40px;"></a>
<a data-feather="mail" href="" style="font-size: 40px;"></a>
<label for="exampleDropdownFormEmail1">Email</label>
<input type="email" id="exampleDropdownFormEmail1"
class="form-control input-sm text-center" placeholder="Email address">
<input class="form-control input-sm text-center" id="exampleDropdownFormEmail1"
placeholder="Email address" type="email">
</div>
<a href="otp.html"><input type="button" value="Reset Password" class="btn btn-login btn-primary" style="width: 100%;"></a>
<a href="otp.html"><input class="btn btn-login btn-primary" style="width: 100%;" type="button"
value="Reset Password"></a>
<br><br>
<div class="hoverforgot-1 text-center">
<a href="login.html">Or Return to Login</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace()
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

488
index.html
View file

@ -3,18 +3,18 @@
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Home Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<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">
<script src="https://unpkg.com/feather-icons"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" 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;
@ -81,9 +81,9 @@
}
.btn-main {
background: #212226 ;
background: #212226;
color: white;
border: 1px solid ;
border: 1px solid;
}
.hero-search {
@ -110,7 +110,7 @@
text-align: center;
}
.section-header h2{
.section-header h2 {
font-size: 23px;
}
@ -124,13 +124,13 @@
}
.slider-container {
margin-top: 60px;
padding-left: 8%;
padding-right: 8%;
margin-top: 60px;
padding-left: 8%;
padding-right: 8%;
}
.slide {
border: 1px solid #1b1c1e ;
border: 1px solid #1b1c1e;
margin: 0px 15px;
}
@ -208,8 +208,8 @@
flex-direction: column;
}
.banner-text h1{
font-size:30pt;
.banner-text h1 {
font-size: 30pt;
color: black;
}
@ -235,234 +235,243 @@
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Home Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/product-list.html" aria-disabled="true">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">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Home Page</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link" 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 type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active header-banner1">
<img src="https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
class="d-block w-100" alt="First Slide">
</div>
<div class="carousel-item header-banner2">
<img src="https://images.unsplash.com/photo-1577538928305-3807c3993047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHNhbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
class="d-block w-100" alt="Second Slide">
</div>
<div class="carousel-item header-banner3">
<img src="https://fila.co.id/assets/images/157_rgbflexwhitesliderbanner.jpg" class="d-block w-100"
alt="Third Slide">
</div>
<header>
<div class="carousel slide" data-ride="carousel" id="carouselExampleIndicators">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="1" data-target="#carouselExampleIndicators"></li>
<li data-slide-to="2" data-target="#carouselExampleIndicators"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active header-banner1">
<img alt="First Slide"
class="d-block w-100" src="https://images.unsplash.com/photo-1607083206869-4c7672e72a8a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8c2FsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
</div>
<div class="carousel-item header-banner2">
<img alt="Second Slide"
class="d-block w-100" src="https://images.unsplash.com/photo-1577538928305-3807c3993047?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHNhbGV8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
</div>
<div class="carousel-item header-banner3">
<img alt="Third Slide" class="d-block w-100"
src="https://fila.co.id/assets/images/157_rgbflexwhitesliderbanner.jpg">
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleIndicators" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleIndicators" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="hero-search">
<div class="wrapper">
<div class="search-grid">
<div>
<select name=""class="form-control" id="">
<option value="">Category</option>
</select>
</div>
<div>
<select name="" class="form-control" id="">
<option value="">Select</option>
</select>
</div>
<div>
<select name="" class="form-control" id="">
<option value="">Select</option>
</select>
</div>
<button class="btn btn-main btn-block">Search</button>
</div>
</div>
<div class="hero-search">
<div class="wrapper">
<div class="search-grid">
<div>
<select class="form-control" id="" name="">
<option value="">Category</option>
</select>
</div>
<div>
<select class="form-control" id="" name="">
<option value="">Select</option>
</select>
</div>
<div>
<select class="form-control" id="" name="">
<option value="">Select</option>
</select>
</div>
<button class="btn btn-main btn-block">Search</button>
</div>
</div>
</div>
</div>
</div>
<main>
<div class="wrapper">
<div class="section-header">
<h2 style="color: white;"><span class="text-main">New</span> Arrivals</h2>
<div class="slider-wrapper" style="color: transparent;">
<div class="slider-container" style="color: white;">
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
<main>
<div class="wrapper">
<div class="section-header">
<h2 style="color: white;"><span class="text-main">New</span> Arrivals</h2>
<div class="slider-wrapper" style="color: transparent;">
<div class="slider-container" style="color: white;">
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="`shopping-cart"></a> Add to Cart</button>
</div>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a href="#" data-feather="shopping-cart"></a> Add to Cart</button>
</div>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="`shopping-cart" href="#"></a> Add to Cart
</button>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
</div>
</div>
<div class="slide">
<div class="slide-img" style="background-image: url(assets/sepatu.png);">
<div class="slide-badge"></div>
</div>
<div class="slide-info">
<h3>Sneakers Nike</h3>
<div class="price">
<span>$100</span>
</div>
<div class="slide-btn">
<button class="btn btn-main"><a data-feather="shopping-cart" href="#"></a> Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="arrival-section"></div>
<div class="banner-section">
<div class="wrapper">
<div class="banner-text">
<h1>Spring Sale</h1>
<p>30% off all denim</p>
<button class="btn btn-main">Shop the sale</button>
</div>
<div class="arrival-section"></div>
<div class="banner-section">
<div class="wrapper">
<div class="banner-text">
<h1>Spring Sale</h1>
<p>30% off all denim</p>
<button class="btn btn-main">Shop the sale</button>
</div>
</div>
</div>
<div class="small-container" style="color: white;">
<h2>Featured Products</h2>
<div class="row">
<div class="col-4">
<img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
<img alt=""
src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<h4>Nike AIR</h4>
<div class="rating">
<i class="fa fa-star"></i>
@ -474,7 +483,8 @@
<span>$100</span>
</div>
<div class="col-4">
<img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
<img alt=""
src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<h4>Nike AIR</h4>
<div class="rating">
<i class="fa fa-star"></i>
@ -486,7 +496,8 @@
<span>$100</span>
</div>
<div class="col-4">
<img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
<img alt=""
src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<h4>Nike AIR</h4>
<div class="rating">
<i class="fa fa-star"></i>
@ -498,7 +509,8 @@
<span>$100</span>
</div>
<div class="col-4">
<img src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
<img alt=""
src="https://images.unsplash.com/photo-1595950653106-6c9ebd614d3a?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8c25lYWtlcnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
<h4>Nike AIR</h4>
<div class="rating">
<i class="fa fa-star"></i>
@ -512,30 +524,30 @@
</div>
</div>
</main>
</main>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
feather.replace()
</script>
<script>
$('.slider-container').slick({
slidesToShow: 4,
slidesToScroll: 4,
autoplay: true,
dots: true,
});
</script>
<script crossorigin="anonymous"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
</script>
<script crossorigin="anonymous"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script crossorigin="anonymous"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
feather.replace()
</script>
<script>
$('.slider-container').slick({
slidesToShow: 4,
slidesToScroll: 4,
autoplay: true,
dots: true,
});
</script>
</body>

77
login.html
View file

@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>Login Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
@ -76,17 +76,17 @@
float: left;
}
.form .options-01{
.form .options-01 {
margin-bottom: 50px;
}
.form .options-01 input{
.form .options-01 input {
width: 15px;
height: 15px;
margin-right: 5px;
}
.form .options-01 .remember-me{
.form .options-01 .remember-me {
color: #bbb;
font-size: 6pt;
display: flex;
@ -97,7 +97,7 @@
}
.form .options-01 a{
.form .options-01 a {
color: #888;
font-size: 14px;
font-style: italic;
@ -156,16 +156,16 @@
}
}
@media screen and (max-width: 500px){
.form{
@media screen and (max-width: 500px) {
.form {
width: 95%;
}
.form .user-input{
.form .user-input {
width: 100%
}
.form .btn{
.form .btn {
width: 100%;
}
}
@ -174,7 +174,7 @@
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" width="5%" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;" width="5%">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">Login Page</a>
@ -190,32 +190,33 @@
<div class="col">
<div class="card text-white col-md-8 col-lg-6 col-xl-5">
<h1 class="card-header text-white">Login</h1>
<lottie-player src="https://assets3.lottiefiles.com/packages/lf20_myor1trh.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1" src="https://assets3.lottiefiles.com/packages/lf20_myor1trh.json"></lottie-player>
<div class="card-body">
<form class="px-4 py-3">
<div class="form-group" style="text-align: left;">
<a href="" data-feather="mail" style="font-size: 40px;"></a>
<a data-feather="mail" href="" style="font-size: 40px;"></a>
<label for="exampleDropdownFormEmail1">Email</label>
<input type="email" id="exampleDropdownFormEmail1"
class="form-control input-sm text-center" placeholder="Email address">
<input class="form-control input-sm text-center" id="exampleDropdownFormEmail1"
placeholder="Email address" type="email">
</div>
<div class="form-group" style="text-align: left;">
<a href="" data-feather="lock" style="font-size: 40px;"></a>
<a data-feather="lock" href="" style="font-size: 40px;"></a>
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" id="exampleDropdownFormPassword1"
class="form-control input-sm text-center" placeholder="Password">
<br>
<div class="options-01 hoverlogin-1" style="word-break: keep-all;">
<label class="remember-me text-left"><input type="checkbox" name="">Remember me</label>
<a href="forgot-password.html" style="margin-left: 14%; font-size: 10pt;">Forgot your password?</a>
</div>
<button type="submit" class="btn btn-login btn-primary">Login</button>
<input class="form-control input-sm text-center" id="exampleDropdownFormPassword1"
placeholder="Password" type="password">
<br>
<div class="options-01 hoverlogin-1" style="word-break: keep-all;">
<label class="remember-me text-left"><input name="" type="checkbox">Remember me</label>
<a href="forgot-password.html" style="margin-left: 14%; font-size: 10pt;">Forgot your
password?</a>
</div>
<button class="btn btn-login btn-primary" type="submit">Login</button>
<div class="hoverlogin-1 text-center">
<a href="register.html">Not Have Account? Sign up</a>
</div>
<div class="hoverlogin-1 text-center">
<a href="register.html">Not Have Account? Sign up</a>
</div>
</div>
</form>
</div>
@ -227,11 +228,11 @@
<script>
feather.replace()
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

73
otp.html
View file

@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>OTP Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
@ -55,7 +55,7 @@
margin-bottom: -6%;
}
.text-resend{
.text-resend {
color: white;
text-align: center;
}
@ -64,7 +64,7 @@
color: white;
}
.btn-success:hover{
.btn-success:hover {
margin-left: 0%;
}
@ -123,16 +123,16 @@
}
}
@media screen and (max-width: 500px){
.form{
@media screen and (max-width: 500px) {
.form {
width: 95%;
}
.form .user-input{
.form .user-input {
width: 100%
}
.form .btn{
.form .btn {
width: 100%;
}
}
@ -141,7 +141,7 @@
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" width="5%" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;" width="5%">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">OTP Page</a>
@ -157,42 +157,47 @@
<div class="col">
<div class="card text-white col-md-9 col-lg-6 col-xl-5">
<h1 class="card-header text-white">OTP VERIFICATION</h1>
<lottie-player src="https://assets2.lottiefiles.com/packages/lf20_zztlhuue.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<div class="py-3 text" style="padding: 0% 5%; text-align: center;">
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1" src="https://assets2.lottiefiles.com/packages/lf20_zztlhuue.json"></lottie-player>
<div class="py-3 text" style="padding: 0% 5%; text-align: center;">
<a>code has been send to kel*****@gmail.com</a>
</div>
<br>
<div class="input-container d-flex flex-row justify-content-center mt-2">
<input type="text" id='ist' class="m-1 text-center form-control rounded" maxlength="1" onkeyup="clickEvent(this,'sec')">
<input type="text" id="sec" class="m-1 text-center form-control rounded" maxlength="1" onkeyup="clickEvent(this,'third')">
<input type="text" id="third" class="m-1 text-center form-control rounded" maxlength="1" onkeyup="clickEvent(this,'fourth')">
<input type="text" id="fourth" class="m-1 text-center form-control rounded" maxlength="1" onkeyup="clickEvent(this,'fifth')">
<input type="text" id="fifth" class="m-1 text-center form-control rounded" maxlength="1" onkeyup="clickEvent(this,'sixth')">
<input type="text" id="sixth" class="m-1 text-center form-control rounded" maxlength="1">
<input class="m-1 text-center form-control rounded" id='ist' maxlength="1" onkeyup="clickEvent(this,'sec')"
type="text">
<input class="m-1 text-center form-control rounded" id="sec" maxlength="1" onkeyup="clickEvent(this,'third')"
type="text">
<input class="m-1 text-center form-control rounded" id="third" maxlength="1" onkeyup="clickEvent(this,'fourth')"
type="text">
<input class="m-1 text-center form-control rounded" id="fourth" maxlength="1" onkeyup="clickEvent(this,'fifth')"
type="text">
<input class="m-1 text-center form-control rounded" id="fifth" maxlength="1" onkeyup="clickEvent(this,'sixth')"
type="text">
<input class="m-1 text-center form-control rounded" id="sixth" maxlength="1" type="text">
</div>
<div class="text-resend">
<small>
didn't get the otp? &nbsp;
<a href="forgot-password.html" class="text-decoration-none">Resend Code</a>
<a class="text-decoration-none" href="forgot-password.html">Resend Code</a>
</small>
</div>
<div class="mt-3 mb-5">
<button class="btn btn-success px-4 verify-btn" style="width: 65%;">Verify</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function clickEvent(first,last){
if(first.value.length){
function clickEvent(first, last) {
if (first.value.length) {
document.getElementById(last).focus();
}
}
@ -200,11 +205,11 @@
<script>
feather.replace()
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

208
payment.html
View file

@ -2,129 +2,139 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>payment</title>
<link rel="stylesheet" href="stylepayment.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylepayment.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="full-body">
<div class="body-left">
<form class="formpayment" style="border-top: 1px solid white ; color: white;">
<h3><b>PAYMENTS METHODS</b></h3>
<h3><b>PAYMENTS METHODS</b></h3>
<div class="form-check">
<input class="form-check-input" type="radio" name="payment" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
VIRTUAL ACCOUNT
</label>
<div>
<a href="payment1.html"><img src="assets/bca.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img src="assets/bni.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img src="assets/bri.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
</div>
<input class="form-check-input" id="defaultCheck1" name="payment" type="radio" value="">
<label class="form-check-label" for="defaultCheck1">
VIRTUAL ACCOUNT
</label>
<div>
<a href="payment1.html"><img alt="placeholder image" class="img-fluid" src="assets/bca.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img alt="placeholder image" class="img-fluid" src="assets/bni.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img alt="placeholder image" class="img-fluid" src="assets/bri.png"
style="width: 100px; margin-right: 10px;"/></a>
</div>
</div>
</form>
</div>
</form>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button" style="margin-left: 48px;">Order Now</button>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between"
style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html"> <button class="button" style="background-color: yellow; color: black;">Transaction</button></a>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button class="button" id="myBtn" style="margin-left: 48px;">Order Now</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html">
<button class="button" style="background-color: yellow; color: black;">Transaction</button>
</a>
</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>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function() {
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function(event) {
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
modal.style.display = "none";
}
}
</script>
}
</script>
</body>
</html>

226
payment1.html
View file

@ -2,138 +2,148 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>payment-BCA</title>
<link rel="stylesheet" href="stylepayment.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylepayment.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="full-body">
<div class="body-left">
<form class="formpayment" style="border-top: 1px solid white ; color: white;">
<h3><b>PAYMENTS METHODS</b></h3>
<h3><b>PAYMENTS METHODS</b></h3>
<div class="form-check">
<input class="form-check-input" type="radio" name="payment" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img src="assets/bca.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img src="assets/bni.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img src="assets/bri.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BCA</b></h5>
<p>1. Login pada alamat Internet Banking BCA (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
<input class="form-check-input" id="defaultCheck1" name="payment" type="radio" value="">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img alt="placeholder image" class="img-fluid" src="assets/bca.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img alt="placeholder image" class="img-fluid" src="assets/bni.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img alt="placeholder image" class="img-fluid" src="assets/bri.png"
style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BCA</b></h5>
<p>1. Login pada alamat Internet Banking BCA (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
</div>
</form>
</div>
</form>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button" style="margin-left: 48px;">Order Now</button>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between"
style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html"> <button class="button" style="background-color: yellow; color: black;">Transaction</button></a>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button class="button" id="myBtn" style="margin-left: 48px;">Order Now</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html">
<button class="button" style="background-color: yellow; color: black;">Transaction</button>
</a>
</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>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function() {
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function(event) {
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
modal.style.display = "none";
}
}
</script>
}
</script>
</body>
</html>

224
payment2.html
View file

@ -2,137 +2,147 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>payment-BNI</title>
<link rel="stylesheet" href="stylepayment.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylepayment.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="full-body">
<div class="body-left">
<form class="formpayment" style="border-top: 1px solid white ; color: white;">
<h3><b>PAYMENTS METHODS</b></h3>
<h3><b>PAYMENTS METHODS</b></h3>
<div class="form-check">
<input class="form-check-input" type="radio" name="payment" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img src="assets/bca.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img src="assets/bni.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img src="assets/bri.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BNI</b></h5>
<p>1. Login pada alamat Internet Banking BNI (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
<input class="form-check-input" id="defaultCheck1" name="payment" type="radio" value="">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img alt="placeholder image" class="img-fluid" src="assets/bca.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img alt="placeholder image" class="img-fluid" src="assets/bni.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img alt="placeholder image" class="img-fluid" src="assets/bri.png"
style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BNI</b></h5>
<p>1. Login pada alamat Internet Banking BNI (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
</div>
</form>
</div>
</form>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button" style="margin-left: 48px;">Order Now</button>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between"
style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html"> <button class="button" style="background-color: yellow; color: black;">Transaction</button></a>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button class="button" id="myBtn" style="margin-left: 48px;">Order Now</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html">
<button class="button" style="background-color: yellow; color: black;">Transaction</button>
</a>
</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>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function() {
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function(event) {
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
modal.style.display = "none";
}
}
</script>
}
</script>
</body>
</html>

224
payment3.html
View file

@ -2,137 +2,147 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>payment-BRI</title>
<link rel="stylesheet" href="stylepayment.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="stylepayment.css" rel="stylesheet">
<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="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="/products-page.html" aria-disabled="true">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Payments</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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="/products-page.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/aboutus.html">About Us</a>
</li>
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<div class="full-body">
<div class="body-left" >
<div class="full-body">
<div class="body-left">
<form class="formpayment" style="border-top: 1px solid white ; color: white;">
<h3><b>PAYMENTS METHODS</b></h3>
<h3><b>PAYMENTS METHODS</b></h3>
<div class="form-check">
<input class="form-check-input" type="radio" name="payment" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img src="assets/bca.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img src="assets/bni.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img src="assets/bri.png" alt="placeholder image" class="img-fluid" style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BRI</b></h5>
<p>1. Login pada alamat Internet Banking BRI (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
<input class="form-check-input" id="defaultCheck1" name="payment" type="radio" value="">
<label class="form-check-label" for="defaultCheck1">
BANK TRANSFER
</label>
<div>
<a href="payment1.html"><img alt="placeholder image" class="img-fluid" src="assets/bca.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment2.html"><img alt="placeholder image" class="img-fluid" src="assets/bni.png"
style="width: 100px; margin-right: 10px;"/></a>
<a href="payment3.html"><img alt="placeholder image" class="img-fluid" src="assets/bri.png"
style="width: 100px; margin-right: 10px;"/></a>
</div>
<div style="margin-top: 20px;">
<h5><b>Internet Banking BRI</b></h5>
<p>1. Login pada alamat Internet Banking BRI (***)</p>
<p>2. Pilih menu Pembayaran Tagihan > Pembayaran > Antar Rekening</p>
<p>3. Pada Ke Rekening masukkan Rekening perusahaan</p>
<p>4. Masukkan Jumlah Nominal yang akan ditransfer</p>
<p>5. Kemudian tekan send. Cetak/simpan stuck Transfer sebagai bukti pembayaran</p>
</div>
</div>
</form>
</div>
</form>
</div>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button" style="margin-left: 48px;">Order Now</button>
<div class="body-right" style="margin-left: 48px;">
<div class="border">
<h5 class="titlesummary"><b>Order Summary</b></h5>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Sub Total</p>
<p>1.999.999,00</p>
</div>
</div>
<div class="container">
<div class="row justify-content-between"
style="display: flex; border-bottom: 1px solid white; margin: 10px">
<p>Shipping</p>
<p>-</p>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html"> <button class="button" style="background-color: yellow; color: black;">Transaction</button></a>
</div>
<div class="container">
<div class="row justify-content-between" style="display: flex; margin: 10px">
<p>Estimate</p>
<p>1.999.999,00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="display: flex; color: black;">
<button class="button" id="myBtn" style="margin-left: 48px;">Order Now</button>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">&times;</span>
<div class="konten">
<h4><b>YOUR ORDER SUCCESSFULLY</b></h4>
<a href="transaction.html">
<button class="button" style="background-color: yellow; color: black;">Transaction</button>
</a>
</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>
<script>
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function () {
modal.style.display = "block";
}
span.onclick = function() {
}
span.onclick = function () {
modal.style.display = "none";
}
window.onclick = function(event) {
}
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
modal.style.display = "none";
}
}
</script>
}
</script>
</body>
</html>

70
product-list.html
View file

@ -3,12 +3,12 @@
<head>
<title>Product List</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" 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;
@ -27,10 +27,10 @@
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;"
width="80" height="80"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<a href="/"><img alt="Banner" class="navbar-brand" height="80" src="assets/logo_transparent.png"
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">
@ -39,7 +39,7 @@
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="product-list.html" aria-disabled="true">Products</a>
<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>
@ -50,7 +50,7 @@
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
@ -81,7 +81,7 @@
</select>
</div>
<div class="col col-md-auto">
<button type="button" class="btn btn-primary">Filter</button>
<button class="btn btn-primary" type="button">Filter</button>
</div>
</div>
</div>
@ -91,7 +91,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -99,7 +99,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -108,7 +108,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -116,7 +116,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -125,7 +125,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -133,7 +133,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -142,7 +142,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -150,7 +150,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -159,7 +159,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -167,7 +167,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -176,7 +176,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -184,7 +184,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -193,7 +193,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -201,7 +201,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -210,7 +210,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -218,7 +218,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -227,7 +227,7 @@
<div class="card mx-3 my-3" style="max-width: 450px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png" alt="Item Image" class="img-fluid">
<img alt="Item Image" class="img-fluid" src="https://telegra.ph/file/10c14ef12cc8f16ab0960.png">
</div>
<div class="col-md-8">
<div class="card-body">
@ -235,7 +235,7 @@
<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 type="button" class="btn btn-info">View Detail</button>
<button class="btn btn-info" type="button">View Detail</button>
</a>
</div>
</div>
@ -244,11 +244,11 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
</body>

48
product.html
View file

@ -2,23 +2,23 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>product</title>
<link rel="stylesheet" href="styleproduct.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="styleproduct.css" rel="stylesheet">
<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">
<link href="https://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body class="bg-color">
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a class="navbar-brand" href="#">Details Products</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<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">
@ -27,7 +27,7 @@
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link disabled" href="product-list.html" aria-disabled="true">Products</a>
<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>
@ -38,7 +38,7 @@
</ul>
<span class="navbar-nav my-2 my-lg-0 text-white">
<div class="my-4">
<a href="login.html"><button type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
@ -47,7 +47,7 @@
<div class="card" style="background-color: #212226 ; border-radius: 20px; margin-top: 20px; ">
<div class="product">
<img src="assets/sepatu.png" alt="placeholder image" class="img-fluid"/>
<img alt="placeholder image" class="img-fluid" src="assets/sepatu.png"/>
<div class="description">
<div style="margin-left: 20px;">
<h1 class="titledes">Fashione Shoes White</h1>
@ -69,23 +69,23 @@
<form>
SIZE
<br>
<input type="radio" name="size"> 7 &emsp; &emsp;
<input type="radio" name="size"> 8 &emsp; &emsp;
<input type="radio" name="size"> 9 &emsp; &emsp;
<input name="size" type="radio"> 7 &emsp; &emsp;
<input name="size" type="radio"> 8 &emsp; &emsp;
<input name="size" type="radio"> 9 &emsp; &emsp;
</form>
</div>
<div style="display: flex; color: black;">
<button id="myBtn" class="button">Add to Cart</button>
<button class="button" id="myBtn">Add to Cart</button>
<div id="myModal" class="modal">
<div class="modal" id="myModal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 class="titlee"><b>SUCCESSFULLY ADDED TO BAG</b></h2>
<div class="konten">
<img src="assets/sepatu.png" alt="placeholder image" class="img-fluid" width="200px"
height="200px">
<img alt="placeholder image" class="img-fluid" height="200px" src="assets/sepatu.png"
width="200px">
<div class="bodymodal" style="padding-left: 20px; padding-right: 20px;">
<h3 class="titlemodal">Fashione Shoes White</h3>
<br>
@ -123,12 +123,12 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
var modal = document.getElementById("myModal");

33
register-verification-completed.html
View file

@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>Register</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<style>
@ -124,7 +124,7 @@
</head>
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">Register Page</a>
@ -143,27 +143,28 @@
<div class="card-header" style="color: white;">
<h2>Verification Completed !!</h2>
</div>
<lottie-player src="https://assets10.lottiefiles.com/private_files/lf30_hlzxxlfs.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1"
src="https://assets10.lottiefiles.com/private_files/lf30_hlzxxlfs.json"></lottie-player>
<div class="card-body">
<h6 class="card-text" style="color: #dedede;">Your Email Has Been Verified !! Please Sign in
Using the button
below..</h6>
<br style="display: block;content: ' ';margin: 1vw 0;line-height: 1vw;">
<a href="login.html" class="btn btn-primary">Sign in</a>
<a class="btn btn-primary" href="login.html">Sign in</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>
</html>

31
register-verification-sent.html
View file

@ -2,14 +2,14 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>Register</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<style>
@ -111,7 +111,7 @@
</head>
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" width="5%" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;" width="5%">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">Register Page</a>
@ -129,9 +129,10 @@
<div class="card-header" style="color: white;">
<h2>Verify Your Email Address</h2>
</div>
<lottie-player src="https://assets1.lottiefiles.com/packages/lf20_IUWMcw.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1"
src="https://assets1.lottiefiles.com/packages/lf20_IUWMcw.json"></lottie-player>
<div class="card-body">
<h5 class="card-text" style="color: #dedede;">Before proceeding, please check your email for a
verification link
@ -142,12 +143,12 @@
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>
</html>

63
register.html
View file

@ -3,14 +3,14 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="assets/favicon.png" rel="shortcut icon" type="image/png"/>
<title>Register</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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://fonts.googleapis.com" rel="preconnect">
<link crossorigin href="https://fonts.gstatic.com" rel="preconnect">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<script src="https://unpkg.com/feather-icons"></script>
@ -148,7 +148,7 @@
<body>
<nav class="navbar navbar-dark nav-color ml-5 mr-5 nav-radius">
<img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;">
<img alt="Banner" class="navbar-brand" src="assets/logo_transparent.png" style="margin-top: 0%;">
<ul class="navbar-nav">
<li class="nav-item">
<a style="color: white; font-size: 16pt;">Register Page</a>
@ -164,37 +164,40 @@
<div class="col">
<div class="card text-white col-md-8 col-lg-6 col-xl-5">
<h1 class="card-header text-white">Register</h1>
<lottie-player src="https://assets10.lottiefiles.com/datafiles/JAmX1SNojoncImC/data.json" class="icon"
background="transparent"
speed="1" loop autoplay></lottie-player>
<lottie-player autoplay background="transparent"
class="icon"
loop speed="1"
src="https://assets10.lottiefiles.com/datafiles/JAmX1SNojoncImC/data.json"></lottie-player>
<div class="card-body">
<form class="px-4 py-3">
<div class="form-group">
<input type="text" name="first_name" id="first_name"
class="form-control input-sm text-center" placeholder="First Name">
<input class="form-control input-sm text-center" id="first_name" name="first_name"
placeholder="First Name" type="text">
</div>
<div class="form-group">
<input type="text" name="last_name" id="last_name"
class="form-control input-sm text-center"
placeholder="Last Name">
<input class="form-control input-sm text-center" id="last_name" name="last_name"
placeholder="Last Name"
type="text">
</div>
<div class="form-group">
<input type="date" id="birthDate" class="form-control text-center" style="color: gray">
<input class="form-control text-center" id="birthDate" style="color: gray" type="date">
</div>
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-sm text-center"
placeholder="Email Address">
<input class="form-control input-sm text-center" id="email" name="email"
placeholder="Email Address"
type="email">
</div>
<div class="form-group">
<input type="password" name="password" id="password"
class="form-control input-sm text-center"
placeholder="Password">
<input class="form-control input-sm text-center" id="password" name="password"
placeholder="Password"
type="password">
</div>
<div class="form-group">
<input type="password" name="password_confirmation" id="password_confirmation"
class="form-control input-sm text-center" placeholder="Confirm Password">
<input class="form-control input-sm text-center" id="password_confirmation"
name="password_confirmation"
placeholder="Confirm Password" type="password">
</div>
<button type="submit" class="btn btn-register btn-primary">Register</button>
<button class="btn btn-register btn-primary" type="submit">Register</button>
<div class="hoversingup-1 text-center">
<a href="login.html">Already have an account ?? Click here to Sign In !!</a>
@ -209,11 +212,13 @@
<script>
feather.replace()
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
src="https://code.jquery.com/jquery-3.5.1.slim.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
<script crossorigin="anonymous"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js">
</script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</body>

266
stylebag.css
View file

@ -11,7 +11,7 @@
border-bottom-right-radius: 20px;
}
.title{
.title {
color: white;
font-family: 'Poppins', sans-serif;
display: flex;
@ -19,14 +19,14 @@
margin-left: 48px;
justify-content: left;
text-align: left;
background-color: 1b1c1e;
background-color: #1b1c1e;
}
.bag-list{
.bag-list {
display: flex;
color: white;
border-bottom: 1px solid white;
background-color: 1b1c1e;
background-color: #1b1c1e;
font-family: 'Poppins', sans-serif;
margin-bottom: 1%;
justify-content: left;
@ -34,158 +34,168 @@
}
.body-right{
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
.body-right {
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
}
.body-left{
margin-left: 48px;
margin-right: 48px;
}
.button{
color: white;
background-color: green;
margin-top: 15px;
}
.full-body{
display: flex;
}
.info{
margin-left: 30px;
}
.titlesummary{
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
.container{
margin-left: 0px;
align-items: left;
justify-content: left;
}
.container input{
align-items: left;
justify-content: left;
width: 40px;
}
@media only screen and (max-width: 1000px){
.full-body{
display: grid !important;
}
.body-right{
.body-left {
margin-left: 48px;
}
margin-right: 48px;
}
.button {
color: white;
background-color: green;
margin-top: 15px;
}
.full-body {
display: flex;
}
.info {
margin-left: 30px;
}
.titlesummary {
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
.container {
margin-left: 0px;
align-items: left;
justify-content: left;
}
.container input {
align-items: left;
justify-content: left;
width: 40px;
}
@media only screen and (max-width: 1000px) {
.full-body {
display: grid !important;
}
.body-right {
margin-left: 48px;
}
}
@media (max-width: 600px){
.full-body{
font-size: 7px ;
}
.img{
width: 30px;
height: 30px;
}
.info{
margin-left: 5px;
}
.titletr{
word-break: keep-all;
}
.titletrdes{
word-break: break-all;
}
.titlesummary{
font-size: 20px;
@media (max-width: 600px) {
}
.body-right{
width: 300px;
}
.body-left{
width: 300px;
}
.full-body {
font-size: 7px;
}
.img {
width: 30px;
height: 30px;
}
.info {
margin-left: 5px;
}
.titletr {
word-break: keep-all;
}
.titletrdes {
word-break: break-all;
}
.titlesummary {
font-size: 20px;
}
.body-right {
width: 300px;
}
.body-left {
width: 300px;
}
}
@media (max-width : 541px){
.body-right{
width: 444px;
}
@media (max-width: 541px) {
.body-right {
width: 444px;
}
.body-left{
width: 444px;
}
.body-left {
width: 444px;
}
}
@media (max-width : 412px){
.body-right{
width: 315px;
}
@media (max-width: 412px) {
.body-right {
width: 315px;
}
.body-left{
width: 315px;
}
.body-left {
width: 315px;
}
}
@media (max-width : 415px){
.body-right{
width: 318px;
}
@media (max-width: 415px) {
.body-right {
width: 318px;
}
.body-left{
width: 318px;
}
.body-left {
width: 318px;
}
}
@media (max-width : 376px){
.body-right{
width: 280px;
}
@media (max-width: 376px) {
.body-right {
width: 280px;
}
.body-left{
width: 280px;
}
.body-left {
width: 280px;
}
}
@media (max-width : 361px){
.body-right{
width: 264px;
}
@media (max-width: 361px) {
.body-right {
width: 264px;
}
.body-left{
width: 264px;
}
.body-left {
width: 264px;
}
}
@media (max-width : 321px){
.body-right{
width: 224px;
}
.body-left{
width: 224px;
}
@media (max-width: 321px) {
.body-right {
width: 224px;
}
.body-left {
width: 224px;
}
}
@media (max-width : 281px){
.body-right{
width: 184px;
}
.body-left{
width: 184px;
}
@media (max-width: 281px) {
.body-right {
width: 184px;
}
.body-left {
width: 184px;
}
}

237
stylecheckout.css
View file

@ -11,7 +11,7 @@
border-bottom-right-radius: 20px;
}
.title{
.title {
color: white;
font-family: 'Poppins', sans-serif;
display: flex;
@ -19,14 +19,14 @@
margin-left: 48px;
justify-content: left;
text-align: left;
background-color: 1b1c1e;
background-color: #1b1c1e;
}
.bag-list{
.bag-list {
display: flex;
color: white;
border-bottom: 1px solid white;
background-color: 1b1c1e;
background-color: #1b1c1e;
font-family: 'Poppins', sans-serif;
margin-bottom: 1%;
justify-content: left;
@ -34,153 +34,156 @@
}
.body-right{
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
.body-right {
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
}
.body-left{
margin-left: 48px;
margin-right: 48px;
}
.button{
color: white;
background-color: green;
margin-top: 15px;
}
.full-body{
display: flex;
}
.info{
margin-left: 30px;
}
.titlesummary{
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
@media only screen and (max-width: 1000px){
.full-body{
display: grid !important;
}
.body-right{
.body-left {
margin-left: 48px;
width: 500px;
}
margin-right: 48px;
}
.button {
color: white;
background-color: green;
margin-top: 15px;
}
.full-body {
display: flex;
}
.info {
margin-left: 30px;
}
.titlesummary {
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
@media only screen and (max-width: 1000px) {
.full-body {
display: grid !important;
}
.body-right {
margin-left: 48px;
width: 500px;
}
}
@media (max-width: 600px){
.full-body{
font-size: 7px ;
}
@media (max-width: 600px) {
.img{
width: 30px;
height: 30px;
}
.full-body {
font-size: 7px;
}
.info{
margin-left: 5px;
}
.img {
width: 30px;
height: 30px;
}
.titletr{
word-break: keep-all;
}
.info {
margin-left: 5px;
}
.titletrdes{
word-break: break-all;
}
.titletr {
word-break: keep-all;
}
.titlesummary{
font-size: 10px;
}
.titletrdes {
word-break: break-all;
}
.body-right{
width: 504px;
}
.titlesummary {
font-size: 10px;
}
.body-left{
width: 504px;
}
.body-right {
width: 504px;
}
.body-left {
width: 504px;
}
}
@media (max-width : 541px){
.body-right{
width: 444px;
}
@media (max-width: 541px) {
.body-right {
width: 444px;
}
.body-left{
width: 444px;
}
.body-left {
width: 444px;
}
}
@media (max-width : 412px){
.body-right{
width: 315px;
}
@media (max-width: 412px) {
.body-right {
width: 315px;
}
.body-left{
width: 315px;
}
.body-left {
width: 315px;
}
}
@media (max-width : 415px){
.body-right{
width: 318px;
}
@media (max-width: 415px) {
.body-right {
width: 318px;
}
.body-left{
width: 318px;
}
.body-left {
width: 318px;
}
}
@media (max-width : 376px){
.body-right{
width: 280px;
}
@media (max-width: 376px) {
.body-right {
width: 280px;
}
.body-left{
width: 280px;
}
.body-left {
width: 280px;
}
}
@media (max-width : 361px){
.body-right{
width: 264px;
}
@media (max-width: 361px) {
.body-right {
width: 264px;
}
.body-left{
width: 264px;
}
.body-left {
width: 264px;
}
}
@media (max-width : 321px){
.body-right{
width: 224px;
}
.body-left{
width: 224px;
}
@media (max-width: 321px) {
.body-right {
width: 224px;
}
.body-left {
width: 224px;
}
}
@media (max-width : 281px){
.body-right{
width: 184px;
}
.body-left{
width: 184px;
}
@media (max-width: 281px) {
.body-right {
width: 184px;
}
.body-left {
width: 184px;
}
}

316
stylepayment.css
View file

@ -11,7 +11,7 @@
border-bottom-right-radius: 20px;
}
.title{
.title {
color: white;
font-family: 'Poppins', sans-serif;
display: flex;
@ -19,14 +19,14 @@
margin-left: 48px;
justify-content: left;
text-align: left;
background-color: 1b1c1e;
background-color: #1b1c1e;
}
.bag-list{
.bag-list {
display: flex;
color: white;
border-bottom: 1px solid white;
background-color: 1b1c1e;
background-color: #1b1c1e;
font-family: 'Poppins', sans-serif;
margin-bottom: 1%;
justify-content: left;
@ -34,199 +34,209 @@
}
.body-right{
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
.body-right {
margin-right: 48px;
color: white;
width: 30%;
height: 100%;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.form-check{
margin-top: 10px;
}
.modal-content {
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.form-check {
margin-top: 10px;
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.body-left{
margin-left: 48px;
margin-right: 48px;
border-top: none !important;
}
.button{
color: white;
background-color: green;
margin-top: 15px;
}
.full-body{
display: flex;
}
.info{
margin-left: 30px;
}
.titlesummary{
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
.container{
margin-left: 0px;
align-items: left;
justify-content: left;
}
.container input{
align-items: left;
justify-content: left;
width: 40px;
}
@media only screen and (max-width: 1000px){
.full-body{
display: grid !important;
}
.body-right{
.body-left {
margin-left: 48px;
margin-top: 30px;
}
margin-right: 48px;
border-top: none !important;
}
.button {
color: white;
background-color: green;
margin-top: 15px;
}
.full-body {
display: flex;
}
.info {
margin-left: 30px;
}
.titlesummary {
text-align: center;
border-bottom: 1px solid white;
margin: 10px;
}
.container {
margin-left: 0px;
align-items: left;
justify-content: left;
}
.container input {
align-items: left;
justify-content: left;
width: 40px;
}
@media only screen and (max-width: 1000px) {
.full-body {
display: grid !important;
}
.body-right {
margin-left: 48px;
margin-top: 30px;
}
}
@media (max-width: 600px){
.full-body{
font-size: 7px ;
}
.img{
width: 30px;
height: 30px;
}
.info{
margin-left: 5px;
}
.titletr{
word-break: keep-all;
}
.titletrdes{
word-break: break-all;
}
.titlesummary{
font-size: 20px;
@media (max-width: 600px) {
}
.body-right{
width: 300px;
}
.body-left{
width: 300px;
}
.full-body {
font-size: 7px;
}
.img {
width: 30px;
height: 30px;
}
.info {
margin-left: 5px;
}
.titletr {
word-break: keep-all;
}
.titletrdes {
word-break: break-all;
}
.titlesummary {
font-size: 20px;
}
.body-right {
width: 300px;
}
.body-left {
width: 300px;
}
}
@media (max-width : 541px){
.body-right{
width: 444px;
}
@media (max-width: 541px) {
.body-right {
width: 444px;
}
.body-left{
width: 444px;
}
.body-left {
width: 444px;
}
}
@media (max-width : 412px){
.body-right{
width: 315px;
}
@media (max-width: 412px) {
.body-right {
width: 315px;
}
.body-left{
width: 315px;
}
.body-left {
width: 315px;
}
}
@media (max-width : 415px){
.body-right{
width: 318px;
}
@media (max-width: 415px) {
.body-right {
width: 318px;
}
.body-left{
width: 318px;
}
.body-left {
width: 318px;
}
}
@media (max-width : 376px){
.body-right{
width: 280px;
}
@media (max-width: 376px) {
.body-right {
width: 280px;
}
.body-left{
width: 280px;
}
.body-left {
width: 280px;
}
}
@media (max-width : 361px){
.body-right{
width: 264px;
}
@media (max-width: 361px) {
.body-right {
width: 264px;
}
.body-left{
width: 264px;
}
.body-left {
width: 264px;
}
}
@media (max-width : 321px){
.body-right{
width: 224px;
}
.body-left{
width: 224px;
}
@media (max-width: 321px) {
.body-right {
width: 224px;
}
.body-left {
width: 224px;
}
}
@media (max-width : 281px){
.body-right{
width: 184px;
}
.body-left{
width: 184px;
}
@media (max-width: 281px) {
.body-right {
width: 184px;
}
.body-left {
width: 184px;
}
}

198
styleproduct.css
View file

@ -13,7 +13,7 @@
}
.product {
background-color: 1b1c1e;
background-color: #1b1c1e;
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: left;
@ -41,142 +41,154 @@
margin-left: 20px;
cursor: pointer;
border-radius: 16px;
}
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
}
.card{
background-color: 1b1c1e;
.card {
background-color: #1b1c1e;
font-family: 'Poppins', sans-serif;
display: flex;
margin-left: 48px;
margin-right: 48px;
justify-content: left;
text-align: left;
}
}
.sizeSepatu{
.sizeSepatu {
margin-left: 20px;
}
.konten{
}
.konten {
display: flex;
padding-top: 10px;
}
}
@media only screen and (max-width: 1000px){
.product{
display: grid;
@media only screen and (max-width: 1000px) {
.product {
display: grid;
}
.description{
margin-left: 0px;
word-break: break-all;
.description {
margin-left: 0px;
word-break: break-all;
}
}
@media (max-width: 900px){
.konten{
display: grid;
@media (max-width: 900px) {
.konten {
display: grid;
}
.bodymodal{
border-top: 1px solid black;
border-left: none !important;
.bodymodal {
border-top: 1px solid black;
border-left: none !important;
}
}
@media (max-width: 601px){
.konten{
display: grid;
}
.titledes{
font-size: 25px ;
}
.card-body{
font-size: 12px;
}
@media (max-width: 601px) {
.konten {
display: grid;
}
.titledes {
font-size: 25px;
}
.card-body {
font-size: 12px;
}
}
@media (max-width: 361px){
.konten{
display: grid;
}
.titledes{
font-size: 20px ;
}
.card-body{
font-size: 10px;
}
@media (max-width: 361px) {
.konten {
display: grid;
}
.titledes {
font-size: 20px;
}
.card-body {
font-size: 10px;
}
}
@media (max-width: 321px){
.konten{
display: grid;
}
.titledes{
font-size: 17px ;
}
.card-body{
font-size: 8px;
}
@media (max-width: 321px) {
.konten {
display: grid;
}
.titledes {
font-size: 17px;
}
.card-body {
font-size: 8px;
}
}
@media (max-width: 376px){
.konten{
display: grid;
}
.titledes{
font-size: 22px ;
}
.card-body{
font-size: 11px;
}
@media (max-width: 376px) {
.konten {
display: grid;
}
.titledes {
font-size: 22px;
}
.card-body {
font-size: 11px;
}
}
@media (max-width: 511px){
.titlemodal{
font-size: 15px;
}
.modall{
font-size: 10px;
}
.titlee{
font-size: 20px;
}
@media (max-width: 511px) {
.titlemodal {
font-size: 15px;
}
.modall {
font-size: 10px;
}
.titlee {
font-size: 20px;
}
}

283
transaction.html
View file

@ -1,153 +1,156 @@
<html>
<head>
<title>Transaction List</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/favicon.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.bg-color {
background-color: #1b1c1e;
}
.comp-color {
background-color: #212226;
}
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</style>
</head>
<head>
<title>Transaction 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">
<link href="assets/favicon.png" 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;
}
<body class="bg-color">
.comp-color {
background-color: #212226;
}
<nav class="navbar navbar-expand-lg navbar-dark comp-color ml-5 mr-5 nav-radius">
<a href="/"><img class="navbar-brand" src="assets/logo_transparent.png" alt="Banner" style="margin-top: 0%;" width="80" height="80"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/product-list.html" aria-disabled="true">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">
.nav-radius {
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
</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.png"
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 active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link" 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 type="button" class="btn btn-outline-success mt-auto mb-auto mr-3">Login</button></a>
<a href="login.html"><button class="btn btn-outline-success mt-auto mb-auto mr-3" type="button">Login</button></a>
</div>
<i class="fas fa-shopping-cart mt-auto mb-auto"><span class="ml-2 mt-auto mb-auto">$999</span></i>
</span>
</div>
</nav>
</div>
</nav>
<div class="container-fluid mt-3 comp-color">
<table class="table table-hover table-dark comp-color">
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Item 1</td>
<td>2</td>
<td>$30</td>
<td>Pending</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Item 2</td>
<td>2</td>
<td>$30</td>
<td>Cancelled</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Item 3</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Item 4</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Item 5</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Item 6</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Item 7</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Item 8</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Item 9</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Item 10</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
</tbody>
</table>
</div>
<div class="container-fluid mt-3 comp-color">
<table class="table table-hover table-dark comp-color">
<thead>
<tr>
<th scope="col">Order ID</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Item 1</td>
<td>2</td>
<td>$30</td>
<td>Pending</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Item 2</td>
<td>2</td>
<td>$30</td>
<td>Cancelled</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Item 3</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Item 4</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Item 5</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Item 6</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Item 7</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Item 8</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Item 9</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Item 10</td>
<td>2</td>
<td>$30</td>
<td>Paid</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
<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>
</body>
</html>