Hello, Today in this article, we’ll learn to create an e-commerce website using HTML, CSS and JS. This is a part of full stack e-commerce website. In this part we’ll only create front end page’s UI. We’ll create 4 pages in this tutorial – Home page, Project Page, Search Page and 404 page.
To see demo or you want full coding tutorial video for better understanding. You can watch the tutorial below.
Video Tutorial
I appreciate if you can support me by subscribing my youtube channel.
Code
You can see below, our project’s folder structure.
Download Images, Get Source Code
So let’s start coding.
Home Page
Write basic HTML 5 template in index.html. And link home.css file to index file. Now, create navbar.
<nav class="navbar">
<div class="nav">
<img src="img/dark-logo.png" class="brand-logo" alt="">
<div class="nav-items">
<div class="search">
<input type="text" class="search-box" placeholder="search brand, product">
<button class="search-btn">search</button>
</div>
<a href="#"><img src="img/user.png" alt=""></a>
<a href="#"><img src="img/cart.png" alt=""></a>
</div>
</div>
</nav>
Open home.css file. And inside it before start styling. As we’ll have same navbar and footer in all pages. I thought of making their styles as a separate file. So import nav.js file inside home.css.
@import 'nav.css';
And do navbar related styles inside nav.css.
Nav.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto', sans-serif;
}
.navbar{
position: sticky;
top: 0;
left: 0;
width: 100%;
background: #f5f5f5;
z-index: 9;
}
.nav{
padding: 10px 10vw;
display: flex;
justify-content: space-between;
}
.brand-logo{
height: 60px;
}
.nav-items{
display: flex;
align-items: center;
}
.search{
width: 500px;
display: flex;
}
.search-box{
width: 80%;
height: 40px;
padding: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border: 1px solid #d1d1d1;
text-transform: capitalize;
background: none;
color: #a9a9a9;
outline: none;
}
.search-btn{
width: 20%;
height: 40px;
padding: 10px 20px;
border: none;
outline: none;
cursor: pointer;
background: #383838;
color: #fff;
text-transform: capitalize;
font-size: 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.search-box::placeholder{
color: #a9a9a9;
}
.nav-items a{
margin-left: 20px;
}
.nav-items a img{
width: 30px;
}
Output
Now create links below the navbar.
<ul class="links-container">
<li class="link-item"><a href="#" class="link">home</a></li>
<li class="link-item"><a href="#" class="link">women</a></li>
<li class="link-item"><a href="#" class="link">men</a></li>
<li class="link-item"><a href="#" class="link">kids</a></li>
<li class="link-item"><a href="#" class="link">accessories</a></li>
</ul>
Above code is inside navbar element.
.links-container{
width: 100%;
display: flex;
padding: 10px 10vw;
justify-content: center;
list-style: none;
border-top: 1px solid #d1d1d1;
}
.link{
text-transform: capitalize;
padding: 0 10px;
margin: 0 5px;
text-decoration: none;
color: #383838;
opacity: 0.5;
transition: .5s;
}
.link:hover{
opacity: 1;
}
Output
Great! but as we want navbar in all pages. I am don’t like to copy the code. So let’s make this navbar with JS dynamically. Open nav.js file. And make a createNav function inside it.
const createNav = () => {
let nav = document.querySelector('.navbar');
nav.innerHTML = `
<div class="nav">
<img src="img/dark-logo.png" class="brand-logo" alt="">
<div class="nav-items">
<div class="search">
<input type="text" class="search-box" placeholder="search brand, product">
<button class="search-btn">search</button>
</div>
<a href="#"><img src="img/user.png" alt=""></a>
<a href="#"><img src="img/cart.png" alt=""></a>
</div>
</div>
<ul class="links-container">
<li class="link-item"><a href="#" class="link">home</a></li>
<li class="link-item"><a href="#" class="link">women</a></li>
<li class="link-item"><a href="#" class="link">men</a></li>
<li class="link-item"><a href="#" class="link">kids</a></li>
<li class="link-item"><a href="#" class="link">accessories</a></li>
</ul>
`;
}
createNav();
If you see the above code, Inside the function first I am selecting nav element using querySelector method. And then writing its HTML using innerHTML. And the value of innerHTML is the same HTML elements that we have made in index.html file. You can now remove the HTML elements from there and also import nav.js.
<nav class="navbar"></nav>
<script src="js/nav.js"></script>
Output
Now, let’s make its header.
<!-- hero section -->
<header class="hero-section">
<div class="content">
<img src="img/light-logo.png" class="logo" alt="">
<p class="sub-heading">best fashion collection of all time</p>
</div>
</header>
Home.css
@import 'nav.css';
.hero-section{
width: 100%;
height: calc(100vh - 120px);
background-image: url('../img/header.png');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.hero-section .logo{
height: 150px;
display: block;
margin: auto;
}
.hero-section .sub-heading{
margin-top: 10px;
text-align: center;
color: #fff;
text-transform: capitalize;
font-size: 35px;
font-weight: 300;
}
Output
Now, we have to make product card slider. For that code this.
<section class="product">
<h2 class="product-category">best selling</h2>
</section>
Note- we are inside
index.htmlfile.
Home.css
.product{
position: relative;
overflow: hidden;
padding: 20px 0;
}
.product-category{
padding: 0 10vw;
font-size: 30px;
font-weight: 500;
margin-bottom: 40px;
text-transform: capitalize;
}
Output
Now make product card.
// inside product section.
<div class="product-container">
<div class="product-card">
<div class="product-image">
<span class="discount-tag">50% off</span>
<img src="img/card1.png" class="product-thumb" alt="">
<button class="card-btn">add to whislist</button>
</div>
<div class="product-info">
<h2 class="product-brand">brand</h2>
<p class="product-short-des">a short line about the cloth..</p>
<span class="price">$20</span><span class="actual-price">$40</span>
</div>
</div>
+7 more cards
</div>
We’ll make these product cards with JS and database dynamically later.
Home.css
.product-container{
padding: 0 10vw;
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
}
.product-container::-webkit-scrollbar{
display: none;
}
.product-card{
flex: 0 0 auto;
width: 250px;
height: 450px;
margin-right: 40px;
}
.product-image{
position: relative;
width: 100%;
height: 350px;
overflow: hidden;
}
.product-thumb{
width: 100%;
height: 350px;
object-fit: cover;
}
.discount-tag{
position: absolute;
background: #fff;
padding: 5px;
border-radius: 5px;
color: #ff7d7d;
right: 10px;
top: 10px;
text-transform: capitalize;
}
.card-btn{
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px;
width: 90%;
text-transform: capitalize;
border: none;
outline: none;
background: #fff;
border-radius: 5px;
transition: 0.5s;
cursor: pointer;
opacity: 0;
}
.product-card:hover .card-btn{
opacity: 1;
}
.card-btn:hover{
background: #efefef;
}
.product-info{
width: 100%;
height: 100px;
padding-top: 10px;
}
.product-brand{
text-transform: uppercase;
}
.product-short-des{
width: 100%;
height: 20px;
line-height: 20px;
overflow: hidden;
opacity: 0.5;
text-transform: capitalize;
margin: 5px 0;
}
.price{
font-weight: 900;
font-size: 20px;
}
.actual-price{
margin-left: 20px;
opacity: 0.5;
text-decoration: line-through;
}
Output
Now make, pre and next button of course.
// before product-container element.
<button class="pre-btn"><img src="img/arrow.png" alt=""></button>
<button class="nxt-btn"><img src="img/arrow.png" alt=""></button>
.pre-btn, .nxt-btn{
border: none;
width: 10vw;
height: 100%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
cursor: pointer;
z-index: 8;
}
.pre-btn{
left: 0;
transform: rotate(180deg);
}
.nxt-btn{
right: 0;
}
.pre-btn img, .nxt-btn img{
opacity: 0.2;
}
.pre-btn:hover img, .nxt-btn:hover img{
opacity: 1;
}
Output
Now, let’s make the slider working. Open home.js file. And code this.
const productContainers = [...document.querySelectorAll('.product-container')];
const nxtBtn = [...document.querySelectorAll('.nxt-btn')];
const preBtn = [...document.querySelectorAll('.pre-btn')];
productContainers.forEach((item, i) => {
let containerDimenstions = item.getBoundingClientRect();
let containerWidth = containerDimenstions.width;
nxtBtn[i].addEventListener('click', () => {
item.scrollLeft += containerWidth;
})
preBtn[i].addEventListener('click', () => {
item.scrollLeft -= containerWidth;
})
})
In the above code, I am simply selecting all product containers, next buttons, pre buttons using querySelectorAll method. And then just looping through each container. And adding click event to next button and pre button.
Import the home.js file inside index.html.
<script src="js/home.js"></script>
We are done with product cards also. Let’s make collections section now.
<!-- collections -->
<section class="collection-container">
<a href="#" class="collection">
<img src="img/women-collection.png" alt="">
<p class="collection-title">women <br> apparels</p>
</a>
<a href="#" class="collection">
<img src="img/men-collection.png" alt="">
<p class="collection-title">men <br> apparels</p>
</a>
<a href="#" class="collection">
<img src="img/accessories-collection.png" alt="">
<p class="collection-title">accessories</p>
</a>
</section>
.collection-container{
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
}
.collection{
position: relative;
}
.collection img{
width: 100%;
height: 100%;
object-fit: cover;
}
.collection p{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 50px;
text-transform: capitalize;
}
.collection:nth-child(3){
grid-column: span 2;
margin-bottom: 10px;
}
Output
Now you can copy the product section 2 more times after collection element. And you can also change the images and data. Don’t worry we’ll make the cards dynamically with database in future.
After done copying product section. The only thing left in our page is footer. So let’s make it.
<footer>
<div class="footer-content">
<img src="img/light-logo.png" class="logo" alt="">
<div class="footer-ul-container">
<ul class="category">
<li class="category-title">men</li>
<li><a href="#" class="footer-link">t-shirts</a></li>
<li><a href="#" class="footer-link">sweatshirts</a></li>
<li><a href="#" class="footer-link">shirts</a></li>
<li><a href="#" class="footer-link">jeans</a></li>
<li><a href="#" class="footer-link">trousers</a></li>
<li><a href="#" class="footer-link">shoes</a></li>
<li><a href="#" class="footer-link">casuals</a></li>
<li><a href="#" class="footer-link">formals</a></li>
<li><a href="#" class="footer-link">sports</a></li>
<li><a href="#" class="footer-link">watch</a></li>
</ul>
<ul class="category">
<li class="category-title">women</li>
<li><a href="#" class="footer-link">t-shirts</a></li>
<li><a href="#" class="footer-link">sweatshirts</a></li>
<li><a href="#" class="footer-link">shirts</a></li>
<li><a href="#" class="footer-link">jeans</a></li>
<li><a href="#" class="footer-link">trousers</a></li>
<li><a href="#" class="footer-link">shoes</a></li>
<li><a href="#" class="footer-link">casuals</a></li>
<li><a href="#" class="footer-link">formals</a></li>
<li><a href="#" class="footer-link">sports</a></li>
<li><a href="#" class="footer-link">watch</a></li>
</ul>
</div>
</div>
</footer>
As we did for navbar. Import footer.css inside home.css file.
Home.css
@import 'nav.css';
@import 'footer.css';
Footer.css
footer{
position: relative;
width: 100%;
padding: 40px 10vw;
padding-bottom: 80px;
background: #383838;
}
.footer-content{
display: flex;
width: 100%;
justify-content: space-between;
}
.footer-content .logo{
height: 160px;
}
.footer-ul-container{
width: 45%;
display: flex;
justify-content: space-between;
}
.category{
width: 200px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 10px;
list-style: none;
}
.category-title{
grid-column: span 2;
text-transform: capitalize;
color: #fff;
font-size: 20px;
margin-bottom: 20px;
}
.category .footer-link{
text-decoration: none;
text-transform: capitalize;
color: rgba(255, 255, 255, 0.75);
}
.footer-link:hover{
color: #fff;
}
Output
Make info elements inside footer.
<footer>
// previous elements
<p class="footer-title">about company</p>
<p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
<p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
<p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
<div class="footer-social-container">
<div>
<a href="#" class="social-link">terms & services</a>
<a href="#" class="social-link">privacy page</a>
</div>
<div>
<a href="#" class="social-link">instagram</a>
<a href="#" class="social-link">facebook</a>
<a href="#" class="social-link">twitter</a>
</div>
</div>
<p class="footer-credit">Clothing, Best apparels online store</p>
</footer>
Footer.css
.footer-title, .info{
color: rgba(255, 255, 255, 0.75);
margin: 20px 0;
text-transform: capitalize;
}
.footer-title{
margin-top: 80px;
color: #fff;
}
.footer-social-container{
margin-top: 40px;
display: flex;
justify-content: space-between;
}
.social-link{
color: #fff;
margin-left: 20px;
text-transform: capitalize;
}
.social-link:nth-child(1){
margin-left: 0;
}
.footer-credit{
width: 100%;
padding: 10px;
position: absolute;
left: 0;
bottom: 0;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.2);
}
Output
Great Work. As we did for navbar. Let’s make this footer also with JS dynamically. Open footer.js file and do the same thing, that we did for navbar.
const createFooter = () => {
let footer = document.querySelector('footer');
footer.innerHTML = `
<div class="footer-content">
<img src="img/light-logo.png" class="logo" alt="">
<div class="footer-ul-container">
<ul class="category">
<li class="category-title">men</li>
<li><a href="#" class="footer-link">t-shirts</a></li>
<li><a href="#" class="footer-link">sweatshirts</a></li>
<li><a href="#" class="footer-link">shirts</a></li>
<li><a href="#" class="footer-link">jeans</a></li>
<li><a href="#" class="footer-link">trousers</a></li>
<li><a href="#" class="footer-link">shoes</a></li>
<li><a href="#" class="footer-link">casuals</a></li>
<li><a href="#" class="footer-link">formals</a></li>
<li><a href="#" class="footer-link">sports</a></li>
<li><a href="#" class="footer-link">watch</a></li>
</ul>
<ul class="category">
<li class="category-title">women</li>
<li><a href="#" class="footer-link">t-shirts</a></li>
<li><a href="#" class="footer-link">sweatshirts</a></li>
<li><a href="#" class="footer-link">shirts</a></li>
<li><a href="#" class="footer-link">jeans</a></li>
<li><a href="#" class="footer-link">trousers</a></li>
<li><a href="#" class="footer-link">shoes</a></li>
<li><a href="#" class="footer-link">casuals</a></li>
<li><a href="#" class="footer-link">formals</a></li>
<li><a href="#" class="footer-link">sports</a></li>
<li><a href="#" class="footer-link">watch</a></li>
</ul>
</div>
</div>
<p class="footer-title">about company</p>
<p class="info">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat tempore ad suscipit, eos eius quisquam sed optio nisi quaerat fugiat ratione et vero maxime praesentium, architecto minima reiciendis iste quo deserunt assumenda alias ducimus. Ullam odit maxime id voluptates rerum tenetur corporis laboriosam! Cum error ipsum laborum tempore in rerum necessitatibus nostrum nobis modi! Debitis adipisci illum nemo aperiam sed, et accusamus ut officiis. Laborum illo exercitationem quo culpa reprehenderit excepturi distinctio tempore cupiditate praesentium nisi ut iusto, assumenda perferendis facilis voluptas autem fuga sunt ab debitis voluptatum harum eum. Asperiores, natus! Est deserunt incidunt quasi placeat omnis, itaque harum?</p>
<p class="info">support emails - help@clothing.com, customersupport@clothing.com</p>
<p class="info">telephone - 180 00 00 001, 180 00 00 002</p>
<div class="footer-social-container">
<div>
<a href="#" class="social-link">terms & services</a>
<a href="#" class="social-link">privacy page</a>
</div>
<div>
<a href="#" class="social-link">instagram</a>
<a href="#" class="social-link">facebook</a>
<a href="#" class="social-link">twitter</a>
</div>
</div>
<p class="footer-credit">Clothing, Best apparels online store</p>
`;
}
createFooter();
Now you can delete the footer elements from the the index file. And import the footer.js file.
index.html
<footer></footer>
<script src="js/footer.js"></script>
Output
Great! We are done with homepage. Now, let’s create product page.
Product page.
In product page. Write HTML 5 template. And link home.css, product.css file.
<head>
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/product.css">
</head>
And import these JS files.
<script src="js/nav.js"></script>
<script src="js/footer.js"></script>
<script src="js/home.js"></script>
<script src="js/product.js"></script>
And now you can just make a navbar and footer by adding nav and footer element inside body.
<nav class="navbar"></nav>
<footer></footer>
Output
Isn’t that simple. You can also copy the product container element from home page to here. After done copy the cards. Let’s make product detail section. Make it after navbar.
<section class="product-details">
<div class="image-slider">
<div class="product-images">
<img src="img/product image 1.png" class="active" alt="">
<img src="img/product image 2.png" alt="">
<img src="img/product image 3.png" alt="">
<img src="img/product image 4.png" alt="">
</div>
</div>
</section>
Product.css
.product-details{
width: 100%;
padding: 60px 10vw;
display: flex;
justify-content: space-between;
}
.image-slider{
width: 500px;
height: 500px;
position: relative;
background-image: url('../img/product\ image\ 1.png');
background-size: cover;
}
.product-images{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 90%;
background: #fff;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 100px;
grid-gap: 10px;
padding: 10px;
}
.product-images img{
width: 100%;
height: 80px;
object-fit: cover;
cursor: pointer;
}
.product-images img.active{
opacity: 0.5;
}
Output
Make details section in the right now.
<section>
// image slider
<div class="details">
<h2 class="product-brand">calvin klein</h2>
<p class="product-short-des">Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
<span class="product-price">$99</span>
<span class="product-actual-price">$200</span>
<span class="product-discount">( 50% off )</span>
<p class="product-sub-heading">select size</p>
<input type="radio" name="size" value="s" checked hidden id="s-size">
<label for="s-size" class="size-radio-btn check">s</label>
<input type="radio" name="size" value="m" hidden id="m-size">
<label for="m-size" class="size-radio-btn">m</label>
<input type="radio" name="size" value="l" hidden id="l-size">
<label for="l-size" class="size-radio-btn">l</label>
<input type="radio" name="size" value="xl" hidden id="xl-size">
<label for="xl-size" class="size-radio-btn">xl</label>
<input type="radio" name="size" value="xxl" hidden id="xxl-size">
<label for="xxl-size" class="size-radio-btn">xxl</label>
<button class="btn cart-btn">add to cart</button>
<button class="btn">add to wishlist</button>
</div>
</section>
.details{
width: 50%;
}
.details .product-brand{
text-transform: capitalize;
font-size: 30px;
}
.details .product-short-des{
font-size: 25px;
line-height: 30px;
height: auto;
margin: 15px 0 30px;
}
.product-price{
font-weight: 700;
font-size: 30px;
}
.product-actual-price{
font-size: 30px;
opacity: 0.5;
text-decoration: line-through;
margin: 0 20px;
font-weight: 300;
}
.product-discount{
color: #ff7d7d;
font-size: 20px;
}
.product-sub-heading{
font-size: 30px;
text-transform: uppercase;
margin: 60px 0 10px;
font-weight: 300;
}
.size-radio-btn{
display: inline-block;
width: 80px;
height: 80px;
text-align: center;
font-size: 20px;
border: 1px solid #383838;
border-radius: 50%;
margin: 10px;
margin-left: 0;
line-height: 80px;
text-transform: uppercase;
color: #383838;
cursor: pointer;
}
.size-radio-btn.check{
background: #383838;
color: #fff;
}
.btn{
width: 48%;
padding: 20px;
border-radius: 5px;
background: none;
border: 1px solid #383838;
color: #383838;
font-size: 20px;
cursor: pointer;
margin: 20px 0;
text-transform: capitalize;
}
.cart-btn{
margin-right: 2%;
background: #383838;
color: #fff;
}
Output
Now just a simple section we have to make. A detail description section. Make is outside product-details
<section class="detail-des">
<h2 class="heading">description</h2>
<p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, ......</p>
</section>
.detail-des{
padding: 0 10vw;
text-transform: capitalize;
}
.heading{
font-size: 30px;
margin-bottom: 30px;
}
.des{
color: #383838;
line-height: 25px;
}
Output
Now make the image slider working, and size button toggle-able. Open product.js file.
const productImages = document.querySelectorAll(".product-images img"); // selecting all image thumbs
const productImageSlide = document.querySelector(".image-slider"); // seclecting image slider element
let activeImageSlide = 0; // default slider image
productImages.forEach((item, i) => {
// loopinh through each image thumb
item.addEventListener('click', () => {
// adding click event to each image thumbnail
productImages[activeImageSlide].classList.remove('active');
// removing active class from current image thumb
item.classList.add('active');
// adding active class to the current or clicked image thumb
productImageSlide.style.backgroundImage = `url('${item.src}')`;
// setting up image slider's background image
activeImageSlide = i;
// updating the image slider variable to track current thumb
})
})
And then code this.
// toggle size buttons
const sizeBtns = document.querySelectorAll('.size-radio-btn');
// selecting size buttons
let checkedBtn = 0;
// current selected button
sizeBtns.forEach((item, i) => {
// looping through each button
item.addEventListener('click', () => {
// adding click event to each
sizeBtns[checkedBtn].classList.remove('check');
// removing check class from the current button
item.classList.add('check');
// adding check class to clicked button
checkedBtn = i;
// upading the variable
})
})
Great Work! we are done with product page also. Now we have to make search page which is very simple.
Search Page
As we made navbar and footer in the product page. Do the same for this page also. Link these files to it.
<head>
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/search.css">
</head>
<body>
<nav class="navbar"></nav>
<footer></footer>
<script src="js/nav.js"></script>
<script src="js/footer.js"></script>
</body>
Now make the product cards. First make the heading.
<section class="search-results">
<h2 class="heading">search results for <span>product</span></h2>
</section>
Search.css
.search-results{
width: 100%;
padding: 60px 0;
}
.heading{
font-size: 20px;
text-transform: capitalize;
font-weight: 400;
margin-bottom: 40px;
padding: 0 10vw;
}
.heading span{
font-weight: 700;
}
Output
For cards, we’ll use the same card we made for homepage. Just copy the product-container element from homepage and paste it inside search-results.
But we are using flex box which will make the cards go side by side. But we don’t want that for our search page. So just over write the product-container elements property.
Product.css
.product-container{
display: grid;
grid-template-columns: repeat(4, 1fr);
height: auto;
grid-row-gap: 40px;
}
Output
Now, we are almost done. The only page we have to create is 404 page.
404 Page
Do the same for this page also to make navbar. I didn’t made footer in this page but if you want you can make it too. After making navbar. Link 404.css file. And let’s code the page.
<img src="img/404.png" class="four-0-four-image" alt="">
<p class="four-0-four-msg">look like you are lost. Head to beack to our <a href="#">homepage</a></p>
Footer.css
.four-0-four-image{
display: block;
margin: 60px auto;
}
.four-0-four-msg{
text-align: center;
text-transform: capitalize;
color: #383838;
}
.four-0-four-msg a{
color: #383838;
}
Output
So that’s sit for today. Great work. I know it was a lot. But e-commerce website is not that simple. Don’t forget to follow me on youtube and dev.to if you don’t want to miss the next part of this series.
I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.
Articles you may find Useful
I really appreciate if you can subscribe my youtube channel. I create awesome web contents.
Source Code, Donate me on Paypal
Your donation really motivates me to do more amazing tutorials like this. Support me on patreon, Buy me a coffee, Donate me on paypal
Thanks For reading.
