So here is my entire code of webpage and the problem I am facing is that when I run the program it works fine but I want to make it responsive, where I am stuck in a problem.
HTML ——————————————————————————
`
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Shopper</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header" id="header">
<nav class="nav__container">
<a href="index.html" class="nav__logo">
<i class="bx bxs-shopping-bags nav__logo-icon"></i> e-shopper
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list" style="list-style-type: none;">
<li class="nav__item">
<a href="index.html" class="nav__link active">Home</a>
</li>
<li class="nav__item">
<a href="shop.html" class="nav__link">Shop</a>
</li>
<li class="nav__item">
<a href="blog.html" class="nav__link">Blog</a>
</li>
<li class="nav__item">
<a href="about.html" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="contact.html" class="nav__link">Contact</a>
</li>
</ul>
</div>
<div class="nav__btns">
<div class="nav__shop" id="cart-shop">
<i class="bx bx-shopping-bag"></i>
</div>
<div class="login__toggle" id="login-toggle">
<i class="bx bx-user"></i>
</div>
</div>
</nav>
</header>
<div class="hero__container">
<div id="hero">
<img src="./images/hero4.png" alt="hero image">
<div id="hero__content">
<p>Trade-In-Offer</p>
<h1>Super value deals</h1>
<h1>On all products</h1>
<p>Save more with coupons & upto 70% off!</p>
<button id="hero__content__btn">
<img src="./images/button.png" alt="button image">
<span>Shop Now</span>
</button>
</div>
</div>
</div>
<div id="features">
<div class="features__img">
<img src="./images/features/f1.png" alt="free shipping image">
<span>Free Shipping</span>
</div>
<div class="features__img">
<img src="./images/features/f2.png" alt="online order image">
<span>Online Order</span>
</div>
<div class="features__img">
<img src="./images/features/f3.png" alt="save money image">
<span>Save Money</span>
</div>
<div class="features__img">
<img src="./images/features/f4.png" alt="promotions image">
<span>Promotions</span>
</div>
<div class="features__img">
<img src="./images/features/f5.png" alt="sell image">
<span>Happy Sells</span>
</div>
<div class="features__img">
<img src="./images/features/f6.png" alt="24/7 support image">
<span>24/7 Support</span>
</div>
</div>
<div id="featured__products">
<h1>Featured Products</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner">
<img src="./images/banner/b2.jpg" alt="cta banner img">
<div id="cta__banner__content">
<p>Repair Services</p>
<h1>Up to <span>70% Off</span> - All t-Shirts & Accessories</h1>
<button>Explore More</button>
</div>
</div>
<div id="featured__products">
<h1>New Arrivals</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner__2">
<div id="banner__1">
<img src="./images/banner/b17.jpg" alt="1st cta banner">
<div class="cta__banner__content__2">
<p>crazy deals</p>
<h1>buy 1 get 1 free</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Learn More</button>
</div>
</div>
<div id="banner__2">
<img src="./images/banner/b10.jpg" alt="2nd cta banner">
<div class="cta__banner__content__2">
<p>spring/summer</p>
<h1>upcomming season</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Collection</button>
</div>
</div>
</div>
<div id="text__banner">
<div class="text__banners">
<img src="./images/banner/b7.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>SEASONAL SALE</h2>
<h3>Winter Collection - 50% Off</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b4.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>NEW FOOTWEAR COLLECTION</h2>
<h3>Spring/Summer 2022</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b18.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>T-SHIRTS</h2>
<h3>New Trendy Prints</h3>
</div>
</div>
</div>
<div id="newsletter">
<div id="newsletter__content">
<p>Sign Up For Newsletters</p>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div id="newsletter__email">
<input type="text" placeholder="Your email address">
<button>Sign Up</button>
</div>
</div>
<footer id="footer">
<div id="footer__contact">
<i class="bx bxs-shopping-bags nav__logo-icon"></i><span>e-shopper</span>
<h4>Contact</h4>
<p><strong>Address:</strong>Welington Road, Street 32, San Francisco</p>
<p><strong>Phone:</strong>+01 2222 365</p>
<p><strong>Hours:</strong>10:00 - 18:00, Mon - Sat</p>
<h4>Follow Us</h4>
<i class='bx bxl-facebook'></i>
<i class='bx bxl-twitter' ></i>
<i class='bx bxl-instagram' ></i>
<i class='bx bxl-youtube' ></i>
</div>
<div id="footer__about">
<h4>About</h4>
<p>About Us</p>
<p>Delivery Information</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Contact Us</p>
</div>
<div id="footer__account">
<h4>My Account</h4>
<p>Sign In</p>
<p>View Cart</p>
<p>My Wishlist</p>
<p>Track My Order</p>
<p>Help</p>
</div>
<div id="footer__app">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<img src="./images/pay/app.jpg" alt="app store">
<img src="./images/pay/play.jpg" alt="play store">
<p>Secured Payment Gateways</p>
<img src="./images/pay/pay.png" alt="payment methods">
</div>
<p id="footer__copyright">©️ 2024 Samuel Lakra - HTML CSS JavaScript E-Commerce Project</p>
</footer>
<script src="index.js"></script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Shopper</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header" id="header">
<nav class="nav__container">
<a href="index.html" class="nav__logo">
<i class="bx bxs-shopping-bags nav__logo-icon"></i> e-shopper
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list" style="list-style-type: none;">
<li class="nav__item">
<a href="index.html" class="nav__link active">Home</a>
</li>
<li class="nav__item">
<a href="shop.html" class="nav__link">Shop</a>
</li>
<li class="nav__item">
<a href="blog.html" class="nav__link">Blog</a>
</li>
<li class="nav__item">
<a href="about.html" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="contact.html" class="nav__link">Contact</a>
</li>
</ul>
</div>
<div class="nav__btns">
<div class="nav__shop" id="cart-shop">
<i class="bx bx-shopping-bag"></i>
</div>
<div class="login__toggle" id="login-toggle">
<i class="bx bx-user"></i>
</div>
</div>
</nav>
</header>
<div class="hero__container">
<div id="hero">
<img src="./images/hero4.png" alt="hero image">
<div id="hero__content">
<p>Trade-In-Offer</p>
<h1>Super value deals</h1>
<h1>On all products</h1>
<p>Save more with coupons & upto 70% off!</p>
<button id="hero__content__btn">
<img src="./images/button.png" alt="button image">
<span>Shop Now</span>
</button>
</div>
</div>
</div>
<div id="features">
<div class="features__img">
<img src="./images/features/f1.png" alt="free shipping image">
<span>Free Shipping</span>
</div>
<div class="features__img">
<img src="./images/features/f2.png" alt="online order image">
<span>Online Order</span>
</div>
<div class="features__img">
<img src="./images/features/f3.png" alt="save money image">
<span>Save Money</span>
</div>
<div class="features__img">
<img src="./images/features/f4.png" alt="promotions image">
<span>Promotions</span>
</div>
<div class="features__img">
<img src="./images/features/f5.png" alt="sell image">
<span>Happy Sells</span>
</div>
<div class="features__img">
<img src="./images/features/f6.png" alt="24/7 support image">
<span>24/7 Support</span>
</div>
</div>
<div id="featured__products">
<h1>Featured Products</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner">
<img src="./images/banner/b2.jpg" alt="cta banner img">
<div id="cta__banner__content">
<p>Repair Services</p>
<h1>Up to <span>70% Off</span> - All t-Shirts & Accessories</h1>
<button>Explore More</button>
</div>
</div>
<div id="featured__products">
<h1>New Arrivals</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner__2">
<div id="banner__1">
<img src="./images/banner/b17.jpg" alt="1st cta banner">
<div class="cta__banner__content__2">
<p>crazy deals</p>
<h1>buy 1 get 1 free</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Learn More</button>
</div>
</div>
<div id="banner__2">
<img src="./images/banner/b10.jpg" alt="2nd cta banner">
<div class="cta__banner__content__2">
<p>spring/summer</p>
<h1>upcomming season</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Collection</button>
</div>
</div>
</div>
<div id="text__banner">
<div class="text__banners">
<img src="./images/banner/b7.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>SEASONAL SALE</h2>
<h3>Winter Collection - 50% Off</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b4.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>NEW FOOTWEAR COLLECTION</h2>
<h3>Spring/Summer 2022</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b18.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>T-SHIRTS</h2>
<h3>New Trendy Prints</h3>
</div>
</div>
</div>
<div id="newsletter">
<div id="newsletter__content">
<p>Sign Up For Newsletters</p>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div id="newsletter__email">
<input type="text" placeholder="Your email address">
<button>Sign Up</button>
</div>
</div>
<footer id="footer">
<div id="footer__contact">
<i class="bx bxs-shopping-bags nav__logo-icon"></i><span>e-shopper</span>
<h4>Contact</h4>
<p><strong>Address:</strong>Welington Road, Street 32, San Francisco</p>
<p><strong>Phone:</strong>+01 2222 365</p>
<p><strong>Hours:</strong>10:00 - 18:00, Mon - Sat</p>
<h4>Follow Us</h4>
<i class='bx bxl-facebook'></i>
<i class='bx bxl-twitter' ></i>
<i class='bx bxl-instagram' ></i>
<i class='bx bxl-youtube' ></i>
</div>
<div id="footer__about">
<h4>About</h4>
<p>About Us</p>
<p>Delivery Information</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Contact Us</p>
</div>
<div id="footer__account">
<h4>My Account</h4>
<p>Sign In</p>
<p>View Cart</p>
<p>My Wishlist</p>
<p>Track My Order</p>
<p>Help</p>
</div>
<div id="footer__app">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<img src="./images/pay/app.jpg" alt="app store">
<img src="./images/pay/play.jpg" alt="play store">
<p>Secured Payment Gateways</p>
<img src="./images/pay/pay.png" alt="payment methods">
</div>
<p id="footer__copyright">©️ 2024 Samuel Lakra - HTML CSS JavaScript E-Commerce Project</p>
</footer>
<script src="index.js"></script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-Shopper</title>
<link rel="stylesheet" href="styles.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<header class="header" id="header">
<nav class="nav__container">
<a href="index.html" class="nav__logo">
<i class="bx bxs-shopping-bags nav__logo-icon"></i> e-shopper
</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list" style="list-style-type: none;">
<li class="nav__item">
<a href="index.html" class="nav__link active">Home</a>
</li>
<li class="nav__item">
<a href="shop.html" class="nav__link">Shop</a>
</li>
<li class="nav__item">
<a href="blog.html" class="nav__link">Blog</a>
</li>
<li class="nav__item">
<a href="about.html" class="nav__link">About</a>
</li>
<li class="nav__item">
<a href="contact.html" class="nav__link">Contact</a>
</li>
</ul>
</div>
<div class="nav__btns">
<div class="nav__shop" id="cart-shop">
<i class="bx bx-shopping-bag"></i>
</div>
<div class="login__toggle" id="login-toggle">
<i class="bx bx-user"></i>
</div>
</div>
</nav>
</header>
<div class="hero__container">
<div id="hero">
<img src="./images/hero4.png" alt="hero image">
<div id="hero__content">
<p>Trade-In-Offer</p>
<h1>Super value deals</h1>
<h1>On all products</h1>
<p>Save more with coupons & upto 70% off!</p>
<button id="hero__content__btn">
<img src="./images/button.png" alt="button image">
<span>Shop Now</span>
</button>
</div>
</div>
</div>
<div id="features">
<div class="features__img">
<img src="./images/features/f1.png" alt="free shipping image">
<span>Free Shipping</span>
</div>
<div class="features__img">
<img src="./images/features/f2.png" alt="online order image">
<span>Online Order</span>
</div>
<div class="features__img">
<img src="./images/features/f3.png" alt="save money image">
<span>Save Money</span>
</div>
<div class="features__img">
<img src="./images/features/f4.png" alt="promotions image">
<span>Promotions</span>
</div>
<div class="features__img">
<img src="./images/features/f5.png" alt="sell image">
<span>Happy Sells</span>
</div>
<div class="features__img">
<img src="./images/features/f6.png" alt="24/7 support image">
<span>24/7 Support</span>
</div>
</div>
<div id="featured__products">
<h1>Featured Products</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/f8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner">
<img src="./images/banner/b2.jpg" alt="cta banner img">
<div id="cta__banner__content">
<p>Repair Services</p>
<h1>Up to <span>70% Off</span> - All t-Shirts & Accessories</h1>
<button>Explore More</button>
</div>
</div>
<div id="featured__products">
<h1>New Arrivals</h1>
<p>Summer collection new modern design</p>
<div id="featured__products__cards">
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n1.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n2.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n3.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n4.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n5.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n6.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n7.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
<div class="featured__products__cards">
<div class="products__img__container">
<img src="./images/products/n8.jpg" alt="1st__product">
</div>
<div class="featured__products__details">
<span>adidas</span>
<span>Cartoon Astronaut T-Shirts</span>
<span>⭐⭐⭐⭐</span>
<span>78$</span>
<span><i class='bx bxs-cart-download'></i></span>
</div>
</div>
</div>
</div>
<div id="cta__banner__2">
<div id="banner__1">
<img src="./images/banner/b17.jpg" alt="1st cta banner">
<div class="cta__banner__content__2">
<p>crazy deals</p>
<h1>buy 1 get 1 free</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Learn More</button>
</div>
</div>
<div id="banner__2">
<img src="./images/banner/b10.jpg" alt="2nd cta banner">
<div class="cta__banner__content__2">
<p>spring/summer</p>
<h1>upcomming season</h1>
<p>The best classic dress is on sale at e-shopper</p>
<button>Collection</button>
</div>
</div>
</div>
<div id="text__banner">
<div class="text__banners">
<img src="./images/banner/b7.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>SEASONAL SALE</h2>
<h3>Winter Collection - 50% Off</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b4.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>NEW FOOTWEAR COLLECTION</h2>
<h3>Spring/Summer 2022</h3>
</div>
</div>
<div class="text__banners">
<img src="./images/banner/b18.jpg" alt="text banner img">
<div class="text__banner__content">
<h2>T-SHIRTS</h2>
<h3>New Trendy Prints</h3>
</div>
</div>
</div>
<div id="newsletter">
<div id="newsletter__content">
<p>Sign Up For Newsletters</p>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div id="newsletter__email">
<input type="text" placeholder="Your email address">
<button>Sign Up</button>
</div>
</div>
<footer id="footer">
<div id="footer__contact">
<i class="bx bxs-shopping-bags nav__logo-icon"></i><span>e-shopper</span>
<h4>Contact</h4>
<p><strong>Address:</strong>Welington Road, Street 32, San Francisco</p>
<p><strong>Phone:</strong>+01 2222 365</p>
<p><strong>Hours:</strong>10:00 - 18:00, Mon - Sat</p>
<h4>Follow Us</h4>
<i class='bx bxl-facebook'></i>
<i class='bx bxl-twitter' ></i>
<i class='bx bxl-instagram' ></i>
<i class='bx bxl-youtube' ></i>
</div>
<div id="footer__about">
<h4>About</h4>
<p>About Us</p>
<p>Delivery Information</p>
<p>Privacy Policy</p>
<p>Terms & Conditions</p>
<p>Contact Us</p>
</div>
<div id="footer__account">
<h4>My Account</h4>
<p>Sign In</p>
<p>View Cart</p>
<p>My Wishlist</p>
<p>Track My Order</p>
<p>Help</p>
</div>
<div id="footer__app">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<img src="./images/pay/app.jpg" alt="app store">
<img src="./images/pay/play.jpg" alt="play store">
<p>Secured Payment Gateways</p>
<img src="./images/pay/pay.png" alt="payment methods">
</div>
<p id="footer__copyright">©️ 2024 Samuel Lakra - HTML CSS JavaScript E-Commerce Project</p>
</footer>
<script src="index.js"></script>
</body>
</html>
CSS———————————————————————————–
<code>/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Home Page */
body{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container{
max-width: 968px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: antiquewhite;
position: fixed;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 10;
}
.nav__container{
display: flex;
}
.nav__list{
margin-left: 3rem;
display: flex;
justify-content: space-between;
width: 31rem;
}
.nav__link {
color: black;
text-decoration: none;
position: relative;
}
.nav__link::after{
content: '';
position: absolute;
width: 0;
height: 1px;
display: block;
margin-top: 1px;
right: 0;
background: black;
transition: 0.3s ease;
}
.nav__link:hover{
color: red;
}
.nav__link.active::after{
text-decoration: underline;
width: 100%;
left: 0;
background: black;
}
.nav__logo{
margin-top: 0.9rem;
width: 10rem;
margin-left: 11rem;
color: red;
text-decoration: none;
}
.nav__btns{
display: flex;
justify-content: space-evenly;
align-items: center;
width: 15rem;
margin-left: 15rem;
cursor: pointer;
}
.nav__btns i:hover{
color: rgb(255, 0, 0);
}
.hero-container {
margin-top: 3rem;
width: 100%;
position: relative;
overflow: hidden;
}
#hero {
width: 100%;
height: auto;
box-sizing: border-box;
}
#hero img{
position: relative;
height: 46rem;
width: 100%;
}
#hero__content{
position: absolute;
top: 15rem;
left: 10rem;
}
#hero__content__btn{
border: none;
background-color: transparent;
cursor: pointer;
}
#hero__content__btn:hover img{
transform: scale(1.1);
}
#hero__content__btn:hover span{
transform: scale(1.1);
}
#hero__content__btn img{
width: 10rem;
height: 2.8rem;
position: relative;
}
#hero__content__btn span{
position: absolute;
left: 3.5rem;
bottom: 1.5rem;
color: rgb(0, 121, 121);
font-weight: bold;
}
#hero__content p:nth-of-type(1){
font-weight: bold;
}
#hero__content p:nth-of-type(2){
color: rgb(177, 177, 177);
}
#hero__content h1:nth-of-type(2){
color: rgb(0, 121, 121);
}
#hero__content h1{
font-size: 2.7rem;
margin: 0;
}
#features{
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 2rem;
}
.features__img{
height: 11rem;
width: 11rem;
border: 1px solid rgb(222, 222, 222);
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.features__img span{
margin-top: 1.3rem;
padding: 5px;
font-size: small;
font-weight: bold;
color: rgb(0, 121, 121);
border-radius: 5px;
}
#features .features__img:nth-of-type(1) span{
background-color: rgb(252, 195, 204);
}
#features .features__img:nth-of-type(2) span{
background-color: rgb(162, 255, 175);
}
#features .features__img:nth-of-type(3) span{
background-color: rgb(163, 220, 251);
}
#features .features__img:nth-of-type(4) span{
background-color: rgb(204, 174, 255);
}
#features .features__img:nth-of-type(5) span{
background-color: rgb(255, 194, 251);
}
#features .features__img:nth-of-type(6) span{
background-color: rgb(255, 229, 173);
}
#featured__products{
display: flex;
flex-direction: column;
margin-top: 4rem;
align-items: center;
}
#featured__products h1{
font-size: 3rem;
margin-bottom: 0;
}
#featured__products p{
margin: 0;
padding: 0;
color: rgb(177, 177, 177);
}
#featured__products__cards{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 3rem;
column-gap: 4rem;
width: 100vw;
height: 68rem;
padding: 5rem;
box-sizing: border-box
}
.featured__products__cards{
width: 100%;
border-radius: 20px;
padding: 10px;
border: 1px solid rgb(208, 208, 208);
cursor: pointer;
transition: transform 0.3s ease;
}
.featured__products__cards:hover{
box-shadow: 1px 1px 1px 1px rgb(154, 154, 154);
transform: scale(1.02);
}
.products__img__container{
border-radius: 20px;
}
.featured__products__cards img{
width: 100%;
border-radius: 20px;
}
.featured__products__details{
display: flex;
flex-direction: column;
position: relative;
top: 0;
}
.featured__products__details span:nth-of-type(1){
font-size: 11px;
color: rgb(150, 156, 156);
}
.featured__products__details span:nth-of-type(2){
font-weight: bold;
}
.featured__products__details span:nth-of-type(4){
color: rgb(0, 187, 125);
}
.featured__products__details span:nth-of-type(5){
position: absolute;
top: 4.3rem;
right: 0;
border-radius: 0 0 12px 0;
height: 2.5rem;
width: 2.5rem;
background-color: rgb(192, 255, 234);
transition: 0.3s ease;
}
.featured__products__details span:nth-of-type(5):hover{
background-color: rgb(121, 255, 210);
}
.featured__products__details span:nth-of-type(5) i{
font-size: 2rem;
height: auto;
width: auto;
}
#cta__banner{
width: 100%;
margin-top: 2rem;
position: relative;
top: 0;
}
#cta__banner img{
width: 100%;
height: 18rem;
}
#cta__banner__content{
position: absolute;
top: 4rem;
left: 28rem;
margin: 0;
}
#cta__banner__content p{
margin-top: 0;
margin-left: 17rem;
padding: 0;
color: white;
}
#cta__banner__content h1{
color: white;
}
#cta__banner__content span{
color: red;
}
#cta__banner__content button{
margin-left: 17rem;
border-radius: 4px;
border: none;
height: 2.5rem;
width: 8rem;
font-size: 11px;
font-weight: bold;
cursor: pointer;
transition: 0.3s ease;
}
#cta__banner__content button:hover{
background-color: rgb(0, 167, 112);
color: black;
}
#cta__banner__2{
display: flex;
flex-direction: row;
gap: 2rem;
padding-left: 4.5rem;
}
#banner__1{
position: relative;
top: 0;
}
#banner__2{
position: relative;
top: 0;
}
#banner__1 img{
width: 42.8rem;
}
#banner__2 img{
width: 42.3rem;
height: 23.6rem;
}
.cta__banner__content__2{
position: absolute;
left: 3rem;
top: 6rem;
}
.cta__banner__content__2 p{
color: white;
}
.cta__banner__content__2 p:nth-of-type(2){
margin-top: 0;
font-size: 0.8rem;
}
.cta__banner__content__2 h1{
color: white;
}
.cta__banner__content__2 button{
height: 2.3rem;
width: 6rem;
border: white 1px solid;
background-color: transparent;
cursor: pointer;
color: white;
font-size: 13px;
font-weight: bold;
transition: 0.3s ease;
}
#banner__1:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#banner__2:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#text__banner{
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
column-gap: 2rem;
margin-top: 2.5rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
}
.text__banners{
height: 15rem;
position: relative;
top: 0;
}
.text__banners img {
width: 100%;
height: 100%;
}
.text__banner__content{
position: absolute;
top: 4rem;
left: 2rem;
}
.text__banner__content h2{
color: white;
}
.text__banner__content h3{
color: rgb(255, 50, 50);
}
#newsletter{
background-color: rgb(0, 0, 65);
height: 9rem;
margin-top: 3rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#newsletter__content p:nth-of-type(1){
color: white;
font-weight: bold;
font-size: 1.4rem;
}
#newsletter__content p:nth-of-type(2){
color: rgb(127, 127, 127);
font-size: 0.9rem;
}
#newsletter__content p span{
color: orange;
}
#newsletter__email{
display: flex;
align-items: center;
}
#newsletter__email input{
height: 2.3rem;
width: 25rem;
border-radius: 5px 0 0 5px;
border: none;
}
#newsletter__email button{
height: 2.5rem;
width: 6.5rem;
cursor: pointer;
color: white;
background-color: rgb(0, 121, 121);
border: none;
border-radius: 0 5px 5px 0;
}
#footer{
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
padding-left: 4.4rem;
gap: 11rem;
position: relative;
top: 0;
}
#footer__copyright{
position: absolute;
top: 18rem;
left: 34rem;
}
#footer__contact{
margin-top: 1.4rem;
}
#footer__contact i:nth-of-type(1){
color: red;
height: 1rem;
width: 1rem;
}
#footer__contact span{
color: red;
}
#footer p{
font-size: 12px;
color: rgb(151, 151, 151);
}
#footer p strong{
color: black;
}
#footer__contact i:nth-of-type(2){
cursor: pointer;
}
#footer__contact i:nth-of-type(3){
cursor: pointer;
}
#footer__contact i:nth-of-type(4){
cursor: pointer;
}
#footer__contact i:nth-of-type(5){
cursor: pointer;
}
#footer__about p{
cursor: pointer;
}
#footer__account p{
cursor: pointer;
}
#footer__app img:nth-of-type(1){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(2){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(3){
cursor: pointer;
}
/* Media Query */
@media (max-width:799px){
body {
width: 100%;
height: 100%;
}
#header{
height: 5rem;
}
.nav__logo {
width: 12rem;
font-size: 1.8rem;
margin-left: 5rem;
}
.nav__list{
font-size: 1.4rem;
}
.nav__list li{
margin-bottom: 3rem;
}
.nav__btns{
width: 10rem;
margin-left: 0;
margin-bottom: 3rem;
margin-left: 2rem;
font-size: 1.7rem;
}
.hero-container{
width: 100%;
}
#hero{
margin-top: 5rem;
width: 100rem !important;
max-width: 100% !important;
box-sizing: border-box;
height: 80rem;
}
#hero img{
width: 100% !important;
height: 100% !important;
}
}
</code>
<code>/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Home Page */
body{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container{
max-width: 968px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: antiquewhite;
position: fixed;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 10;
}
.nav__container{
display: flex;
}
.nav__list{
margin-left: 3rem;
display: flex;
justify-content: space-between;
width: 31rem;
}
.nav__link {
color: black;
text-decoration: none;
position: relative;
}
.nav__link::after{
content: '';
position: absolute;
width: 0;
height: 1px;
display: block;
margin-top: 1px;
right: 0;
background: black;
transition: 0.3s ease;
}
.nav__link:hover{
color: red;
}
.nav__link.active::after{
text-decoration: underline;
width: 100%;
left: 0;
background: black;
}
.nav__logo{
margin-top: 0.9rem;
width: 10rem;
margin-left: 11rem;
color: red;
text-decoration: none;
}
.nav__btns{
display: flex;
justify-content: space-evenly;
align-items: center;
width: 15rem;
margin-left: 15rem;
cursor: pointer;
}
.nav__btns i:hover{
color: rgb(255, 0, 0);
}
.hero-container {
margin-top: 3rem;
width: 100%;
position: relative;
overflow: hidden;
}
#hero {
width: 100%;
height: auto;
box-sizing: border-box;
}
#hero img{
position: relative;
height: 46rem;
width: 100%;
}
#hero__content{
position: absolute;
top: 15rem;
left: 10rem;
}
#hero__content__btn{
border: none;
background-color: transparent;
cursor: pointer;
}
#hero__content__btn:hover img{
transform: scale(1.1);
}
#hero__content__btn:hover span{
transform: scale(1.1);
}
#hero__content__btn img{
width: 10rem;
height: 2.8rem;
position: relative;
}
#hero__content__btn span{
position: absolute;
left: 3.5rem;
bottom: 1.5rem;
color: rgb(0, 121, 121);
font-weight: bold;
}
#hero__content p:nth-of-type(1){
font-weight: bold;
}
#hero__content p:nth-of-type(2){
color: rgb(177, 177, 177);
}
#hero__content h1:nth-of-type(2){
color: rgb(0, 121, 121);
}
#hero__content h1{
font-size: 2.7rem;
margin: 0;
}
#features{
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 2rem;
}
.features__img{
height: 11rem;
width: 11rem;
border: 1px solid rgb(222, 222, 222);
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.features__img span{
margin-top: 1.3rem;
padding: 5px;
font-size: small;
font-weight: bold;
color: rgb(0, 121, 121);
border-radius: 5px;
}
#features .features__img:nth-of-type(1) span{
background-color: rgb(252, 195, 204);
}
#features .features__img:nth-of-type(2) span{
background-color: rgb(162, 255, 175);
}
#features .features__img:nth-of-type(3) span{
background-color: rgb(163, 220, 251);
}
#features .features__img:nth-of-type(4) span{
background-color: rgb(204, 174, 255);
}
#features .features__img:nth-of-type(5) span{
background-color: rgb(255, 194, 251);
}
#features .features__img:nth-of-type(6) span{
background-color: rgb(255, 229, 173);
}
#featured__products{
display: flex;
flex-direction: column;
margin-top: 4rem;
align-items: center;
}
#featured__products h1{
font-size: 3rem;
margin-bottom: 0;
}
#featured__products p{
margin: 0;
padding: 0;
color: rgb(177, 177, 177);
}
#featured__products__cards{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 3rem;
column-gap: 4rem;
width: 100vw;
height: 68rem;
padding: 5rem;
box-sizing: border-box
}
.featured__products__cards{
width: 100%;
border-radius: 20px;
padding: 10px;
border: 1px solid rgb(208, 208, 208);
cursor: pointer;
transition: transform 0.3s ease;
}
.featured__products__cards:hover{
box-shadow: 1px 1px 1px 1px rgb(154, 154, 154);
transform: scale(1.02);
}
.products__img__container{
border-radius: 20px;
}
.featured__products__cards img{
width: 100%;
border-radius: 20px;
}
.featured__products__details{
display: flex;
flex-direction: column;
position: relative;
top: 0;
}
.featured__products__details span:nth-of-type(1){
font-size: 11px;
color: rgb(150, 156, 156);
}
.featured__products__details span:nth-of-type(2){
font-weight: bold;
}
.featured__products__details span:nth-of-type(4){
color: rgb(0, 187, 125);
}
.featured__products__details span:nth-of-type(5){
position: absolute;
top: 4.3rem;
right: 0;
border-radius: 0 0 12px 0;
height: 2.5rem;
width: 2.5rem;
background-color: rgb(192, 255, 234);
transition: 0.3s ease;
}
.featured__products__details span:nth-of-type(5):hover{
background-color: rgb(121, 255, 210);
}
.featured__products__details span:nth-of-type(5) i{
font-size: 2rem;
height: auto;
width: auto;
}
#cta__banner{
width: 100%;
margin-top: 2rem;
position: relative;
top: 0;
}
#cta__banner img{
width: 100%;
height: 18rem;
}
#cta__banner__content{
position: absolute;
top: 4rem;
left: 28rem;
margin: 0;
}
#cta__banner__content p{
margin-top: 0;
margin-left: 17rem;
padding: 0;
color: white;
}
#cta__banner__content h1{
color: white;
}
#cta__banner__content span{
color: red;
}
#cta__banner__content button{
margin-left: 17rem;
border-radius: 4px;
border: none;
height: 2.5rem;
width: 8rem;
font-size: 11px;
font-weight: bold;
cursor: pointer;
transition: 0.3s ease;
}
#cta__banner__content button:hover{
background-color: rgb(0, 167, 112);
color: black;
}
#cta__banner__2{
display: flex;
flex-direction: row;
gap: 2rem;
padding-left: 4.5rem;
}
#banner__1{
position: relative;
top: 0;
}
#banner__2{
position: relative;
top: 0;
}
#banner__1 img{
width: 42.8rem;
}
#banner__2 img{
width: 42.3rem;
height: 23.6rem;
}
.cta__banner__content__2{
position: absolute;
left: 3rem;
top: 6rem;
}
.cta__banner__content__2 p{
color: white;
}
.cta__banner__content__2 p:nth-of-type(2){
margin-top: 0;
font-size: 0.8rem;
}
.cta__banner__content__2 h1{
color: white;
}
.cta__banner__content__2 button{
height: 2.3rem;
width: 6rem;
border: white 1px solid;
background-color: transparent;
cursor: pointer;
color: white;
font-size: 13px;
font-weight: bold;
transition: 0.3s ease;
}
#banner__1:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#banner__2:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#text__banner{
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
column-gap: 2rem;
margin-top: 2.5rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
}
.text__banners{
height: 15rem;
position: relative;
top: 0;
}
.text__banners img {
width: 100%;
height: 100%;
}
.text__banner__content{
position: absolute;
top: 4rem;
left: 2rem;
}
.text__banner__content h2{
color: white;
}
.text__banner__content h3{
color: rgb(255, 50, 50);
}
#newsletter{
background-color: rgb(0, 0, 65);
height: 9rem;
margin-top: 3rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#newsletter__content p:nth-of-type(1){
color: white;
font-weight: bold;
font-size: 1.4rem;
}
#newsletter__content p:nth-of-type(2){
color: rgb(127, 127, 127);
font-size: 0.9rem;
}
#newsletter__content p span{
color: orange;
}
#newsletter__email{
display: flex;
align-items: center;
}
#newsletter__email input{
height: 2.3rem;
width: 25rem;
border-radius: 5px 0 0 5px;
border: none;
}
#newsletter__email button{
height: 2.5rem;
width: 6.5rem;
cursor: pointer;
color: white;
background-color: rgb(0, 121, 121);
border: none;
border-radius: 0 5px 5px 0;
}
#footer{
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
padding-left: 4.4rem;
gap: 11rem;
position: relative;
top: 0;
}
#footer__copyright{
position: absolute;
top: 18rem;
left: 34rem;
}
#footer__contact{
margin-top: 1.4rem;
}
#footer__contact i:nth-of-type(1){
color: red;
height: 1rem;
width: 1rem;
}
#footer__contact span{
color: red;
}
#footer p{
font-size: 12px;
color: rgb(151, 151, 151);
}
#footer p strong{
color: black;
}
#footer__contact i:nth-of-type(2){
cursor: pointer;
}
#footer__contact i:nth-of-type(3){
cursor: pointer;
}
#footer__contact i:nth-of-type(4){
cursor: pointer;
}
#footer__contact i:nth-of-type(5){
cursor: pointer;
}
#footer__about p{
cursor: pointer;
}
#footer__account p{
cursor: pointer;
}
#footer__app img:nth-of-type(1){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(2){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(3){
cursor: pointer;
}
/* Media Query */
@media (max-width:799px){
body {
width: 100%;
height: 100%;
}
#header{
height: 5rem;
}
.nav__logo {
width: 12rem;
font-size: 1.8rem;
margin-left: 5rem;
}
.nav__list{
font-size: 1.4rem;
}
.nav__list li{
margin-bottom: 3rem;
}
.nav__btns{
width: 10rem;
margin-left: 0;
margin-bottom: 3rem;
margin-left: 2rem;
font-size: 1.7rem;
}
.hero-container{
width: 100%;
}
#hero{
margin-top: 5rem;
width: 100rem !important;
max-width: 100% !important;
box-sizing: border-box;
height: 80rem;
}
#hero img{
width: 100% !important;
height: 100% !important;
}
}
</code>
/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Home Page */
body{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container{
max-width: 968px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: antiquewhite;
position: fixed;
top: 0;
width: 100%;
box-sizing: border-box;
z-index: 10;
}
.nav__container{
display: flex;
}
.nav__list{
margin-left: 3rem;
display: flex;
justify-content: space-between;
width: 31rem;
}
.nav__link {
color: black;
text-decoration: none;
position: relative;
}
.nav__link::after{
content: '';
position: absolute;
width: 0;
height: 1px;
display: block;
margin-top: 1px;
right: 0;
background: black;
transition: 0.3s ease;
}
.nav__link:hover{
color: red;
}
.nav__link.active::after{
text-decoration: underline;
width: 100%;
left: 0;
background: black;
}
.nav__logo{
margin-top: 0.9rem;
width: 10rem;
margin-left: 11rem;
color: red;
text-decoration: none;
}
.nav__btns{
display: flex;
justify-content: space-evenly;
align-items: center;
width: 15rem;
margin-left: 15rem;
cursor: pointer;
}
.nav__btns i:hover{
color: rgb(255, 0, 0);
}
.hero-container {
margin-top: 3rem;
width: 100%;
position: relative;
overflow: hidden;
}
#hero {
width: 100%;
height: auto;
box-sizing: border-box;
}
#hero img{
position: relative;
height: 46rem;
width: 100%;
}
#hero__content{
position: absolute;
top: 15rem;
left: 10rem;
}
#hero__content__btn{
border: none;
background-color: transparent;
cursor: pointer;
}
#hero__content__btn:hover img{
transform: scale(1.1);
}
#hero__content__btn:hover span{
transform: scale(1.1);
}
#hero__content__btn img{
width: 10rem;
height: 2.8rem;
position: relative;
}
#hero__content__btn span{
position: absolute;
left: 3.5rem;
bottom: 1.5rem;
color: rgb(0, 121, 121);
font-weight: bold;
}
#hero__content p:nth-of-type(1){
font-weight: bold;
}
#hero__content p:nth-of-type(2){
color: rgb(177, 177, 177);
}
#hero__content h1:nth-of-type(2){
color: rgb(0, 121, 121);
}
#hero__content h1{
font-size: 2.7rem;
margin: 0;
}
#features{
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 2rem;
}
.features__img{
height: 11rem;
width: 11rem;
border: 1px solid rgb(222, 222, 222);
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.features__img span{
margin-top: 1.3rem;
padding: 5px;
font-size: small;
font-weight: bold;
color: rgb(0, 121, 121);
border-radius: 5px;
}
#features .features__img:nth-of-type(1) span{
background-color: rgb(252, 195, 204);
}
#features .features__img:nth-of-type(2) span{
background-color: rgb(162, 255, 175);
}
#features .features__img:nth-of-type(3) span{
background-color: rgb(163, 220, 251);
}
#features .features__img:nth-of-type(4) span{
background-color: rgb(204, 174, 255);
}
#features .features__img:nth-of-type(5) span{
background-color: rgb(255, 194, 251);
}
#features .features__img:nth-of-type(6) span{
background-color: rgb(255, 229, 173);
}
#featured__products{
display: flex;
flex-direction: column;
margin-top: 4rem;
align-items: center;
}
#featured__products h1{
font-size: 3rem;
margin-bottom: 0;
}
#featured__products p{
margin: 0;
padding: 0;
color: rgb(177, 177, 177);
}
#featured__products__cards{
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 3rem;
column-gap: 4rem;
width: 100vw;
height: 68rem;
padding: 5rem;
box-sizing: border-box
}
.featured__products__cards{
width: 100%;
border-radius: 20px;
padding: 10px;
border: 1px solid rgb(208, 208, 208);
cursor: pointer;
transition: transform 0.3s ease;
}
.featured__products__cards:hover{
box-shadow: 1px 1px 1px 1px rgb(154, 154, 154);
transform: scale(1.02);
}
.products__img__container{
border-radius: 20px;
}
.featured__products__cards img{
width: 100%;
border-radius: 20px;
}
.featured__products__details{
display: flex;
flex-direction: column;
position: relative;
top: 0;
}
.featured__products__details span:nth-of-type(1){
font-size: 11px;
color: rgb(150, 156, 156);
}
.featured__products__details span:nth-of-type(2){
font-weight: bold;
}
.featured__products__details span:nth-of-type(4){
color: rgb(0, 187, 125);
}
.featured__products__details span:nth-of-type(5){
position: absolute;
top: 4.3rem;
right: 0;
border-radius: 0 0 12px 0;
height: 2.5rem;
width: 2.5rem;
background-color: rgb(192, 255, 234);
transition: 0.3s ease;
}
.featured__products__details span:nth-of-type(5):hover{
background-color: rgb(121, 255, 210);
}
.featured__products__details span:nth-of-type(5) i{
font-size: 2rem;
height: auto;
width: auto;
}
#cta__banner{
width: 100%;
margin-top: 2rem;
position: relative;
top: 0;
}
#cta__banner img{
width: 100%;
height: 18rem;
}
#cta__banner__content{
position: absolute;
top: 4rem;
left: 28rem;
margin: 0;
}
#cta__banner__content p{
margin-top: 0;
margin-left: 17rem;
padding: 0;
color: white;
}
#cta__banner__content h1{
color: white;
}
#cta__banner__content span{
color: red;
}
#cta__banner__content button{
margin-left: 17rem;
border-radius: 4px;
border: none;
height: 2.5rem;
width: 8rem;
font-size: 11px;
font-weight: bold;
cursor: pointer;
transition: 0.3s ease;
}
#cta__banner__content button:hover{
background-color: rgb(0, 167, 112);
color: black;
}
#cta__banner__2{
display: flex;
flex-direction: row;
gap: 2rem;
padding-left: 4.5rem;
}
#banner__1{
position: relative;
top: 0;
}
#banner__2{
position: relative;
top: 0;
}
#banner__1 img{
width: 42.8rem;
}
#banner__2 img{
width: 42.3rem;
height: 23.6rem;
}
.cta__banner__content__2{
position: absolute;
left: 3rem;
top: 6rem;
}
.cta__banner__content__2 p{
color: white;
}
.cta__banner__content__2 p:nth-of-type(2){
margin-top: 0;
font-size: 0.8rem;
}
.cta__banner__content__2 h1{
color: white;
}
.cta__banner__content__2 button{
height: 2.3rem;
width: 6rem;
border: white 1px solid;
background-color: transparent;
cursor: pointer;
color: white;
font-size: 13px;
font-weight: bold;
transition: 0.3s ease;
}
#banner__1:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#banner__2:hover .cta__banner__content__2 button{
background-color: rgb(0, 121, 121);
border: none;
}
#text__banner{
display: grid;
grid-template-columns: 1fr 1.1fr 1fr;
column-gap: 2rem;
margin-top: 2.5rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
}
.text__banners{
height: 15rem;
position: relative;
top: 0;
}
.text__banners img {
width: 100%;
height: 100%;
}
.text__banner__content{
position: absolute;
top: 4rem;
left: 2rem;
}
.text__banner__content h2{
color: white;
}
.text__banner__content h3{
color: rgb(255, 50, 50);
}
#newsletter{
background-color: rgb(0, 0, 65);
height: 9rem;
margin-top: 3rem;
padding-left: 4.4rem;
padding-right: 3.4rem;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
#newsletter__content p:nth-of-type(1){
color: white;
font-weight: bold;
font-size: 1.4rem;
}
#newsletter__content p:nth-of-type(2){
color: rgb(127, 127, 127);
font-size: 0.9rem;
}
#newsletter__content p span{
color: orange;
}
#newsletter__email{
display: flex;
align-items: center;
}
#newsletter__email input{
height: 2.3rem;
width: 25rem;
border-radius: 5px 0 0 5px;
border: none;
}
#newsletter__email button{
height: 2.5rem;
width: 6.5rem;
cursor: pointer;
color: white;
background-color: rgb(0, 121, 121);
border: none;
border-radius: 0 5px 5px 0;
}
#footer{
display: flex;
flex-wrap: wrap;
margin-top: 2rem;
padding-left: 4.4rem;
gap: 11rem;
position: relative;
top: 0;
}
#footer__copyright{
position: absolute;
top: 18rem;
left: 34rem;
}
#footer__contact{
margin-top: 1.4rem;
}
#footer__contact i:nth-of-type(1){
color: red;
height: 1rem;
width: 1rem;
}
#footer__contact span{
color: red;
}
#footer p{
font-size: 12px;
color: rgb(151, 151, 151);
}
#footer p strong{
color: black;
}
#footer__contact i:nth-of-type(2){
cursor: pointer;
}
#footer__contact i:nth-of-type(3){
cursor: pointer;
}
#footer__contact i:nth-of-type(4){
cursor: pointer;
}
#footer__contact i:nth-of-type(5){
cursor: pointer;
}
#footer__about p{
cursor: pointer;
}
#footer__account p{
cursor: pointer;
}
#footer__app img:nth-of-type(1){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(2){
cursor: pointer;
border-radius: 5px;
border: 1px solid rgb(0, 121, 121);
}
#footer__app img:nth-of-type(3){
cursor: pointer;
}
/* Media Query */
@media (max-width:799px){
body {
width: 100%;
height: 100%;
}
#header{
height: 5rem;
}
.nav__logo {
width: 12rem;
font-size: 1.8rem;
margin-left: 5rem;
}
.nav__list{
font-size: 1.4rem;
}
.nav__list li{
margin-bottom: 3rem;
}
.nav__btns{
width: 10rem;
margin-left: 0;
margin-bottom: 3rem;
margin-left: 2rem;
font-size: 1.7rem;
}
.hero-container{
width: 100%;
}
#hero{
margin-top: 5rem;
width: 100rem !important;
max-width: 100% !important;
box-sizing: border-box;
height: 80rem;
}
#hero img{
width: 100% !important;
height: 100% !important;
}
}
JavaScript————————————————————————-
<code>//Active nav__link function
const navLinks = document.querySelectorAll(".nav__link");
navLinks.forEach(link => {
link.addEventListener('click', function(event){
event.preventDefault();
navLinks.forEach(link => link.classList.remove("active"));
event.target.classList.add("active");
});
});
</code>
<code>//Active nav__link function
const navLinks = document.querySelectorAll(".nav__link");
navLinks.forEach(link => {
link.addEventListener('click', function(event){
event.preventDefault();
navLinks.forEach(link => link.classList.remove("active"));
event.target.classList.add("active");
});
});
</code>
//Active nav__link function
const navLinks = document.querySelectorAll(".nav__link");
navLinks.forEach(link => {
link.addEventListener('click', function(event){
event.preventDefault();
navLinks.forEach(link => link.classList.remove("active"));
event.target.classList.add("active");
});
});
when put in responsive mode for tablet devices the html and body are not taking entire screen which I think is causing the elements inside to shrink as well. I am only able to increase the height of elements and not able to increase the width. Here are screenshots of
how I want it to look enter image description here
vs
how it’s looking for me enter image description here
I am just not able to increase the width of image and lot of other things as well, there must be some mistake i might have which i am not able to find or fix, ChatGPT didn’t help either so any kind of help is appreciated.
New contributor
Ignix is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.