added ecommerce website

This commit is contained in:
JSriwongsa 2023-05-20 22:36:33 -05:00
parent 4ca14dbe1a
commit 2b671eea7c
5 changed files with 429 additions and 0 deletions

View 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>

View 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>

View 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')
};

View 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;
}

View 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>