How To Create Shopping Website Using HTML And CSS
Preview Link
Quick Info
| Youtube : | https://youtu.be/tAA5nkksTqg |
| Views : | 102674 |
| Skills : | HTML, CSS |
| Category : | Web Design |
| Tag : | Shopping Website, Ecommerce Website, Online Shopping Website |
In This Tutorial We Are going to Learning How To Create Shopping Website Using HTML And CSS. In this Shopping website we are not going to use javascript, we will design website using only HTML and CSS only.
Table of contents
Section We Are Going To Design In Our Shopping Website using HTML and CSS
In our website, we are going to design three main section : Header section, Main Body And Footer section
In this tutorial we are going to design these three section with the help of their subsections. Subsections are created as per the website content.
Header
- Top header
- Logo And Search Panel
- Main menu
Main Body
- Slider section
- Adv Banner
- Product Section
- Featured Section
Footer
- Quick link
- Contact information
- Social media link
- Copyright information
Video Tutorial
You see full coding video of designing Shopping Website Using HTML And CSS to understand easily. You can also watch the video tutorial below.
Let's Start Coding
Firstly, we will create the folder on dekstop, my folder name is ecommerce. Inside ecommerce folder, we will create two sub folder : - 1) css and 2) images
Inside ecommerce I am creating HTML file file name - index.html
Inside css folder I am creating CSS file - file name - style.css
Now, Let's start coding with writing basic meta code under head section in index.html, and link the style.css file to index.html file
Meta html code. Copy And paste the code in index.html
index.html
<!---------- Meta HTML Starts --------->
<>
<>
<>Website Site<>
<>
<>
<>
<>
<!---------- Meta HTML Ends --------->
Common CSS. Copy and paste the code in style.css
style.css
/********** Common CSS Starts **********/
html, body {
font-family Roboto, sans-serif, arial;
font-size: 14px;
color: #242424;
font-weight: 400;
}
html {
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
font-size:10px;
-webkit-tap-highlight-color:transparent
}
* {
margin:0px;
padding:0px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
outline:0
}
.container {
width:1150px;
margin:0px auto;
display:table;
}
.width-100 {
width:100%;
float:left;
}
.width-50 {
width:50%;
float:left;
}
.width-25 {
width:25%;
float:left;
}
.width-75 {
width:75%;
float:left;
}
.width-80 {
width:80%;
float:left;
}
.width-60 {
width:60%;
float:left;
}
.width-40 {
width:40%;
float:left;
}
.width-33 {
width:33%;
float:left;
}
.width-30 {
width:30%;
float:left;
}
.width-20 {
width:20%;
float:left;
}
.main-section {
width:100%;
float:left;
padding-top:80px;
padding-bottom:80px;
}
.bg-grey {
background:#f0f3fa;
}
.heading-section {
font-size: 25px;
text-align: center;
}
.heading-section span {
color: #787eff;
}
.subhead-section {
font-size: 16px;
text-align: center;
margin-bottom: 40px;
}
/********** Common CSS Ends **********/
2) Now, we will design Top Header Section.
In our top header section, we are having content. we are using content are written in paragraph tag.
Please copy and paste the below code to design Top header section
Top Header Section HTML code. Copy this code and paste in index.html file
index.html
<!---------- Top Header HTML Code Starts --------->
<>
<>
<>
<>Dezven: India's Fastest Online Shopping Destination <>
<>
<>
<>
<>
<><>
<>Refer Your Friend And Earn Rs. 500 Cashback<>
<>
<>
<><>
<> Download App<>
<>
<>
<>
<>
<>
<>
<!---------- Top Header HTML Code Ends --------->
Top Header section CSS code. Copy the code and paste in style.css
style.css
/********** Top Header CSS Code Starts **********/
.top-header {
background: #f13f31;
padding: 8px 0px;
border-bottom: 1px solid #3131315e;
}
.head1p1 {
font-size: 12px;
color: #ffffff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.head1ul {
list-style: none;
float: right;
}
.head1ul li {
float: left;
padding-left: 10px;
}
.head1ul li a {
font-size: 12px;
color: #ffffff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
.head1ul li i {
font-size: 15px;
color: #ffffff;
}
/********** Top Header CSS Code Ends **********/
Output Of Top Header Section
3) Now, we will design Logo And Search Panel section.
In our logo and search panel section, we are having logo and search button. For Creating logo we have img tag and for search button we are using button tag.
Please copy and paste the below code to design Logo and Search Panel section
Logo and Search Panel section HTML code. Copy this code and paste in index.html file
index.html
<!---------- Logo and Search Panel HTML Code Starts --------->
<>
<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>
<>
<>
<><>
<>Whislist<>
<>
<>
<><>
<>Login & Signup<>
<>
<>
<><>
<>Cart (0)<>
<>
<>
<>
<>
<>
<!---------- Logo and Search Panel HTML Code Ends --------->
Logo and Search Panel section CSS code. Copy the code and paste in style.css
style.css
/********** Logo and Search Panel CSS Code Starts **********/
.search-panel {
background: #f13f31;
padding: 12px 0px;
}
.search-textbox {
padding-left: 16px;
height: 40px;
width: 80%;
border: 1px solid #fff;
float: left;
}
.search-button {
height: 42px;
width: 55px;
border: none;
background: white;
float: left;
}
.search-button i {
color: #f13f31;
}
.cart-sect {
list-style: none;
float: right;
margin-top: 8px;
}
.cart-sect li {
float: left;
padding: 0px 6px;
}
.cart-sect li a {
font-size: 14px;
color: #ffffff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
.cart-sect li i {
font-size: 14px;
color: #ffffff;
}
/********** Logo and Search Panel CSS Code Ends **********/
Output Of Logo And Search Panel Section
4) Now, we will design Main Menu of ecommerce website in html and css.
In our ecommerce website, Main Menu Section we are having content which we are going to design using ul tag. For Creating nav bar, we have ul tag.
Please copy and paste the below code to design Main Menu Section
Main Menu Section HTML code. Copy this code and paste in index.html file
index.html
<!---------- Main Menu HTML Code Starts --------->
<>
<>
<>
<>
<>Home<>
<>
<>
<>iPhone<>
<>
<>
<>Samsung<>
<>
<>
<>Nokia<>
<>
<>
<>Motorola<>
<>
<>
<>iPad<>
<>
<>
<>Accessories<>
<>
<>
<>
<>
<!---------- Main Menu HTML Code Ends --------->
Main Menu section CSS code. Copy the code and paste in style.css
style.css
/********** Main Menu CSS Code Starts **********/
.main-menu {
list-style: none;
}
.main-menu a {
font-weight: 500;
color: #2b304a;
font-size: 17px;
font-family Roboto, sans-serif, arial;
text-decoration: none;
}
.main-menu li {
float: left;
padding: 12px 20px;
}
/********** Main Menu CSS Code Ends **********/
Output Of Main Menu Section of ecommerce website using html and css
5) Now, we will design slider section of website using html and css.
Now we are going to create slider. In this section we have image at a particular width. For creating image we are using img tag
Please copy and paste the below code to design Slider section
Slider section HTML code. Copy this code and paste in index.html file
index.html
<!---------- Slider HTML Code Starts --------->
<>
<>
<>
<!---------- Slider HTML Code Ends --------->
Slider section CSS code. Copy the code and paste in style.css
style.css
This is no requirement CSS
Output Of Slider Section
6) Now, we will design Banner section.
In Banner section shopping website, we are having image at a particular width. For Creating Banner that we are using img tag.
Please copy and paste the below code to design Banner section
Banner section HTML code. Copy this code and paste in index.html file
index.html
<!---------- Banner HTML Code Starts --------->
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!---------- Banner HTML Code Ends --------->
Banner section CSS code. Copy the code and paste in style.css
style.css
This is no requirement CSS
Output Of Banner Section Of shopping website
In our Product section, we are having images, icons, border and content. For Creating images we have img tag and for icons we have font awesome icons.
Please copy and paste the below code to design Product section
Product Section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>New iphone 11 Max Pro 64 GB<>
<>
<>
<><>
<><>
<><>
<><>
<><>
<>(5)<>
<>
<>
<>Rs.549.00<>
<>Rs.554<>
<>90%OFF<>
<>
<>
<>
<>
<>
<>
<!---------- Product-Section HTML Code Ends --------->
Product Section CSS code. Copy the code and paste in style.css
style.css
/********** Product-Section CSS Code Starts **********/
.product-section {
padding-left:15px;
padding-right:15px;
margin-bottom:20px;
}
.product-img {
width:auto;
height:270px;
}
.product-img-center {
text-align:center;
}
.product-border {
border: 1px solid #d1d1d1;
padding:20px;
}
.product-name a {
color: #232b33;
text-decoration: none;
font-size: 17px;
font-family Roboto, sans-serif, arial;
}
.product-rating {
color: #FFC315;
font-size: 14px;
padding-top: 6px;
}
.product-rating span {
font-weight: 600;
color: #3c3b3b8c;
font-size: 12px;
font-family Roboto, sans-serif, arial;
}
.product-discounted-price {
color: #333;
font-size: 18px;
letter-spacing: 0.1px;
font-weight: 600;
font-family Roboto, sans-serif, arial;
}
.product-original-price {
color: #6f6f6f;
text-decoration: line-through;
font-size:14px;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.product-discount {
border: 1px solid #ccc;
background: #fff;
display: inline-block;
font-size: 10px;
color: #999;
padding: 5px;
border-radius: 1px;
float:right;
}
.product-price {
margin-top:15px;
}
/********** Product-Section CSS Code Ends **********/
Output Of Product Section
8) Now, we will design Featured section.
In our Featured section, we are having content, icons and border. For Creating icons, we are using font awesome icons and for content we are using paragraph tag.
Please copy and paste the below code to design featured section
Featured Section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>Instant Delivery<>
<>One day shipping on all order<>
<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>ONLINE SUPPORT 24/7<>
<>Support online 24 hours a day<>
<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>TRY AND BUY<>
<>Try Product, If you like it then buy it<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>INSTANT DISCOUNT<>
<>Upto 50% instant discount on all product<>
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>SECURE PAYMENT<>
<>All cards accepted<>
<>
<>
<>
<>
<>
<!---------- Featured-Section HTML Code Ends --------->
Featured Section CSS code. Copy the code and paste in style.css
style.css
/********** Feature-Section CSS Code Starts **********/
.featured-content i {
font-size: 37px;
padding: 7px 0 0 10px;
color: #eb372a;
}
.featured-content h4 {
color: #666;
font-size: 14px;
margin: 0 0 5px;
text-transform: uppercase;
font-weight:500;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.featured-content p {
font-size: 13px;
color:#333333;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.margin-top-8 {
margin-top:8px;
}
.featured-border {
border: 1px solid #ebebeb;
width:100%;
float:left;
padding:15px 0px;
}
/********** Feature-Section CSS Code Ends **********/
Output Of Feature Section
9) Now, we will design Footer section of Shopping Website Using HTML And CSS.
In our footer section, we are having our Account, quick links, social media icons section. For Creating footer section we have ul, a(anchor) tag ..
Please copy and paste the below code to design Footer section
Footer Section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>
<>
<>Account Detail<>
<>
<><>Home<><>
<><>About us<><>
<><>Search<><>
<><>Cart<><>
<><>Checkout<><>
<>
<>
<>
<>Quick Link<>
<>
<><>My Profile<><>
<><>Change Password<><>
<><>Order History<><>
<><>My Whislist<><>
<><>My Cashback<><>
<>
<>
<>
<>Quick Link<>
<>
<><>Login<><>
<><>Faq<><>
<><>Contact us<><>
<><>Download App<><>
<><>Refer & Earn Cashback<><>
<>
<>
<>
<>GET IN TOUCH<>
<>
<><><> E-MAIL:<> info@dezven.com<><>
<><><> WHATS-APP: +91 -123 456 789<>
<><><> CONTACT NO.: +91 -(123)-4567890<>
<><><> WEBSITE:<> https://www.dezven.com<><>
<>
<>
<><><><><>
<><><><><>
<><><><><>
<><><><><>
<>
<>
<>
<>
<!---------- Footer-Section HTML Code Ends --------->
Footer Section CSS code. Copy the code and paste in style.css
style.css
/********** Footer-Section CSS Code Starts **********/
.footer {
background: #232f3e;
padding: 50px 0px;
}
.quicklink-menu {
list-style: none;
padding-left: 10px;
}
.quicklink-menu li a {
color: #fff;
line-height: 2.5;
font-size: 15px;
text-decoration: none;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.social-media {
list-style: none;
margin-top: 10px;
}
.social-media li a img {
width: 30px;
}
.social-media li {
float: left;
padding: 0px 8px;
}
.quicklink-heading {
font-size: 18px;
font-weight: bold;
color: #fff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 10px;
}
.get-in-touch {
list-style: none;
padding-left: 10px;
}
.get-in-touch li i {
color: #ed372c;
font-size: 20px;
}
.get-in-touch li {
color: #fff;
line-height: 2.5;
font-size: 15px;
text-decoration: none;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.footer-e-mail {
font-size: 15px;
font-weight: bold;
color: #fff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
.footer-website {
font-size: 12px;
font-weight: bold;
color: #fff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
}
.footer2-bacbor {
background: #232f3e;
padding: 10px 0px;
border-top: 1px solid #898989;
}
.footer2-content {
font-size: 14px;
color: #fff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
/********** Footer-Section CSS Code Ends **********/
Output Of Footer Section
10) Now, we will design Footer Copyright section.
In our Footer bottom section, we are having content. For Creating content we have p tag and paragraph.
Please copy and paste the below code to design Footer bottom section
Footer Copyright section HTML code. Copy this code and paste in index.html file
index.html
<>
<>
<>Copyright © 2023, dezven.com. All Rights Reserved<>
<>
<!---------- Footer-bottom Section HTML Code Ends --------->
Footer Copyright section CSS code. Copy the code and paste in style.css
style.css
/********** Footer-bottom Section CSS Code Starts **********/
.footer2-bacbor {
background: #232f3e;
padding: 10px 0px;
border-top: 1px solid #898989;
}
.footer2-content {
font-size: 14px;
color: #fff;
font-family "Helvetica Neue", Helvetica, Arial, sans-serif;
text-align: center;
}
/********** Footer-bottom Section CSS Code Ends **********/
These codes are very interesting suitable to know them. Just keep it well and give us pdf notes of all the codes if is possible
This is very nice, wonderful and helpful
Thank you so much, this code made it easy to make my web project.
thank you
Thank you so much bro you made my work very simple,
Thank you so much!
I was SOOO IMPRESED with this code, keep it up!!!
post the code file
thank you this helped so much!
Thanks a lot it helped me with my web project. Thank you so much.
easy to understand. thank you
very easy tutorial to design shopping website using html and css