Hello guys, In today’s blog, we are going to learn how to make an e-commerce website from scratch with just HTML, CSS, and JavaScript. This website has a lot of functionality Like a product section, and a trending product section, category-wise products it has a map, and it is responsive which means this website can work on all devices. This website also has an automatic scroll system too. Let’s get right into this.
Ecommerce Website Using Html, Css, and JavaScript
But let’s just watch the video on the website
Step-1: Writing the HTML code and adding Markup to the website
First create a file named as index.html then start the coding.
This is an HTML code that will create our websites an section element and two div element inside it. The section element has a class of “top-txt” classes are given to an element or a tag so that it can be easily targeted when we use CSS to style these so this class is going to be used for styling purposes later.
The first div element has an class of “head container” and it also contains two child div elements ( child div element mean that the the “head container” has two div tags inside it). The first child div element has a class of “head-txt” and contains a paragraph tag and inside which the text “Free shipping, 30-day return or refund guarantee.” is written This will be used to display a message to the user about our website’s policies.
The second child div element has a class of “sing_in_up” and has two anchor elements (a), or links, with the text “SIGN IN” and “SIGN UP” written in side the tags. These links will be used to direct the user to log in or sign up page for a account on the website.
Overall, this code will create a basic layout or you can say markup for a website header that includes a message and links for the user to log in or sign up.
<body>
<section class=" top-txt ">
<div class="head container ">
<div class="head-txt ">
<p>Free shipping, 30-day return or refund guarantee.</p>
</div> <div class="sing_in_up ">
<a href="# ">SIGN IN</a>
<a href="# ">SIGN UP</a>
</div>
</div>
</section>
</body>
After that we will create a navigation bar after the section which has a class of “top-text”.
This is an HTML code that creates a navigation bar of the website, with a hamburger menu icon for mobile devices.
The code starts with a nav element which has a class of “navbar”, which also tells that it is a navigation bar. Inside the nav element there is a div element with a class of “navbar-container” that contains several child elements.
The first child element is a input element with a type of “checkbox” and a id of “checkbox”. This checkbox is used to toggle the display of the navigation menu on mobile devices.
The second child element is a div element with a class of “hamburger-lines”. This element contains three span elements with classes of “line line1”, “line line2”, and “line line3”. Together, these elements create the hamburger menu icon on mobile devices.
Read: Portfolio Website Using Html ,Css and JavaScript
The third child element is a ul element with a class of “menu-items”. This unordered list contains four li elements, each with an anchor element inside it that links to a different section of the website. These links are displayed as “Home”, “Shop”, “Blog”, and “Contact”.
Finally, the fourth child element is another div element with a class of “logo”. This element contains an image element with the source URL set to “https://i.postimg.cc/TP6JjSTt/logo.webp“, which will be used to display the website’s logo.
Overall, this code will create a navigation bar or nav bar with an hamburger menu icon for mobile device, a list of links to different sections of the website, and a logo.
<nav class="navbar">
<div class="navbar-container">
<input type="checkbox" name="" id="checkbox">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<ul class="menu-items">
<li><a href="#home">Home</a></li>
<li><a href="#sellers">Shop</a></li>
<li><a href="#news">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<div class="logo">
<img src="https://i.postimg.cc/TP6JjSTt/logo.webp" alt="">
</div>
</div>
</nav>
Now we will create a new section for our home page of the website which is the ecommerce website.
This is an HTML code that creates a section for the home page of the website. This even has an id of “home”, which also tells that it is the main content area of the home page.
Inside the section element there is an div element which has a class of “home_page” that contains two child div elements.
The first child div element which has a class of “home_img” and contains an image element with the source URL set to “https://i.postimg.cc/t403yfn9/home2.jpg“. This will be used to display an image on the home page.
The second child div element which a class of “home_txt” and contains several child elements. The first child element is an paragraph element with a class of “collectio” and the text “SUMMER COLLECTION”. This will be used to highlight a summer collection of products on the home page.
The second child element is the heading element with the text “FALL – WINTER Collection 2023”. This will be used to show the latest collection of products for the upcoming season.
The third child element is an div element which has a class of “home_label” and contains a paragraph element with text that describes the brand’s commitment to ethical production and high quality.
The fourth child element is the button element which is linking to the sellers section of the website with a text “SHOP NOW” and a icon of a right arrow.
The fifth child element is another div element which has a class of “home_social_icons” that contains four anchor tags, each with an icon from the Boxicons library. These icons link to the brand social media accounts on Facebook, Twitter, Pinterest, and Instagram.
Overall, this code creates a visually appealing and informative section for the home page of our website that will showcases a specific collection of products and provides links to our brands social media accounts.
<section id="home">
<div class="home_page ">
<div class="home_img ">
<img src="https://i.postimg.cc/t403yfn9/home2.jpg" alt="img ">
</div>
<div class="home_txt ">
<p class="collectio ">SUMMER COLLECTION</p>
<h2>FALL - WINTER<br>Collection 2023</h2>
<div class="home_label ">
<p>A specialist label creating luxury essentials. Ethically crafted<br>with an unwavering commitment to exceptional quality.</p>
</div>
<button>
<a href="#sellers">SHOP NOW</a>
<i class='bx bx-right-arrow-alt'></i>
</button>
<div class="home_social_icons">
<a href="#"><i class='bx bxl-facebook'></i></a>
<a href="#"><i class='bx bxl-twitter'></i></a>
<a href="#"><i class='bx bxl-pinterest'></i></a>
<a href="#"><i class='bx bxl-instagram'></i></a>
</div>
</div>
</div>
</section>
Now we will create a new section just after above section which will be used to showcase our collection of products.
This is a section which has the id “collection” it displays three product collections with their respective images and buttons to shop them.
The first collection is for clothing and it is displayed with an image and a button that says “SHOP NOW”. The second collection is for shoes. The third collection is for accessories and it is also displayed with a image and a button that say “SHOP NOW”.
Each product collection has an div container that contains a image and a div element that contains a title and a button to shop. The image is displayed with the help of HTML img tag, and the title is displayed with a p tag. The button to shop is displayed with an HTML button tag that has an anchor tag inside with the text “SHOP NOW”.
<section id="collection">
<div class="collections container">
<div class="content">
<img src="https://i.postimg.cc/Xqmwr12c/clothing.webp" alt="img" />
<div class="img-content">
<p>Clothing Collections</p>
<button><a href="#sellers">SHOP NOW</a></button>
</div>
</div>
<div class="content2">
<img src="https://i.postimg.cc/8CmBZH5N/shoes.webp" alt="img" />
<div class="img-content2">
<p>Shoes Spring</p>
<button><a href="#sellers">SHOP NOW</a></button>
</div>
</div>
<div class="content3">
<img src="https://i.postimg.cc/MHv7KJYp/access.webp" alt="img" />
<div class="img-content3">
<p>Accessories</p>
<button><a href="#sellers">SHOP NOW</a></button>
</div>
</div>
</div>
</section>
After this collection section we will add the new section and inside which we are going to make some div elements
This is the section of HTML code which will displays an list of top-selling products on our ecommerce website. The section has a heading “Top Sales” and it contains a container div which has a class of “seller”. Inside the container div, there is an div that has a class “best-seller”, which contains 4 divs and all those have class “best-p1”, each displaying information about a product.
Each “best-p1” div has a image of the product which we will sell, a div with class “best-p1-txt” that contains information about the product such as its name, rating, price, and also its available colors. Each product has an “Buy Now” button that directs user to a URL where the user can purchase the product.
<section id="sellers">
<div class="seller container">
<h2>Top Sales</h2>
<div class="best-seller">
<div class="best-p1">
<img src="https://i.postimg.cc/8CmBZH5N/shoes.webp" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Shoes</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="price">
$37.24
<div class="colors">
<i class='bx bxs-circle red'></i>
<i class='bx bxs-circle blue'></i>
<i class='bx bxs-circle white'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
<!-- <div class="add-cart">
<button>Add To Cart</button>
</div> -->
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/76X9ZV8m/Screenshot_from_2022-06-03_18-45-12.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Jacket</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="price">
$17.24
<div class="colors">
<i class='bx bxs-circle green'></i>
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle brown'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/j2FhzSjf/bs2.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Shirt</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="price">
$27.24
<div class="colors">
<i class='bx bxs-circle brown'></i>
<i class='bx bxs-circle green'></i>
<i class='bx bxs-circle blue'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/QtjSDzPF/bs3.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Shoes</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$43.67
<div class="colors">
<i class='bx bxs-circle red'></i>
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle blue'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
</div>
</div>
Now in this same section we will create another div after this sellers div and that div will be related to new arrivals
This is the HTML code for the another section of this website that will displays new arrivals products. The section has a heading “New Arrivals” and contains four items, each represented by a div with the class “best-p1”.
Each item has a image, a name, a rating, an price with available color options, and a “Buy Now” button that directs the user to a specific URL from where you can buy the product you clicked on. The rating is represented by five stars, with the number of filled stars indicating the rating out of five. The price is in US dollars.
The class “seller container”indicates that this section is contained within a larger section dedicated to a particular seller.
<div class="seller container">
<h2>New Arrivals</h2>
<div class="best-seller">
<div class="best-p1">
<img src="https://i.postimg.cc/fbnB2yfj/na1.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England T-Shirt</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$10.23
<div class="colors">
<i class='bx bxs-circle blank'></i>
<i class='bx bxs-circle blue'></i>
<i class='bx bxs-circle brown'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/zD02zJq8/na2.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Bag</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="price">
$09.28
<div class="colors">
<i class='bx bxs-circle brown'></i>
<i class='bx bxs-circle red'></i>
<i class='bx bxs-circle green'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/Dfj5VBcz/sunglasses1.jpg" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Sunglass</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$06.24
<div class="colors">
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle blank'></i>
<i class='bx bxs-circle blank'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/FszW12Kc/na4.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Shoes</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$43.67
<div class="colors">
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle red'></i>
<i class='bx bxs-circle blue'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
</div>
</div>
After this div lets create a new div which is related to hot sales
This code HTML code creates a section of our website displaying some “hot sales”.
The codes create an div element which has a class of “seller container” that contains a h2 element with the text “Hot Sales” and a div element which has a class of “best-seller”. Inside the “best-seller” div, there are four div elements, each with a class of “best-p1”.
Each “best-p1” div element contains a img element displaying an image of the product, a div element with a class of “best-p1-txt” containing various product details, and a “buy-now” button with a link to the URL of product page.
Overall, this code creates an visually appealing section of our website that showcases multiple products with their respective details and with a button to buy them.
<div class="seller container">
<h2>Hot Sales</h2>
<div class="best-seller">
<div class="best-p1">
<img src="https://i.postimg.cc/jS7pSQLf/na4.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Shoes</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$37.24
<div class="colors">
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle black'></i>
<i class='bx bxs-circle blue'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/fbnB2yfj/na1.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England T-Shirt</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$10.23
<div class="colors">
<i class='bx bxs-circle blank'></i>
<i class='bx bxs-circle blue'></i>
<i class='bx bxs-circle brown'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/RhVP7YQk/hs1.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England T-Shirt</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
<i class='bx bxs-star'></i>
</div>
<div class="price">
$15.24
<div class="colors">
<i class='bx bxs-circle blank'></i>
<i class='bx bxs-circle red'></i>
<i class='bx bxs-circle blue'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
<div class="best-p1">
<img src="https://i.postimg.cc/zD02zJq8/na2.png" alt="img">
<div class="best-p1-txt">
<div class="name-of-p">
<p>PS England Bag</p>
</div>
<div class="rating">
<i class='bx bxs-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
<i class='bx bx-star'></i>
</div>
<div class="price">
$09.28
<div class="colors">
<i class='bx bxs-circle blank'></i>
<i class='bx bxs-circle grey'></i>
<i class='bx bxs-circle brown'></i>
</div>
</div>
<div class="buy-now">
<button><a href="https://codepen.io/sanketbodke/full/mdprZOq">Buy Now</a></button>
</div>
</div>
</div>
</div>
</div>
</section>
After this section we will create another section lets get started.
This HTML code is for the section of our website which has a id of “news”. This section contain 3 different news item all related to the new fashion trends and each have its own unique content and image.
The first div with the class “news-heading” contains a paragraph tag (p) with the text “LATEST NEWS” inside the <p> and </p> tags and a heading tag inside which “Fashion New Trends” is written.
The second div, it has the class of “l-news container” has 3 div tags with the class of “l-news1” and “l-news2” and “l-news3” each of these div contain a img and text related to a specific news.
Each of the news follows a similar format with a div containing a image and a div which also has a text. The text includes a date for the news and a heading for the news and an link to read more information about the news. The date and heading are within separate elements with unique class. The links are given with the “a” tag and use the “target=’_blank'” attribute to open in a new tab when clicked.
Overall, this code creates an visually appealing section of our website with 3 different news items related to fashion trends each with a image and a link to read more information.
<section id="news">
<div class="news-heading">
<p>LATEST NEWS</p>
<h2>Fashion New Trends</h2>
</div>
<div class="l-news container">
<div class="l-news1">
<div class="news1-img">
<img src="https://i.postimg.cc/2y6wbZCm/news1.jpg" alt="img">
</div>
<div class="news1-conte">
<div class="date-news1">
<p><i class='bx bxs-calendar'></i> 12 February 2022</p>
<h4>What Curling Irons Are The Best Ones</h4>
<a href="https://www.vogue.com/article/best-curling-irons" target="_blank">read more</a>
</div>
</div>
</div>
<div class="l-news2">
<div class="news2-img">
<img src="https://i.postimg.cc/9MXPK7RT/news2.jpg" alt="img">
</div>
<div class="news2-conte">
<div class="date-news2">
<p><i class='bx bxs-calendar'></i> 17 February 2022</p>
<h4>The Health Benefits Of Sunglasses</h4>
<a href="https://www.rivieraopticare.com/blog/314864-the-health-benefits-of-wearing-sunglasses_2/" target="_blank">read more</a>
</div>
</div>
</div>
<div class="l-news3">
<div class="news3-img">
<img src="https://i.postimg.cc/x1KKdRLM/news3.jpg" alt="img">
</div>
<div class="news3-conte">
<div class="date-news3">
<p><i class='bx bxs-calendar'></i> 26 February 202</p>
<h4>Eternity Bands Do Last Forever</h4>
<a href="https://www.briangavindiamonds.com/news/eternity-bands-symbolize-love-that-lasts-forever/" target="_blank">read more</a>
</div>
</div>
</div>
</div>
</section>
Now lets create a new section and put the google map in it
This HTML section with a id of “contact”. It contains a div which has a class of “contact” that contains a Google Maps embed code in a iframe tag.
The Google Maps embed code is sourced from Google Maps and displays a map of a specific location. Right now the location is always at “Sky Vista” and the latitude and longitude of the location are specified in the code itself.
The iframe tag has many attributes specified, including the source of the map, the width and height of the map, and the referrer policy. The “allowfullscreen” attribute in side this allows us to view full screen map, and the “loading” attribute specifies that the map should be lazy loaded.
<section id="contact">
<div class="contact container">
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.121169986175!2d73.90618951442687!3d18.568575172551647!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2c131ed5b54a7%3A0xad718b8b2c93d36d!2sSky%20Vista!5e0!3m2!1sen!2sin!4v1654257749399!5m2!1sen!2sin"
width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
After this lets create a form
This HTML code of the contact form allows user to send a message to the website owner
The form tag has a action attribute which is “https://formspree.io/f/xzbowpjq” which specifies the URL of the server that will handle the form submission. The method attribute is set to “POST” which specifies the HTTP method which is used to submit the form data.
Inside the form tag, there are two main sections. The first section contains the contact information of website owner. This section has an heading with the title “INFORMATION” and an subheading with the title “Contact Us”. It also includes the owner address, phone number, and email address for two locations, USA and India.
The second section of the form has input fields where the user can enter name, email address, and message they wnat to say.
there is an “SEND MESSAGE” button that submit the form when the button is clicked. When the user completes the form by clicking the button, the form text is passed to the owner
<form action="https://formspree.io/f/xzbowpjq" method="POST">
<div class="form">
<div class="form-txt">
<h4>INFORMATION</h4>
<h1>Contact Us</h1>
<span>As you might expect of a company that began as a high-end interiors contractor, we pay strict
attention.</span>
<h3>USA</h3>
<p>195 E Parker Square Dr, Parker, CO 801<br>+43 982-314-0958</p>
<h3>India</h3>
<p>HW95+C9C, Lorem ipsum dolor sit.<br>411014</p>
</div>
<div class="form-details">
<input type="text" name="name" id="name" placeholder="Name" required>
<input type="email" name="email" id="email" placeholder="Email" required>
<textarea name="message" id="message" cols="52" rows="7" placeholder="Message" required></textarea>
<button>SEND MESSAGE</button>
</div>
</div>
</form>
And now the last part of the html code now
This HTML code is for the footer section of our website. The footer tag has two main parts, a container div with 4 content div, and an separate div for design credits.
The container div has 4 content div those has a class names content_1, content_2, content_3, and content_4. The first content div includes an image and text, which describes the owner business model. The second content div has an heading and 4 links to various shopping categories. The third content div includes an heading and 4 links to different shopping-related pages, such as contact, payment method, delivery, and return and exchange. The 4th content div contains a heading, some text, and an input field for subscribing to the newsletter. The f-mail div inside the fourth content div has a input field for entering the email address and a envelope icon.
We will give The footer also an separate div with class name f-design, which will include a container div and an text element, giving credit to the designer and coder of the website.
Overall, this HTML code creates an footer section with various links and information related to shopping and products.
<footer>
<div class="footer-container container">
<div class="content_1">
<img src="https://i.postimg.cc/htGyQ4JB/footer-logo.png" alt="logo">
<p>The customer is at the heart of our<br>unique business model, which includes<br>design.</p>
<img src="https://i.postimg.cc/Nj9dgJ98/cards.png" alt="cards">
</div>
<div class="content_2">
<h4>SHOPPING</h4>
<a href="#sellers">Clothing Store</a>
<a href="#sellers">Trending Shoes</a>
<a href="#sellers">Accessories</a>
<a href="#sellers">Sale</a>
</div>
<div class="content_3">
<h4>SHOPPING</h4>
<a href="./contact.html">Contact Us</a>
<a href="https://payment-method-sb.netlify.app/" target="_blank">Payment Method</a>
<a href="https://delivery-status-sb.netlify.app/" target="_blank">Delivery</a>
<a href="https://codepen.io/sandeshbodake/full/Jexxrv" target="_blank">Return and Exchange</a>
</div>
<div class="content_4">
<h4>NEWLETTER</h4>
<p>Be the first to know about new<br>arrivals, look books, sales & promos!</p>
<div class="f-mail">
<input type="email" placeholder="Your Email">
<i class='bx bx-envelope'></i>
</div>
<hr>
</div>
</div>
<div class="f-design">
<div class="f-design-txt container">
<p>Design and Code by code.sanket</p>
</div>
</div>
</footer>
</body>
Step-2: Writing the CSS code and adding Styling to the website
Go create a CSS file
And start writing code.
This CSS code which sets some global styles for the entire website. Here a explanation of what it does:
- The @import rule imports an font from Google Fonts called “Poppins” with many weights and styles.
- The selector * says that the margin and padding has to be 0 for all elements and tags and it also sets box-sizing to border-box.
- The body element’s font family is set to “Poppins” to use the font imported earlier.
- The .container class sets the maximum width to 1200 pixels, sets the width to 90% of the available space, and centers the container using auto margins.
- The :root pseudo-class set CSS custom properties (variables) for the color used in our e commerce website design. –primary-color is set to pink and –light-black is set to an transparent black color and –black is set to black also –white is set to white, and –grey is set to a grey color. These variables can be used throughout the rest of the CSS code.
@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");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.container {
max-width: 1200px;
width: 90%;
margin: 0 auto;
}
/* //........top text ........// */
:root {
/* //....... Color ........// */
--primary-color: #ff3c78;
--light-black: rgba(0, 0, 0, 0.89);
--black: #000;
--white: #fff;
--grey: #aaa;
}
Next will add more CSS about “head” class.
The first part of the code has a class “.top-txt” and the code is written for setting its background color to the CSS variable “–black” which is black color as we discussed above.
The second part of the code has a class “.head” and the code is written for setting its display property to “flex” which allows it to use flex box properties to it now which helps in responsive design. The justify-content property is set to “space-between” which creates equal spacing between the item in the container. The color property is used to set the text color to white color. The padding property adds 10 px( pixels) of padding to the top and bottom and 0 px to left and right. The font-size property is used to set the font size to 14 px and px= pixel which is a unit in CSS for size.
The third part of the code target the links inside the “.head” class and it also removes the default underline text by giving text-decoration: none;. The color property is also set to the same white color as above. The margin property adds 10 pixels of margin to the left and right of the link.
/* //........top text ........// */
.top-txt {
background-color: var(--black);
}
.head {
display: flex;
justify-content: space-between;
color: rgba(255, 255, 255, 0.945);
padding: 10px 0;
font-size: 14px;
}
.head a {
text-decoration: none;
color: rgba(255, 255, 255, 0.945);
margin: 0 10px;
}
Let us now style the nav bar. It is a long CSS for nav bar so buckle up.
The code starts by hiding a input checkbox and some hamburger lines using the display: none; property we are hiding it because we’ll only need these when we run the website in mobile and for which we will use media queries. Then we style the navbar with a box shadow, sets its position to sticky so that when we scroll the website the navbar shouldn’t move and its background and text colors to var(–white) and var(–black) which we has already discussed above that there have white and black color. The z-index property sets the stacking order of the navbar so that nothing can overlap each other.
Next the navbar container has given the flex properties to display its items space evenly between the left and right parts, aligned vertically in the center with a height of 64px(pixels). And the image is given a left margin of 3rem( rem is also a unit for size).
The menu items are set to display as an flex container with a margin-right of 3rem which gives the margin to only right side and are styled with no bullet points ( its a type of list decoration) and the font size of 1.2rem.
The ul a element inside the navbar-container is styled with a text decoration of “none” so that the “a” tag doesn’t have a underline under it, also it is given the black color and font size of 18px. When the “a ” element is hovered with mouse, a horizontal line with a background color of var(–primary-color) will display and a height of 3px that also increase in width from 0px to 100% using the transition property.
The CSS code inside the @media (max-width: 768px) rule tells the navbar behavior for small screens so that it can even work in mobile phones and tablets easily as we discussed above. The navbar opacity is reduced, the input checkbox and hamburger lines are displayed like I told you earlier that we will add it when we will make it responsive, and the navbar container is changed to display as a block element with a relative position so that it become visible when the website is in phone and height of 64px. The input checkbox is positioned absolutely with an height of 32px, width of 30px and positioned at the top left corner of the screen. The hamburger lines are given a height of 28px and width of 35px and positioned below the input checkbox.
The menu items are also given a background of white color, a height of 100vh (viewport height which means that the height will be as much as the screen size), and are translated 150% to the left, so they are not visible. The transform property is used to move the menu items into view when the input checkbox is checked.
Finally, the CSS code inside the @media (max-width: 500px) rule hides the logo img when the input checkbox is clicked and it becomes checked.
/* //........ Navbar ........// */
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
display: none;
}
.navbar {
box-shadow: 0 5px 4px rgb(146 161 176 / 15%);
position: sticky;
top: 0;
background: var(--white);
color: var(--black);
z-index: 100;
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
}
.navbar img {
margin-left: 3rem;
}
.menu-items {
order: 2;
display: flex;
margin-right: 3rem;
}
.menu-items li {
list-style: none;
margin-left: 1.5rem;
font-size: 1.2rem;
}
.navbar-container ul a {
text-decoration: none;
color: var(--black);
font-size: 18px;
position: relative;
}
.navbar-container ul a:after {
content: "";
position: absolute;
background: var(--primary-color);
height: 3px;
width: 0;
left: 0;
bottom: -10px;
transition: 0.3s;
}
.navbar-container ul a:hover:after {
width: 100%;
}
@media (max-width: 768px) {
.navbar {
opacity: 0.95;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines {
display: block;
}
.navbar-container {
display: block;
position: relative;
height: 64px;
}
.navbar-container input[type="checkbox"] {
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.navbar-container .hamburger-lines {
display: block;
height: 28px;
width: 35px;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navbar-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #333;
}
.navbar-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.3s ease-in-out;
}
.navbar-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.3s ease-in-out;
}
.navbar .menu-items {
padding-top: 100px;
background: #fff;
height: 100vh;
max-width: 100%;
transform: translate(-150%);
display: flex;
flex-direction: column;
/* margin-left: -40px;
padding-left: 40px; */
text-align: center;
transition: transform 0.5s ease-in-out;
/* box-shadow: 5px 0px 10px 0px #aaa; */
overflow: scroll;
}
.navbar .menu-items li {
margin-bottom: 2rem;
font-size: 1.1rem;
font-weight: 500;
}
.menu-items li,
.navbar img {
margin: 0;
}
.navbar .menu-items li:nth-child(1) {
margin-top: 1.5rem;
}
.navbar-container .logo img {
position: absolute;
top: 10px;
right: 15px;
margin-top: 8px;
}
.navbar-container input[type="checkbox"]:checked~.menu-items {
transform: translateX(0);
}
.navbar-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
transform: rotate(45deg);
}
.navbar-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
transform: scaleY(0);
}
.navbar-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
transform: rotate(-45deg);
}
.navbar-container input[type="checkbox"]:checked~.home_page img {
display: none;
background: #fff;
}
}
@media (max-width: 500px) {
.navbar-container input[type="checkbox"]:checked~.navbar-container img {
display: none;
}
}
Next let us move to CSS code of our collections.
We have multiple content in this collection of this code.
The “.collections” class sets the display to flex, centers the content horizontally using justify-content property of flex box, and wraps the items to a new row when there’s no more space like when the screen size is reduced using flex-wrap. It also adds a margin on top to separate it from other content the margin is of 65px.
The “.content” class sets the width of each of its item to 330px and adds a margin of 20px. It also sets the position to relative position(position: relative;), which is used to position the “.img-content” and also the “.content::after” pseudo-element or you can say pseudo-selector.
The “.content::after” pseudo-selector create a black overlay that covers the whole img when hovered with mouse over it. It uses position absolute and the properties of top, left, width, height, and z-index to cover the “.content” element/class, and it starts with a opacity of 0. When the “.content” element is hovered over, the opacity is changed to 1 it makes the design look good and also it makes the overlay visible.
The “.content img” gives the width of the img to 100% and the height to 300px. It also adds a box shadow to create a shadow effect, shadows are good way to add professionalism to our website.
The “.img-content” class get the positions of the caption and button in the center of the image. It uses position absolute, top, left, and transform properties to gain this effect. It also gives it the color to white, text-align to center and font-size to 2.2rem, and font-weight to bolder. The opacity starts at 0, but when the “.content” element is hovered over, the opacity is changed to 1 and it makes the caption and button visible.
The class of “.img-content p” gives the font size to 1.6rem.
The class of “.img-content button” styles the button with a background color of the –primary color. It also sets the color to –white, border-radius to 10px ( it adds roundness to the button), and padding to 10px.
The “.img-content a” class gives the text decoration to none so that there is no default underline, the font size to 1.1rem, and the color to –white. and also a transition effect of 0.3s is added.
The “.img-content button:hover” gives the bg color to white and the color to the –primary color when hovered with mouse over it.
The “.img-content button:hover~.img-content a” gives the color of the “.img-content a” element to the –primary when the “.img-content button” is hovered with cursor over it.
The “.img-content a:hover” changes the color of the “.img-content a” element to the –primary color when hovered with mouse over it.
The “.content:hover .img-content” gives the opacity of the “.img-content” element to 1 and moves it up to the center of the image when the “.content” element is hovered with the mouse or you can say cursor.
/* //........ Collections ........// */
.collections {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 65px;
}
.content {
width: 330px;
margin: 20px;
position: relative;
}
.content::after {
content: "";
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.871);
z-index: 2;
opacity: 0;
}
.content:hover::after {
opacity: 1;
}
.content img {
width: 100%;
height: 300px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.img-content {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
color: var(--white);
text-align: center;
font-size: 2.2rem;
font-weight: bolder;
z-index: 5;
opacity: 0;
}
.img-content p {
font-size: 1.6rem;
}
.img-content button {
border: none;
background-color: var(--primary-color);
color: var(--white);
border-radius: 10px;
padding: 10px;
}
.img-content a {
text-decoration: none;
font-size: 1.1rem;
color: #fff;
transition: 0.3s;
}
.img-content button:hover {
background: var(--white);
color: var(--primary-color);
}
.img-content button:hover~.img-content a {
color: var(--primary-color);
}
.img-content a:hover {
color: var(--primary-color);
}
.content:hover .img-content {
opacity: 1;
top: 50%;
}
Now let us style the “content 2” as I told you earlier that we have multiple “content” in this collection
This block of CSS code will style the content box with a image and text, and adds a hover effect to reveal more information when it is hovered with mouse.
The .content2 class gives the width, margin, and position of the content box and making it looking good.
The ::after pseudo-selector or element is used to create a overlay effect when the content box is hovered over with mouse. It covers the entire box with a black background which has a little transpirancy.
The .content2 img class styles the img within the content box. It sets its width, height, and box shadow Like we discussed box shadows are great for our website.
The .img-content2 class styles the text content which overlays the image. It sets its position, color and font size and weight and also adds a transition effect. The opacity is set to 0 to hide the content by default.
The .img-content2 p class styles the paragraph tags(<p> lorem </p>) which are located inside the .img-content2 div.
The .img-content2 a class styles the links which are also located inside the .img-content2 div. It sets the text decoration so that there should not be any , color, and adds a transition effect.
The .img-content2 button class styles the buttons inside the .img-content2 div these paragraph, anchor tag, and button will be only visible when we will hover our mouse over it. It sets its border, bg color, color, border radius( this adds a little roundness the corner of buttons), and padding.
The .img-content2 button:hover class changes the background and text color when the button is hovered over with mouse so that it looks good.
The .img-content2 button:hover~.img-content2 a class also changes the color of links inside the .img-content2 div when the button is hovered over with mouse.
The .img-content2 a:hover also changes the color of links within the .img-content2 div when they are hovered over with mouse.
Finally, the .content2:hover .img-content2 changes the opacity and position of the .img-content2 div when the .content2 box is hovered over with mouse or you can say cursor. The opacity is set to 1 to make the content visible, and the top position is changed to 50% to vertically center the content inside the box.
/* //........ Content 2 ........// */
.content2 {
width: 330px;
margin: 20px;
position: relative;
}
.content2::after {
content: "";
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.871);
z-index: 2;
opacity: 0;
}
.content2:hover::after {
opacity: 1;
}
.content2 img {
width: 100%;
height: 300px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.img-content2 {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
color: var(--white);
text-align: center;
font-size: 2.2rem;
font-weight: bolder;
z-index: 5;
opacity: 0;
}
.img-content2 p {
font-size: 1.6rem;
}
.img-content2 a {
text-decoration: none;
font-size: 1.1rem;
color: #fff;
transition: 0.3s;
}
.img-content2 button {
border: none;
background-color: var(--primary-color);
color: var(--white);
border-radius: 10px;
padding: 10px;
}
.img-content2 button:hover {
background: var(--white);
color: var(--primary-color);
}
.img-content2 button:hover~.img-content2 a {
color: var(--primary-color);
}
.img-content2 a:hover {
color: var(--primary-color);
}
.content2:hover .img-content2 {
opacity: 1;
top: 50%;
}
Now This content 3 code styles a content block with an image and text overlay its the same as we did the 2 content above so lets us wrap it up fastly. The content block is positioned using absolute position where you can set top and left position, the image is taking up the full width and a height of 300px. The text overlay is positioned using absolute position also and is hidden by default, but it appears when the content block is hovered over with mouse so that the text and button become visible. The overlay includes a heading and paragraph and a button that changes its color when it is hovered with mouse. The content block includes a transparent type of black overlay that appears when the block is hovered over with mouse and again it is done so that the button and texts become visible to us. This code will define the styling for our content 3.
/* //........ Content 3 ........// */
.content3 {
width: 330px;
margin: 20px;
position: relative;
}
.content3::after {
content: "";
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.871);
z-index: 2;
opacity: 0;
}
.content3:hover::after {
opacity: 1;
}
.content3 img {
width: 100%;
height: 300px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.img-content3 {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in-out;
color: var(--white);
text-align: center;
font-size: 2.2rem;
font-weight: bolder;
z-index: 5;
opacity: 0;
}
.img-content3 p {
font-size: 1.6rem;
}
.img-content3 a {
text-decoration: none;
font-size: 1.2rem;
color: #fff;
transition: 0.3s;
}
.img-content3 button {
border: none;
background-color: var(--primary-color);
color: var(--white);
border-radius: 10px;
padding: 10px;
}
.img-content3 button:hover {
background: var(--white);
color: var(--primary-color);
}
.img-content3 button:hover~.img-content3 a {
color: var(--primary-color);
}
.img-content3 a:hover {
color: var(--primary-color);
}
.content3:hover .img-content3 {
opacity: 1;
top: 50%;
}
.content3:hover .img-content3 {
opacity: 1;
top: 50%;
}
Next we will add CSS code for our seller section of the website.
This is CSS code for styling elements which are related to the section called “best-seller” in our website.
.best-seller is the parent container( parent container means that all the other elements will be placed inside this and the elements or tags which will be inside this will be known as child container) for all the elements in this section. It uses flex display property to align its child elements or tags horizontally with space between them.
.best-seller .red and .best-seller .blue and .best-seller .white And .best-seller .grey, .best-seller .brown, .best-seller .yellow and .best-seller .orange and .best-seller .green are different color classes inside these variable are set so that there will not be any color mismatch.
.seller h2 adds style to the heading element or tag(h2) within the .seller container. It adds a margin both above and below the heading margin is set with the unit called px (pixel).
.seller .best-p1 adds style to the container of the image of the product we will sell and price inside the .seller container for the product. It also gives the width and height of the container and also gives the width, height for the img.
.seller .best-p1 .price adds style to the price container inside the .seller .best-p1 container. It uses flex box property to align its child elements with spaces b/w them.
.seller .best-p1 .price .colors input[type="radio"] add style to the radio buttons used to select colors inside the .seller .best-p1 .price container. It give color and background color to black to them.
.best-seller .buy-now a adds styles to the link(“a” tag) inside the .best-seller .buy-now container. It gives the text color and removes the underline you know that the “a” tag has a default underline text decoration so we always have to remove it.
.seller a:hover adds style to all the links inside the .seller container so that when the mouse hovers them over. It changes its color to pink.
.best-seller .buy-now button and .best-seller .add-cart button adds style to the “buy now” and “add to cart” button. They give the padding and margin and font size and background color and color and border and border radius( adds roundness to it). They also gives the font weight and border style to change on hover of the mouse.
.best-seller .buy-now button:hover a and .best-seller .add-cart button:hover a adds styles to the link inside the “buy now” and “add to cart” button when the mouse hovers over them it changes the color of the link to pink.
/* //........ seller ........// */
.best-seller {
display: flex;
justify-content: space-between;
align-items: center;
}
.best-seller .red {
color: var(--primary-color);
cursor: pointer;
}
.best-seller .blue {
color: #8989ce;
cursor: pointer;
}
.best-seller .white {
color: var(--light-black);
cursor: pointer;
}
.best-seller .grey {
color: grey;
cursor: pointer;
}
.best-seller .brown {
color: rgb(175, 53, 53);
cursor: pointer;
}
.best-seller .yellow {
color: #ffff00;
cursor: pointer;
}
.best-seller .orange {
color: #ffa500;
cursor: pointer;
}
.best-seller .green {
color: #008000;
cursor: pointer;
}
.seller h2 {
margin-top: 65px;
margin-bottom: 20px;
}
.seller .best-p1 {
width: 250px;
height: 370px;
/* border: 2px solid black; */
}
.seller .best-p1 img {
height: 250px;
width: 250px;
}
.seller .best-p1 .price {
display: flex;
justify-content: space-between;
}
.seller .best-p1 .price .colors input[type="radio"] {
color: #000;
background-color: #000;
}
.best-seller .buy-now a {
text-decoration: none;
color: var(--white);
}
.seller a:hover {
color: #f05e8a;
}
.best-seller .buy-now button,
.best-seller .add-cart button {
padding: 10px 15px;
margin-top: 5px;
font-size: 14px;
cursor: pointer;
text-transform: uppercase;
background-color: #f05e8a;
color: var(--white);
border: none;
border-radius: 15px;
font-weight: 500;
border: 1px solid #f05e8a;
transition: 0.5s;
}
.best-seller .buy-now button:hover,
.best-seller .add-cart button:hover {
background-color: var(--white);
font-weight: 600;
}
.best-seller .buy-now button:hover a,
.best-seller .add-cart button:hover a {
color: #f05e8a;
}Now let us focus on deal of the weak
This code will Adds the styling of the “Deal of the Week” section of our website.
.deal_of_week is a flex container it is made flex box by using display as flex with making it center from both horizontally and vertically.
.names_of_brand has a p and h3 element inside it with font size of 1.8rem, and margin-bottom of 1rem (rem is a unit). The p element or tag has a color of var(--grey) we have declared the variables above, remember?.
.countdown has a span element or tag with a color of var(--primary-color) we have declared the variables above, font weight of 600 also letter spacing of 2px and an margin of 0.8rem 0 0 3rem. It also contains a h3 element or tag with font size of 2rem also font weight of 600 and color of var(--light-black) and line height of 40px and a margin of 0.8rem 0 0 3rem. also, it contains a p element or tag with a margin of 0.8rem 0 0 3rem.
.countdown a is also styled with text decoration of none like we discussed above that text decoration is default in “a” tags, color of var(--white), and font weight of 800 to make it little bold.
.countdown button has a margin of 0.8rem 3rem(rem is unit), a border of 2px solid var(--primary-color) variable are set above, and a background color of var(--primary-color), and a color of var(--white), also border radius of 10px (adds roundness to corners), and padding of 12px. It also has an transition of 0.4s (here “s” = second.
.countdown button:hover will change the background color to var(--white) and the text color to var(--primary-color) when it will be hovered with mouse.
.deal_of_week .countdown button:hover~.countdown a gives the background color of .countdown a to var(--white) and also the text color to var(--primary-color) when the button is hovered over with mouse.
.countdown a:hover will change its color to var(--primary-color) when hovered with mouse over.
/* //........ deal of week ........// */
.deal_of_week {
display: flex;
justify-content: center;
align-items: center;
}
.deal_of_week .names_of_brand p,
.deal_of_week .names_of_brand h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
}
.deal_of_week .names_of_brand p {
color: var(--grey);
}
.deal_of_week .countdown span {
color: var(--primary-color);
font-weight: 600;
letter-spacing: 2px;
margin: 0.8rem 0 0 3rem;
}
.deal_of_week .countdown h3 {
font-size: 2rem;
font-weight: 600;
color: var(--light-black);
line-height: 40px;
margin: 0.8rem 0 0 3rem;
}
.deal_of_week .countdown p {
margin: 0.8rem 0 0 3rem;
}
.deal_of_week .countdown a {
text-decoration: none;
color: var(--white);
font-weight: 800;
}
.deal_of_week .countdown button {
margin: 0.8rem 3rem;
border: 2px solid var(--primary-color);
background-color: var(--primary-color);
color: var(--white);
border-radius: 10px;
padding: 12px;
transition: 0.4s;
}
.deal_of_week .countdown button:hover {
background: var(--white);
color: var(--primary-color);
}
.deal_of_week .countdown button:hover~.countdown a {
background: var(--white);
color: var(--primary-color);
}
.countdown a:hover {
color: var(--primary-color);
}Above while writing HTML code we created a section called news section so lets style that now
The first #news gives a margin from the bottom of the section to create a little space between the news section and other elements or tags on our website.
The .news-heading class will style the heading of the news section, it also includes a centered paragraph with smaller font size and lighter color inside it also a centered h2 tag with larger font size and darker color just opposite the paragraph.
The .l-news class tells the layout of each news item inside the news section. It gives a padding at the top of the container also uses display flex property to horizontally give the news items spacing evenly and also each item being centered vertically. Each of the news item is placed inside a div which has a class of .l-news1, .l-news2, or .l-news3.
Inside each of these news item containers, there is a img and a div which has class .news1-conte and .news2-conte or .news3-conte. The img has an fixed height and width also the content div is positioned absolutely inside the container (position: absolute;).
Each of the content div have contains a title and an link styled with the class of class .date-news1 and .date-news2 and .date-news3. The title is a h4 tag or element with larger font size and font weight of 600 to make it bolder. The link is a anchor tag with bold font weight and positioned relatively and styled with an hover effect that changes the color of the link and changes the width of a horizontal line just below the link when we hover it with mouse.
/* //........ NEWS ........// */
#news {
margin-bottom: 250px;
}
.news-heading p {
text-align: center;
font-size: 18px;
color: var(--primary-color);
letter-spacing: 2px;
font-weight: 500;
margin-bottom: 15px;
margin-top: 70px;
}
.news-heading h2 {
text-align: center;
font-size: 32px;
font-weight: 600;
color: var(--light-black);
}
.l-news {
padding-top: 45px;
display: flex;
justify-content: space-evenly;
align-items: center;
position: relative;
}
.l-news img {
height: 200px;
width: 300px;
}
.l-news1 {
position: relative;
width: 280px;
height: 230px;
}
.l-news1 .news1-conte {
position: absolute;
bottom: -60%;
left: 7%;
background: var(--white);
padding: 25px;
}
.l-news2 {
position: relative;
width: 280px;
height: 230px;
}
.l-news2 .news2-conte {
position: absolute;
bottom: -60%;
left: 7%;
background: var(--white);
padding: 25px;
}
.l-news3 {
position: relative;
width: 280px;
height: 230px;
}
.l-news3 .news3-conte {
position: absolute;
bottom: -60%;
left: 7%;
background: var(--white);
padding: 25px;
}
.l-news1 .news1-conte .date-news1 p {
color: var(--light-black);
text-align: center;
padding: 15px 0;
}
.l-news1 .news1-conte .date-news1 h4 {
font-size: 18px;
text-align: center;
font-weight: 600;
padding-bottom: 15px;
}
.l-news1 .news1-conte .date-news1 a {
text-decoration: none;
text-align: center;
padding: 0 50px;
color: var(--primary-color);
position: relative;
font-weight: 600;
}
.l-news1 .news1-conte .date-news1 a::after {
content: "";
position: absolute;
background: #ff3c78;
height: 3px;
width: 100%;
left: 0;
bottom: -10px;
transition: 0.3s;
}
.l-news1 .news1-conte .date-news1 a:hover:after {
width: 0%;
}
.l-news1 .news1-conte .date-news1 a:hover {
color: var(--black);
}
.l-news2 .news2-conte .date-news2 p {
color: var(--light-black);
text-align: center;
padding: 15px 0;
}
.l-news2 .news2-conte .date-news2 h4 {
font-size: 18px;
text-align: center;
font-weight: 600;
padding-bottom: 15px;
}
.l-news2 .news2-conte .date-news2 a {
text-decoration: none;
text-align: center;
padding: 0 60px;
color: var(--primary-color);
position: relative;
font-weight: 600;
}
.l-news2 .news2-conte .date-news2 a::after {
content: "";
position: absolute;
background: #ff3c78;
height: 3px;
width: 100%;
left: 0;
bottom: -10px;
transition: 0.3s;
}
.l-news2 .news2-conte .date-news2 a:hover:after {
width: 0%;
}
.l-news2 .news2-conte .date-news2 a:hover {
color: var(--black);
}
.l-news3 .news3-conte .date-news3 p {
color: var(--light-black);
text-align: center;
padding: 15px 0;
}
.l-news3 .news3-conte .date-news3 h4 {
font-size: 18px;
text-align: center;
font-weight: 600;
padding-bottom: 15px;
}
.l-news3 .news3-conte .date-news3 a {
text-decoration: none;
text-align: center;
padding: 0 60px;
color: var(--primary-color);
position: relative;
font-weight: 600;
}
.l-news3 .news3-conte .date-news3 a::after {
content: "";
position: absolute;
background: #ff3c78;
height: 3px;
width: 100%;
left: 0;
bottom: -10px;
transition: 0.3s;
}
.l-news3 .news3-conte .date-news3 a:hover:after {
width: 0%;
}
.l-news3 .news3-conte .date-news3 a:hover {
color: var(--black);
}
Let us now move on to the footer section of our website
The footer selector gives the background color of the footer to black also gives a width of 100%.
Next .footer-container class has used display flex to make this container a flex box and sets the padding to 60px on the top and bottom only.
.footer-container h4 class tells the styling of the headings in the footer section which also includes the font color and weight and size and letter spacing.
The .footer-container a class tells the styling of the links in the footer which also includes the font color and size of font.
.footer-container .content_1 p and .footer-container .content_4 p classes tells the styling for the paragraphs or p tags in the footer including the color and margin.
.footer-container .content_4 input[type="email"] class gives the style for the email input field in the footer so that a user can enter its mail there it also includes the styling of background color and border and color and padding.
.footer-container .content_4 .f-mail class gives the styling of the email input field and the icon, making it the display flex and using justification and alignment properties.
.footer-container .content_4 .bx class tells the color for the icon.
.f-design class tells the width and color and also text alignment for the bottom section of the footer.
.f-design .f-design-txt class tells the border and padding, font size and color for the text inside the bottom section of the footer
/* //........ Footer ...... // */
footer {
width: 100%;
background: var(--black);
}
.footer-container .content_1 img {
height: 25px;
width: 180px;
}
.footer-container {
display: flex;
justify-content: space-between;
padding: 60px 0;
}
.footer-container h4 {
color: var(--white);
font-weight: 500;
letter-spacing: 1px;
margin-bottom: 25px;
font-size: 18px;
}
.footer-container a {
display: block;
text-decoration: none;
color: var(--grey);
margin-bottom: 15px;
font-size: 14px;
}
.footer-container .content_1 p,
.footer-container .content_4 p {
color: var(--grey);
margin: 25px 0;
font-size: 14px;
}
.footer-container .content_4 input[type="email"] {
background-color: var(--black);
border: none;
color: var(--white);
outline: none;
padding: 15px 0;
}
.footer-container .content_4 .f-mail {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-container .content_4 .bx {
color: var(--white);
}
.f-design {
width: 100%;
color: var(--white);
text-align: center;
}
.f-design .f-design-txt {
border-top: 1px solid var(--grey);
padding: 25px 0;
font-size: 14px;
color: var(--grey);
}
Let us now move to the contact section of our e commerce website
.contact give us a margin-top of 45px for the contact section.
iframe gives the height of 72vh and the width of 100%. which is used to embed a map.
.form is a flex container using display as flex with the child elements spaced evenly by using property, itwill contain a form for users to fill out.
.form-txt is an container for the text content on the left side to the form.
.form-txt h4 and .form-txt h1 and .form-txt span and .form-txt h3 and .form-txt p gives the styling for various headings and text inside the .form-txt container. All of These headings have different font sizes and weights and also colors.
.form-details is the container for the form inputs on the right side to the form where the user will enter details.
.form-details input[type="text"] and .form-details input[type="email"] gives the styling for text input fields with including padding and color and outline and border and margin and font size.
.form-details textarea give the styling for a textarea input field where user will write its text, with similar styling as the text input fields, but here the resize property set to none so that no one can change its width and height.
.form-details button gives the styling code for the button which will be used to submit the form.
/* //........ contact ...... // */
.contact {
margin-top: 45px;
}
iframe {
height: 72vh;
width: 100%;
}
.form {
display: flex;
justify-content: space-between;
margin: 80px 0;
}
.form .form-txt {
flex-basis: 48%;
}
.form .form-txt h4 {
font-weight: 600;
color: var(--primary-color);
letter-spacing: 1.5px;
font-size: 15px;
margin-bottom: 15px;
}
.form .form-txt h1 {
font-weight: 600;
color: var(--black);
font-size: 40px;
letter-spacing: 1.5px;
margin-bottom: 10px;
color: var(--light-black);
}
.form .form-txt span {
color: var(--light-black);
font-size: 14px;
}
.form .form-txt h3 {
font-size: 22px;
font-weight: 600;
margin: 15px 0;
color: var(--light-black);
}
.form .form-txt p {
color: var(--light-black);
font-size: 14px;
}
.form .form-details {
flex-basis: 48%;
}
.form .form-details input[type="text"],
.form .form-details input[type="email"] {
padding: 15px 20px;
color: var(--grey);
outline: none;
border: 1px solid var(--grey);
margin: 35px 15px;
font-size: 14px;
}
.form .form-details textarea {
padding: 15px 20px;
margin: 0 15px;
color: var(--grey);
outline: none;
border: 1px solid var(--grey);
font-size: 14px;
resize: none;
}
.form .form-details button {
padding: 15px 25px;
color: var(--white);
font-weight: 500;
background: var(--black);
outline: none;
border: none;
margin: 15px;
font-size: 14px;
letter-spacing: 2px;
cursor: pointer;
}Next lets add media queries for our website responsiveness
Media queries are used for making our website responsive we will add media queries to each section of the website and make it look good in even smaller devices
/* //....... Media Queries .......// */
@media (max-width: 500px) {
.head {
display: none;
}
.top-txt .head p,
.top-txt .head a {
font-size: 10px;
}
.home_txt h2,
.home_txt .home_label p {
display: none;
}
.home_txt {
position: absolute;
top: 20%;
left: 5%;
font-size: 12px;
}
.home_txt button {
padding: 7px 7px;
font-size: 10px;
}
.home_txt i {
display: none;
}
.home_txt .home_social_icons {
/* display: flex; */
display: none;
}
.menu-items {
margin-right: 0;
}
.best-seller {
display: flex;
flex-direction: column;
align-items: center;
}
.l-news {
display: flex;
flex-direction: column;
margin-right: 30px;
}
.l-news .l-news1,
.l-news .l-news2 {
margin-bottom: 200px;
}
.footer-container {
display: flex;
flex-direction: column;
}
.footer-container .content_1 {
margin-bottom: 30px;
}
.best-seller img {
padding-top: 40px;
}
}
@media(min-width: 501px) and (max-width: 768px) {
.head {
display: none;
}
.top-txt .head p,
.top-txt .head a {
font-size: 10px;
}
.home_txt h2,
.home_txt .home_label p {
display: none;
}
.home_txt {
position: absolute;
top: 20%;
left: 5%;
font-size: 12px;
}
.home_txt button {
padding: 7px 7px;
font-size: 10px;
}
.home_txt i {
display: none;
}
.home_txt .home_social_icons {
/* display: flex; */
display: none;
}
.menu-items {
margin-right: 0;
}
.best-seller {
display: flex;
flex-direction: column;
}
.l-news {
display: flex;
flex-direction: column;
margin-right: 30px;
}
.l-news .l-news1,
.l-news .l-news2 {
margin-bottom: 200px;
}
.footer-container {
display: flex;
flex-direction: column;
}
.footer-container .content_1 {
margin-bottom: 30px;
}
.best-seller img {
padding-top: 40px;
}
}
@media(orientation: landscape) and (max-height: 500px) {
.header {
height: 90vmax;
}
}
/* //....... Media Queries For Contact .......// */
@media (max-width: 500px) {
.form {
display: flex;
flex-direction: column;
}
.form .form-details button {
margin-left: 0;
}
.form .form-details input[type="text"],
.form .form-details input[type="email"],
.form .form-details textarea {
width: 100%;
margin-left: 0;
}
.form .form-details input[type="text"] {
margin-bottom: 0px;
}
}
@media(min-width: 501px) and (max-width: 768px) {
.form {
display: flex;
flex-direction: column;
}
.form .form-details button {
margin-left: 0;
}
.form .form-details input[type="text"],
.form .form-details input[type="email"],
.form .form-details textarea {
width: 100%;
margin-left: 0;
}
.form .form-details input[type="text"] {
margin-bottom: 0px;
}
}Step-3: Writing the JavaScript code and adding Functionality to the website
Go create app.js file
And start writing the code
The first function uses click event listener to all <a> elements or tags on the page. When a user will click on a <a> element or tag, the function will check that the link has a hash value or not. If it does then the default behavior of the link is prevented (the browser does not navigate to a new page).
also the function will retrieve the hash value and animate the scroll position of our website to the top of the element with the ID corresponding to it (the element with id="about"). This animation will take 800 millisecond to complete. when the animation will be completed the hash value will be added to the URL.
The second function listen for a click event on any <a> element or tag inside a element with the class of menu-items. When its will be clicked it will set the checked property of a element with the ID checkbox to false. This will be used to close a navigation menu when a link is clicked.
Regarding the CSS code that we posted it also contains media queries that will adjust the layout of the contact form for different screen sizes.
$(document).ready(function () {
$("a").on("click", function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate(
{
scrollTop: $(hash).offset().top,
},
800,
function () {
window.location.hash = hash;
}
);
}
});
});
$(".menu-items a").click(function () {
$("#checkbox").prop("checked", false);
});
And that wraps up the coding of our e commerce website.
let us again look at the video result
Codepen:-
FAQ
Is this Ecommerce Website website responsive?
Yes this website is responsive, its made responsive using Media queries.
Can this website change its theme By Toggle?
No, Currently this website has no features of switching its theme.
How this Ecommerce Website website is made?
This website is made by just HTML, CSS and JavaScript. And this website is fully responsive to meet your needs.
Can the user buy products from here and make payments?
No, this website has no features of making payments as this is just a frontend project.
Does this website has map embed in it?
Yes, this website has a map embed in it, you can see the map in the contact section of the website