Online Shopping Website Using HTML and CSS
An online shopping website is a type of marketplace that provides shoppers with the opportunity to try out multiple things and shop for different things just by sitting at home and getting all the products delivered to their home. Digital shopping has increased in the past two years. In the past, people had to take days off from work to purchase items, but now customers can order their products from any corner of the world.
Isn’t it fantastic and offers clients amazing benefits to purchase products anytime, any time? We will use HTML and CSS to design a UI template for the same online store and Javascript for adding the menu bar functionality to our online shopping website. Your design and development abilities will improve as a result of this project. Now, let’s get our project underway without further a do.
Online Shopping Website Code:
Menu bar:
Using the <div> tag with class “container,” we will create a main frame of our online shopping website that contains all the content of the website. Using the <div> tag with the class “navbar, we will create a child container for creating the navbar of the website, along with some icons inside the navbar.
Using the div with class logo, we will create a block-level element for creating a block for adding the logo of the website, and using the <nav> tag, we will create the navbar of the website, and using the unorder list tag, we will create the menu bar for the website.
100 Day , 100 HTML CSS JavaScript Projects
Now we will add a banner to our website using the img tag inside the anchor tag to create a hyperlink image of the online shopping website.
<div class="container">
<div class="navbar">
<div class="logo">
<a href="index.html"><img src="https://i.ibb.co/kDVwgwp/logo.png" alt="RedStore" width="125px" /></a>
</div>
<nav>
<ul id="MenuItems">
<li><a href="index.html">Home</a></li>
<li><a href="product.html">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="account.html">Account</a></li>
</ul>
</nav>
<a href="cart.html"><img src="https://i.ibb.co/PNjjx3y/cart.png" alt="" width="30px" height="30px" /></a>
<img src="https://i.ibb.co/6XbqwjD/menu.png" alt="" class="menu-icon" onclick="menutoggle()" />
</div>
</div>Body of the website:
Now, using the <div with class “small-container”, we will create the container for products on the website. Using the div tag, we will create different columns for each element and place multiple products in one column to give a realistic shopping website look.
We will add some icons and buttons along with an image and product description using <h2> and select the option button to create a filter for the shopping website. We will then just duplicate the content, creating multiple pieces of the same size and displaying them equally in a formatted manner to the customer, which looks more appealing and is more user-interactive.
We have used only basic tags for creating the product time using the div and some basic HTML tags. Just go through the whole website structure, and you will easily understand the logic and relation of elements with each tag.
<div class="small-container">
<div class="row row-2">
<h2>All Products</h2>
<select>
<option value="">Default Shorting</option>
<option value="">Short by price</option>
<option value="">Short by popularity</option>
<option value="">Short by rating</option>
<option value="">Short by sale</option>
</select>
</div>
<div class="row">
<div class="col-4">
<img src="https://i.ibb.co/47Sk9QL/product-1.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/b7ZVzYr/product-2.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/KsMVr26/product-3.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/0cMfpcr/product-4.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://i.ibb.co/47Sk9QL/product-1.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/b7ZVzYr/product-2.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/KsMVr26/product-3.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/0cMfpcr/product-4.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://i.ibb.co/bQ5t8bR/product-5.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/vVpTyBD/product-6.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/hR5FGwH/product-7.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/QfCgdXZ/product-8.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://i.ibb.co/nw5xZwk/product-9.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/9HCsmjf/product-10.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/JQ2MBHR/product-11.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
<p>₹500.00</p>
</div>
<div class="col-4">
<img src="https://i.ibb.co/nRZMs6Y/product-12.jpg" alt="" />
<h4>Red Printed T-shirt</h4>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<p>₹500.00</p>
</div>
</div>
<div class="page-btn">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>→</span>
</div>
</div>footer of the website:
The footer of every website is a section that contains additional information about the developer, and all the additional links and copyright details are to be mentioned inside the footer only. Using the div tag with class footer, we will create a container for the footer, and inside it, using the div tag with class row, we will create a column1 for the footer section, in which we will add the downloadable links of the shopping website app. Inside Section 2, we will add an image along with a paragraph tag to add some key points about the website.
<!-- Footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Download Our App</h3>
<p>Download App for Android and iso mobile phone.</p>
<div class="app-logo">
<img src="https://i.ibb.co/KbPTYYQ/play-store.png" alt="" />
<img src="https://i.ibb.co/hVM4X2p/app-store.png" alt="" />
</div>
</div>
<div class="footer-col-2">
<img src="https://i.ibb.co/j3FNGj7/logo-white.png" alt="" />
<p>
Our Purpose Is To Sustainably Make the Pleasure and Benefits of
Sports Accessible to the Many.
</p>
</div>
<div class="footer-col-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return Policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="footer-col-4">
<h3>Follow us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>YouTube</li>
</ul>
</div>
</div>
<hr />
<p class="copyright">Copyright © 2021 - Red Store</p>
</div>
</div>
Structure Output:
Styling the online Website:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: #555;
}
p {
color: #555;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn {
display: inline-block;
background: #ff523b;
color: #ffffff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover {
background: #563434;
}
.header {
background: radial-gradient(#fff, #ffd6d6);
}
.header .row {
margin-top: 70px;
}
.categories {
margin: 70px 0;
}
.col-3 {
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img {
width: 100%;
}
.small-container {
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 100%;
}
.title {
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after {
content: "";
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
h4 {
color: #555;
font-weight: normal;
}
.col-4 p {
font-size: 14px;
}
.rating .fas {
color: #ff523b;
}
.rating .far {
color: #ff523b;
}
.col-4:hover {
transform: translateY(-5px);
}
/* Offer */
.offer {
background: radial-gradient(#fff, #ffd6d6);
margin-top: 80px;
padding: 30px 0;
}
.col-2 .offer-img {
padding: 50px;
}
small {
color: #555;
}
/* testimonial */
.testimonial {
padding-top: 100px;
}
.testimonial .col-3 {
text-align: center;
padding: 40px 20px;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.5s;
}
.testimonial .col-3 img {
width: 100px;
margin-top: 20px;
border-radius: 50%;
}
.testimonial .col-3:hover {
transform: translateY(-10px);
}
.fa-quote-left {
font-size: 34px;
color: #ff523b;
}
.col-3 p {
font-size: 14px;
margin: 12px 0;
color: #777777;
}
.testimonial .col-3 h3 {
font-weight: 600;
color: #555;
font-size: 16px;
}
.brands {
margin: 100px auto;
}
.col-5 {
width: 160px;
}
.col-5 img {
width: 100%;
cursor: pointer;
filter: grayscale(100%);
}
.col-5 img:hover {
width: 100%;
cursor: pointer;
filter: grayscale(0);
}
/* footer */
.footer {
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px;
}
.footer p {
color: #8a8a8a;
}
.footer h3 {
color: #ffffff;
margin-bottom: 20px;
}
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1 {
flex-basis: 30%;
}
.footer-col-2 {
flex: 1;
text-align: center;
}
.footer-col-2 img {
width: 180px;
margin-bottom: 20px;
}
.footer-col-3,
.footer-col-4 {
flex-basis: 12%;
text-align: center;
}
ul {
list-style-type: none;
}
.app-logo {
margin-top: 20px;
}
.app-logo img {
width: 140px;
}
.footer hr {
border: none;
background: #b5b5b5;
height: 1px;
margin: 20px 0;
}
.copyright {
text-align: center;
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
/* media query for menu */
@media only screen and (max-width: 800px) {
nav ul {
position: absolute;
top: 70px;
left: 0;
background: #333;
width: 100%;
overflow: hidden;
transition: max-height 0.5s;
}
nav ul li {
display: block;
margin-right: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
nav ul li a {
color: #fff;
}
.menu-icon {
display: block;
cursor: pointer;
}
}
/* all products page */
.row-2 {
justify-content: space-between;
margin: 100px auto 50px;
}
select {
border: 1px solid #ff523b;
padding: 5px;
}
select:focus {
outline: none;
}
.page-btn {
margin: 0 auto 80px;
}
.page-btn span {
display: inline-block;
border: 1px solid #ff523b;
margin-left: 10px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
cursor: pointer;
}
.page-btn span:hover {
background: #ff523b;
color: #ffffff;
}
/* single product details */
.single-product {
margin-top: 80px;
}
.single-product .col-2 img {
padding: 0;
}
.single-product .col-2 {
padding: 20px;
}
.single-product h4 {
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
.single-product select {
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product input {
width: 50px;
height: 40px;
padding-left: 10px;
font-size: 20px;
margin-right: 10px;
border: 1px solid #ff523b;
}
input:focus {
outline: none;
}
.single-product .fas {
color: #ff523b;
margin-left: 10px;
}
.small-img-row {
display: flex;
justify-content: space-between;
}
.small-img-col {
flex-basis: 24%;
cursor: pointer;
}
/* cart items */
.cart-page {
margin: 90px auto;
}
table {
width: 100%;
border-collapse: collapse;
}
.cart-info {
display: flex;
flex-wrap: wrap;
}
th {
text-align: left;
padding: 5px;
color: #ffffff;
background: #ff523b;
font-weight: normal;
}
td {
padding: 10px 5px;
}
td input {
width: 40px;
height: 30px;
padding: 5px;
}
td a {
color: #ff523b;
font-size: 12px;
}
td img {
width: 80px;
height: 80px;
margin-right: 10px;
}
.total-price {
display: flex;
justify-content: flex-end;
}
.total-price table {
border-top: 3px solid #ff523b;
width: 100%;
max-width: 400px;
}
td:last-child {
text-align: right;
}
th:last-child {
text-align: right;
}
/* account page */
.account-page {
padding: 50px 0;
background: radial-gradient(#fff, #ffd6d6);
}
.form-container {
background: #ffffff;
width: 300px;
height: 400px;
position: relative;
text-align: center;
padding: 20px 0;
margin: auto;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.form-container span {
font-weight: bold;
padding: 0 10px;
color: #555555;
cursor: pointer;
width: 100px;
display: inline-block;
}
.form-btn {
display: inline-block;
}
.form-container form {
max-width: 300px;
padding: 0 20px;
position: absolute;
top: 130px;
transition: transform 1s;
}
form input {
width: 100%;
height: 30px;
margin: 10px 0;
padding: 0 10px;
border: 1px solid #ccc;
}
form .btn {
width: 100%;
border: none;
cursor: pointer;
margin: 10px 0;
}
form .btn:focus {
outline: none;
}
#LoginForm {
left: -300px;
}
#RegForm {
left: 0;
}
form a {
font-size: 12px;
}
#Indicator {
width: 100px;
border: none;
background: #ff523b;
height: 3px;
margin-top: 8px;
transform: translateX(100px);
transition: transform 1s;
}
/* media query for less than 600 screen size */
@media only screen and (max-width: 600px) {
.row {
text-align: center;
}
.col-2,
.col-3,
.col-4 {
flex-basis: 100%;
}
.single-product .row {
text-align: left;
}
.single-product .col-2 {
padding: 20px 0;
}
.single-product h1 {
font-size: 26px;
line-height: 32px;
}
.cart-info p {
display: none;
}
}
Body & Navbar Styling:
Using the universal selector, we will add some basic styling to the webpage. We will set the padding and margin of the website to zero from the browser’s default margin and padding. Also, using the box-sizing property, we will set the website view along the border box.
Create Portfolio Website Using HTML and CSS (Source Code)
Now using the body tag selector, we will set the font family to “poppins,” and using the class selector (.navbar), we will set the display to flex. Using the align items property, we will align the items of the navbar to the center, and using the padding property, we will set the padding to 20px.
We will select some basic HTML tags and add some font color to our website elements.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
}
.navbar {
display: flex;
align-items: center;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: #555;
}
p {
color: #555;
}
Banner and Content Styling:
Using the class selector (.container), we will set the maximum width of the container to 1300 pixels, and using the margin property, we will set the margin to auto. Using the padding left and right properties, we will set the padding of 25 pixels to each side.
Now, using the class selector (.row), we will add styling to the elements and products of the website. Using the display property, we will set the display to “flex,” and using the align item property, we will align the items to the center.
We will add some basic styling, padding, margin, and font size to the product items to align them equally inside the webpage.
ADVERTISEMENT
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 img {
max-width: 100%;
padding: 50px 0;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 25px 0;
}
.btn {
display: inline-block;
background: #ff523b;
color: #ffffff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover {
background: #563434;
}
.header {
background: radial-gradient(#fff, #ffd6d6);
}
.header .row {
margin-top: 70px;
}
.categories {
margin: 70px 0;
}
.col-3 {
flex-basis: 30%;
min-width: 250px;
margin-bottom: 30px;
}
.col-3 img {
width: 100%;
}
.small-container {
max-width: 1080px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.col-4 {
flex-basis: 25%;
padding: 10px;
min-width: 200px;
margin-bottom: 50px;
transition: transform 0.5s;
}
.col-4 img {
width: 100%;
}
.title {
text-align: center;
margin: 0 auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.title::after {
content: "";
background: #ff523b;
width: 80px;
height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
}
h4 {
color: #555;
font-weight: normal;
}
.col-4 p {
font-size: 14px;
}
.rating .fas {
color: #ff523b;
}
.rating .far {
color: #ff523b;
}
.col-4:hover {
transform: translateY(-5px);
}
/* Offer */
.offer {
background: radial-gradient(#fff, #ffd6d6);
margin-top: 80px;
padding: 30px 0;
}
.col-2 .offer-img {
padding: 50px;
}
small {
color: #555;
}
Styling Footer
ADVERTISEMENT
Using the class selector footer, we will set the background of the footer section to black, and using the color property, we will set the font color to “grey,” and using the font-size property, we will set the font size to 14 pixels.
ADVERTISEMENT
Now, using the child selector, we will set the color of the paragraph to dark gray, and using the h3 tag selector, we will set the font color of the heading to white. with a bottom margin of 20 pixels.
ADVERTISEMENT
Now we will add the styling to each column of the footer using the class selector, and we will just add some basic padding, margin, and width to the website.
ADVERTISEMENT
/* footer */
.footer {
background: #000;
color: #8a8a8a;
font-size: 14px;
padding: 60px 0 20px;
}
.footer p {
color: #8a8a8a;
}
.footer h3 {
color: #ffffff;
margin-bottom: 20px;
}
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
min-width: 250px;
margin-bottom: 20px;
}
.footer-col-1 {
flex-basis: 30%;
}
.footer-col-2 {
flex: 1;
text-align: center;
}
.footer-col-2 img {
width: 180px;
margin-bottom: 20px;
}
.footer-col-3,
.footer-col-4 {
flex-basis: 12%;
text-align: center;
}
Styling output:
Adding functionality to online Website:
A responsive menu where a menu container with the ID ‘MenuItems’ initially has its maximum height set to ‘0px,’ effectively hiding the menu. The ‘menutoggle’ function is designed to toggle the menu’s visibility. If the current maximum height is ‘0px’ when the function is called, it expands the menu by setting the maximum height to ‘200px,’ making its content visible. Conversely, if the maximum height is not ‘0px,’ it collapses the menu by setting the maximum height back to ‘0px,’ hiding its content.
var MenuItems = document.getElementById('MenuItems');
MenuItems.style.maxHeight = '0px';
function menutoggle() {
if (MenuItems.style.maxHeight == '0px') {
MenuItems.style.maxHeight = '200px';
} else {
MenuItems.style.maxHeight = '0px';
}
}
Output:
Conclusion:
This type of projects are quiet beneficial for customer as well as developers provides a unique way for the customer to purchase goods and services from their home .Also creating this type of project helps developers to explore more real world problem . I would suggest you guys to try once creating similar type of website to become a good web developer.
FAQ
What are the prerequisites for creating an online website?
The developers should have great knowledge of HTML and CSS for creating the structure and styling of the website and a bit of knowledge about JavaScript for adding animation and small functionality.
Can we use this template for creating a full-fledged online shopping website?
This would be a great option to choose predefined templates for online shopping websites like this one, which saves developers time and allows them to invest that time in adding more features to the website.
Follow: Codewithrandom
Author: Arun
