diff --git a/README.md b/README.md index 615552e..8b13789 100644 --- a/README.md +++ b/README.md @@ -1,33 +1 @@ -# Build-and-Deploy-Ecommerce-Website-With-HTML-CSS-JavaScript -[Build-and-Deploy-Ecommerce-Website-With-HTML-CSS-JavaScript](https://youtu.be/P8YuWEkTeuE/) - -## About this course -LEARN HOW TO BUILD AND DEPLOY FULL RESPONSIVE ECOMMERCE WEBSITE USING HTML CSS & JAVASCRIPT. This is a free HTML CSS Course. And in this course we will learn how to build and deploy a full multipage ecommerce website completely from scratch step by step. Will Create from responsive navbar using html CSS JavaScript to responsive footer in one video. - -## Why This Course? -- Responsive Ecommerce Website Tutorial Using HTML CSS & JavaScript. -- Completely For Beginners. -- Multipage Ecommerce Website Project. -- Best Beginner Friendly Free Course On YouTube. -- Learn How to build amazing professional and responsive websites. -- Learn the fundamentals of web design. -- Modern CSS, including flexbox and CSS Grid for layout. -- Modern CSS techniques to create stunning designs and effects. -- How to use common components and layout patterns for professional website design and development. -- Advanced responsive design using media queries. -- And Many More. - -## Sections -- Part1: Responsive Home Page Design. -- Part2: Shop Page & Single Product Page. -- Part3: Blog Page. -- Part4: About Page. -- Part5: Contact Us. -- Part6: Ecommerce Shopping Cart. - -Here you will find all the images I'm using to create this responsive ecommerce website. In future image folder can update. - -Get the full source code from [here1](https://www.buymeacoffee.com/tech2etc/e/50932). - -Get the full source code from [here2](https://ko-fi.com/s/06e4db9e09). diff --git a/about.html b/about.html index f4a338b..650f4ad 100644 --- a/about.html +++ b/about.html @@ -1,19 +1,202 @@ + + + + + TShopping Web site + - - - - - Tech2etc Ecommerce Tutorial - + + - - + + + +
+

#KnowsUs

+

+ Available in a range of colors, these cotton zip-up hoodies are a go-to + for lounging at home, running errands, or pairing with your +

+
+ +
+ +
+

Who We Are?

+ +

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. In, quidem + autem fugit, corporis nemo a maiores aspernatur ipsum praesentium + neque saepe eaque impedit libero temporibus consequuntur, accusamus + totam dolorum perspiciatis. Lorem ipsum dolor sit amet consectetur, + adipisicing elit. Voluptas tenetur nostrum officia minima, nemo + cupiditate explicabo corporis repudiandae ab facilis praesentium + architecto illo magni corrupti iusto ratione, laudantium ipsum + expedita? +

+ + + Create stunning images with as much or as title contro as you like + thanks to a choice of Basic and Creative modes. + + +
+
+ + + Create stunning images with as much or as title contro as you like + thanks to a choice of Basic and Creative modes + +
+
+ + +
+ +

Download Our App

+
+ +
+
+ +
+
+ +
Free Shipping
+
+
+ +
Online Order
+
+
+ +
Save Money
+
+
+ +
Promotions
+
+
+ +
Happy Sell
+
+
+ +
Support
+
+
+ + + +
+
+

Sign Up For Newsletters

+

+ Get E-mail updates about our latest shop and + special offers +

+
+ +
+ + +
+
+ + + + + + + diff --git a/blog.html b/blog.html index f4a338b..585b3f7 100644 --- a/blog.html +++ b/blog.html @@ -1,19 +1,214 @@ + + + + + TShopping Web site + - - - - - Tech2etc Ecommerce Tutorial - + + - - + + + +
+

#readmore

+

Read all case studies about our products

+
+ +
+
+
+ +
+
+

The Cotton Zip-Up Hoodies

+

+ Sure! Here's a description of The Cotton Zip-Up Hoodies: The Cotton + Zip-Up Hoodies are a perfect blend of comfort and style, ideal for + any casual wardrobe. Made from soft, breathable cotton, these + hoodies are designed to provide warmth without feeling bulky. The + zip-up front allows for easy layering and adjustable comfort, making + it versatile enough to wear in various weather conditions. +

+ + CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

The Cotton Zip-Up Hoodies

+

+ Sure! Here's a description of The Cotton Zip-Up Hoodies: The Cotton + Zip-Up Hoodies are a perfect blend of comfort and style, ideal for + any casual wardrobe. Made from soft, breathable cotton, these + hoodies are designed to provide warmth without feeling bulky. The + zip-up front allows for easy layering and adjustable comfort, making + it versatile enough to wear in various weather conditions. +

+ + CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

The Cotton Zip-Up Hoodies

+

+ Sure! Here's a description of The Cotton Zip-Up Hoodies: The Cotton + Zip-Up Hoodies are a perfect blend of comfort and style, ideal for + any casual wardrobe. Made from soft, breathable cotton, these + hoodies are designed to provide warmth without feeling bulky. The + zip-up front allows for easy layering and adjustable comfort, making + it versatile enough to wear in various weather conditions. +

+ + CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

The Cotton Zip-Up Hoodies

+

+ Sure! Here's a description of The Cotton Zip-Up Hoodies: The Cotton + Zip-Up Hoodies are a perfect blend of comfort and style, ideal for + any casual wardrobe. Made from soft, breathable cotton, these + hoodies are designed to provide warmth without feeling bulky. The + zip-up front allows for easy layering and adjustable comfort, making + it versatile enough to wear in various weather conditions. +

+ + CONTINUE READING +
+

13/01

+
+
+ +
+ 1 + 2 + +
+ +
+
+

Sign Up For Newsletters

+

+ Get E-mail updates about our latest shop and + special offers +

+
+ +
+ + +
+
+ + + + + + diff --git a/cart.html b/cart.html index eb5659c..dd62b0e 100644 --- a/cart.html +++ b/cart.html @@ -1,22 +1,223 @@ + + + + + TShopping Web site + - - - - - Document + + - + + + +
+

#let's_talk

+

LEAVE A MESSAGE, We love to hear from you!

+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RemoveImageProdcutPriceQuantitySubtotal
+ + + + Cartoon Astronaut T-Shirts$118.19 + $118.19
+ + + + Cartoon Astronaut T-Shirts$118.19 + $118.19
+ + + + Cartoon Astronaut T-Shirts$118.19 + $118.19
+
+ + +
+
+

Apply Coupon

+
+ + +
+
+ +
+

Cart Total

+ + + + + + + + + + + + + + + + + + + + +
Cart Subtotal$ 335
ShippingFree
Shipping$ 335
Total$ 335
+ + +
+
+ + + + + + +> diff --git a/contact.html b/contact.html index eb5659c..ac10c9c 100644 --- a/contact.html +++ b/contact.html @@ -1,22 +1,219 @@ + + + + + TShopping Web site + - - - - - Document + + - + + + +
+

#let's_talk

+

LEAVE A MESSAGE, We love to hear from you!

+
+ +
+
+ GET IN TOUCH +

Vist one of our agency locations or contact us today

+

Head Office

+
+
  • + +

    95/1,Wadugedara Stree, Kadugannawa,Srilanka

    +
    • +
  • + +

    contact@example.com

    +
    • +
  • + +

    +94 123 345 784

    +
    • +
  • + +

    Monday to Saturday: 9.00am to 16.pm

    +
    • +
    +
    +
    + +
    +
    + +
    +
    + LEAVE A MESSAGE +

    We love to hear from you

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

    + John DoeSenior Marketing Manager + +
    Phone: +000 123 00 34
    + Email: contact@example.com +

    +
    +
    + +

    + John DoeSenior Marketing Manager + +
    Phone: +000 123 00 34
    + Email: contact@example.com +

    +
    +
    + +

    + Chamalka Sadamali Senior Marketing Manager + +
    Phone: +000 123 00 34
    + Email: contact@example.com +

    +
    +
    + +

    + JMihi Maheshika Senior Marketing Manager + +
    Phone: +000 123 00 34
    + Email: contact@example.com +

    +
    +
    +
    + +
    +
    +

    Sign Up For Newsletters

    +

    + Get E-mail updates about our latest shop and + special offers +

    +
    + +
    + + +
    +
    + + + + + + diff --git a/img/1.png b/img/1.png new file mode 100644 index 0000000..1b88dc0 Binary files /dev/null and b/img/1.png differ diff --git a/index.html b/index.html index 7c355ef..5651648 100644 --- a/index.html +++ b/index.html @@ -1,20 +1,587 @@ + + + + + TShopping Web site + - - - - - Tech2etc Ecommerce Tutorial - + + - - + + + +
    +

    Trade-in-offer

    +

    Super value deals

    +

    On all Products

    +

    Save more with coupons & up to 70% off!

    + +
    + +
    +
    + +
    Free Shipping
    +
    +
    + +
    Online Order
    +
    +
    + +
    Save Money
    +
    +
    + +
    Promotions
    +
    +
    + +
    Happy Sell
    +
    +
    + +
    Support
    +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Mordern Design

    +
    +
    + + +
    + adidas +
    Cartoon Stronaut T-shirts
    +
    + + + + + + + + +
    +

    $78

    +
    + +
    + +
    + + +
    + Nike +
    Space Explorer T-shirts
    +
    + + + + + + + + +
    +

    $75

    +
    + +
    + +
    + + +
    + Puma +
    Cosmic Dreams T-shirts
    +
    + + + + + + + + +
    +

    $80

    +
    + +
    + +
    + + +
    + Under Armour +
    Galactic Adventures T-shirts
    +
    + + + + + + + + +
    +

    $70

    +
    + +
    +
    + + +
    + Astronaut Journey +
    Reebok
    +
    + + + + + + + + +
    +

    $63

    +
    + +
    +
    + + +
    + Champion +
    Intergalactic Explorer
    +
    + + + + + + + + +
    +

    $50

    +
    + +
    +
    + + +
    + Banana Republic +
    Chinos
    +
    + + + + + + + + +
    +

    $48

    +
    + +
    +
    + + +
    + Free People +
    Maxi Skirt
    +
    + + + + + + + + +
    +

    $28

    +
    + +
    +
    +
    + + + +
    +

    New Arrivals

    +

    Summer Collection New Mordern Design

    +
    +
    + + +
    + adidas +
    Cartoon Stronaut T-shirts
    +
    + + + + + + + + +
    +

    $78

    +
    + +
    + +
    + + +
    + Nike +
    Space Explorer T-shirts
    +
    + + + + + + + + +
    +

    $75

    +
    + +
    + +
    + + +
    + Puma +
    Cosmic Dreams T-shirts
    +
    + + + + + + + + +
    +

    $80

    +
    + +
    + +
    + + +
    + Under Armour +
    Galactic Adventures T-shirts
    +
    + + + + + + + + +
    +

    $70

    +
    + +
    +
    + + +
    + Astronaut Journey +
    Reebok
    +
    + + + + + + + + +
    +

    $63

    +
    + +
    +
    + + +
    + Champion +
    Intergalactic Explorer
    +
    + + + + + + + + +
    +

    $50

    +
    + +
    +
    + + +
    + Banana Republic +
    Chinos
    +
    + + + + + + + + +
    +

    $48

    +
    + +
    +
    + + +
    + Free People +
    Maxi Skirt
    +
    + + + + + + + + +
    +

    $28

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

    Sign Up For Newsletters

    +

    + Get E-mail updates about our latest shop and + special offers +

    +
    + +
    + + +
    +
    + + + + + diff --git a/script.js b/script.js index f4d1d8f..96a5f5f 100644 --- a/script.js +++ b/script.js @@ -1 +1,17 @@ // Script for navigation bar + +const bar = document.getElementById("bar"); +const close = document.getElementById("close"); +const nav = document.getElementById("navbar"); + +if (bar) { + bar.addEventListener("click", () => { + nav.classList.add("active"); + }); +} + +if (close) { + close.addEventListener("click", () => { + nav.classList.remove("active"); + }); +} diff --git a/shop.html b/shop.html index f4a338b..dd1c678 100644 --- a/shop.html +++ b/shop.html @@ -1,19 +1,516 @@ + + + + + TShopping Web site + - - - - - Tech2etc Ecommerce Tutorial - + + - - + + + +
    +

    #Stayhome

    +

    Save more with coupons & up to 70% off!

    +
    + +
    +
    +
    + + +
    + adidas +
    Cartoon Stronaut T-shirts
    +
    + + + + + + + + +
    +

    $78

    +
    + +
    + +
    + + +
    + Nike +
    Space Explorer T-shirts
    +
    + + + + + + + + +
    +

    $75

    +
    + +
    + +
    + + +
    + Puma +
    Cosmic Dreams T-shirts
    +
    + + + + + + + + +
    +

    $80

    +
    + +
    + +
    + + +
    + Under Armour +
    Galactic Adventures T-shirts
    +
    + + + + + + + + +
    +

    $70

    +
    + +
    +
    + + +
    + Astronaut Journey +
    Reebok
    +
    + + + + + + + + +
    +

    $63

    +
    + +
    +
    + + +
    + Champion +
    Intergalactic Explorer
    +
    + + + + + + + + +
    +

    $50

    +
    + +
    +
    + + +
    + Banana Republic +
    Chinos
    +
    + + + + + + + + +
    +

    $48

    +
    + +
    +
    + + +
    + Free People +
    Maxi Skirt
    +
    + + + + + + + + +
    +

    $28

    +
    + +
    + +
    + + +
    + adidas +
    Cartoon Stronaut T-shirts
    +
    + + + + + + + + +
    +

    $78

    +
    + +
    + +
    + + +
    + Nike +
    Space Explorer T-shirts
    +
    + + + + + + + + +
    +

    $75

    +
    + +
    + +
    + + +
    + Puma +
    Cosmic Dreams T-shirts
    +
    + + + + + + + + +
    +

    $80

    +
    + +
    + +
    + + +
    + Under Armour +
    Galactic Adventures T-shirts
    +
    + + + + + + + + +
    +

    $70

    +
    + +
    +
    + + +
    + Astronaut Journey +
    Reebok
    +
    + + + + + + + + +
    +

    $63

    +
    + +
    +
    + + +
    + Champion +
    Intergalactic Explorer
    +
    + + + + + + + + +
    +

    $50

    +
    + +
    +
    + + +
    + Banana Republic +
    Chinos
    +
    + + + + + + + + +
    +

    $48

    +
    + +
    +
    + + +
    + Free People +
    Maxi Skirt
    +
    + + + + + + + + +
    +

    $28

    +
    + +
    +
    +
    + + +
    + 1 + 2 + +
    + +
    +
    +

    Sign Up For Newsletters

    +

    + Get E-mail updates about our latest shop and + special offers +

    +
    + +
    + + +
    +
    + + + + + + diff --git a/sproduct.html b/sproduct.html index 6a7b3a8..e0a246a 100644 --- a/sproduct.html +++ b/sproduct.html @@ -1,25 +1,317 @@ + + + + + TShopping Web site + - - - - - Tech2etc Ecommerce Tutorial - + + - - + + + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
    +
    Home
    +

    Men's Fashion T Shirt

    +

    $139.00

    + + + + +

    Product Details

    + + The e-commerce website aims to provide a seamless shopping experience + for users by offering a wide range of products, easy navigation, + secure transactions, and efficient order management. The website will + cater to both desktop and mobile users, ensuring a responsive and + user-friendly design. + +
    +
    + +
    +

    Feature Products

    +

    Summer Collection New Mordern Design

    +
    +
    + + +
    + adidas +
    Cartoon Stronaut T-shirts
    +
    + + + + + + + + +
    +

    $78

    +
    + +
    + +
    + + +
    + Nike +
    Space Explorer T-shirts
    +
    + + + + + + + + +
    +

    $75

    +
    + +
    + +
    + + +
    + Puma +
    Cosmic Dreams T-shirts
    +
    + + + + + + + + +
    +

    $80

    +
    + +
    + +
    + + +
    + Under Armour +
    Galactic Adventures T-shirts
    +
    + + + + + + + + +
    +

    $70

    +
    + +
    + + + + + +
    + + + + + + + + + + + diff --git a/style.css b/style.css index 356bf0a..5ceec81 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,10 @@ @import url("https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"); + + +/* body { + overflow-x: hidden; +} */ + * { margin: 0; padding: 0; @@ -48,6 +54,1637 @@ p { margin: 40px 0; } +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; + +} + + +button.white { + font-size: 13px; + font-weight: 600; + padding: 11px 18px; + color: #fff; + background-color: transparent; + cursor: pointer; + border: 1px solid #fff; + outline: none; + transition: 0.2s; + +} + body { width: 100%; } + + +/* header section */ + +#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; + /* not moving the header */ + 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; + transition: 0.3s ease; + +} + +#navbar li a:hover, +#navbar li a.active { + color: #088178; + +} + + +#navbar li a.active::after, +#navbar li a:hover::after { + content: ""; + width: 30%; + height: 2px; + background: #088178; + position: absolute; + bottom: -4px; + left: 20px; +} + +#mobile { + display: none; + align-items: center; +} + + +#close { + + display: none; +} + + +/* Home page */ + + +#hero { + background-image: url("img/hero4.png"); + height: 90vh; + width: 100%; + 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: #088178; + border: 0; + padding: 14px 80px 14px 65px; + background-repeat: no-repeat; + cursor: pointer; + font-weight: 700; + font-size: 15px; + + +} + + +#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 rgba(0, 0, 0, 0.03); + border: 1px solid #cce7d0; + border-radius: 4px; + margin: 15px 0; +} + +#feature .fe-box:hover { + + box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.01); + + +} + +#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: #f6dbf6; +} + + +#feature .fe-box:nth-child(3) h6 { + background-color: #cdebbc; +} + +#feature .fe-box:nth-child(4) h6 { + background-color: #d1e8f2; +} + + +#feature .fe-box:nth-child(5) h6 { + background-color: #cdd4f8; +} + +#feature .fe-box:nth-child(6) h6 { + background-color: #fff2e5; +} + +/* product sections */ + +#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; + 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-top: 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: #e8f6ea; + font-weight: 500; + color: #088178; + border: 1px solid #cce7d0; + position: absolute; + bottom: 20px; + right: 10px; +} + +#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 h4 { + color: #fff; + font-size: 16px; +} + + +#banner h2 { + color: #fff; + font-size: 30px; + padding: 10px 0; + +} + + +#banner h2 span { + color: #ef3636; + + + +} + + +#banner button:hover { + background-color: #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: 540px; + height: 40vh; + background-size: cover; + background-position: center; + padding: 30px; + color: white; + /* justify-content: space-between; */ + + +} + + + +#sm-banner h4 { + + color: #fff; + font-size: 20px; + font-weight: 300; + + +} + +#sm-banner h2 { + + color: #fff; + font-size: 28px; + font-weight: 800; + + +} + + +#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 { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 0 80px; +} + +#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; + /* justify-content: space-between; */ + margin-bottom: 20px; + + + +} + +#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: #ec544e; + 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-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: #818ea0; + +} + +#newsletter p span { + + color: #ffbd27; + +} + +#newsletter .form { + + display: flex; + width: 40%; + +} + +#newsletter input { + height: 3.125rem; + padding: 0 1.25em; + font-size: 14px; + width: 100%; + border: 1px solid transparent; + border-radius: 4px; + outline: none; + 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; + +} + +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; +} + +#page-header { + + background-image: url("img/banner/b1.jpg"); + width: 100%; + height: 40vh; + background-size: cover; + display: flex; + justify-content: center; + text-align: center; + flex-direction: column; + padding: 14px; + + +} + + +#page-header h2, +#page-header p { + + color: #fff; + +} + + +#pagination { + + + text-align: center; +} + + +#pagination a { + text-decoration: none; + background-color: #088178; + padding: 15px 20px; + border-radius: 4px; + color: #fff; + font-weight: 600; +} + + +#pagination a i { + font-size: 16px; + font-weight: 600; +} + + + +#prodetails { + + display: flex; + margin-top: 20px; + +} + + +#prodetails .single-pro-image { + width: 40%; + margin-right: 50px; + +} + + +.small-img-group { + display: flex; + justify-content: space-between; +} + + +.small-img-col { + + flex-basis: 24%; + cursor: pointer; + + +} + + + +#prodetails .single-pro-details { + + width: 50%; + padding-top: 30px; + + +} + + +#prodetails .single-pro-details h4 { + + padding: 40px 0 20px 0; + + +} + + + + +#prodetails .single-pro-details h2 { + + font-size: 26px; + + +} + + + +#prodetails .single-pro-details select { + + display: block; + padding: 5px 10px; + margin-bottom: 10px; + + +} + + +#prodetails .single-pro-details input { + + + width: 50px; + height: 47px; + padding-left: 10px; + font-size: 16px; + margin-right: 10px; + +} + + +#prodetails .single-pro-details:focus { + + outline: none; + +} + + +#prodetails .single-pro-details button { + + background: #088178; + color: #fff; +} + +#prodetails .single-pro-details span { + + line-height: 25px; +} + + + +/* blog page */ + + +#page-header.blog-header { + background-image: url("img/banner/b19.jpg"); + + +} + + +#blog { + padding: 150px 150px 0 150px; + +} + +#blog .blog-box { + + display: flex; + align-items: center; + width: 100%; + position: relative; + padding-bottom: 90px; +} + + + +#blog .blog-img { + + width: 50%; + margin-right: 40px; + +} + +#blog img { + width: 100%; + height: 300px; + object-fit: cover; +} + + +#blog .blog-details { + + width: 50%; + +} + + + +#blog .blog-details a { + + text-decoration: none; + font-size: 11px; + color: #000; + font-weight: 700; + position: relative; + transition: 0.3s; + +} + + +#blog .blog-details a::after { + content: ""; + width: 50px; + height: 1px; + background-color: #000; + position: absolute; + top: 4px; + right: -60px; + + +} + + +#blog .blog-details a:hover { + color: #088178; +} + + +#blog .blog-details a:hover::after { + background-color: #088178; +} + + +#blog .blog-box h1 { + position: absolute; + top: -40px; + left: 0; + font-size: 70px; + font-weight: 700; + color: #c9cbce; + z-index: -9; +} + + +/* about page */ + + +#page-header.about-header { + + background-image: url("img/about/banner.png"); + + +} + + +#about-head { + + display: flex; + align-items: center; +} + +#about-head img { + + width: 50%; + height: auto; + + +} + + +#about-head div { + + padding-left: 40px; +} + + +#about-app { + + text-align: center; + +} + + + +#about-app .video { + + width: 70%; + height: 100%; + margin: 30px auto 0 auto; +} + + +#about-app .video video { + + width: 100%; + height: 100%; + border-radius: 20px; +} + + +/* contact page */ + +#contact-details { + + display: flex; + align-items: center; + justify-content: space-between; + +} + + +#contact-details .details { + + width: 40%; + + +} + + +#contact-details .details span, +#form-details form span { + + font-size: 12px; +} + + +#contact-details .details h2, +#form-details h2 { + font-size: 26px; + line-height: 35px; + padding: 20px 0; + + +} + + +#contact-details .details h3 { + + + font-size: 16px; + padding-bottom: 15px; +} + + +#contact-details .details li { + + list-style: none; + display: flex; + padding: 10px 0; +} + + +#contact-details .details li i { + + font-size: 14px; + padding-right: 22px; + +} + + + +#contact-details .details li p { + + margin: 0; + font-size: 14px; +} + + +#contact-details .map { + + width: 55%; + height: 400px; +} + + +#contact-details .map iframe { + + width: 100%; + height: 100%; +} + + + + +#form-details { + + display: flex; + justify-content: space-between; + margin: 30px; + padding: 80px; + border: 1px solid #e1e1e1; + + +} + + + +#form-details form { + + width: 65%; + display: flex; + flex-direction: column; + align-items: flex-start; + +} + + +#form-details form input, +#form-details textarea { + + width: 100%; + padding: 12px 15px; + outline: none; + margin-bottom: 20px; + border: 1px solid #e1e1e1; + +} + + +#form-details form button { + + background-color: #088178; + color: #fff; +} + + +#form-details .people div { + + padding-bottom: 25px; + display: flex; + align-items: flex-start; + +} + + +#form-details .people div img { + + width: 65px; + height: 65px; + object-fit: cover; + margin-right: 15px; +} + + +#form-details .people div p { + + margin: 0; + font-size: 13px; + line-height: 25px; + +} + + +#form-details .people div p span { + + display: block; + font-size: 16px; + font-weight: 600; + color: #000; +} + + +/* +cart page */ + + +#caart{ + overflow-x: auto; +} + + + +#cart table { + + width: 100%; + border-collapse: collapse; + table-layout: fixed; + white-space: nowrap; +} + + + +#cart table img{ + width: 70px; +} + + + +#cart table td:nth-child(1){ + + width: 100px; + text-align: center; + +} + + + +#cart table td:nth-child(2){ + + width: 150px; + text-align: center; + +} + + + + +#cart table td:nth-child(3){ + + width: 250px; + text-align: center; + +} + + + +#cart table td:nth-child(4), +#cart table td:nth-child(5), +#cart table td:nth-child(6){ + + width: 150px; + text-align: center; + +} + + + +#cart table td:nth-child(5) input{ + + width: 70px; + padding: 10px 5px 10px 15px; +} + + +#cart table thead +{ + border: 1px solid #e2e9e1; + border-left: none; + border-right: none; +} + + +#cart table thead td{ + + font-weight: 700; + text-transform: uppercase; + font-size: 13px; + padding:18px 0 ; +} + + + +#cart table tbody tr td { + + padding-top: 15px; +} + + + +#cart table tbody td{ + + font-size: 13px; + +} + + +#cart-add{ + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + +} + + +#coupon{ + width: 50%; + margin-bottom: 30px; +} + + +#coupon h3, + +#subtotal h3{ + + + padding-bottom: 15px; +} + + +#coupon input{ + + padding: 10px 20px; + outline: none; + width: 60%; + margin-right: 10px; + + border: 1px solid #e2e9e1; +} + + + +#coupon button, +#subtotal button{ + background-color: #088178; + color: #fff; + padding: 12px 20px; +} + + +#subtotal{ + + width: 50%; + margin-bottom: 30px; + border: 1px solid #e2e9e1; + padding: 30px; +} + + +#subtotal table{ + border-collapse: collapse; + width: 100%; + margin-bottom: 20px; + +} + + +#subtotal table td{ + + width: 50%; + border: 1px solid #e2e9e1; + padding: 10px; + font-size: 13px; + +} + + + + + + + + + + + + + +/* media query */ + +@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.01); + 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 { + height: 70vh; + + padding: 0 80px; + background-image: top 30% right 30%; + + } + + #feature { + + justify-content: center; + + } + + #feature .fe-box { + + margin: 15px 15px; + } + + + #product .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%; + + + + + } + + /* contact page */ + + #form-details { + + padding: 40px; + } + + + #form-details form { + + + width: 50%; + + + + + + } + + + + +} + +@media (max-width:477px) { + + .section-p1 { + padding: 20px; + + } + + #header { + padding: 10px 30px; + } + + + + h2 { + font-size: 38px; + + } + + h2 { + font-size: 32px; + + } + + #hero { + padding: 0 20px; + background-position: 55%; + } + + #feature { + + justify-content: space-between; + } + + + #feature .fe-box { + margin: 0 0 15px 0; + width: 155px; + } + + #product .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; + } + + /* single product */ + + + + #prodetails { + + + display: flex; + flex-direction: column; + + } + + #prodetails .single-pro-image { + width: 100%; + margin-right: 0px; + } + + + #prodetails .single-pro-details { + + width: 100%; + } + + + + + /* blog page */ + + + + #blog { + padding: 100px 20px 0 20px; + } + + #blog .blog-box { + + + display: flex; + flex-direction: column; + align-items: flex-start; + + } + + #blog .blog-img { + width: 100%; + margin-right: 0px; + } + + + #blog .blog-details { + width: 100%; + } + + + /* about page */ + + #about-head { + flex-direction: column; + } + + + #about-head img { + width: 100%; + margin-bottom: 20px; + } + + + #about-head div { + + padding-left: 0px; + } + + + #about-app .video { + width: 100%; + height: 100%; + margin: 30px auto 0 auto; + } + + + + /* contact page */ + + + + #contact-details { + flex-direction: column; + } + + + #contact-details .details { + + width: 100%; + margin-bottom: 30px; + } + + + #contact-details .map { + + width: 100%; + + + } + + + #form-details { + + margin: 10px; + padding: 30px 10px; + flex-wrap: wrap; + } + + + #form-details form { + + width: 100%; + + margin-bottom: 30px; + } + + + /* cart page */ + + + + #cart-add{ + flex-direction: column; + } + + + #coupn{ + width: 100%; + } + + + + #subtotal{ + width: 100%; + padding: 20px; + } + + + + + + + +} \ No newline at end of file