├── images ├── logo.png ├── about │ ├── 1.mp4 │ ├── a1.png │ ├── a2.jpg │ ├── a3.png │ ├── a4.png │ ├── a5.jpg │ ├── a6.jpg │ └── banner.png ├── blog │ ├── b1.jpg │ ├── b2.jpg │ ├── b3.jpg │ ├── b4.jpg │ ├── b5.jpg │ ├── b6.jpg │ └── b7.jpg ├── button.png ├── hero4.png ├── pay │ ├── app.jpg │ ├── pay.png │ └── play.jpg ├── banner │ ├── b1.jpg │ ├── b2.jpg │ ├── b4.jpg │ ├── b7.jpg │ ├── b10.jpg │ ├── b14.png │ ├── b16.jpg │ ├── b17.jpg │ ├── b18.jpg │ ├── b19.jpg │ └── b20.jpg ├── people │ ├── 1.png │ ├── 2.png │ └── 3.png ├── features │ ├── f1.png │ ├── f2.png │ ├── f3.png │ ├── f4.png │ ├── f5.png │ └── f6.png └── products │ ├── f1.jpg │ ├── f2.jpg │ ├── f3.jpg │ ├── f4.jpg │ ├── f5.jpg │ ├── f6.jpg │ ├── f7.jpg │ ├── f8.jpg │ ├── n1.jpg │ ├── n2.jpg │ ├── n3.jpg │ ├── n4.jpg │ ├── n5.jpg │ ├── n6.jpg │ ├── n7.jpg │ └── n8.jpg ├── script.js ├── README.md ├── cart.html ├── about.html ├── contact.html ├── blog.html ├── singleProduct.html ├── shop.html ├── index.html └── style.css /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/about/1.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/1.mp4 -------------------------------------------------------------------------------- /images/blog/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b1.jpg -------------------------------------------------------------------------------- /images/blog/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b2.jpg -------------------------------------------------------------------------------- /images/blog/b3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b3.jpg -------------------------------------------------------------------------------- /images/blog/b4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b4.jpg -------------------------------------------------------------------------------- /images/blog/b5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b5.jpg -------------------------------------------------------------------------------- /images/blog/b6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b6.jpg -------------------------------------------------------------------------------- /images/blog/b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/blog/b7.jpg -------------------------------------------------------------------------------- /images/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/button.png -------------------------------------------------------------------------------- /images/hero4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/hero4.png -------------------------------------------------------------------------------- /images/pay/app.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/pay/app.jpg -------------------------------------------------------------------------------- /images/pay/pay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/pay/pay.png -------------------------------------------------------------------------------- /images/about/a1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a1.png -------------------------------------------------------------------------------- /images/about/a2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a2.jpg -------------------------------------------------------------------------------- /images/about/a3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a3.png -------------------------------------------------------------------------------- /images/about/a4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a4.png -------------------------------------------------------------------------------- /images/about/a5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a5.jpg -------------------------------------------------------------------------------- /images/about/a6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/a6.jpg -------------------------------------------------------------------------------- /images/banner/b1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b1.jpg -------------------------------------------------------------------------------- /images/banner/b2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b2.jpg -------------------------------------------------------------------------------- /images/banner/b4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b4.jpg -------------------------------------------------------------------------------- /images/banner/b7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b7.jpg -------------------------------------------------------------------------------- /images/pay/play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/pay/play.jpg -------------------------------------------------------------------------------- /images/people/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/people/1.png -------------------------------------------------------------------------------- /images/people/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/people/2.png -------------------------------------------------------------------------------- /images/people/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/people/3.png -------------------------------------------------------------------------------- /images/about/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/about/banner.png -------------------------------------------------------------------------------- /images/banner/b10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b10.jpg -------------------------------------------------------------------------------- /images/banner/b14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b14.png -------------------------------------------------------------------------------- /images/banner/b16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b16.jpg -------------------------------------------------------------------------------- /images/banner/b17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b17.jpg -------------------------------------------------------------------------------- /images/banner/b18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b18.jpg -------------------------------------------------------------------------------- /images/banner/b19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b19.jpg -------------------------------------------------------------------------------- /images/banner/b20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/banner/b20.jpg -------------------------------------------------------------------------------- /images/features/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f1.png -------------------------------------------------------------------------------- /images/features/f2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f2.png -------------------------------------------------------------------------------- /images/features/f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f3.png -------------------------------------------------------------------------------- /images/features/f4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f4.png -------------------------------------------------------------------------------- /images/features/f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f5.png -------------------------------------------------------------------------------- /images/features/f6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/features/f6.png -------------------------------------------------------------------------------- /images/products/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f1.jpg -------------------------------------------------------------------------------- /images/products/f2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f2.jpg -------------------------------------------------------------------------------- /images/products/f3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f3.jpg -------------------------------------------------------------------------------- /images/products/f4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f4.jpg -------------------------------------------------------------------------------- /images/products/f5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f5.jpg -------------------------------------------------------------------------------- /images/products/f6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f6.jpg -------------------------------------------------------------------------------- /images/products/f7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f7.jpg -------------------------------------------------------------------------------- /images/products/f8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/f8.jpg -------------------------------------------------------------------------------- /images/products/n1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n1.jpg -------------------------------------------------------------------------------- /images/products/n2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n2.jpg -------------------------------------------------------------------------------- /images/products/n3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n3.jpg -------------------------------------------------------------------------------- /images/products/n4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n4.jpg -------------------------------------------------------------------------------- /images/products/n5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n5.jpg -------------------------------------------------------------------------------- /images/products/n6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n6.jpg -------------------------------------------------------------------------------- /images/products/n7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n7.jpg -------------------------------------------------------------------------------- /images/products/n8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithmawais/ecommerce-website-html-css/HEAD/images/products/n8.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const bar = document.getElementById('bar'); 2 | const close = document.getElementById('close'); 3 | const nav = document.getElementById('navbar'); 4 | 5 | if (bar) { 6 | bar.addEventListener('click', () => { 7 | nav.classList.add('active'); 8 | }) 9 | } 10 | 11 | if (close) { 12 | close.addEventListener('click', () => { 13 | nav.classList.remove('active'); 14 | }) 15 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # E-commerce Website UI (HTML & CSS) 2 | 3 | ## Description 4 | The "E-commerce Website UI" is a masterfully designed user interface, developed solely using HTML and CSS. This project serves as a visual tour de force of an online e-commerce platform, elegantly presenting multiple sections and design elements. Although the website focuses exclusively on the user interface and lacks client-side interactions, it adeptly captures the essence of a dynamic online shopping experience. 5 | 6 | ## Key Features 7 | 8 | - **Home Page**: The landing page introduces users to the project's core features, providing a glimpse into the website's offerings and enticing users to explore further. 9 | 10 | - **Featured Products**: The "Featured Products" section spotlights a curated selection of popular clothing items, encouraging users to explore trending merchandise. 11 | 12 | - **Banner Displays**: Captivating banners are thoughtfully integrated throughout the site, elevating the visual impact and captivating users with dynamic visuals. 13 | 14 | - **New Arrivals**: The "New Arrivals" section offers a preview of the latest additions to the product catalogue, keeping users informed about the ever-changing inventory. 15 | 16 | - **Additional Banner Sections**: Additional banners contribute to the immersive experience, infusing diversity and depth into the website's design. 17 | 18 | - **Newsletter Section**: A dedicated newsletter section invites users to subscribe, showcasing the potential for ongoing customer engagement and interaction. 19 | 20 | - **Shop Page**: The central "Shop" page presents an array of products available for purchase, allowing users to explore and discover a wide range of merchandise. 21 | 22 | - **Blog Page**: The "Blog" page provides insightful information through dedicated blog sections, offering users a deeper understanding of the industry and products. 23 | 24 | - **About Page**: The "About" section delivers context about the project's identity, complete with an introduction, an app video, and an overview of key project features. 25 | 26 | - **Contact Page**: Users can access information about the project's office and staff members in the "Contact" section, fostering a sense of connection and accessibility. 27 | 28 | - **Cart Page**: The "Cart" section displays selected products, enabling users to visualize their potential purchases before proceeding to checkout. 29 | 30 | - **Single Product Page**: The "Single Product" page showcases a specific product in detail, displaying its name, price, size options, quantity sets, and the option to add the product to the cart. Additional product details enhance the user's understanding. 31 | 32 | - **Featured Section**: The "Single Product" page also includes a "Featured Section" that highlights similar products, encouraging users to explore related merchandise. 33 | 34 | - **Header**: A consistent header is present across all pages. 35 | 36 | - **Footer**: A consistent footer is present across all pages, providing essential links, contact details, and social media connections. 37 | 38 | ## Tech Stack 39 | 40 | - **Frontend**: Crafted using HTML and CSS, the project beautifully demonstrates the expressive capabilities of these technologies in designing engaging and responsive user interfaces. 41 | 42 | ## Getting Started 43 | 44 | To view the "E-commerce Website UI" on your local machine, follow these steps: 45 | 46 | 1. Clone the repository to your local machine: 47 | ``` 48 | git clone https://github.com/codewithmawais/e-commerce-website-html-css.git 49 | ``` 50 | 2. Navigate to the project directory: 51 | ``` 52 | cd e-commerce-website-ui 53 | ``` 54 | 3. Start the Application 55 | ``` 56 | Open the index.html file. 57 | Right-click on the file and select "Open with Live Preview." 58 | This will launch a live preview of the website in your default web browser. 59 | ``` 60 | 61 | ## Project Intent 62 | 63 | The "E-commerce Website UI" project is a creative initiative designed to facilitate the learning and refinement of foundational HTML and CSS skills. The static nature of the website offers an excellent opportunity for developers to comprehend design principles, experiment with styling techniques, and adeptly translate visual concepts into code. While interactivity is absent, the project's fidelity to E-commerce Website UI interface provides an accessible avenue to engage with the essence of a digital platform. 64 | 65 | ## Conclusion 66 | 67 | "E-commerce Website UI" underscores the potential of HTML and CSS in creating realistic, visually accurate user interfaces. Through its emulation of E-commerce Website UI, this project empowers aspiring developers to elevate their skills, unravel design intricacies, and lay a solid groundwork for more intricate web development endeavours. 68 | 69 | **Note**: Given the educational nature of this project and its lack of client-side interactions, users are encouraged to focus on design exploration and structural understanding while acknowledging the project's absence of functional interactivity. 70 | 71 | ## License 72 | 73 | This project is not licensed. 74 | 75 | ## Contributions 76 | 77 | Contributions are welcome! If you have ideas for improvements or new features, feel free to submit a pull request. 78 | 79 | Explore the "E-commerce Website UI" and immerse yourself in its aesthetic allure, envisioning the possibilities of a fully interactive and seamless online shopping journey. 80 | 81 | 82 | -------------------------------------------------------------------------------- /cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
40 |

#cart

41 |

Add your coupon code & SAVE upto 70%!

42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 |
RemoveImageProductPriceQuantitySubtotal
Cartoon Astronaut T-Shirt$118.19$118.19
Cartoon Astronaut T-Shirt$118.19$118.19
Cartoon Astronaut T-Shirt$118.19$118.19
83 |
84 | 85 |
86 |
87 |

Apply Coupon

88 |
89 | 90 | 91 |
92 |
93 |
94 |

Cart Totals

95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
Cart Subtotal$ 335
ShippingFree
Total$ 335
109 | 110 |
111 |
112 | 113 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
40 |

#KnowUs

41 |

Lorem ipsusm dolor sit amet, consectelur

42 |
43 | 44 |
45 | 46 |
47 |

Who We Are?

48 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 49 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 50 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 51 | Duis autterirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 52 | nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 53 | deserunt mollit anim id est laborum. 54 |

55 | Create stunning images with as much or as little control as fa-you 56 | like thanks to a choice of Basic and Creative modes. 57 | 58 |

59 | Create stunning images 60 | with as much or as little control as you like thanks to a choice of Basic and Creative modes. 61 | 62 |
63 |
64 | 65 |
66 |

Download our App

67 |
68 | 69 |
70 |
71 | 72 |
73 |
74 | 75 |
Free Shipping
76 |
77 |
78 | 79 |
Online Order
80 |
81 |
82 | 83 |
Save Money
84 |
85 |
86 | 87 |
Promotions
88 |
89 |
90 | 91 |
Happy Sell
92 |
93 |
94 | 95 |
F24/7 Support
96 |
97 |
98 | 99 |
100 |
101 |

Sign Up For Newsletter

102 |

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

103 |
104 |
105 | 106 | 107 |
108 |
109 | 110 | 158 | 159 | 160 | 161 | 162 | 163 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
40 |

#let's_talk

41 |

LEAVE A MESSAGE, We love to hear from you!

42 |
43 | 44 |
45 |
46 | GET IN TOUCH 47 |

Visit one of our agency locations or contact us today.

48 |

Head Office

49 |
50 |
  • 51 | 52 |

    Lahore, Pakistan 54840

    53 |
    • 54 |
  • 55 | 56 |

    connectwithmawais@gmail.com

    57 |
    • 58 |
  • 59 | 60 |

    +92-321-4655990 61 |

    • 62 |
  • 63 | 64 |

    Monday to Saturday: 9:00 AM to 16:00 PM

    65 |
    • 66 |
    67 |
    68 |
    69 | 73 |
    74 |
    75 | 76 |
    77 |
    78 | LEAVE A MESSAGE 79 |

    We love to hear from you

    80 | 81 | 82 | 83 | 84 | 85 |
    86 |
    87 |
    88 | 89 |

    John Doe Senior Marketing Manager
    Phone: +000 123 000 77 88
    Email: contact@example.com

    90 |
    91 |
    92 | 93 |

    William Smith Senior Marketing Manager
    Phone: +000 123 000 77 88
    Email: contact@example.com

    94 |
    95 |
    96 | 97 |

    Emma Stone Senior Marketing Manager
    Phone: +000 123 000 77 88
    Email: contact@example.com

    98 |
    99 |
    100 |
    101 | 102 |
    103 |
    104 |

    Sign Up For Newsletter

    105 |

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

    106 |
    107 |
    108 | 109 | 110 |
    111 |
    112 | 113 | 161 | 162 | 163 | 164 | 165 | 166 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
    40 |

    #readmore

    41 |

    Read all case studies about our products!

    42 |
    43 | 44 |
    45 |
    46 |
    47 | 48 |
    49 |
    50 |

    The Cotton-Jersey Zip-Up Hoodie

    51 |

    Kickstarter man braid godard coloring book. Raclette waistcoat selfies 52 | yr wolf chartreuse hexagon irony, godard... 53 |

    54 | CONTINUE READING 55 |
    56 |

    13/01

    57 |
    58 |
    59 |
    60 | 61 |
    62 |
    63 |

    How to Style a Quiff

    64 |

    Kickstarter man braid godard coloring book. Raclette waistcoat selfies 65 | yr wolf chartreuse hexagon irony, godard... 66 |

    67 | CONTINUE READING 68 |
    69 |

    13/04

    70 |
    71 |
    72 |
    73 | 74 |
    75 |
    76 |

    Must-Have Skater Girl Items

    77 |

    Kickstarter man braid godard coloring book. Raclette waistcoat selfies 78 | yr wolf chartreuse hexagon irony, godard... 79 |

    80 | CONTINUE READING 81 |
    82 |

    12/01

    83 |
    84 |
    85 |
    86 | 87 |
    88 |
    89 |

    Runway-Inspired Trends

    90 |

    Kickstarter man braid godard coloring book. Raclette waistcoat selfies 91 | yr wolf chartreuse hexagon irony, godard... 92 |

    93 | CONTINUE READING 94 |
    95 |

    16/01

    96 |
    97 |
    98 |
    99 | 100 |
    101 |
    102 |

    AW20 Menswear Trends

    103 |

    Kickstarter man braid godard coloring book. Raclette waistcoat selfies 104 | yr wolf chartreuse hexagon irony, godard... 105 |

    106 | CONTINUE READING 107 |
    108 |

    10/03

    109 |
    110 |
    111 | 112 |
    113 | 1 114 | 2 115 | 116 |
    117 | 118 |
    119 |
    120 |

    Sign Up For Newsletter

    121 |

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

    122 |
    123 |
    124 | 125 | 126 |
    127 |
    128 | 129 | 177 | 178 | 179 | 180 | 181 | 182 | -------------------------------------------------------------------------------- /singleProduct.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
    40 |
    41 | 42 |
    43 |
    44 | 45 |
    46 |
    47 | 48 |
    49 |
    50 | 51 |
    52 |
    53 | 54 |
    55 |
    56 |
    57 |
    58 |
    Home / T-Shirt
    59 |

    Men's Fashion T Shirt

    60 |

    $139.00

    61 | 68 | 69 | 70 |

    Product Details

    71 | The Gildan Ultra Cotton T-shirt is made from a substantial 6.0 oz. per sq. yd. fabric 72 | constructed from 100% cotton, this classic fit preshrunk jersey knit provides unmatched comfort 73 | with each wear. Featuring a taped neck and shoulder, and a seamless double-needle collar, and available in a range 74 | of colors, it offers it all in the ultimate head-turning package. 75 | 76 |
    77 |
    78 | 79 |
    80 |

    Featured Products

    81 |

    Summer Collection New Modern Design

    82 |
    83 |
    84 | 85 |
    86 | adidas 87 |
    Cartoon Astronaut T-Shirts
    88 |
    89 | 90 | 91 | 92 | 93 | 94 |
    95 |

    $78

    96 |
    97 | 98 |
    99 |
    100 | 101 |
    102 | adidas 103 |
    Cartoon Astronaut T-Shirts
    104 |
    105 | 106 | 107 | 108 | 109 | 110 |
    111 |

    $78

    112 |
    113 | 114 |
    115 |
    116 | 117 |
    118 | adidas 119 |
    Cartoon Astronaut T-Shirts
    120 |
    121 | 122 | 123 | 124 | 125 | 126 |
    127 |

    $78

    128 |
    129 | 130 |
    131 |
    132 | 133 |
    134 | adidas 135 |
    Cartoon Astronaut T-Shirts
    136 |
    137 | 138 | 139 | 140 | 141 | 142 |
    143 |

    $78

    144 |
    145 | 146 |
    147 |
    148 |
    149 | 150 |
    151 |
    152 |

    Sign Up For Newsletter

    153 |

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

    154 |
    155 |
    156 | 157 | 158 |
    159 |
    160 | 161 | 209 | 210 | 211 | 227 | 228 | 229 | 230 | 231 | 232 | -------------------------------------------------------------------------------- /shop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | e-commerce website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 38 | 39 |
    40 |

    #stayhome

    41 |

    Save more with coupons & up to 70% off!

    42 |
    43 | 44 |
    45 |
    46 |
    47 | 48 |
    49 | adidas 50 |
    Cartoon Astronaut T-Shirts
    51 |
    52 | 53 | 54 | 55 | 56 | 57 |
    58 |

    $78

    59 |
    60 | 61 |
    62 |
    63 | 64 |
    65 | adidas 66 |
    Cartoon Astronaut T-Shirts
    67 |
    68 | 69 | 70 | 71 | 72 | 73 |
    74 |

    $78

    75 |
    76 | 77 |
    78 |
    79 | 80 |
    81 | adidas 82 |
    Cartoon Astronaut T-Shirts
    83 |
    84 | 85 | 86 | 87 | 88 | 89 |
    90 |

    $78

    91 |
    92 | 93 |
    94 |
    95 | 96 |
    97 | adidas 98 |
    Cartoon Astronaut T-Shirts
    99 |
    100 | 101 | 102 | 103 | 104 | 105 |
    106 |

    $78

    107 |
    108 | 109 |
    110 |
    111 | 112 |
    113 | adidas 114 |
    Cartoon Astronaut T-Shirts
    115 |
    116 | 117 | 118 | 119 | 120 | 121 |
    122 |

    $78

    123 |
    124 | 125 |
    126 |
    127 | 128 |
    129 | adidas 130 |
    Cartoon Astronaut T-Shirts
    131 |
    132 | 133 | 134 | 135 | 136 | 137 |
    138 |

    $78

    139 |
    140 | 141 |
    142 |
    143 | 144 |
    145 | adidas 146 |
    Cartoon Astronaut T-Shirts
    147 |
    148 | 149 | 150 | 151 | 152 | 153 |
    154 |

    $78

    155 |
    156 | 157 |
    158 |
    159 | 160 |
    161 | adidas 162 |
    Cartoon Astronaut T-Shirts
    163 |
    164 | 165 | 166 | 167 | 168 | 169 |
    170 |

    $78

    171 |
    172 | 173 |
    174 |
    175 | 176 |
    177 | adidas 178 |
    Cartoon Astronaut T-Shirts
    179 |
    180 | 181 | 182 | 183 | 184 | 185 |
    186 |

    $78

    187 |
    188 | 189 |
    190 |
    191 | 192 |
    193 | adidas 194 |
    Cartoon Astronaut T-Shirts
    195 |
    196 | 197 | 198 | 199 | 200 | 201 |
    202 |

    $78

    203 |
    204 | 205 |
    206 |
    207 | 208 |
    209 | adidas 210 |
    Cartoon Astronaut T-Shirts
    211 |
    212 | 213 | 214 | 215 | 216 | 217 |
    218 |

    $78

    219 |
    220 | 221 |
    222 |
    223 | 224 |
    225 | adidas 226 |
    Cartoon Astronaut T-Shirts
    227 |
    228 | 229 | 230 | 231 | 232 | 233 |
    234 |

    $78

    235 |
    236 | 237 |
    238 |
    239 | 240 |
    241 | adidas 242 |
    Cartoon Astronaut T-Shirts
    243 |
    244 | 245 | 246 | 247 | 248 | 249 |
    250 |

    $78

    251 |
    252 | 253 |
    254 |
    255 | 256 |
    257 | adidas 258 |
    Cartoon Astronaut T-Shirts
    259 |
    260 | 261 | 262 | 263 | 264 | 265 |
    266 |

    $78

    267 |
    268 | 269 |
    270 |
    271 | 272 |
    273 | adidas 274 |
    Cartoon Astronaut T-Shirts
    275 |
    276 | 277 | 278 | 279 | 280 | 281 |
    282 |

    $78

    283 |
    284 | 285 |
    286 |
    287 | 288 |
    289 | adidas 290 |
    Cartoon Astronaut T-Shirts
    291 |
    292 | 293 | 294 | 295 | 296 | 297 |
    298 |

    $78

    299 |
    300 | 301 |
    302 |
    303 |
    304 | 305 |
    306 | 1 307 | 2 308 | 309 |
    310 | 311 |
    312 |
    313 |

    Sign Up For Newsletter

    314 |

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

    315 |
    316 |
    317 | 318 | 319 |
    320 |
    321 | 322 | 370 | 371 | 372 | 373 | 374 | 375 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | e-commerce website 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 36 | 37 |
    38 |

    Trade-in-offer

    39 |

    Super value deals

    40 |

    On all products

    41 |

    Save more with coupons & up to 70% off!

    42 | 43 |
    44 | 45 |
    46 |
    47 | 48 |
    Free Shipping
    49 |
    50 |
    51 | 52 |
    Online Order
    53 |
    54 |
    55 | 56 |
    Save Money
    57 |
    58 |
    59 | 60 |
    Promotions
    61 |
    62 |
    63 | 64 |
    Happy Sell
    65 |
    66 |
    67 | 68 |
    F24/7 Support
    69 |
    70 |
    71 | 72 |
    73 |

    Featured Products

    74 |

    Summer Collection New Modern Design

    75 |
    76 |
    77 | 78 |
    79 | adidas 80 |
    Cartoon Astronaut T-Shirts
    81 |
    82 | 83 | 84 | 85 | 86 | 87 |
    88 |

    $78

    89 |
    90 | 91 |
    92 |
    93 | 94 |
    95 | adidas 96 |
    Cartoon Astronaut T-Shirts
    97 |
    98 | 99 | 100 | 101 | 102 | 103 |
    104 |

    $78

    105 |
    106 | 107 |
    108 |
    109 | 110 |
    111 | adidas 112 |
    Cartoon Astronaut T-Shirts
    113 |
    114 | 115 | 116 | 117 | 118 | 119 |
    120 |

    $78

    121 |
    122 | 123 |
    124 |
    125 | 126 |
    127 | adidas 128 |
    Cartoon Astronaut T-Shirts
    129 |
    130 | 131 | 132 | 133 | 134 | 135 |
    136 |

    $78

    137 |
    138 | 139 |
    140 |
    141 | 142 |
    143 | adidas 144 |
    Cartoon Astronaut T-Shirts
    145 |
    146 | 147 | 148 | 149 | 150 | 151 |
    152 |

    $78

    153 |
    154 | 155 |
    156 |
    157 | 158 |
    159 | adidas 160 |
    Cartoon Astronaut T-Shirts
    161 |
    162 | 163 | 164 | 165 | 166 | 167 |
    168 |

    $78

    169 |
    170 | 171 |
    172 |
    173 | 174 |
    175 | adidas 176 |
    Cartoon Astronaut T-Shirts
    177 |
    178 | 179 | 180 | 181 | 182 | 183 |
    184 |

    $78

    185 |
    186 | 187 |
    188 |
    189 | 190 |
    191 | adidas 192 |
    Cartoon Astronaut T-Shirts
    193 |
    194 | 195 | 196 | 197 | 198 | 199 |
    200 |

    $78

    201 |
    202 | 203 |
    204 |
    205 |
    206 | 207 | 212 | 213 |
    214 |

    New Arrivals

    215 |

    Summer Collection New Modern Design

    216 |
    217 |
    218 | 219 |
    220 | adidas 221 |
    Cartoon Astronaut T-Shirts
    222 |
    223 | 224 | 225 | 226 | 227 | 228 |
    229 |

    $78

    230 |
    231 | 232 |
    233 |
    234 | 235 |
    236 | adidas 237 |
    Cartoon Astronaut T-Shirts
    238 |
    239 | 240 | 241 | 242 | 243 | 244 |
    245 |

    $78

    246 |
    247 | 248 |
    249 |
    250 | 251 |
    252 | adidas 253 |
    Cartoon Astronaut T-Shirts
    254 |
    255 | 256 | 257 | 258 | 259 | 260 |
    261 |

    $78

    262 |
    263 | 264 |
    265 |
    266 | 267 |
    268 | adidas 269 |
    Cartoon Astronaut T-Shirts
    270 |
    271 | 272 | 273 | 274 | 275 | 276 |
    277 |

    $78

    278 |
    279 | 280 |
    281 |
    282 | 283 |
    284 | adidas 285 |
    Cartoon Astronaut T-Shirts
    286 |
    287 | 288 | 289 | 290 | 291 | 292 |
    293 |

    $78

    294 |
    295 | 296 |
    297 |
    298 | 299 |
    300 | adidas 301 |
    Cartoon Astronaut T-Shirts
    302 |
    303 | 304 | 305 | 306 | 307 | 308 |
    309 |

    $78

    310 |
    311 | 312 |
    313 |
    314 | 315 |
    316 | adidas 317 |
    Cartoon Astronaut T-Shirts
    318 |
    319 | 320 | 321 | 322 | 323 | 324 |
    325 |

    $78

    326 |
    327 | 328 |
    329 |
    330 | 331 |
    332 | adidas 333 |
    Cartoon Astronaut T-Shirts
    334 |
    335 | 336 | 337 | 338 | 339 | 340 |
    341 |

    $78

    342 |
    343 | 344 |
    345 |
    346 |
    347 | 348 |
    349 | 355 | 361 |
    362 | 363 |
    364 | 368 | 372 | 376 |
    377 | 378 |
    379 |
    380 |

    Sign Up For Newsletter

    381 |

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

    382 |
    383 |
    384 | 385 | 386 |
    387 |
    388 | 389 | 437 | 438 | 439 | 440 | 441 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: 'Spartan',sans-serif; 8 | } 9 | 10 | h1 { 11 | font-size: 50px; 12 | line-height: 64px; 13 | color: #222; 14 | } 15 | 16 | h2 { 17 | font-size: 46px; 18 | line-height: 54px; 19 | color: #222; 20 | } 21 | 22 | h4 { 23 | font-size: 20px; 24 | color: #222; 25 | } 26 | 27 | h6 { 28 | font-weight: 700; 29 | font-size: 12x; 30 | } 31 | 32 | p { 33 | font-size: 16px; 34 | color: #465b52; 35 | margin: 15px 0 20px 0; 36 | } 37 | 38 | .section-p1 { 39 | padding: 40px 80px; 40 | } 41 | 42 | .section-m1 { 43 | margin: 40px 0; 44 | } 45 | 46 | button.normal { 47 | font-size: 14px; 48 | font-weight: 600; 49 | padding: 15px 30px; 50 | color: #000; 51 | background-color: #fff; 52 | border-radius: 4px; 53 | cursor: pointer; 54 | border: none; 55 | outline: none; 56 | transition: 0.2s ease; 57 | } 58 | 59 | button.white { 60 | font-size: 13px; 61 | font-weight: 600; 62 | padding: 11px 18px; 63 | color: #fff; 64 | background-color: transparent; 65 | cursor: pointer; 66 | border: 1px solid #fff; 67 | outline: none; 68 | transition: 0.2s ease; 69 | } 70 | 71 | body { 72 | width: 100%; 73 | } 74 | 75 | /* Header Start */ 76 | 77 | #header { 78 | display: flex; 79 | align-items: center; 80 | justify-content: space-between; 81 | padding: 20px 80px; 82 | background: #E3E6F3; 83 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); 84 | z-index: 999; 85 | position: sticky; 86 | top: 0; 87 | } 88 | 89 | #navbar { 90 | display: flex; 91 | align-items: center; 92 | justify-content: center; 93 | } 94 | 95 | #navbar li { 96 | list-style: none; 97 | padding: 0 20px; 98 | position: relative; 99 | } 100 | 101 | #navbar li a { 102 | text-decoration: none; 103 | font-size: 16px; 104 | font-weight: 600; 105 | color: #1a1a1a; 106 | transition: 0.3s ease; 107 | } 108 | 109 | #navbar li a:hover, 110 | #navbar li a.active { 111 | color: #088178; 112 | } 113 | 114 | #navbar li a:hover::after, 115 | #navbar li a.active::after { 116 | content: ""; 117 | width: 30%; 118 | height: 2px; 119 | background: #088178; 120 | position: absolute; 121 | bottom: -4px; 122 | left: 20px; 123 | } 124 | 125 | #close { 126 | display: none; 127 | } 128 | 129 | #mobile { 130 | display: none; 131 | align-items: center; 132 | } 133 | 134 | /* Home Page */ 135 | 136 | #hero { 137 | background-image: url(images/hero4.png); 138 | width: 100%; 139 | height: 90vh; 140 | background-size: cover; 141 | background-position: top 25% right 0; 142 | padding: 0 80px; 143 | display: flex; 144 | flex-direction: column; 145 | align-items: flex-start; 146 | justify-content: center; 147 | } 148 | 149 | #hero h4 { 150 | padding-bottom: 15px; 151 | } 152 | 153 | #hero h1 { 154 | color: #088178; 155 | } 156 | 157 | #hero button { 158 | background-image: url(images/button.png); 159 | background-color: transparent; 160 | color: #088178; 161 | border: 0; 162 | padding: 14px 80px 14px 65px; 163 | background-repeat: no-repeat; 164 | cursor: pointer; 165 | font-weight: 700; 166 | font-size: 15px; 167 | } 168 | 169 | #feature { 170 | display: flex; 171 | align-items: center; 172 | justify-content: space-between; 173 | flex-wrap: wrap; 174 | } 175 | 176 | #feature .fe-box { 177 | width: 180px; 178 | text-align: center; 179 | padding: 25px 15px; 180 | box-shadow: 20px 20px 34px rgba(0, 0, 0, 0.03); 181 | border: 1px solid #cce7d0; 182 | border-radius: 4px; 183 | margin: 15px 0; 184 | } 185 | 186 | #feature .fe-box:hover { 187 | box-shadow: 10px 10px 54px rgba(70, 62, 221, 0.1); 188 | } 189 | 190 | #feature .fe-box img{ 191 | width: 100%; 192 | margin-bottom: 10px; 193 | } 194 | 195 | #feature .fe-box h6 { 196 | display: inline-block; 197 | padding: 9px 8px 6px 8px; 198 | line-height: 1; 199 | border-radius: 4px; 200 | color: #088178; 201 | background-color: #fddde4; 202 | } 203 | 204 | #feature .fe-box:nth-child(2) h6 { 205 | background-color: #cdebbc; 206 | } 207 | 208 | #feature .fe-box:nth-child(3) h6 { 209 | background-color: #d1e8f2; 210 | } 211 | 212 | #feature .fe-box:nth-child(4) h6 { 213 | background-color: #cdd4f8; 214 | } 215 | 216 | #feature .fe-box:nth-child(5) h6 { 217 | background-color: #f6dbf6; 218 | } 219 | 220 | #feature .fe-box:nth-child(6) h6 { 221 | background-color: #fff2e5; 222 | } 223 | 224 | #product1 { 225 | text-align: center; 226 | } 227 | 228 | #product1 .pro-container { 229 | display: flex; 230 | justify-content: space-between; 231 | padding-top: 20px; 232 | flex-wrap: wrap; 233 | } 234 | 235 | #product1 .pro { 236 | width: 23%; 237 | min-width: 250px; 238 | padding: 10px 12px; 239 | border: 1px solid #cce7d0; 240 | border-radius: 25px; 241 | cursor: pointer; 242 | box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.02); 243 | margin: 15px 0; 244 | transition: 0.2s ease; 245 | position: relative; 246 | } 247 | 248 | #product1 .pro:hover { 249 | box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.06); 250 | } 251 | 252 | #product1 .pro img { 253 | width: 100%; 254 | border-radius: 20px; 255 | } 256 | 257 | #product1 .pro .des { 258 | text-align: start; 259 | padding: 10px 0; 260 | } 261 | 262 | #product1 .pro .des span { 263 | color: #606063; 264 | font-size: 12px; 265 | } 266 | 267 | #product1 .pro .des h5 { 268 | padding-top: 7px; 269 | color: #1a1a1a; 270 | font-size: 14px; 271 | } 272 | 273 | #product1 .pro .des i { 274 | font-size: 12px; 275 | color: rgb(243, 181, 25); 276 | } 277 | 278 | #product1 .pro .des h4 { 279 | padding-top: 7px; 280 | font-size: 15px; 281 | font-weight: 700; 282 | color: #088178; 283 | } 284 | 285 | #product1 .pro .cart { 286 | width: 40px; 287 | height: 40px; 288 | line-height: 40px; 289 | border-radius: 50px; 290 | background-color: #e8f6ea; 291 | font-weight: 500; 292 | color: #088178; 293 | border: 1px solid #cce7d0; 294 | position: absolute; 295 | bottom: 20px; 296 | right: 10px; 297 | } 298 | 299 | #banner { 300 | display: flex; 301 | flex-direction: column; 302 | justify-content: center; 303 | align-items: center; 304 | text-align: center; 305 | background-image: url(images/banner/b2.jpg); 306 | background-size: cover; 307 | background-position: center; 308 | width: 100%; 309 | height: 40vh; 310 | } 311 | 312 | #banner h4 { 313 | color: #fff; 314 | font-size: 16px; 315 | } 316 | 317 | #banner h2 { 318 | color: #fff; 319 | font-size: 30px; 320 | padding: 10px 0; 321 | } 322 | 323 | #banner h2 span { 324 | color: #ef3636; 325 | } 326 | 327 | #banner button:hover { 328 | background-color: #088178; 329 | color: #fff; 330 | } 331 | 332 | #sm-banner { 333 | display: flex; 334 | justify-content: space-between; 335 | flex-wrap: wrap; 336 | } 337 | 338 | #sm-banner .banner-box { 339 | display: flex; 340 | flex-direction: column; 341 | justify-content: center; 342 | align-items: flex-start; 343 | text-align: center; 344 | background-image: url(images/banner/b17.jpg); 345 | background-size: cover; 346 | background-position: center; 347 | min-width: 850px; 348 | height: 50vh; 349 | padding: 30px; 350 | } 351 | 352 | #sm-banner h4{ 353 | color: #fff; 354 | font-size: 20px; 355 | font-weight: 300; 356 | } 357 | 358 | #sm-banner h2 { 359 | color: #fff; 360 | font-size: 28px; 361 | font-weight: 800; 362 | } 363 | 364 | #sm-banner span { 365 | color: #fff; 366 | font-size: 14px; 367 | font-weight: 500; 368 | padding-bottom: 15px; 369 | } 370 | 371 | #sm-banner .banner-box:hover button{ 372 | background-color: #088178; 373 | border: 1px solid #088178; 374 | } 375 | 376 | #sm-banner .banner-box:nth-child(2) { 377 | background-image: url(images/banner/b10.jpg); 378 | } 379 | 380 | #banner3 .banner-box { 381 | display: flex; 382 | flex-direction: column; 383 | justify-content: center; 384 | align-items: flex-start; 385 | text-align: center; 386 | background-image: url(images/banner/b7.jpg); 387 | background-size: cover; 388 | background-position: center; 389 | min-width: 30%; 390 | height: 30vh; 391 | padding: 30px; 392 | margin-bottom: 20px; 393 | } 394 | 395 | #banner3 .banner-box:nth-child(2) { 396 | background-image: url(images/banner/b4.jpg); 397 | } 398 | 399 | #banner3 .banner-box:nth-child(3) { 400 | background-image: url(images/banner/b18.jpg); 401 | } 402 | 403 | #banner3 { 404 | display: flex; 405 | justify-content: space-between; 406 | flex-wrap: wrap; 407 | padding: 0 80px; 408 | } 409 | 410 | #banner3 h2 { 411 | color: #fff; 412 | font-weight: 900; 413 | font-size: 22px; 414 | } 415 | 416 | #banner3 h3 { 417 | color: #ec544e; 418 | font-weight: 800; 419 | font-size: 15px; 420 | } 421 | 422 | #newsletter { 423 | display: flex; 424 | justify-content: space-between; 425 | align-items: center; 426 | flex-wrap: wrap; 427 | background-image: url(images/banner/b14.png); 428 | background-repeat: no-repeat; 429 | background-position: 20% 30%; 430 | background-color: #041e42; 431 | } 432 | 433 | #newsletter h4 { 434 | font-size: 22px; 435 | font-weight: 700; 436 | color: #fff; 437 | } 438 | 439 | #newsletter p { 440 | font-size: 14px; 441 | font-weight: 600; 442 | color: #818EA0; 443 | } 444 | 445 | #newsletter p span{ 446 | color: #ffbd27; 447 | } 448 | 449 | #newsletter .form { 450 | display: flex; 451 | width: 40%; 452 | } 453 | 454 | #newsletter input { 455 | height: 3.125rem; 456 | padding: 0 1.25rem; 457 | font-size: 14px; 458 | width: 100%; 459 | border: 1px solid transparent; 460 | border-radius: 4px; 461 | outline: none; 462 | border-top-right-radius: 0; 463 | border-bottom-right-radius: 0; 464 | } 465 | 466 | #newsletter button { 467 | background-color: #088178; 468 | color: #fff; 469 | white-space: nowrap; 470 | border-top-left-radius: 0; 471 | border-bottom-left-radius: 0; 472 | } 473 | 474 | footer { 475 | display: flex; 476 | justify-content: space-between; 477 | flex-wrap: wrap; 478 | } 479 | 480 | footer .col { 481 | display: flex; 482 | flex-direction: column; 483 | align-items: flex-start; 484 | margin-bottom: 20px; 485 | } 486 | 487 | footer .logo { 488 | margin-bottom: 30px; 489 | } 490 | 491 | footer h4 { 492 | font-size: 14px; 493 | padding-bottom: 20px; 494 | } 495 | 496 | footer p { 497 | font-size: 13px; 498 | margin: 0 0 8px 0; 499 | } 500 | 501 | footer a { 502 | font-size: 13px; 503 | text-decoration: none; 504 | color: #222; 505 | margin: 0 0 10px 0; 506 | } 507 | 508 | footer .follow { 509 | margin-top: 20px; 510 | } 511 | 512 | footer .follow i{ 513 | color: #465b52; 514 | padding-right: 4px; 515 | cursor: pointer; 516 | } 517 | 518 | footer .install .row img{ 519 | border: 1px solid #088178; 520 | border-radius: 6px; 521 | margin: 10px 0 15px 0; 522 | } 523 | 524 | footer .follow i:hover, 525 | footer a:hover { 526 | color: #088178; 527 | } 528 | 529 | footer .copyright { 530 | width: 100%; 531 | text-align: center; 532 | } 533 | 534 | /* Shop Page */ 535 | 536 | #page-header { 537 | background-image: url(images/banner/b1.jpg); 538 | width: 100%; 539 | height: 40vh; 540 | background-size: cover; 541 | display: flex; 542 | justify-content: center; 543 | text-align: center; 544 | flex-direction: column; 545 | padding: 14px; 546 | } 547 | 548 | #page-header h2, 549 | #page-header p { 550 | color: #fff; 551 | } 552 | 553 | #pagination { 554 | text-align: center; 555 | } 556 | 557 | #pagination a { 558 | text-decoration: none; 559 | background-color: #088178; 560 | padding: 15px 20px; 561 | border-radius: 4px; 562 | color: #fff; 563 | font-weight: 600; 564 | } 565 | 566 | #pagination a i { 567 | font-size: 16px; 568 | font-weight: 600; 569 | } 570 | 571 | /* Single Product Page */ 572 | 573 | #productdetails { 574 | display: flex; 575 | margin-top: 20px; 576 | } 577 | 578 | #productdetails .single-pro-image{ 579 | width: 40%; 580 | margin-right: 50px; 581 | } 582 | 583 | .small-image-group { 584 | display: flex; 585 | justify-content: space-between; 586 | } 587 | 588 | .small-img-col { 589 | flex-basis: 24%; 590 | cursor: pointer; 591 | } 592 | 593 | #productdetails .single-pro-details { 594 | width: 50%; 595 | padding-top: 30px; 596 | } 597 | 598 | #productdetails .single-pro-details h4 { 599 | padding: 40px 0 20px 0; 600 | } 601 | 602 | #productdetails .single-pro-details h2 { 603 | font-size: 26px; 604 | } 605 | 606 | #productdetails .single-pro-details select { 607 | display: block; 608 | padding: 5px 10px; 609 | margin-bottom: 10px; 610 | } 611 | 612 | #productdetails .single-pro-details input { 613 | width: 50px; 614 | height: 47px; 615 | padding-left: 10px; 616 | font-size: 16px; 617 | margin-right: 10px; 618 | } 619 | 620 | #productdetails .single-pro-details button { 621 | background-color: #088178; 622 | color: #fff; 623 | } 624 | 625 | #productdetails .single-pro-details input:focus { 626 | outline: none; 627 | } 628 | 629 | #productdetails .single-pro-details span { 630 | line-height: 25px; 631 | } 632 | 633 | /* Blog Page */ 634 | 635 | #page-header.blog-header { 636 | background-image: url(images/banner/b19.jpg); 637 | } 638 | 639 | #blog { 640 | padding: 150px 150px 0 150px; 641 | } 642 | 643 | #blog .blog-box { 644 | display: flex; 645 | align-items: center; 646 | width: 100%; 647 | position: relative; 648 | padding-bottom: 90px; 649 | } 650 | 651 | #blog .blog-img { 652 | width: 50%; 653 | margin-right: 40px; 654 | } 655 | 656 | #blog img { 657 | width: 100%; 658 | height: 300px; 659 | object-fit: cover; 660 | } 661 | 662 | #blog .blog-details { 663 | width: 50%; 664 | } 665 | 666 | #blog .blog-details a { 667 | text-decoration: none; 668 | font-size: 11px; 669 | color: #000; 670 | font-weight: 700; 671 | position: relative; 672 | transition: 0.3s; 673 | } 674 | 675 | #blog .blog-details a::after { 676 | content: ""; 677 | width: 50px; 678 | height: 1px; 679 | background-color: #000; 680 | position: absolute; 681 | top: 4px; 682 | right: -60px; 683 | } 684 | 685 | #blog .blog-details a:hover { 686 | color: #088178; 687 | } 688 | 689 | #blog .blog-details a:hover::after { 690 | background-color: #088178; 691 | } 692 | 693 | #blog .blog-box h1 { 694 | position: absolute; 695 | top: -40px; 696 | left: 0; 697 | font-size: 70px; 698 | font-weight: 700; 699 | color: #c9cbce; 700 | z-index: -9; 701 | } 702 | 703 | /* About Page */ 704 | 705 | #page-header.about-header { 706 | background-image: url(images/about/banner.png); 707 | } 708 | 709 | #about-head { 710 | display: flex; 711 | align-items: center; 712 | } 713 | 714 | #about-head img { 715 | width: 50%; 716 | height: auto; 717 | } 718 | 719 | #about-head div { 720 | padding-left: 40px; 721 | } 722 | 723 | 724 | #about-app { 725 | text-align: center; 726 | } 727 | 728 | #about-app .video { 729 | width: 70%; 730 | height: 100%; 731 | margin: 30px auto 0 auto; 732 | } 733 | 734 | #about-app .video video { 735 | width: 100%; 736 | height: 100%; 737 | border-radius: 20px; 738 | } 739 | 740 | /* Contact Page */ 741 | 742 | #contact-details { 743 | display: flex; 744 | align-items: center; 745 | justify-content: space-between; 746 | } 747 | 748 | #contact-details .details { 749 | width: 40%; 750 | } 751 | 752 | #contact-details .details span, 753 | #form-details form span { 754 | font-size: 12px; 755 | } 756 | 757 | #contact-details .details h2, 758 | #form-details form h2 { 759 | font-size: 26px; 760 | line-height: 35px; 761 | padding: 20px 0; 762 | } 763 | 764 | #contact-details .details h3 { 765 | font-size: 16px; 766 | padding-bottom: 15px; 767 | } 768 | 769 | #contact-details .details li { 770 | list-style: none; 771 | display: flex; 772 | padding: 10px 0; 773 | align-items: center; 774 | } 775 | 776 | #contact-details .details li i { 777 | font-size: 14px; 778 | padding-right: 22px; 779 | } 780 | 781 | #contact-details .details li p { 782 | margin: 0; 783 | font-size: 14px; 784 | } 785 | 786 | #contact-details .map { 787 | width: 55%; 788 | height: 400px; 789 | } 790 | 791 | #contact-details .map iframe { 792 | width: 100%; 793 | height: 100%; 794 | } 795 | 796 | #form-details { 797 | display: flex; 798 | justify-content: space-between; 799 | margin: 30px; 800 | padding: 80px; 801 | border: 1px solid #e1e1e1; 802 | } 803 | 804 | #form-details form { 805 | width: 65%; 806 | display: flex; 807 | flex-direction: column; 808 | align-items: flex-start; 809 | } 810 | 811 | #form-details form input, 812 | #form-details form textarea { 813 | width: 100%; 814 | padding: 12px 15px; 815 | outline: none; 816 | margin-bottom: 20px; 817 | border: 1px solid #e1e1e1; 818 | } 819 | 820 | #form-details form button { 821 | background-color: #088178; 822 | color: #fff; 823 | } 824 | 825 | #form-details .people div { 826 | padding-bottom: 25px; 827 | display: flex; 828 | align-items: flex-start; 829 | } 830 | 831 | #form-details .people div img { 832 | width: 65px; 833 | height: 65px; 834 | object-fit: cover; 835 | margin-right: 15px; 836 | } 837 | 838 | #form-details .people div p { 839 | margin: 0; 840 | font-size: 13px; 841 | line-height: 25px; 842 | } 843 | 844 | #form-details .people div span { 845 | display: block; 846 | color: #000; 847 | font-size: 16px; 848 | font-weight: 600; 849 | } 850 | 851 | /* Cart Page */ 852 | 853 | #cart { 854 | overflow-x: auto; 855 | } 856 | 857 | #cart table { 858 | width: 100%; 859 | border-collapse: collapse; 860 | table-layout: fixed; 861 | white-space: nowrap; 862 | } 863 | 864 | #cart table img { 865 | width: 70px; 866 | } 867 | 868 | #cart table td:nth-child(1) { 869 | width: 100px; 870 | text-align: center; 871 | } 872 | 873 | #cart table td:nth-child(2) { 874 | width: 150px; 875 | text-align: center; 876 | } 877 | 878 | #cart table td:nth-child(3) { 879 | width: 250px; 880 | text-align: center; 881 | } 882 | 883 | #cart table td:nth-child(4), 884 | #cart table td:nth-child(5), 885 | #cart table td:nth-child(6) { 886 | width: 150px; 887 | text-align: center; 888 | } 889 | 890 | #cart table td:nth-child(5) input{ 891 | width: 70px; 892 | padding: 10px 5px 10px 15px; 893 | } 894 | 895 | #cart table thead { 896 | border: 1px solid #e2e9e1; 897 | border-left: none; 898 | border-right: none; 899 | } 900 | 901 | #cart table thead td { 902 | font-weight: 700; 903 | text-transform: uppercase; 904 | font-size: 13px; 905 | padding: 18px 0; 906 | } 907 | 908 | #cart table tbody tr td { 909 | padding-top: 15px; 910 | } 911 | 912 | #cart table tbody td { 913 | font-size: 13px; 914 | } 915 | 916 | #cart-add { 917 | display: flex; 918 | flex-wrap: wrap; 919 | justify-content: space-between; 920 | } 921 | 922 | #cart-add .coupon { 923 | width: 50%; 924 | margin-bottom: 30px; 925 | } 926 | 927 | #cart-add .coupon h3, 928 | #cart-add .subtotal h3 { 929 | padding-bottom: 15px; 930 | } 931 | 932 | #cart-add .coupon input { 933 | padding: 10px 20px; 934 | outline: none; 935 | width: 60%; 936 | margin-right: 10px; 937 | border: 1px solid #e2e9e1; 938 | } 939 | 940 | #cart-add .coupon button, 941 | #cart-add .subtotal button { 942 | background-color: #088178; 943 | color: #fff; 944 | padding: 12px 20px; 945 | } 946 | 947 | #cart-add .subtotal { 948 | width: 50%; 949 | margin-bottom: 30px; 950 | border: 1px solid #e2e9e1; 951 | padding: 30px; 952 | } 953 | 954 | #cart-add .subtotal table { 955 | border-collapse: collapse; 956 | width: 100%; 957 | margin-bottom: 20px; 958 | } 959 | 960 | #cart-add .subtotal table td { 961 | width: 50%; 962 | border: 1px solid #e2e9e1; 963 | padding: 10px; 964 | font-size: 13px; 965 | } 966 | 967 | /* Media Query */ 968 | 969 | @media (max-width: 799px) { 970 | .section-p1 { 971 | padding: 40px 40px; 972 | } 973 | 974 | #navbar { 975 | display: flex; 976 | flex-direction: column; 977 | align-items: flex-start; 978 | justify-content: flex-start; 979 | position: fixed; 980 | top: 0; 981 | right: -300px; 982 | height: 100vh; 983 | width: 300px; 984 | background-color: #E3E6F3; 985 | box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1); 986 | padding: 80px 0 0 10px; 987 | transition: 0.3s; 988 | } 989 | 990 | #navbar.active { 991 | right: 0px; 992 | } 993 | 994 | #navbar li { 995 | margin-bottom: 25px; 996 | } 997 | 998 | #mobile { 999 | display: flex; 1000 | align-items: center; 1001 | } 1002 | 1003 | #mobile i { 1004 | color: #1a1a1a; 1005 | font-size: 24px; 1006 | padding-left: 20px; 1007 | } 1008 | 1009 | #close { 1010 | display: initial; 1011 | position: absolute; 1012 | top: 30px; 1013 | left: 30px; 1014 | color: #222; 1015 | font-size: 24px; 1016 | } 1017 | 1018 | #lg-bag { 1019 | display: none; 1020 | } 1021 | 1022 | #hero { 1023 | height: 70vh; 1024 | padding: 0 80px; 1025 | background-position: top 30% right 30%; 1026 | } 1027 | 1028 | #feature { 1029 | justify-content: center; 1030 | } 1031 | 1032 | #feature .fe-box { 1033 | margin: 15px 15px; 1034 | } 1035 | 1036 | #product1 .pro-container { 1037 | justify-content: center; 1038 | } 1039 | 1040 | #product1 .pro { 1041 | margin: 15px; 1042 | } 1043 | 1044 | #banner { 1045 | height: 20vh; 1046 | } 1047 | 1048 | #sm-banner .banner-box { 1049 | min-height: 100%; 1050 | height: 30vh; 1051 | } 1052 | 1053 | #banner3 { 1054 | padding: 0 40px; 1055 | } 1056 | 1057 | #banner3 .banner-box { 1058 | width: 28%; 1059 | } 1060 | 1061 | #newsletter .form { 1062 | width: 70%; 1063 | } 1064 | 1065 | /* Contact Page */ 1066 | 1067 | #form-details { 1068 | padding: 40px; 1069 | } 1070 | 1071 | #form-details form { 1072 | width: 50%; 1073 | } 1074 | } 1075 | 1076 | @media (max-width: 477px) { 1077 | .section-p1 { 1078 | padding: 20px; 1079 | } 1080 | 1081 | #header { 1082 | padding: 10px 30px; 1083 | } 1084 | 1085 | h1 { 1086 | font-size: 38px; 1087 | } 1088 | 1089 | h2 { 1090 | font-size: 32px; 1091 | } 1092 | 1093 | #hero { 1094 | padding: 0 20px; 1095 | background-position: 55%; 1096 | } 1097 | 1098 | #feature { 1099 | justify-content: space-between; 1100 | } 1101 | 1102 | #feature .fe-box { 1103 | width: 155px; 1104 | margin: 0 0 15px 0; 1105 | } 1106 | 1107 | #product .pro { 1108 | width: 100%; 1109 | } 1110 | 1111 | #banner { 1112 | height: 40vh; 1113 | } 1114 | 1115 | #sm-banner .banner-box { 1116 | height: 40vh; 1117 | margin-bottom: 20px; 1118 | } 1119 | 1120 | #banner3 { 1121 | padding: 0 20px; 1122 | } 1123 | 1124 | #banner3 .banner-box { 1125 | width: 100%; 1126 | } 1127 | 1128 | #newsletter { 1129 | padding: 40px 20px; 1130 | } 1131 | 1132 | #newsletter .form { 1133 | width: 100%; 1134 | } 1135 | 1136 | footer .copyright { 1137 | text-align: start; 1138 | } 1139 | 1140 | /* Single Product */ 1141 | #productdetails { 1142 | display: flex; 1143 | flex-direction: column; 1144 | } 1145 | 1146 | #productdetails .single-pro-image { 1147 | width: 100%; 1148 | margin-right: 0px; 1149 | } 1150 | 1151 | #productdetails .single-pro-details { 1152 | width: 100%; 1153 | } 1154 | 1155 | /* Blog Page */ 1156 | #blog { 1157 | padding: 100px 20px 0 20px; 1158 | } 1159 | 1160 | #blog .blog-box { 1161 | display: flex; 1162 | flex-direction: column; 1163 | align-items: flex-start; 1164 | } 1165 | 1166 | #blog .blog-img { 1167 | width: 100%; 1168 | margin-right: 0px; 1169 | margin-bottom: 30px; 1170 | } 1171 | 1172 | #blog .blog-details { 1173 | width: 100%; 1174 | } 1175 | 1176 | /* About Page */ 1177 | 1178 | #about-head { 1179 | flex-direction: column; 1180 | } 1181 | 1182 | #about-head img { 1183 | width: 100%; 1184 | margin-bottom: 20px; 1185 | } 1186 | 1187 | #about-head div { 1188 | padding-left: 0px; 1189 | } 1190 | 1191 | #about-app .video { 1192 | width: 100%; 1193 | } 1194 | 1195 | /* Contact Page */ 1196 | 1197 | #contact-details { 1198 | flex-direction: column; 1199 | } 1200 | 1201 | #contact-details .details { 1202 | width: 100%; 1203 | margin-bottom: 30px; 1204 | } 1205 | 1206 | #contact-details .map { 1207 | width: 100%; 1208 | } 1209 | 1210 | #form-details { 1211 | margin: 10px; 1212 | padding: 30px 10px; 1213 | flex-wrap: wrap; 1214 | } 1215 | 1216 | #form-details form { 1217 | width: 100%; 1218 | margin-bottom: 30px; 1219 | } 1220 | 1221 | /* Cart Page */ 1222 | 1223 | #cart-add { 1224 | flex-direction: column; 1225 | } 1226 | 1227 | #cart-add .coupon { 1228 | width: 100%; 1229 | } 1230 | 1231 | #cart-add .subtotal { 1232 | width: 100%; 1233 | padding: 20px; 1234 | } 1235 | } --------------------------------------------------------------------------------