Introduction :
Creating a website clone is an ambitious project that involves replicating the user interface and functionality of a well-established platform. In this case, the chosen platform is Amazon, one of the largest and most popular online marketplaces globally. The objective of this project is to understand and implement the key features and design elements that contribute to Amazon’s success in the e-commerce domain. The scope of this project encompasses the development of a static website using HTML for structure, CSS for styling, The use of external libraries, such as Font Awesome for icons, enhances the visual appeal and functionality of the site. The website aims to mimic Amazon’s layout, including a navigation bar, search box, promotional hero section, product cards, and footer. The project utilizes HTML for creating the structure of the web pages, defining the layout, and organizing content. CSS is employed to style the elements, providing a visually cohesive and aesthetically pleasing appearance. External resources like the Font Awesome library and Google Fonts enhance the overall design and user experience.
Explanation :
HTML Structure:
Document Type and Head Section:
- The document type is declared as HTML5.
- Meta tags for character set and viewport are included.
- External stylesheets and font-awesome icons are linked.
- The title of the page is set to “Online Shopping site in India: Shop Online for Mobiles, Books, Watches, Shoes and More – Amazon.in.”
Body Section:
- The page is divided into sections using div elements.
- The main content is within a container div.
- The page consists of a navigation bar, menu bar, quick links, hero page, cards/products section, a new user section, back-to-top button, social handles, and a footer.
Navigation Bar:
- Contains the Amazon logo, location details, search box, country selection, account information, orders, and cart.
Menu Bar:
- Includes a list of menu items and a location display.
Quick Links:
- Displays links to different categories, each with its own set of sub-links and a promotional message.
Hero Page:
- Contains a background image with a linear gradient overlay.
Cards/Products Section:
- Displays cards with various product categories, each with multiple products.
- Each card has a heading, images, and a link to “Shop Now” or “Explore All.”
New User Section:
- Encourages new users to sign in or start a new account.
Back-to-Top Button:
- Positioned at the bottom right to quickly scroll back to the top of the page.
Social Handles and Footer:
- Divided into multiple sections providing links and information related to Amazon.
CSS Styles:
Global Styles:
- Resets default margin and padding, sets the font family, and enables smooth scrolling.
Root Variables:
- Defines root variables for background colors.
Reusable Classes:
- Defines classes for common styling elements.
Navbar Styles:
- Styles for the navigation bar, including responsiveness.
Menu Bar and Quick Links Styles:
- Styles for menu bar, quick links, and their responsiveness
Hero Page Styles:
- Styles for the hero page and its linear gradient overlay.
Cards/Products Styles:
- Styles for the cards and product sections, including responsiveness.
New User Styles:
- Styles for the new user section.
Back-to-Top Button Styles:
- Styles for the back-to-top button.
Social Handles and Footer Styles:
- Styles for social handles, footer, and its sections.
SOURCE CODE :
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="favicon.io.ico" type="image/x-icon">
<title>Online Shopping site in India: Shop Online for Mobiles, Books, Watches, Shoes and More - Amazon.in'</title>
</head>
<body>
<div class="container">
<nav>
<div class="logo">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="main-assets/logo.png" alt="main-logo">
<span>.in</span>
</div>
<div class="set_location ln-height border">
<p class="first-line">Delivering to Patna 800020</p>
<p class="second-line">
<i class="fa-solid fa-location-dot"></i>
Update location
</p>
</div>
<div class="search_box">
<div>All <i class="fa-solid fa-caret-down"></i></div>
<input type="text" placeholder="Search Amazon.in">
<div class="camera_search">
<i class="fa-solid fa-camera"></i>
</div>
<div class="search">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<div class="choose_country border">
<div class="flag">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="main-assets/indian flag.png" alt="country flag" height="25px" />
</div>
<select name="" id="">
<option value="EN">IN</option>
<option value="EN">EN</option>
<option value="EN">US</option>
</select>
</div>
<div class="ac_info ln-height border">
<p class="first-line">Hello, sign in</p>
<p class="second-line">Accounts & Lists <i class="fa-solid fa-caret-down"></i></p>
</div>
<div class="orders ln-height border">
<p class="first-line">Returns</p>
<p class="second-line">& Orders</p>
</div>
<div class="cart border">
<i class="fa-solid fa-cart-arrow-down"></i>
<p class="second-line">Cart</p>
</div>
</nav>
<div class="menuBar">
<ul>
<a href="" class="border">
<i class="fa-solid fa-bars"></i>
<span>All</span>
</a>
<a class="border">Amazon miniTV</a>
<a class="border">Sell</a>
<a class="border">Best Sellers</a>
<a class="border">Mobiles</a>
<a class="border">Today's Deals</a>
<a class="border">New Releases</a>
<a class="border">Customer Service</a>
<a class="border">
<select>
<option value="">Prime</option>
<option value="option2">Free</option>
<option value="option3">Premium</option>
</select>
</a>
<a class="border">Electronics</a>
<a class="border">Gift Ideas</a>
<a class="border">Fashion</a>
</ul>
<div class="location">
<i class="fa-solid fa-location-dot"></i>
<p>Select a location to see product availabilty</p>
<i class="fa-solid fa-angle-down"></i>
</div>
</div>
<div class="quickLink">
<h2>Amazon Fashion</h2>
<ul>
<a>Women</a>
<a>Men</a>
<a>Kids</a>
<a>Bags & Luggage</a>
<a>Sportswear</a>
<a>Sales & Deals</a>
</ul>
<div>
<p>30 DAY RETURNS</p>
<p>Restrictions Apply</p>
</div>
</div>
<div class="heroPage">
<div class="linearShade"></div>
</div>
<div class="cards">
<div class="card">
<div class="cardHeading">
Bluetooth Calling Smartwatch starts at ₹1,999
</div>
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/Watch.jpg" alt="" />
<a href="">Shop Now</a>
</div>
<div class="card">
<div class="cardHeading">Revamp your home in style</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/A1.jpg" alt="" />
<p>Home decor</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/A2.jpg" alt="" />
<p>Home furnishings</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/A3.jpg" alt="" />
<p>Home storage</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/A4.jpg" alt="" />
<p>Lighting solutions</p>
</div>
</div>
<a href="">Explore all</a>
</div>
<div class="card">
<div class="cardHeading">Up to 75% off | Headphones</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/B1.jpg" alt="" />
<p>Up to 75% off | boAt</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/B2.jpg" alt="" />
<p>Up to 75% off | boult</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/B3.jpg" alt="" />
<p>Up to 75% off | Noise</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/B4.jpg" alt="" />
<p>Up to 75% off | Zebronics</p>
</div>
</div>
<a href="">See all offers</a>
</div>
<div class="card">
<div class="cardHeading">Up to 70% off | Styles for men</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/C1.jpg" alt="" />
<p>Clothing</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/C2.jpg" alt="" />
<p>Footwear</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/C3.jpg" alt="" />
<p>Watches</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/C4.jpg" alt="" />
<p>Bags & wallet</p>
</div>
</div>
<a href="">Mega Fashion Days</a>
</div>
<div class="card">
<div class="cardHeading">
Starting ₹99 | All your home improvement needs
</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/D1.jpg" alt="" />
<p>Spin mops, wipes & more</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/D2.jpg" alt="" />
<p>Bathromm hardware & accessories</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/D3.jpg" alt="" />
<p>Hammers, screwdrivers & more</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/D4.jpg" alt="" />
<p>Extension boards, plugs & more</p>
</div>
</div>
<a href="">Explore all</a>
</div>
<div class="card">
<div class="cardHeading">
Starting ₹99 | All your home improvement needs
</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/E1.jpg" alt="" />
<p>Gaming Accessories</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/E2.jpg" alt="" />
<p>Keyboard and Mice</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/E3.jpg" alt="" />
<p>Stands, Cables & more</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/E4.jpg" alt="" />
<p>Backpacks</p>
</div>
</div>
<a href="">See all offers</a>
</div>
<div class="card">
<div class="cardHeading">Up to 70% off | Styles for women</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/F1.jpg" alt="" />
<p>Women's Clothing</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/F2.jpg" alt="" />
<p>Footwear+Handbags</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/F3.jpg" alt="" />
<p>Watches</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/F4.jpg" alt="" />
<p>Fashion jewellery</p>
</div>
</div>
<a href="">Mega Fashion Days</a>
</div>
<div class="card">
<div class="cardHeading">
Appliances for your home | Up to 55% off
</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/G1.jpg" alt="" />
<p>Air conditioners</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/G2.jpg" alt="" />
<p>Refrigerators</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/G3.jpg" alt="" />
<p>Microwaves</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/G4.jpg" alt="" />
<p>Washing machines</p>
</div>
</div>
<a href="">See more</a>
</div>
<div class="card">
<div class="cardHeading">Starting ₹99 | Toys for your kids</div>
<div class="cardContainer">
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/H1.jpg" alt="" />
<p>Starting ₹299 | Bikes, trikes & ride-ons</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/H2.jpg" alt="" />
<p>Starting ₹149 | Sport & outdoor</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/H3.jpg" alt="" />
<p>Starting ₹99 | Soft toys</p>
</div>
<div class="product">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="assets/h4.jpg" alt="" />
<p>Starting ₹199 | Indoor games</p>
</div>
</div>
<a href="">See more</a>
</div>
</div>
<div class="newUser">
<div class="newcustomer">
<div>See personalized recommendations</div>
<button>Sign in</button>
<p>New customer? <a href="">Start here.</a></p>
</div>
</div>
<div class="backTop">
<i class="fa-solid fa-caret-up"></i>
<a href="#">Back to top</a>
<a href="">TOP OF PAGE</a>
</div>
<div class="socialHandle">
<div class="sh-part-1">
<ul>
<li>Get to Know Us</li>
<li>About Us</li>
<li>Careers</li>
<li>Press Releases</li>
<li>Amazon Science</li>
</ul>
<ul>
<li>Connect with US</li>
<li>Facbook</li>
<li>Twitter</li>
<li>Instagram</li>
</ul>
<ul>
<li>Make Money with Us</li>
<li>Sell on Amazon</li>
<li>Sell under Amazon Accelerator</li>
<li>Protect and Build Your Brand</li>
<li>Amazon Global Selling</li>
<li>Become an Affilate</li>
<li>Fulfilment by Amazon</li>
<li>Advertise Your Products</li>
<li>Amazon Pay on Merchants</li>
</ul>
<ul>
<li>Let Us Help You</li>
<li>COVID-19 and Amazon</li>
<li>Your Account</li>
<li>Returns centre</li>
<li>100% Purchase Protection</li>
<li>Amazon App Download</li>
<li>Help</li>
</ul>
</div>
<div class="sh-part-2">
<div class="foot-logo">
<img data-lazyloaded="1" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" decoding="async" data-src="main-assets/logo.png" alt="" />
<button>
<i class="fa-solid fa-globe"></i>
English
<i class="fa-solid fa-sort"></i>
</button>
</div>
<div class="locations">
<span>Australia</span>
<span>Brazil</span>
<span>Canada</span>
<span>China</span>
<span>France</span>
<span>Germany</span>
<span>Itlay</span>
<span>Japan</span>
<span>Mexico</span>
<span>Netherlands</span>
<span>Poland</span>
<span>Singapore</span>
<span>Spain</span>
<span>Turkey</span>
<span>United Arab Emirates</span>
<span>United Kingdom</span>
<span>United States </span>
</div>
</div>
<div class="sh-part-m">
<ul>
<li>Your Amazon.in</li>
<li>Amazon Pay</li>
<li>Wish List</li>
<li>Your Account</li>
<li>Returns</li>
<li>Customer Service</li>
<li>Your Orders</li>
<li>Amazon App Download</li>
<li>Find a Wish List</li>
<li>Your Recently Viewed Items</li>
<li>Sell</li>
</ul>
</div>
</div>
<footer>
<div class="footer-part-1">
<ul>
<li>AbeBooks</li>
<li>Books, art</li>
<li>& collectibles</li>
</ul>
<ul>
<li>Amazon Web Services</li>
<li>Scalable Cloud</li>
<li>Computing Services</li>
</ul>
<ul>
<li>Audible</li>
<li>Download</li>
<li>Audio Books</li>
</ul>
<ul>
<li>DPReview</li>
<li>Digital</li>
<li>Photography</li>
</ul>
<ul>
<li>IMDb</li>
<li>Movies, TV</li>
<li>& Celebrities</li>
</ul>
<ul>
<li>Amazon Bussiness</li>
<li>Everything For</li>
<li>Your Bussiness</li>
</ul>
<ul>
<li>Prime Now</li>
<li>2-Hours Delivery</li>
<li>on Everyday Items</li>
</ul>
<ul>
<li>Amazon Prime Music</li>
<li>100 million songs, ad-free</li>
<li>Over 15 million podcast episodes</li>
</ul>
</div>
<div class="footer-part-sm">
<div class="lang">
<i class="fa-solid fa-globe"></i>
English
</div>
<h3><a href="">Already a customer? Sign in</a></h3>
</div>
<div class="footer-part-2">
<p>
<a href="">Conditions of Use & Sale</a>
<a href="">Privacy Notice</a> <a href="">Interest-Based Ads</a>
</p>
<p>© 1996-2023, Amazon.com, Inc. or its affilates</p>
</div>
</footer>
</div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://foolishdeveloper.com/wp-content/litespeed/js/31aa2c5e6d7ddf1d76c3257af595c4b9.js?ver=cb79e"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
</html>
CSS (style.css)
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
:root {
--main-background: #e3e6e6;
--nav-background: #121821;
--searchbox-color: #febd69;
}
body,
html {
height: 100%;
width: 100%;
background-color: var(--main-background);
}
.container {
height: 100%;
width: 100%;
}
/* ============= Reusable Classes =========== */
.first-line {
font-size: 12px;
color: #bbb;
font-weight: 500;
}
.second-line {
font-size: 14px;
color: #fff;
font-weight: 700;
}
.ln-height {
line-height: 1.1;
}
.border {
padding: 2px 5px;
border: 1px solid transparent;
border-radius: 2px;
}
.border:hover {
border: 1px solid #ddd;
cursor: pointer;
}
/* NOT TO SHOW */
.category,
.wishlist,
.deals,
.sell,
.location,
.sh-part-m,
.footer-part-sm {
display: none;
}
/* ============== NAVBAR =============== */
nav {
padding: 5px 10px;
width: 100%;
background-color: var(--nav-background);
display: flex;
align-items: center;
justify-content: space-between;
}
nav * {
margin: 0px 2px;
}
@media screen and (max-width: 1100px) {
nav {
padding: 15px 20px;
flex-direction: column;
align-items: start;
}
}
nav .logo {
display: flex;
align-items: center;
gap: 1px;
color: white;
font-size: 16px;
position: relative;
bottom: 6px;
}
nav .logo img {
position: relative;
width: 110px;
top: 9px;
}
.set_location {
padding: 10px 5px;
}
@media screen and (max-width: 1100px) {
.set_location {
order: 1;
}
}
.set_location p:nth-child(1) {
text-indent: 14px;
}
.search_box {
position: relative;
display: flex;
height: 43px;
width: 45vw;
}
@media screen and (min-width: 1700px) {
.search_box {
width: 70vw;
}
}
@media screen and (min-width: 1650px) {
.search_box {
width: 60vw;
}
}
@media screen and (min-width: 1600px) {
.search_box {
width: 50vw;
}
}
@media screen and (max-width: 1420px) {
.search_box {
width: 350px;
}
}
@media screen and (max-width: 1100px) {
.search_box {
margin: 10px 0px;
height: 60px;
width: 100%;
}
}
.search_box div:nth-child(1) {
position: absolute;
height: 100%;
width: 50px;
font-size: 12px;
color: #444;
font-weight: 500;
background-color: #ddd;
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.search_box input {
padding-left: 60px;
height: 100%;
width: 100%;
border: none;
border-radius: 5px;
outline: none;
color: #111111;
font-size: 15px;
}
.search_box input:focus {
outline: 3px solid #ff822f;
}
.search_box .camera_search {
position: absolute;
right: 50px;
height: 100%;
width: 50px;
opacity: 0.3;
display: flex;
align-items: center;
justify-content: center;
}
.search_box .search {
position: absolute;
right: 0;
height: 100%;
width: 50px;
background-color: var(--searchbox-color);
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.search:hover {
background-color: #ffa52f;
cursor: pointer;
}
.choose_country {
padding: 10px 5px;
display: flex;
gap: 5px;
align-items: center;
}
@media screen and (max-width: 1100px) {
.choose_country {
display: none;
}
}
.choose_country .flag {
position: relative;
top: 3.6px;
}
.choose_country select {
height: 20px;
background-color: transparent;
border: none;
font-weight: 600;
font-size: 14px;
color: #fff;
outline: none;
}
.choose_country option {
background-color: #fff;
color: #000;
}
.ac_info {
padding: 10px 5px;
}
@media screen and (max-width: 1100px) {
.ac_info {
display: none;
}
}
.ac_info .first-line {
color: #fff;
font-weight: 400;
}
.ac_info i {
opacity: 0.6;
font-size: 10px;
}
.orders {
padding: 10px 5px;
}
@media screen and (max-width: 1100px) {
.orders {
display: none;
}
}
.orders .first-line {
color: #fff;
font-weight: 400;
}
.cart {
padding: 10px 5px;
display: flex;
align-items: end;
gap: 2px;
}
@media screen and (max-width: 1100px) {
.cart {
order: 2;
}
}
.cart i {
font-size: 30px;
color: #fff;
}
/* ============== MENU BAR ============= */
.menuBar {
padding: 5px 15px;
background-color: #232f3e;
display: flex;
align-items: center;
}
@media screen and (max-width: 1160px) {
.menuBar {
padding: 10px 15px;
}
}
@media screen and (max-width: 700px) {
.menuBar {
display: none;
}
}
.menuBar ul {
display: flex;
align-items: center;
gap: 10px;
}
@media screen and (max-width: 1160px) {
.menuBar ul {
gap: 6px;
}
}
.menuBar i {
font-size: 2.7vh;
color: #fff;
margin-right: 5px;
}
.menuBar a {
font-size: 14px;
text-decoration: none;
color: #fff;
display: flex;
align-items: center;
}
@media screen and (max-width: 1160px) {
.menuBar a {
font-size: 13px;
}
}
@media screen and (max-width: 1100px) {
.menuBar a:nth-child(12),
.menuBar a:nth-child(11),
.menuBar a:nth-child(10),
.menuBar a:nth-child(7),
.menuBar a:nth-child(3) {
display: none;
}
}
.menuBar a:nth-child(1) {
font-size: 15px;
font-weight: 600;
}
.menuBar a:nth-child(9) select {
font-size: 14px;
width: 66px;
border: none;
background: transparent;
color: #fff;
}
/* QUICK LINK */
.quickLink {
padding: 5px 30px;
border-bottom: 0.3vh solid #eee;
display: flex;
align-items: center;
}
@media screen and (max-width: 1100px) {
.quickLink {
display: none;
}
}
.quickLink ul {
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.quickLink h2 {
font-size: 18px;
margin: 0px 20px;
}
.quickLink a {
text-decoration: none;
color: #111;
font-size: 16px;
}
.quickLink a:hover {
text-decoration: 2px rgb(255, 89, 0) underline;
cursor: pointer;
}
.quickLink div {
text-align: center;
line-height: 1;
}
.quickLink div p:nth-child(1) {
color: #6f91c4;
font-size: 24px;
}
.quickLink div p:nth-child(2) {
color: #000;
font-size: 18px;
}
/* HERO PAGE */
.heroPage {
height: 100vh;
background: url("main-assets/Hero-Image.jpg");
background-size: cover;
background-position: top;
display: flex;
align-items: end;
}
@media screen and (max-width: 800px) {
.heroPage {
height: 80vh;
}
}
.linearShade {
height: 47vh;
width: 100%;
background: linear-gradient(transparent, #e3e6e6);
}
/* CARDS AND PRODUCTS */
.cards {
padding: 0vh 4vh;
position: relative;
bottom: 55vh;
gap: 18px;
height: 560px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (min-width: 1750px) {
.cards {
margin: auto;
max-width: 1700px;
}
}
@media screen and (min-width: 1500px) {
.cards :nth-child(9) {
display: none;
}
}
@media screen and (max-width: 1500px) {
.cards {
height: 1105px;
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 1350px) and (max-width: 1500px) {
.cards {
max-width: 1350px;
margin: auto;
}
}
@media screen and (max-width: 1150px) {
.cards {
height: 1545px;
grid-template-columns: 1fr 1fr;
}
.cards :nth-child(9) {
display: none;
}
}
@media screen and (min-width: 900px) and (max-width: 1150px) {
.cards {
max-width: 900px;
margin: auto;
}
}
@media screen and (max-width: 650px) {
.cards {
grid-template-columns: 1fr;
height: 4104px;
}
}
@media screen and (max-width: 530px) {
.cards {
height: 3345px;
}
}
.card {
padding: 20px;
height: 460px;
background-color: #fff;
position: relative;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 650px) {
.card {
padding: 10px 30px;
height: 70vh;
}
}
@media screen and (max-width: 530px) {
.card {
padding: 10px 30px;
height: 60vh;
}
}
.card a {
position: absolute;
bottom: 20px;
text-decoration: none;
font-size: 14px;
font-weight: 500;
color: #017184;
}
.card a:hover {
--red: #c7511f;
color: var(--red);
text-decoration: 1px solid var(--red) underline;
}
.cardHeading {
padding: 6px 0px;
line-height: 1.5;
font-size: 21px;
font-weight: 700;
}
.cardContainer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.product {
line-height: 1.2;
}
.product img {
height: 78%;
width: 100%;
}
.product p {
text-decoration: none;
font-size: 14px;
color: #222;
}
.card:nth-child(1) img {
width: 100%;
}
/* NEW USER */
.newUser {
padding: 40px 0px 23px 0px;
width: 100%;
background: #fff;
}
.newcustomer {
padding: 30px 0px 16px 0px;
width: 100%;
border-radius: 1vh;
border: 0.1vh solid #ddd;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.newcustomer div {
line-height: 5vh;
font-size: 15px;
}
.newcustomer button {
font-weight: 600;
font-size: 12px;
padding: 6px 126px;
border: 0.3vh solid #b99401;
border-radius: 1vh;
background: linear-gradient(#ffe39f 20%, #fec52e);
}
.newcustomer button:hover {
cursor: pointer;
}
.newcustomer p {
padding: 5px 0px;
font-size: 12px;
}
.newcustomer a {
text-decoration: none;
color: #017184;
}
/* BACK TO TOP */
.backTop {
height: 52px;
background-color: #37475a;
display: flex;
align-items: center;
justify-content: center;
}
.backTop:hover {
background: #495768;
}
.backTop i,
.backTop a:nth-child(3) {
display: none;
}
.backTop a {
color: #eee;
font-size: 13px;
font-weight: 500;
text-decoration: none;
}
/* FOOTER */
.socialHandle {
width: 100%;
background: #232f3e;
}
.sh-part-1 {
padding: 36px 0px;
max-width: 80vw;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 8px;
}
@media screen and (min-width: 1500px) {
.sh-part-1 {
max-width: 1300px;
}
}
@media screen and (max-width: 1150px) {
.sh-part-1 {
max-width: 65vw;
grid-template-columns: 2fr 1fr;
}
}
@media screen and (max-width: 960px) {
.sh-part-1 {
max-width: 70vw;
}
}
@media screen and (max-width: 770px) {
.sh-part-1 {
grid-template-columns: 3fr 2fr;
max-width: 75vw;
}
}
.sh-part-1 ul li {
font-size: 14px;
line-height: 2;
list-style-type: none;
color: #dddddd;
cursor: pointer;
}
.sh-part-1 ul li:hover {
text-decoration: 1px underline;
}
.sh-part-1 ul li:nth-child(1) {
font-weight: 700;
font-size: 16px;
color: #ffffff;
}
.sh-part-1 ul li:nth-child(1) {
text-decoration: none;
}
.sh-part-2 {
padding: 10px 0px 30px 0px;
width: 100%;
border-top: 0.1vh solid #666;
}
.foot-logo {
padding: 30px 0px;
max-width: 70vw;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
gap: 92px;
}
.foot-logo img {
position: relative;
top: 1.5vh;
height: 36px;
}
.foot-logo button {
padding: 7px 10px;
color: #ddd;
font-size: 13px;
background: transparent;
border: 0.1vh solid #ddd;
border-radius: 3px;
display: flex;
align-items: center;
gap: 10px;
}
.foot-logo button i {
opacity: 0.6;
}
.locations {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
gap: 1.9vh;
font-size: 12px;
color: #eee;
line-height: 0.5;
padding: 2vh 19vh;
max-width: 80vw;
margin: auto;
}
@media screen and (min-width: 1500px) {
.locations {
max-width: 1300px;
}
}
@media screen and (max-width: 1400px) {
.locations {
padding: 2vh 8vh;
max-width: 90vw;
}
}
.locations span:hover {
text-decoration: 1px underline;
cursor: pointer;
}
footer {
background: #131a22;
}
.footer-part-1 {
max-width: 66vw;
margin: auto;
padding: 24px 0px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 14px;
}
@media screen and (min-width: 1500px) {
.footer-part-1 {
max-width: 1300px;
}
}
@media screen and (max-width: 1080px) {
.footer-part-1 {
grid-template-columns: 1fr 1fr;
max-width: 47vw;
}
}
@media screen and (max-width: 890px) {
.footer-part-1 {
max-width: 52vw;
}
}
@media screen and (max-width: 800px) {
.footer-part-1 {
max-width: 56vw;
grid-template-columns: 2fr 3fr;
}
}
@media screen and (max-width: 730px) {
.footer-part-1 {
max-width: 60vw;
}
}
@media screen and (max-width: 690px) {
.footer-part-1 {
max-width: 65vw;
}
}
@media screen and (max-width: 550px) {
.footer-part-1 {
max-width: 70vw;
}
}
@media screen and (max-width: 500px) {
.footer-part-1 {
max-width: 80vw;
}
}
@media screen and (max-width: 450px) {
.footer-part-1 {
max-width: 100vw;
padding: 24px 30px;
}
}
.footer-part-1 ul li:hover {
text-decoration: 0.2vh #fff underline;
text-underline-offset: 3px;
cursor: pointer;
}
.footer-part-1 ul li {
line-height: 1.4;
font-size: 12px;
list-style-type: none;
color: #777;
font-weight: 600;
}
.footer-part-1 ul :nth-child(1) {
font-weight: 500;
color: #fff;
}
.footer-part-1 ul li:nth-child(2):hover,
.footer-part-1 ul li:nth-child(3):hover {
text-decoration: 0.2vh #777 underline;
}
.footer-part-2 {
padding: 10px 0px 40px 0px;
color: #fff;
font-size: 12px;
height: 40%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer-part-2 p:nth-child(1) {
display: flex;
gap: 5vh;
}
.footer-part-2 a {
color: #fff;
text-decoration: none;
}
.footer-part-2 a:hover {
text-decoration: underline;
}
OUTPUT :
