From 2b671eea7c021b6bfa5a9c14fcf8832952d00fea Mon Sep 17 00:00:00 2001 From: JSriwongsa Date: Sat, 20 May 2023 22:36:33 -0500 Subject: [PATCH] added ecommerce website --- ecommerce/gym_items_website/cancel.html | 20 ++ ecommerce/gym_items_website/index.html | 123 +++++++++++ ecommerce/gym_items_website/main.js | 10 + ecommerce/gym_items_website/style.css | 256 +++++++++++++++++++++++ ecommerce/gym_items_website/success.html | 20 ++ 5 files changed, 429 insertions(+) create mode 100644 ecommerce/gym_items_website/cancel.html create mode 100644 ecommerce/gym_items_website/index.html create mode 100644 ecommerce/gym_items_website/main.js create mode 100644 ecommerce/gym_items_website/style.css create mode 100644 ecommerce/gym_items_website/success.html diff --git a/ecommerce/gym_items_website/cancel.html b/ecommerce/gym_items_website/cancel.html new file mode 100644 index 0000000..c53b665 --- /dev/null +++ b/ecommerce/gym_items_website/cancel.html @@ -0,0 +1,20 @@ + + + + + + + + Unsuccess Payment + + +
+

Payment Unsuccessful

+

Oops! Something went wrong, an error occurred while processing the order.

+ + Back to Homepage +
+ + + + diff --git a/ecommerce/gym_items_website/index.html b/ecommerce/gym_items_website/index.html new file mode 100644 index 0000000..fe47b89 --- /dev/null +++ b/ecommerce/gym_items_website/index.html @@ -0,0 +1,123 @@ + + + + + + FITs + + + + + +
+
+ + + +
+

Your cart

+
+
+ +
+
Workout Sets
+
$39.95
+ +
+ +
+
+
+
Total
+
$0
+
+ + + +
+
+
+ +
+

Athletic Wear & Workout Items

+
+ +
+ +

Gym Athletic Shorts

+ $39.95 + +
+
+ +

Criss-Cross Sports Bras

+ $39.99 + +
+
+ +

Flowy Athletic Shorts

+ $26.99 + +
+
+ +

Sports Bras Workout

+ $24.99 + +
+
+ +

Long Sleeve T-Shirt

+ $49.99 + +
+
+ +

Women's 2 Piece Crop Top

+ $45.00 + +
+
+ +

Women Solid Basic Fleece

+ $35.59 + +
+
+ +

Full Zip Lightweight Workout Jacket

+ $28.99 + +
+
+ +

Waterproof Drawstring Backpack

+ $19.99 + +
+
+ +

Gym Bag with Wet Pocket & Shoes Compartment

+ $49.00 + +
+
+ +

Resistance Bands (3)

+ $29.59 + +
+
+ +

5-pair Low Cut Socks

+ $19.75 + +
+ +
+
+ + + + diff --git a/ecommerce/gym_items_website/main.js b/ecommerce/gym_items_website/main.js new file mode 100644 index 0000000..0ef8b85 --- /dev/null +++ b/ecommerce/gym_items_website/main.js @@ -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') +}; diff --git a/ecommerce/gym_items_website/style.css b/ecommerce/gym_items_website/style.css new file mode 100644 index 0000000..2ef6e8f --- /dev/null +++ b/ecommerce/gym_items_website/style.css @@ -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; +} \ No newline at end of file diff --git a/ecommerce/gym_items_website/success.html b/ecommerce/gym_items_website/success.html new file mode 100644 index 0000000..7a371af --- /dev/null +++ b/ecommerce/gym_items_website/success.html @@ -0,0 +1,20 @@ + + + + + + + + Success Payment + + +
+

Payment Successful

+

Your order will arrive in 3 business days

+ + Back to Homepage +
+ + + +