diff --git a/E-commerce website/about.html b/E-commerce website/about.html new file mode 100644 index 0000000..f6866e6 --- /dev/null +++ b/E-commerce website/about.html @@ -0,0 +1,152 @@ + + + + + + + E-commerce + + + + + + + +
+ +

#KnowUs

+ +

The people behind the brand!

+ +
+ +
+ +
+

Who We Are?

+

At Cara, we're passionate about providing fashion-forward individuals with high-quality apparel that reflects their unique style and personality. With a commitment to excellence and a keen eye for design, we curate a collection of clothing that blends contemporary trends with timeless elegance. Our mission is to empower individuals to express themselves through fashion, offering a diverse range of clothing options crafted from premium materials for superior comfort and durability. Whether you're seeking casual staples or statement pieces, our carefully curated selection caters to every occasion and taste. Embrace your individuality and elevate your wardrobe with Cara.

+ + Embrace your individuality and elevate your wardrobe with Cara's eclectic collection of fashion-forward apparel. + +

+ + Discover timeless style and impeccable craftsmanship with our curated selection of clothing for every occasion. +
+
+ +
+

Download Our App

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

Sign Up for Newsletter

+

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

+
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/E-commerce website/blog.html b/E-commerce website/blog.html new file mode 100644 index 0000000..72453c3 --- /dev/null +++ b/E-commerce website/blog.html @@ -0,0 +1,168 @@ + + + + + + + E-commerce + + + + + + + +
+ +

#readmore

+ +

Read all case studies about our products!

+ +
+ +
+
+
+ +
+
+

The Cotton-Jersey Zip-Up Hoodie

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yr wolf chartruese hexagon irony godard...

+ CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

How to style a Quiff

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yr wolf chartruese hexagon irony godard...

+ CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

Must-Have Skater girl items

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yr wolf chartruese hexagon irony godard...

+ CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

Runaway Inspired Trends

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yr wolf chartruese hexagon irony godard...

+ CONTINUE READING +
+

13/01

+
+
+
+ +
+
+

AW20 Menswear Trends

+

Kickstarter man braid godard coloring book. Raclette waistcoat selfies yr wolf chartruese hexagon irony godard...

+ CONTINUE READING +
+

13/01

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

Sign Up for Newsletter

+

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

+
+
+ + +
+
+ + + + + + \ No newline at end of file diff --git a/E-commerce website/cart.html b/E-commerce website/cart.html new file mode 100644 index 0000000..ab35be8 --- /dev/null +++ b/E-commerce website/cart.html @@ -0,0 +1,163 @@ + + + + + + + E-commerce + + + + + + + +
+ +

#let's_talk

+ +

LEAVE A MESSAGE, We love to hear from you!

+ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RemoveImageProductPriceQuantitySubtotal
Mystic Garden Explorer Shirt$29.99$29.99
Island Oasis Explorer Shirt$34.99$34.99
Vintage Rose Garden Explorer Shirt$39.99$39.99
+
+ +
+
+

Apply Coupon

+
+ + +
+
+ +
+

Cart Total

+ + + + + + + + + + + + + +
Cart Subtotal$104.97
ShippingFree
Total$104.97
+ +
+
+ + + + + + \ No newline at end of file diff --git a/E-commerce website/contact.html b/E-commerce website/contact.html new file mode 100644 index 0000000..7fd4776 --- /dev/null +++ b/E-commerce website/contact.html @@ -0,0 +1,161 @@ + + + + + + + E-commerce + + + + + + + +
+ +

#let's_talk

+ +

LEAVE A MESSAGE, We love to hear from you!

+ +
+ +
+
+ GET IN TOUCH +

Visit one of our agency locations or contact us today

+

Head Office

+
+
  • + +

    56 GlassFord Street Glasgow G1 1UL United Kingdom

    +
    • +
  • + +

    cara_ecommerce@gmail.com

    +
    • +
  • + +

    +01 2222 365 /(+91) 01 2354 7648

    +
    • +
  • + +

    Monday-Saturday 9:00 am to 6:00 pm

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

    We love to hear from you

    + + + + + +
    + +
    +
    + +

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

    +
    +
    + +

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

    +
    +
    + +

    Emma Stone Marketing Manager
    Phone: + 000 123 000 77 88
    Email: johndoe@gmail.com

    +
    +
    +
    + +
    +
    +

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + \ No newline at end of file diff --git a/E-commerce website/images/1.png b/E-commerce website/images/1.png new file mode 100644 index 0000000..bd9d4e0 Binary files /dev/null and b/E-commerce website/images/1.png differ diff --git a/E-commerce website/images/1688190033988-product-5-2.jpg b/E-commerce website/images/1688190033988-product-5-2.jpg new file mode 100644 index 0000000..1d49234 Binary files /dev/null and b/E-commerce website/images/1688190033988-product-5-2.jpg differ diff --git a/E-commerce website/images/1690436545864-product-3-2 (1).jpg b/E-commerce website/images/1690436545864-product-3-2 (1).jpg new file mode 100644 index 0000000..cfe38ae Binary files /dev/null and b/E-commerce website/images/1690436545864-product-3-2 (1).jpg differ diff --git a/E-commerce website/images/2.png b/E-commerce website/images/2.png new file mode 100644 index 0000000..c8a1686 Binary files /dev/null and b/E-commerce website/images/2.png differ diff --git a/E-commerce website/images/3.png b/E-commerce website/images/3.png new file mode 100644 index 0000000..8f6bf24 Binary files /dev/null and b/E-commerce website/images/3.png differ diff --git a/E-commerce website/images/873277b10f60f86e7375b9ff851dc107.jpg b/E-commerce website/images/873277b10f60f86e7375b9ff851dc107.jpg new file mode 100644 index 0000000..4023ff1 Binary files /dev/null and b/E-commerce website/images/873277b10f60f86e7375b9ff851dc107.jpg differ diff --git a/E-commerce website/images/a6.jpg b/E-commerce website/images/a6.jpg new file mode 100644 index 0000000..f801426 Binary files /dev/null and b/E-commerce website/images/a6.jpg differ diff --git a/E-commerce website/images/app.jpg b/E-commerce website/images/app.jpg new file mode 100644 index 0000000..b0c7088 Binary files /dev/null and b/E-commerce website/images/app.jpg differ diff --git a/E-commerce website/images/b1 (1).jpg b/E-commerce website/images/b1 (1).jpg new file mode 100644 index 0000000..a908f50 Binary files /dev/null and b/E-commerce website/images/b1 (1).jpg differ diff --git a/E-commerce website/images/b1.jpg b/E-commerce website/images/b1.jpg new file mode 100644 index 0000000..1f9f33e Binary files /dev/null and b/E-commerce website/images/b1.jpg differ diff --git a/E-commerce website/images/b10.jpg b/E-commerce website/images/b10.jpg new file mode 100644 index 0000000..e8436d3 Binary files /dev/null and b/E-commerce website/images/b10.jpg differ diff --git a/E-commerce website/images/b14.png b/E-commerce website/images/b14.png new file mode 100644 index 0000000..53fecf5 Binary files /dev/null and b/E-commerce website/images/b14.png differ diff --git a/E-commerce website/images/b17.jpg b/E-commerce website/images/b17.jpg new file mode 100644 index 0000000..8e8a330 Binary files /dev/null and b/E-commerce website/images/b17.jpg differ diff --git a/E-commerce website/images/b18.jpg b/E-commerce website/images/b18.jpg new file mode 100644 index 0000000..f98f205 Binary files /dev/null and b/E-commerce website/images/b18.jpg differ diff --git a/E-commerce website/images/b19.jpg b/E-commerce website/images/b19.jpg new file mode 100644 index 0000000..5ee8c1d Binary files /dev/null and b/E-commerce website/images/b19.jpg differ diff --git a/E-commerce website/images/b2 (1).jpg b/E-commerce website/images/b2 (1).jpg new file mode 100644 index 0000000..1471e71 Binary files /dev/null and b/E-commerce website/images/b2 (1).jpg differ diff --git a/E-commerce website/images/b2.jpg b/E-commerce website/images/b2.jpg new file mode 100644 index 0000000..c435bc3 Binary files /dev/null and b/E-commerce website/images/b2.jpg differ diff --git a/E-commerce website/images/b3.jpg b/E-commerce website/images/b3.jpg new file mode 100644 index 0000000..58043a0 Binary files /dev/null and b/E-commerce website/images/b3.jpg differ diff --git a/E-commerce website/images/b4 (1).jpg b/E-commerce website/images/b4 (1).jpg new file mode 100644 index 0000000..12067ef Binary files /dev/null and b/E-commerce website/images/b4 (1).jpg differ diff --git a/E-commerce website/images/b4.jpg b/E-commerce website/images/b4.jpg new file mode 100644 index 0000000..cf119e5 Binary files /dev/null and b/E-commerce website/images/b4.jpg differ diff --git a/E-commerce website/images/b5.jpg b/E-commerce website/images/b5.jpg new file mode 100644 index 0000000..83765d5 Binary files /dev/null and b/E-commerce website/images/b5.jpg differ diff --git a/E-commerce website/images/b6.jpg b/E-commerce website/images/b6.jpg new file mode 100644 index 0000000..92f91ae Binary files /dev/null and b/E-commerce website/images/b6.jpg differ diff --git a/E-commerce website/images/b7.jpg b/E-commerce website/images/b7.jpg new file mode 100644 index 0000000..5a8ecb0 Binary files /dev/null and b/E-commerce website/images/b7.jpg differ diff --git a/E-commerce website/images/banner.png b/E-commerce website/images/banner.png new file mode 100644 index 0000000..3d8abb6 Binary files /dev/null and b/E-commerce website/images/banner.png differ diff --git a/E-commerce website/images/button.png b/E-commerce website/images/button.png new file mode 100644 index 0000000..8f2e73b Binary files /dev/null and b/E-commerce website/images/button.png differ diff --git a/E-commerce website/images/f1.jpg b/E-commerce website/images/f1.jpg new file mode 100644 index 0000000..7d5f516 Binary files /dev/null and b/E-commerce website/images/f1.jpg differ diff --git a/E-commerce website/images/f1.png b/E-commerce website/images/f1.png new file mode 100644 index 0000000..0a35eb0 Binary files /dev/null and b/E-commerce website/images/f1.png differ diff --git a/E-commerce website/images/f2.jpg b/E-commerce website/images/f2.jpg new file mode 100644 index 0000000..a2cbe5b Binary files /dev/null and b/E-commerce website/images/f2.jpg differ diff --git a/E-commerce website/images/f2.png b/E-commerce website/images/f2.png new file mode 100644 index 0000000..c524bf3 Binary files /dev/null and b/E-commerce website/images/f2.png differ diff --git a/E-commerce website/images/f3.jpg b/E-commerce website/images/f3.jpg new file mode 100644 index 0000000..2f95e4d Binary files /dev/null and b/E-commerce website/images/f3.jpg differ diff --git a/E-commerce website/images/f3.png b/E-commerce website/images/f3.png new file mode 100644 index 0000000..8366e8d Binary files /dev/null and b/E-commerce website/images/f3.png differ diff --git a/E-commerce website/images/f4.jpg b/E-commerce website/images/f4.jpg new file mode 100644 index 0000000..17d6e41 Binary files /dev/null and b/E-commerce website/images/f4.jpg differ diff --git a/E-commerce website/images/f4.png b/E-commerce website/images/f4.png new file mode 100644 index 0000000..4714ed2 Binary files /dev/null and b/E-commerce website/images/f4.png differ diff --git a/E-commerce website/images/f5.jpg b/E-commerce website/images/f5.jpg new file mode 100644 index 0000000..719b18f Binary files /dev/null and b/E-commerce website/images/f5.jpg differ diff --git a/E-commerce website/images/f5.png b/E-commerce website/images/f5.png new file mode 100644 index 0000000..4876146 Binary files /dev/null and b/E-commerce website/images/f5.png differ diff --git a/E-commerce website/images/f6.jpg b/E-commerce website/images/f6.jpg new file mode 100644 index 0000000..498d442 Binary files /dev/null and b/E-commerce website/images/f6.jpg differ diff --git a/E-commerce website/images/f6.png b/E-commerce website/images/f6.png new file mode 100644 index 0000000..2525c18 Binary files /dev/null and b/E-commerce website/images/f6.png differ diff --git a/E-commerce website/images/f7.jpg b/E-commerce website/images/f7.jpg new file mode 100644 index 0000000..93f5881 Binary files /dev/null and b/E-commerce website/images/f7.jpg differ diff --git a/E-commerce website/images/f8.jpg b/E-commerce website/images/f8.jpg new file mode 100644 index 0000000..623c885 Binary files /dev/null and b/E-commerce website/images/f8.jpg differ diff --git a/E-commerce website/images/hero4.png b/E-commerce website/images/hero4.png new file mode 100644 index 0000000..e929356 Binary files /dev/null and b/E-commerce website/images/hero4.png differ diff --git a/E-commerce website/images/images.jpg b/E-commerce website/images/images.jpg new file mode 100644 index 0000000..d9f76da Binary files /dev/null and b/E-commerce website/images/images.jpg differ diff --git a/E-commerce website/images/logo (1).png b/E-commerce website/images/logo (1).png new file mode 100644 index 0000000..a8b9f9d Binary files /dev/null and b/E-commerce website/images/logo (1).png differ diff --git a/E-commerce website/images/logo.png b/E-commerce website/images/logo.png new file mode 100644 index 0000000..a8b9f9d Binary files /dev/null and b/E-commerce website/images/logo.png differ diff --git a/E-commerce website/images/n1.jpg b/E-commerce website/images/n1.jpg new file mode 100644 index 0000000..9afe15c Binary files /dev/null and b/E-commerce website/images/n1.jpg differ diff --git a/E-commerce website/images/n2.jpg b/E-commerce website/images/n2.jpg new file mode 100644 index 0000000..4d1121f Binary files /dev/null and b/E-commerce website/images/n2.jpg differ diff --git a/E-commerce website/images/n3.jpg b/E-commerce website/images/n3.jpg new file mode 100644 index 0000000..b3cf216 Binary files /dev/null and b/E-commerce website/images/n3.jpg differ diff --git a/E-commerce website/images/n4.jpg b/E-commerce website/images/n4.jpg new file mode 100644 index 0000000..b6fe244 Binary files /dev/null and b/E-commerce website/images/n4.jpg differ diff --git a/E-commerce website/images/n5.jpg b/E-commerce website/images/n5.jpg new file mode 100644 index 0000000..84717f2 Binary files /dev/null and b/E-commerce website/images/n5.jpg differ diff --git a/E-commerce website/images/n6.jpg b/E-commerce website/images/n6.jpg new file mode 100644 index 0000000..8364318 Binary files /dev/null and b/E-commerce website/images/n6.jpg differ diff --git a/E-commerce website/images/n7.jpg b/E-commerce website/images/n7.jpg new file mode 100644 index 0000000..dbf0fdd Binary files /dev/null and b/E-commerce website/images/n7.jpg differ diff --git a/E-commerce website/images/n8.jpg b/E-commerce website/images/n8.jpg new file mode 100644 index 0000000..f80764b Binary files /dev/null and b/E-commerce website/images/n8.jpg differ diff --git a/E-commerce website/images/pay.png b/E-commerce website/images/pay.png new file mode 100644 index 0000000..393b88f Binary files /dev/null and b/E-commerce website/images/pay.png differ diff --git a/E-commerce website/images/play.jpg b/E-commerce website/images/play.jpg new file mode 100644 index 0000000..d67c1ce Binary files /dev/null and b/E-commerce website/images/play.jpg differ diff --git a/E-commerce website/images/product-2-2.jpg b/E-commerce website/images/product-2-2.jpg new file mode 100644 index 0000000..708d365 Binary files /dev/null and b/E-commerce website/images/product-2-2.jpg differ diff --git a/E-commerce website/index.html b/E-commerce website/index.html new file mode 100644 index 0000000..bab1ad9 --- /dev/null +++ b/E-commerce website/index.html @@ -0,0 +1,437 @@ + + + + + + + E-commerce + + + + + + + +
    +

    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
    +
    +
    + +
    24/7 Support
    +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + Eclectic Echo +
    Mystic Garden Explorer Shirt
    +
    + + + + + +
    +

    $29.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Island Oasis Explorer Shirt
    +
    + + + + + +
    +

    $34.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Vintage Rose Garden Explorer Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Cherry Blossom Dream Explorer Shirt
    +
    + + + + + +
    +

    $32.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Midnight Bloom Explorer Shirt
    +
    + + + + + +
    +

    $36.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Colorblock Casual Corduroy Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Botanical Embroidered Linen Pants
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Feline Frenzy V-neck Blouse
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    +
    + + + +
    +

    New Arrivals

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Everyday Denim Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Summer Breeze Shorts
    +
    + + + + + +
    +

    $29.99

    +
    + +
    +
    + +
    + ChicWear +
    Everyday Essentials Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Urban Casual Shirt
    +
    + + + + + +
    +

    $29.99

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

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + \ No newline at end of file diff --git a/E-commerce website/s3product.html b/E-commerce website/s3product.html new file mode 100644 index 0000000..226feee --- /dev/null +++ b/E-commerce website/s3product.html @@ -0,0 +1,217 @@ + + + + + + + E-commerce + + + + + + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    Home / Shirts
    +

    Vintage Rose Garden Explorer Shirt

    +

    $39.99

    + + + +

    Product Details

    + Introducing our Floral Fusion Shirt, a contemporary take on classic elegance. Crafted from premium cotton, this shirt combines comfort with style effortlessly. The intricate floral pattern, featuring earthy tones and delicate detailing, adds a touch of sophistication to your ensemble. Whether you're attending a garden party or meeting friends for brunch, this shirt exudes charm and refinement. The relaxed fit and soft fabric ensure a comfortable wear, while the button-down front and pointed collar offer a polished look. Embrace the beauty of nature with our Floral Fusion Shirt and make a statement wherever you go. +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    +
    + +
    +
    +

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/E-commerce website/s4product.html b/E-commerce website/s4product.html new file mode 100644 index 0000000..142d7ce --- /dev/null +++ b/E-commerce website/s4product.html @@ -0,0 +1,217 @@ + + + + + + + E-commerce + + + + + + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    Home / Shirts
    +

    Cherry Blossom Dream Explorer Shirt

    +

    $32.99

    + + + +

    Product Details

    + Elevate your wardrobe with our Botanical Bloom Shirt, a perfect blend of style and comfort. Made from high-quality cotton fabric, this shirt boasts a luxurious feel against the skin. The intricate botanical print, featuring vibrant hues and intricate details, adds a refreshing touch to your look. Whether you're heading to a casual outing or a weekend getaway, this shirt effortlessly exudes laid-back sophistication. The relaxed fit and short sleeves ensure breathable wear, while the button-up design and classic collar lend a polished finish. Embrace the essence of nature with our Botanical Bloom Shirt and infuse your wardrobe with timeless charm. +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    +
    + +
    +
    +

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/E-commerce website/script.js b/E-commerce website/script.js new file mode 100644 index 0000000..6fa3868 --- /dev/null +++ b/E-commerce website/script.js @@ -0,0 +1,15 @@ +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'); + }) +} \ No newline at end of file diff --git a/E-commerce website/shop.html b/E-commerce website/shop.html new file mode 100644 index 0000000..4e31415 --- /dev/null +++ b/E-commerce website/shop.html @@ -0,0 +1,372 @@ + + + + + + + E-commerce + + + + + + + +
    + +

    #stayhome

    + +

    Save more with coupons & up to 70% off!

    + +
    + +
    +
    +
    + +
    + Eclectic Echo +
    Mystic Garden Explorer Shirt
    +
    + + + + + +
    +

    $29.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Island Oasis Explorer Shirt
    +
    + + + + + +
    +

    $34.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Vintage Rose Garden Explorer Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Cherry Blossom Dream Explorer Shirt
    +
    + + + + + +
    +

    $32.99

    +
    + +
    +
    + +
    + Floral Wanderlust +
    Midnight Bloom Explorer Shirt
    +
    + + + + + +
    +

    $36.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Colorblock Casual Corduroy Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Botanical Embroidered Linen Pants
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + Urban Fusion +
    Feline Frenzy V-neck Blouse
    +
    + + + + + +
    +

    $39.99

    +
    + +
    + +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Everyday Denim Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Summer Breeze Shorts
    +
    + + + + + +
    +

    $29.99

    +
    + +
    +
    + +
    + ChicWear +
    Everyday Essentials Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Urban Casual Shirt
    +
    + + + + + +
    +

    $29.99

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

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + \ No newline at end of file diff --git a/E-commerce website/sproduct.html b/E-commerce website/sproduct.html new file mode 100644 index 0000000..2fd44bf --- /dev/null +++ b/E-commerce website/sproduct.html @@ -0,0 +1,217 @@ + + + + + + + E-commerce + + + + + + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    Home / Shirts
    +

    Mystic Garden Explorer Shirt

    +

    $39.99

    + + + +

    Product Details

    + Introducing our charming Floral Print Shirt, a perfect blend of sophistication and style for the modern gentleman. Crafted from premium cotton fabric, this shirt features an intricate floral pattern that adds a touch of elegance to any ensemble. The breathable material ensures all-day comfort, while the classic button-down design and tailored fit exude timeless appeal. Whether you're attending a garden party or enjoying a leisurely day out, this shirt effortlessly elevates your look. Embrace floral finesse and make a statement with every step you take. +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    +
    + +
    +
    +

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/E-commerce website/ssproduct.html b/E-commerce website/ssproduct.html new file mode 100644 index 0000000..9794b56 --- /dev/null +++ b/E-commerce website/ssproduct.html @@ -0,0 +1,217 @@ + + + + + + + E-commerce + + + + + + + +
    +
    + + +
    +
    + +
    +
    + +
    +
    +
    + +
    +
    Home / Shirts
    +

    Island Oasis Explorer Shirt

    +

    $34.99

    + + + +

    Product Details

    + Elevate your wardrobe with our stylish Floral Print Shirt, a versatile piece that effortlessly transitions from casual to formal occasions. Made from high-quality cotton, this shirt boasts a vibrant floral print that adds a pop of personality to your outfit. The relaxed fit and breathable fabric ensure comfort all day long, while the button-down front and pointed collar provide a polished finish. Pair it with jeans for a laid-back weekend look or dress it up with tailored trousers for a smart-casual ensemble. Embrace floral flair and stand out from the crowd with this must-have shirt. +
    +
    + +
    +

    Featured Products

    +

    Summer Collection New Modern Design

    +
    +
    + +
    + ChicWear +
    Everyday Classic Button-Up Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    + +
    + ChicWear +
    Casual Elegance Checkered Shirt
    +
    + + + + + +
    +

    $44.99

    +
    + +
    +
    + +
    + ChicWear +
    Timeless White Oxford Shirt
    +
    + + + + + +
    +

    $39.99

    +
    + +
    +
    + +
    + ChicWear +
    Whiskered Wonderland Shirt
    +
    + + + + + +
    +

    $49.99

    +
    + +
    +
    +
    + +
    +
    +

    Sign Up for Newsletter

    +

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

    +
    +
    + + +
    +
    + + + + + + + + \ No newline at end of file diff --git a/E-commerce website/style.css b/E-commerce website/style.css new file mode 100644 index 0000000..b7f37ac --- /dev/null +++ b/E-commerce website/style.css @@ -0,0 +1,1153 @@ +@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Spartan', sans-serif; +} + +h1 { + font-size: 50px; + line-height: 64px; + color: #222; +} + +h2 { + font-size: 46px; + line-height: 54px; + color: #222; +} + +h4 { + font-size: 20px; + color: #222; +} + +h6 { + font-weight: 700; + font-size: 12px; +} + +p { + font-size: 16px; + color: #465b52; + margin: 15px 0 20px 0; +} + +.section-p1 { + padding: 40px 80px; +} + +.section-m1 { + margin: 40px 0; +} + +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 { + display: flex; + align-items: center; + justify-content: space-between; + padding: 20px 80px; + background: #E3E6F3; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.06); + z-index: 999; + position: sticky; + top: 0; + left: 0; +} + +#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; +} + +#hero { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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.1); +} + +#feature .fe-box img { + width: 100%; + margin-bottom: 10px; +} + +#feature .fe-box h6 { + display: inline-block; + padding: 9px 8px 6px 8px; + line-height: 1; + border-radius: 4px; + color: #088178; + background-color: #fddde4; +} + +#feature .fe-box:nth-child(2) h6 { + background-color: #cdebbc; +} +#feature .fe-box:nth-child(3) h6 { + background-color: #d1e8f2; +} +#feature .fe-box:nth-child(4) h6 { + background-color: #cdd4f8; +} +#feature .fe-box:nth-child(5) h6 { + background-color: #f6dbf6; +} +#feature .fe-box:nth-child(6) h6 { + background-color: #fff2e5; +} + +#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; + 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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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: #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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/img/banner/b17.jpg"); + min-width: 660px; + height: 50vh; + background-size: cover; + background-position: center; + padding: 30px; +} + +#sm-banner .banner-box2 { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/img/banner/b10.jpg"); +} + +#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; +} + +#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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/img/banner/b7.jpg"); + min-width: 30%; + height: 30vh; + background-size: cover; + background-position: center; + padding: 20px; + margin-bottom: 20px; +} + +#banner3 .banner-box2 { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/img/banner/b4.jpg"); +} + +#banner3 .banner-box3 { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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 h4 { + 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("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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: left; +} + +.small-img-col { + flex-basis: 24%; + cursor: pointer; + padding-right: 10px; +} + +#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 input:focus { + outline: none; +} + +#prodetails .single-pro-details button { + background: #088178; + color: #fff; +} + +#prodetails .single-pro-details span { + line-height: 25px; +} + +#page-header.blog-header { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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; +} + +#page-header.about-header { + background-image: url("https://raw.githubusercontent.com/tech2etc/Build-and-Deploy-Ecommerce-Website/main/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-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 form h2 { + font-size: 26px; + line-height: 35px; + padding: 20px 0; +} + +#contact-details .details h1 { + 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 form 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 { + 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 (max-width:799px) { + .section-p1 { + padding: 40px 40px; + } + #navbar { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + position: fixed; + top: 0; + right: -300px; + height: 100vh; + width: 300px; + background-color: #E3E6F3; + box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1); + padding: 80px 0 0 10px; + transition: 0.3s; + } + #navbar.active { + right: 0px; + } + #navbar li { + margin-bottom: 25px; + } + #mobile { + display: flex; + align-items: center; + } + #mobile i { + color: #1a1a1a; + font-size: 24px; + padding-left: 20px; + } + #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-position: top 30% right 30%; + } + #feature { + justify-content: center; + } + #feature .fe-box { + margin: 15px 15px; + } + #product1 .pro-container { + justify-content: center; + } + #product1 .pro { + margin: 15px; + } + #banner { + height: 20vh; + } + #sm-banner .banner-box { + min-width: 100%; + height: 30vh; + } + #banner3 { + padding: 0 40px; + } + #banner3 .banner-box { + width: 28%; + } + #newsletter .form { + width: 70%; + } + #form-details { + padding: 40px; + } + #form-details form { + width: 50%; + } +} + +@media (max-width: 477px) { + .section-p1 { + padding: 20px; + } + #header { + padding: 10px 30px; + } + h1 { + font-size: 38px; + } + h2 { + font-size: 32px; + } + #hero { + padding: 0 20px; + background-position: 55%; + } + #feature { + justify-content: space-between; + } + #feature .fe-box { + width: 155px; + margin: 0 0 15px 0; + } + #product1 .pro { + width: 100%; + } + #banner { + height: 40vh; + } + #sm-banner .banner-box { + height: 40vh; + } + #sm-banner .banner-box2 { + margin-top: 20px; + } + #banner3 { + padding: 0 20px; + } + #banner3 .banner-box { + width: 100%; + } + #newsletter { + padding: 40px 20px; + } + #newsletter .form { + width: 100%; + } + footer .copyright { + text-align: start; + } + #prodetails { + display: flex; + flex-direction: column; + } + #prodetails .single-pro-image { + width: 100%; + margin-right: 0px; + } + #prodetails .single-pro-details { + width: 100%; + } + #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; + margin-bottom: 30px; + } + #blog .blog-details { + width: 100%; + } + #about-head { + flex-direction: column; + } + #about-head img { + width: 100%; + margin-bottom: 20px; + } + #about-head div { + padding-left: 40px; + } + #about-app .video { + width: 100%; + } + #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-add { + flex-direction: 100%; + } + #coupon { + width: 100%; + } + #subtotal { + width: 100%; + padding: 20px; + } +} \ No newline at end of file