added ecommerce website
This commit is contained in:
JSriwongsa
parent
4ca14dbe1a
commit
2b671eea7c
5 changed files with 429 additions and 0 deletions
20
ecommerce/gym_items_website/cancel.html
Normal file
20
ecommerce/gym_items_website/cancel.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Unsuccess Payment</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="success-container">
|
||||
<h1>Payment Unsuccessful</h1>
|
||||
<p>Oops! Something went wrong, an error occurred while processing the order.</p>
|
||||
<img src="images/icon_c.png" alt="">
|
||||
<a href="index.html" class="success-btn">Back to Homepage</a>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
ecommerce/gym_items_website/index.html
Normal file
123
ecommerce/gym_items_website/index.html
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>FITs</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" >
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="nav container">
|
||||
<a href="#" class="logo">FITs</a>
|
||||
<i class='bx bxs-shopping-bags' id="cart-check-out" data-amount="0"></i>
|
||||
|
||||
<div class="cart">
|
||||
<h2 class="cart-title">Your cart</h2>
|
||||
<div class="cart-content">
|
||||
<div class="cart-box">
|
||||
<img src="images/c1.jpg" alt="" class="cart-img">
|
||||
<div class="detail-box">
|
||||
<div class="cart-c-title">Workout Sets</div>
|
||||
<div class="cart-price">$39.95</div>
|
||||
<input type="number" name="" id="" value="1" class="cart-amount">
|
||||
</div>
|
||||
<i class='bx bxs-trash cart-remove' ></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="total">
|
||||
<div class="total-title">Total</div>
|
||||
<div class="total-price">$0</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn-buy">Buy Now</button>
|
||||
<i class='bx bxs-x-circle' id="close-btn" ></i>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="shop container">
|
||||
<h2 class="section-title">Athletic Wear & Workout Items</h2>
|
||||
<div class="shop-content">
|
||||
|
||||
<div class="product-box">
|
||||
<img src="images/c1.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Gym Athletic Shorts </h2>
|
||||
<span class="price">$39.95</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c2.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Criss-Cross Sports Bras</h2>
|
||||
<span class="price">$39.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c3.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Flowy Athletic Shorts</h2>
|
||||
<span class="price">$26.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c4.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Sports Bras Workout</h2>
|
||||
<span class="price">$24.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c5.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Long Sleeve T-Shirt </h2>
|
||||
<span class="price">$49.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c6.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Women's 2 Piece Crop Top</h2>
|
||||
<span class="price">$45.00</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c7.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Women Solid Basic Fleece</h2>
|
||||
<span class="price">$35.59</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c8.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Full Zip Lightweight Workout Jacket</h2>
|
||||
<span class="price">$28.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c9.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Waterproof Drawstring Backpack</h2>
|
||||
<span class="price">$19.99</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c10.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Gym Bag with Wet Pocket & Shoes Compartment</h2>
|
||||
<span class="price">$49.00</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c11.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">Resistance Bands (3)</h2>
|
||||
<span class="price">$29.59</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
<div class="product-box">
|
||||
<img src="images/c12.jpg" alt="" class="product-img">
|
||||
<h2 class="product-title">5-pair Low Cut Socks</h2>
|
||||
<span class="price">$19.75</span>
|
||||
<i class='bx bxs-shopping-bag-alt add-cart'></i>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
10
ecommerce/gym_items_website/main.js
Normal file
10
ecommerce/gym_items_website/main.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
let cartcheck = document.querySelector('#cart-check-out');
|
||||
let cart = document.querySelector('.cart');
|
||||
let closecart = document.querySelector('#close-btn');
|
||||
|
||||
cartcheck.onclick = () =>{
|
||||
cart.classList.add('active')
|
||||
};
|
||||
closecart.onclick = () =>{
|
||||
cart.classList.remove('active')
|
||||
};
|
||||
256
ecommerce/gym_items_website/style.css
Normal file
256
ecommerce/gym_items_website/style.css
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: monospace;
|
||||
scroll-padding-top: 2rem;
|
||||
scroll-behavior: smooth;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
:root{
|
||||
--main-color: tan;
|
||||
--text-color:saddlebrown;
|
||||
--bg-color:peru;
|
||||
--container-color:OldLace ;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
}
|
||||
body{
|
||||
color: var(--bg-color);
|
||||
background: OldLace ;
|
||||
}
|
||||
header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: var(--container-color);
|
||||
box-shadow: 0 1px 4px hsla(33, 90%, 47%, 0.484);
|
||||
z-index: 100;
|
||||
}
|
||||
.nav{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.container{
|
||||
max-width: 1068px;
|
||||
margin: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.logo{
|
||||
font-size: 1.2rem;
|
||||
color: var(--bg-color);
|
||||
font-weight: 600;
|
||||
}
|
||||
#cart-check-out{
|
||||
position: relative;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#cart-check-out[ddata-amount]::after{
|
||||
contain: '';
|
||||
}
|
||||
#cart-check-out[data-amount]::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -12px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--text-color);
|
||||
border-radius: 50%;
|
||||
color: black;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cart{
|
||||
position: fixed;
|
||||
right: -100%;
|
||||
top: 0;
|
||||
width: 360px;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
background: var(--container-color);
|
||||
box-shadow: -2px 0 4px hsla(0, 4%, 15% /10%);
|
||||
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart.active{
|
||||
right: 0;
|
||||
transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.cart-title{
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.total{
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
border-top: 1px solid var(--text-color);
|
||||
}
|
||||
.total-title{
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.total-price{
|
||||
font-size: 1.2rem;
|
||||
margin: 1rem 0 0 1rem;
|
||||
}
|
||||
.btn-buy{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem auto 0 auto;
|
||||
padding: 10px 15px;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
border-radius: 1.5rem;
|
||||
background: mintcream;
|
||||
color: var(--bg-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
#close-btn{
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 0.8rem;
|
||||
font-size: 2rem;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.cart-box{
|
||||
display: grid;
|
||||
grid-template-columns: 30% 50% 15%;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
.cart-img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: contain;
|
||||
padding: 15px;
|
||||
}
|
||||
.detail-box{
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
.cart-c-title{
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-price{
|
||||
font-weight: 600;
|
||||
}
|
||||
.cart-amount{
|
||||
border: 1px solid var(--text-color);
|
||||
outline-color: var(--main-color);
|
||||
width: 3.5rem;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.cart-remove{
|
||||
font-size: 20px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
.section-title{
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.shop{
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.shop-content{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, auto));
|
||||
gap: 1rem;
|
||||
}
|
||||
section{
|
||||
padding: 4rem 0 3rem;
|
||||
}
|
||||
.product-img{
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.product-box{
|
||||
position: relative;
|
||||
background: snow;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.product-title{
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.8rem;
|
||||
}
|
||||
.price{
|
||||
font-weight: 500;
|
||||
}
|
||||
.add-cart{
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
background: var(--text-color);
|
||||
color: var(--container-color);
|
||||
padding: 10px;
|
||||
font-size: 1.2rem;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.add-cart:hover{
|
||||
background: hsla(56, 11%, 71%, 0.568);
|
||||
}
|
||||
.product-box:hover{
|
||||
background: var(--main-color);
|
||||
border: 1px solid var(--main-color);
|
||||
box-shadow: 0 8px 32px hsla(0.75, 0.82, 0.16, 1);
|
||||
transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
}
|
||||
.success-container{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.success-container img{
|
||||
width: 200px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
.success-container h1{
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.success-container p{
|
||||
max-width: 600px;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
.success-btn{
|
||||
padding: 12px 20px;
|
||||
border-radius: 2rem;
|
||||
background: var(--text-color);
|
||||
color: var(--container-color);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
20
ecommerce/gym_items_website/success.html
Normal file
20
ecommerce/gym_items_website/success.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="images/deco.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>Success Payment</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="success-container">
|
||||
<h1>Payment Successful</h1>
|
||||
<p>Your order will arrive in 3 business days</p>
|
||||
<img src="images/icon_s.png" alt="">
|
||||
<a href="index.html" class="success-btn">Back to Homepage</a>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue