diff --git a/about.html b/about.html new file mode 100644 index 0000000..f2c6786 --- /dev/null +++ b/about.html @@ -0,0 +1,19 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + + \ No newline at end of file diff --git a/blog.html b/blog.html new file mode 100644 index 0000000..f2c6786 --- /dev/null +++ b/blog.html @@ -0,0 +1,19 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + + \ No newline at end of file diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..3697536 --- /dev/null +++ b/cart.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + + + + + + + + + + + + + \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..3697536 --- /dev/null +++ b/contact.html @@ -0,0 +1,22 @@ + + + + + + + + Document + + + + + + + + + + + + + + \ No newline at end of file diff --git a/img/a.jpg b/img/a.jpg new file mode 100644 index 0000000..7cf0f73 Binary files /dev/null and b/img/a.jpg differ diff --git a/img/aa.webp b/img/aa.webp new file mode 100644 index 0000000..5ff0bc9 Binary files /dev/null and b/img/aa.webp differ diff --git a/img/about/1.mp4 b/img/about/1.mp4 new file mode 100644 index 0000000..09b69d1 Binary files /dev/null and b/img/about/1.mp4 differ diff --git a/img/about/a1.png b/img/about/a1.png new file mode 100644 index 0000000..1ef33ac Binary files /dev/null and b/img/about/a1.png differ diff --git a/img/about/a2.jpg b/img/about/a2.jpg new file mode 100644 index 0000000..254a937 Binary files /dev/null and b/img/about/a2.jpg differ diff --git a/img/about/a3.png b/img/about/a3.png new file mode 100644 index 0000000..e22808f Binary files /dev/null and b/img/about/a3.png differ diff --git a/img/about/a4.png b/img/about/a4.png new file mode 100644 index 0000000..48e1044 Binary files /dev/null and b/img/about/a4.png differ diff --git a/img/about/a5.jpg b/img/about/a5.jpg new file mode 100644 index 0000000..a693623 Binary files /dev/null and b/img/about/a5.jpg differ diff --git a/img/about/a6.jpg b/img/about/a6.jpg new file mode 100644 index 0000000..f801426 Binary files /dev/null and b/img/about/a6.jpg differ diff --git a/img/about/banner.png b/img/about/banner.png new file mode 100644 index 0000000..3d8abb6 Binary files /dev/null and b/img/about/banner.png differ diff --git a/img/banner/b1.jpg b/img/banner/b1.jpg new file mode 100644 index 0000000..1f9f33e Binary files /dev/null and b/img/banner/b1.jpg differ diff --git a/img/banner/b10.jpg b/img/banner/b10.jpg new file mode 100644 index 0000000..e8436d3 Binary files /dev/null and b/img/banner/b10.jpg differ diff --git a/img/banner/b14.png b/img/banner/b14.png new file mode 100644 index 0000000..53fecf5 Binary files /dev/null and b/img/banner/b14.png differ diff --git a/img/banner/b16.jpg b/img/banner/b16.jpg new file mode 100644 index 0000000..6deb544 Binary files /dev/null and b/img/banner/b16.jpg differ diff --git a/img/banner/b17.jpg b/img/banner/b17.jpg new file mode 100644 index 0000000..8e8a330 Binary files /dev/null and b/img/banner/b17.jpg differ diff --git a/img/banner/b18.jpg b/img/banner/b18.jpg new file mode 100644 index 0000000..f98f205 Binary files /dev/null and b/img/banner/b18.jpg differ diff --git a/img/banner/b19.jpg b/img/banner/b19.jpg new file mode 100644 index 0000000..5ee8c1d Binary files /dev/null and b/img/banner/b19.jpg differ diff --git a/img/banner/b2.jpg b/img/banner/b2.jpg new file mode 100644 index 0000000..c435bc3 Binary files /dev/null and b/img/banner/b2.jpg differ diff --git a/img/banner/b20.jpg b/img/banner/b20.jpg new file mode 100644 index 0000000..68c4f6c Binary files /dev/null and b/img/banner/b20.jpg differ diff --git a/img/banner/b4.jpg b/img/banner/b4.jpg new file mode 100644 index 0000000..cf119e5 Binary files /dev/null and b/img/banner/b4.jpg differ diff --git a/img/banner/b7.jpg b/img/banner/b7.jpg new file mode 100644 index 0000000..5a8ecb0 Binary files /dev/null and b/img/banner/b7.jpg differ diff --git a/img/banner/f.webp b/img/banner/f.webp new file mode 100644 index 0000000..1dd0381 Binary files /dev/null and b/img/banner/f.webp differ diff --git a/img/blog/b1.jpg b/img/blog/b1.jpg new file mode 100644 index 0000000..a908f50 Binary files /dev/null and b/img/blog/b1.jpg differ diff --git a/img/blog/b2.jpg b/img/blog/b2.jpg new file mode 100644 index 0000000..1471e71 Binary files /dev/null and b/img/blog/b2.jpg differ diff --git a/img/blog/b3.jpg b/img/blog/b3.jpg new file mode 100644 index 0000000..58043a0 Binary files /dev/null and b/img/blog/b3.jpg differ diff --git a/img/blog/b4.jpg b/img/blog/b4.jpg new file mode 100644 index 0000000..12067ef Binary files /dev/null and b/img/blog/b4.jpg differ diff --git a/img/blog/b5.jpg b/img/blog/b5.jpg new file mode 100644 index 0000000..83765d5 Binary files /dev/null and b/img/blog/b5.jpg differ diff --git a/img/blog/b6.jpg b/img/blog/b6.jpg new file mode 100644 index 0000000..92f91ae Binary files /dev/null and b/img/blog/b6.jpg differ diff --git a/img/blog/b7.jpg b/img/blog/b7.jpg new file mode 100644 index 0000000..67b7c66 Binary files /dev/null and b/img/blog/b7.jpg differ diff --git a/img/button.png b/img/button.png new file mode 100644 index 0000000..8f2e73b Binary files /dev/null and b/img/button.png differ diff --git a/img/cart.png b/img/cart.png new file mode 100644 index 0000000..3dd5312 Binary files /dev/null and b/img/cart.png differ diff --git a/img/features/f1.png b/img/features/f1.png new file mode 100644 index 0000000..0a35eb0 Binary files /dev/null and b/img/features/f1.png differ diff --git a/img/features/f2.png b/img/features/f2.png new file mode 100644 index 0000000..c524bf3 Binary files /dev/null and b/img/features/f2.png differ diff --git a/img/features/f3.png b/img/features/f3.png new file mode 100644 index 0000000..8366e8d Binary files /dev/null and b/img/features/f3.png differ diff --git a/img/features/f4.png b/img/features/f4.png new file mode 100644 index 0000000..4714ed2 Binary files /dev/null and b/img/features/f4.png differ diff --git a/img/features/f5.png b/img/features/f5.png new file mode 100644 index 0000000..4876146 Binary files /dev/null and b/img/features/f5.png differ diff --git a/img/features/f6.png b/img/features/f6.png new file mode 100644 index 0000000..2525c18 Binary files /dev/null and b/img/features/f6.png differ diff --git a/img/hero4.png b/img/hero4.png new file mode 100644 index 0000000..e929356 Binary files /dev/null and b/img/hero4.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 0000000..a8b9f9d Binary files /dev/null and b/img/logo.png differ diff --git a/img/logo1.png b/img/logo1.png new file mode 100644 index 0000000..63dfed8 Binary files /dev/null and b/img/logo1.png differ diff --git a/img/pay/app.jpg b/img/pay/app.jpg new file mode 100644 index 0000000..b0c7088 Binary files /dev/null and b/img/pay/app.jpg differ diff --git a/img/pay/pay.png b/img/pay/pay.png new file mode 100644 index 0000000..393b88f Binary files /dev/null and b/img/pay/pay.png differ diff --git a/img/pay/play.jpg b/img/pay/play.jpg new file mode 100644 index 0000000..d67c1ce Binary files /dev/null and b/img/pay/play.jpg differ diff --git a/img/people/1.png b/img/people/1.png new file mode 100644 index 0000000..bd9d4e0 Binary files /dev/null and b/img/people/1.png differ diff --git a/img/people/2.png b/img/people/2.png new file mode 100644 index 0000000..c8a1686 Binary files /dev/null and b/img/people/2.png differ diff --git a/img/people/3.png b/img/people/3.png new file mode 100644 index 0000000..8f6bf24 Binary files /dev/null and b/img/people/3.png differ diff --git a/img/products/f1.jpg b/img/products/f1.jpg new file mode 100644 index 0000000..ee32aff Binary files /dev/null and b/img/products/f1.jpg differ diff --git a/img/products/f2.jpeg b/img/products/f2.jpeg new file mode 100644 index 0000000..edd2fea Binary files /dev/null and b/img/products/f2.jpeg differ diff --git a/img/products/f3.jpeg b/img/products/f3.jpeg new file mode 100644 index 0000000..608a872 Binary files /dev/null and b/img/products/f3.jpeg differ diff --git a/img/products/f4.jpeg b/img/products/f4.jpeg new file mode 100644 index 0000000..989ed29 Binary files /dev/null and b/img/products/f4.jpeg differ diff --git a/img/products/f5.jpeg b/img/products/f5.jpeg new file mode 100644 index 0000000..5a43c7b Binary files /dev/null and b/img/products/f5.jpeg differ diff --git a/img/products/f6.jpeg b/img/products/f6.jpeg new file mode 100644 index 0000000..b32ed39 Binary files /dev/null and b/img/products/f6.jpeg differ diff --git a/img/products/f7.jpeg b/img/products/f7.jpeg new file mode 100644 index 0000000..4388aa1 Binary files /dev/null and b/img/products/f7.jpeg differ diff --git a/img/products/f8.jpeg b/img/products/f8.jpeg new file mode 100644 index 0000000..0452a45 Binary files /dev/null and b/img/products/f8.jpeg differ diff --git a/img/products/n1.jpeg b/img/products/n1.jpeg new file mode 100644 index 0000000..5c02ab9 Binary files /dev/null and b/img/products/n1.jpeg differ diff --git a/img/products/n2.jpeg b/img/products/n2.jpeg new file mode 100644 index 0000000..6c69417 Binary files /dev/null and b/img/products/n2.jpeg differ diff --git a/img/products/n4.jpeg b/img/products/n4.jpeg new file mode 100644 index 0000000..76f5daa Binary files /dev/null and b/img/products/n4.jpeg differ diff --git a/img/products/n5.jpeg b/img/products/n5.jpeg new file mode 100644 index 0000000..3166f8c Binary files /dev/null and b/img/products/n5.jpeg differ diff --git a/img/products/n6.jpeg b/img/products/n6.jpeg new file mode 100644 index 0000000..cb136ce Binary files /dev/null and b/img/products/n6.jpeg differ diff --git a/img/products/n7.jpeg b/img/products/n7.jpeg new file mode 100644 index 0000000..1357896 Binary files /dev/null and b/img/products/n7.jpeg differ diff --git a/img/products/z1.jpeg b/img/products/z1.jpeg new file mode 100644 index 0000000..98a409c Binary files /dev/null and b/img/products/z1.jpeg differ diff --git a/img/products/z2.jpeg b/img/products/z2.jpeg new file mode 100644 index 0000000..df3c0e3 Binary files /dev/null and b/img/products/z2.jpeg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..c1a6231 --- /dev/null +++ b/index.html @@ -0,0 +1,393 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + +
+

Trade-Buy

+

Super Bedsheet Deals

+

On All Bedsheets

+

Get more discounts in every 2 purchase together

+ +
+ +
+
+ +
Free Shipping Over 699
+
+ +
+ +
Currently choose product and message
+
+ +
+ +
Save Money
+
+ +
+ +
Promotion
+
+ +
+ +
Happy Sell
+
+ +
+ +
Contact US FOR HELP
+
+
+ +
+

Featured Products

+

Seasons Collection New Morden Design

+
+
+ +
+ Top Brand +
Cotton #100
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #113
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #112
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #101
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #102
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #103
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #104
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #105
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #104
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #105
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #106
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #107
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #108
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #109
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #110
+
+ + + + + +
+ +
+
+
+ +
+ Top Brand +
Cotton #111
+
+ + + + + +
+ +
+
+ +
+ +
+ + + +
+
+

Information

+

For more about the latest product contact us.

+
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..8f6e03f --- /dev/null +++ b/script.js @@ -0,0 +1,9 @@ +// Script for navigation bar +const bar = document.getElementById('bar'); +const navbar = document.getElementById('navbar'); + +if (bar){ + bar.addEventListener('click', ()=> { + navbar.classList.add('active'); + }) +} diff --git a/shop.html b/shop.html new file mode 100644 index 0000000..f2c6786 --- /dev/null +++ b/shop.html @@ -0,0 +1,19 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + + \ No newline at end of file diff --git a/sproduct.html b/sproduct.html new file mode 100644 index 0000000..a43f0bc --- /dev/null +++ b/sproduct.html @@ -0,0 +1,25 @@ + + + + + + + + Tech2etc Ecommerce Tutorial + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f85a81a --- /dev/null +++ b/style.css @@ -0,0 +1,457 @@ +@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Spartan", sans-serif; +} + +.logo{ + height: 80px; +} + +html { + scroll-behavior: smooth; +} + +/* Global Styles */ + +h1 { + font-size: 50px; + line-height: 64px; + color: #222; +} + +h2 { + font-size: 46px; + line-height: 54px; + color: #222; +} + +h4 { + font-size: 20px; + color: #222; +} + +h6 { + font-weight: 700; + font-size: 12px; +} + +p { + font-size: 16px; + color: #465b52; + margin: 15px 0 20px 0; +} + +.section-p1 { + padding: 40px 80px; +} + +.section-m1 { + margin: 40px 0; +} + +body { + width: 100%; +} + +#header{ + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 80px; + background-color: #e3e6f3; + box-shadow: 0 5px 15 rgba(0,0,0,0.06); + z-index: 999; + position: sticky; + top: 0; + left: 0; +} + +#navbar{ + display: flex; + align-items: center; + justify-content: center; +} + +#navbar li{ + list-style: none; + padding: 0 20px; + position: relative; + +} + + +#navbar li a{ + text-decoration: none; + font-size: 16px; + font-weight: 600; + color: #1a1a1a; + +} + +#navbar li a:hover, +#navbar li a.active{ + color: #088178; + +} + +#navbar li a.active::after, +#navbar li a:hover::after{ + content: ""; + width: 30%; + height: 3px; + background-color: #088178; + position: absolute; + bottom: -4px; + left: 20px; +} + + +#mobile{ +display: none; +align-items: center; +} + + +#hero{ + background-image: url("img/aa.webp"); + height: 80vh; + background-size: cover; + background-position: top 25% right 0 ; +padding: 0 80px; +display: flex; +flex-direction: column; +align-items: flex-start; +justify-content: center; +} + +#hero h4{ + padding-bottom: 15px; +} + +#hero h1{ + color: #088178; +} + +#hero button{ + background-image: url("img/button.png"); + background-color: transparent; + color: blue; + border: 0; + padding: 14px 80px 14px 65px; + font-weight: 800; + cursor: pointer; + font-size: 25px; +} + +#hero p{ + color: #1a1a1a; + font-weight: bolder; + font-size: 30px; +} + +#feature{ + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +#feature .fe-box{ + width: 180px; + text-align: center; + padding: 25px 15px; + box-shadow: 20px 20px 34px regba(0,0,0,0.03); + border: 1px solid #cce7d0; + border-radius: 4px; + margin: 15px 0; +} + +#feature .fe-box h6{ + padding: 9px 8px 6px 8px; + line-height: 1; + border-radius: 4px; + color: #088178; + background-color: #fddde4; +} + +#feature .fe-box img{ + width: 100%; + margin-bottom: 10px; + +} + +#product1{ + text-align: center; + +} + +#product1 .pro-container{ + display: flex; + justify-content: space-between; + padding-top: 20px; + flex-wrap: wrap; +} + +#product1 .pro{ + width: 23%; + min-width: 250px; + padding: 10px 12px; + border: 1px solid #cce7d0; + cursor: pointer; + box-shadow: 20px 20px 30px rgba(0,0,0,0.02); + margin: 15px 0; + transition: ; +} + +#product1 .pro img{ + width: 100%; + border-radius: 20px; +} + +#product1 .pro .des{ + text-align: start; + padding: 10px 0; +} + +#product1 .pro .des span{ + color: #606063; + font-size: 12px; + +} +#product1 .pro .des h5{ + padding-top: 7px; + color: black; + font-size: 14px; + +} + +#product1 .pro .des i{ + font-size: 12px; + color: rgb(243,181,25); +} + +#banner{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-image: url("img/banner/f.webp"); + width: 100%; + height: 40vh; + background-size: cover; + background-position: center; +} + +#banner h4{ + color: #1a1a1a; + font-size: 16px; +} + +#banner h2{ + color: #465b52; + font-size: 30px; + padding: 10px 0; +} + +#banner h2 span{ + color: red; +} + +#newsletter{ + display: flex; + justify-content: space-between; + flex-wrap: wrap; + align-items: center; + background-image: url("img/banner/b14.png"); +background-repeat: no-repeat; +background-position: 20% 30%; +background-color: #041e42; +} + +#newsletter h4{ + font-size: 22px; + font-weight: 700; + color: #fff; +} + +#newsletter p{ + font-size: 14px; + font-weight: 600; + color: #088178; + +} + + + +#img{ + height: 60px; +} + + +footer{ +display: flex; +flex-wrap: wrap; +justify-content: space-between; +} + +footer .col{ + display: flex; + flex-direction: column; + align-items: flex-start; + margin-bottom: 20px; + +} + +footer .logo{ + margin-bottom: 30px; + +} + +footer h4{ + font-size: 14px; + padding-bottom: 20px; +} + + +footer p{ + font-size: 13px; + margin: 0 0 8px 0; + +} + + +footer a{ + font-size: 13px; + text-decoration: none; + color: #222; + margin: 0 0 8px 0; + +} + +footer .follow{ + color: #465b52; + padding-right: 4px; + cursor: pointer; +} + +footer .install .row{ +border: 1px solid #088178; +border-radius: 6px; +} + +footer .install img{ + margin: 10px 0 15px 0; +} + +footer .copyright{ + width: 100%; + text-align: center; +} + + +@media (max-width:799px) { + .section-p1{ + padding: 40px 40px; + } + #navbar{ + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: fixed; + top: 0; + right: -300px; + height: 100vh; + width: 300px; + background-color: #e3e6f3; + box-shadow: 0 40px 60px rgba(0,0,0,0.1); + padding: 80px 0 0 10px; + transition: 0.3s; + + } + + #navbar .active{ + right: 0px; + } + + #navbar li{ + margin-bottom: 25px; + } + + #mobile{ + display: flex; + align-items: center; + } + + #mobile i{ + color: #1a1a1a; + font-size: 24px; + padding-left: 20px; + } + + #hero{ + + height: 70vh; + + padding: 0 80px; + background-position: top 30% right 30%; + + } + + #feature { + justify-content: center; + + } + + +#feature .fe-box{ + margin: 15px 15px; + +} + +#product1 .pro-container{ + justify-content: center; + +} + +#product1 .pro{ + margin: 15px ; + +} + +} + +@media (max-width:477px) { + #header{ + padding: 10px 30px; + } + #hero{ + padding: 0 20px; + background-position: 55%; + } + h2{ + font-size: 32px; + } + h1{ + font-size: 38px; + } + + #feature{ + justify-content: center; + } + + #feature .fe-box{ + width: 155px; + margin: 0 0 15px 0; + } + + #product1 .pro{ + width: 100%; + } + + +} \ No newline at end of file