diff --git a/index.html b/index.html new file mode 100644 index 0000000..0724034 --- /dev/null +++ b/index.html @@ -0,0 +1,497 @@ + + + + + + + Ecommerce website + + + + + + + +
+

Trade in offers

+

Super value deals

+

On all products

+

Save more with coupons & up to 70% off!

+ +
+ +
+
+ +
Free Shipping
+ +
+
+ +
Online Order
+ +
+
+ +
Save Money
+ +
+
+ +
Promotions
+ +
+
+ +
Happy Sell
+ +
+
+ +
24/7 Support
+ +
+
+ +
+

Featured Products

+

Summer Collection New Modern Design

+
+ +
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+ +
+ +
+ + + + +
+

New Arrivals

+

Summer Collection New Modern Design

+
+ +
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+
+ +
+ adidas +
Cartoon Astronaut T-Shirts
+
+ + + + + + +
+

$78

+
+
+
+ +
+ +
+ +
+ +
+ + +
+ +
+ + + +
+ +
+
+

Subscribe To Our Newsletter

+

And never miss latest Updates and Special Offers

+
+
+ + + +
+
+ + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..64b9c30 --- /dev/null +++ b/script.js @@ -0,0 +1,14 @@ +const bar = document.getElementById('bar'); +const nav = document.getElementById('navbar'); +const close = document.getElementById('close'); + +if (bar) { + bar.addEventListener('click', () => { + nav.classList.add('active'); + }) +} +if (close) { + close.addEventListener('click', () => { + nav.classList.remove('active'); + }) +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..07815a7 --- /dev/null +++ b/style.css @@ -0,0 +1,719 @@ +@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;500;600;700;800;900&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Spartan', sans-serif; +} + +#header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 80px; + background: #E3E6F3; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); + z-index: 999; + position: sticky; + top: 0; + left: 0; + right: 0; +} + +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%; +} + +#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: black; + transition: 0.3s; + font-size: 1rem; + +} + +#navbar li a:hover, +#navbar li a.active { + color: lightseagreen; + +} + + +#navbar li a.active::after, +#navbar li a:hover::after { + content: " "; + width: 30%; + height: 2px; + background: lightseagreen; + position: absolute; + bottom: -4px; + left: 20px; +} + +#mobile { + display: none; + align-items: center; +} + +#close { + display: none; +} + +#hero { + background-image: url("img/hero4.png"); + background-position: top 25% right 0; + background-size: cover; + height: 90vh; + width: 100%; + + padding: 0 80px; + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + +} + +#hero h4 { + padding-bottom: 15px; +} + +#hero h1 { + + color: #088176; +} + + + +#hero button { + background-image: url("img/button.png"); + background-color: transparent; + color: #088178; + border: 0; + padding: 14px 80px 14px 65px; + background-repeat: no-repeat; + cursor: pointer; + font-weight: 700; + font-size: 15px; +} + +#feature .fe-box { + width: 180px; + padding: 25px 15px; + text-align: center; + box-shadow: 20px 20px 34px rgbe(0, 0, 0, 0.03); + border: 1px solid #cce7d0; + border-radius: 4px; + margin: 15px 0; +} + +#feature .fe-box:hover { + box-shadow: 10px 10px 54px rgbe(70, 62, 221.0.1); + border: 3px solid #cce7d0; + transition: 0.2s ease-in-out; +} + +#feature .fe-box img { + width: 100%; + margin-bottom: 10px; + +} + +#feature .fe-box h6 { + display: inline-block; + padding: 9px 8px 6px 8px; + line-height: 1; + border-radius: 4px; + color: #088178; + background-color: #fddde4; +} + +#feature .fe-box:nth-child(2) h6 { + background-color: #cdebbc; +} + +#feature .fe-box:nth-child(3) h6 { + background-color: #d1e8f2; +} + +#feature .fe-box:nth-child(4) h6 { + background-color: #cdd4f8; +} + +#feature .fe-box:nth-child(5) h6 { + background-color: #f6dbf6; +} + +#feature .fe-box:nth-child(6) h6 { + background-color: #fff2e5; +} + +#feature { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +#product1 { + text-align: center; +} + +#product1 .pro { + width: 23%; + min-width: 250px; + padding: 10px 12px; + border: 1px solid #cce7d0; + border-radius: 25px; + cursor: pointer; + box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02); + margin: 15px 0; + transition: 0.2s ease; + position: relative; +} + +#product1 .pro:hover { + box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06); +} + +#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: 7px; + color: 1a1a1a; + font-size: 14px; +} + +#product1 .pro .des i { + font-size: 12px; + color: rgb(243, 181, 25); +} + +#product1 .pro .des h4 { + padding-top: 7px; + font-size: 15px; + font-weight: 700; + color: #088178; + +} + +#product1 .pro .cart { + width: 40px; + height: 40px; + line-height: 40px; + border-radius: 50px; + background-color: #e8ffea; + font-weight: 500; + color: #088178; + border: 1px solid #cce7d0; + position: absolute; + bottom: 20px; + right: 10px; +} + +#product1 .pro-container { + display: flex; + justify-content: space-between; + padding-top: 20px; + flex-wrap: wrap; +} + +#banner { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + background-image: url("img/banner/b2.jpg"); + width: 100%; + height: 40vh; + background-size: cover; + background-position: center; +} + +#banner h2 { + color: #fff; + font-size: 30px; + padding: 10px 0; + +} + +#banner h4 { + color: #fff; + font-size: 30px; + +} + +#banner h2 span { + color: #d60909; +} + +button.normal { + font-size: 14px; + font-weight: 600; + padding: 15px 30px; + color: #000; + background-color: #fff; + border-radius: 4px; + cursor: pointer; + border: none; + outline: none; + transition: 0.2s; +} + +#banner button:hover { + background: #088178; + color: #fff; +} + +#sm-banner { + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +#sm-banner .banner-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-image: url("img/banner/b17.jpg"); + min-width: 520px; + height: 50vh; + background-size: cover; + background-position: center; + padding: 30px; + margin-bottom: 20px; + +} + +#sm-banner h2 { + color: #f9f5f5; + font-size: 28px; + font-weight: 800; +} + +#sm-banner h4 { + color: #f6f3f3; + font-size: 14px; + font-weight: 500; + padding-bottom: 15px; +} + +button.white { + font-size: 13px; + font-weight: 600; + padding: 11px 18px; + color: #fff; + background-color: transparent; + border-radius: 4px; + cursor: pointer; + border: 1px solid #fff; + outline: none; + transition: 0.2s; +} + +#sm-banner span { + color: #fff; + font-size: 14px; + font-weight: 500; + padding-bottom: 15px; +} + +#sm-banner .banner-box:hover button { + background: #088178; + border: 1px solid #088178; + +} + +#sm-banner .banner-box2 { + background-image: url("img/banner/b10.jpg"); + +} + +#banner3 .banner-box { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + background-image: url("img/banner/b7.jpg"); + min-width: 30%; + height: 30vh; + background-size: cover; + background-position: center; + padding: 20px; + margin-bottom: 20px; +} + +#banner3 { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 80px; +} + +#banner3 .banner-box2 { + background-image: url("img/banner/b4.jpg"); +} + +#banner3 .banner-box3 { + background-image: url("img/banner/b18.jpg"); +} + +#banner3 h2 { + color: #fff; + font-weight: 900; + font-size: 22px; +} + +#banner3 h3 { + color: #f20707; + font-weight: 800; + font-size: 15px; +} + +#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-size: cover; + background-position: 20% 30%; + background-color: #041e42; +} + +#newsletter h4 { + color: #fff; + font-weight: 700; + font-size: 22px; +} + +#newsletter p { + color: #818ea0; + font-weight: 600; + font-size: 14px; +} + +#newsletter p span { + color: #e57811; +} + +#newsletter input { + height: 3.125rem; + padding: 0 1.25em; + font-size: 14px; + width: 100%; + border: 1px solid transparent; + border-radius: 4px; + outline: none; + display: flex; + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +#newsletter button { + background-color: #088178; + color: #fff; + white-space: nowrap; + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +#newsletter .form { + display: flex; + width: 40%; +} + +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-bottom: 10px; +} + +footer .follow { + margin-top: 20px; +} + +footer .follow i { + color: #465b52; + padding-right: 4px; + cursor: pointer; +} + +footer .install .row img { + border: 1px solid #088178; + border-radius: 6px; +} + +footer .install img { + margin: 10px 0 15px 0; +} + +footer .follow i:hover, +footer a:hover { + color: #088178; +} + +footer .copyright { + width: 100%; + text-align: center; +} + +@media (max-width:799px) { + #navbar { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: fixed; + top: 0; + right: -3000px; + 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; + } + + #close { + display: initial; + position: absolute; + top: 30px; + left: 30px; + color: #222; + font-size: 24px; + } + + #lg-bag { + display: none; + } + + #hero { + padding: 0 80px; + height: 70vh; + 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; + } + + #banner { + height: 20vh; + } + + #sm-banner .banner-box { + min-width: 100%; + height: 30vh; + } + + #banner3 { + padding: 0 40px; + } + + #banner3 .banner-box { + width: 28%; + } + + #newsletter .form { + width: 70%; + } +} + +@media(max-width:477px) { + .section-p1 { + padding: 20px; + } + + #header { + padding: 10px 30px; + + } + + h1 { + font-size: 38px; + } + + h2 { + font-size: 32px; + } + + #hero { + padding: 0 20px; + background-position: 55%; + } + + #feature { + justify-content: space-between; + } + + #feature .fe-box { + width: 155px; + margin: 0 0 15px 0; + } + + #product1 .pro { + width: 100%; + } + + #banner { + height: 40vh; + } + + #sm-banner .banner-box { + height: 40vh; + } + + #sm-banner .banner-box2 { + margin-top: 20px; + } + + #banner3 { + padding: 0 20px; + } + + #banner3 .banner-box { + width: 100%; + + } + + #newsletter { + padding: 40px 20px; + } + + #newsletter .form { + width: 100%; + } + + footer .copyright { + text-align: start; + } +} \ No newline at end of file