| Youtube : | https://youtu.be/tAA5nkksTqg |
| Views : | 56029 |
| 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.
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
Main Body
Footer
You see full coding video of designing Shopping Website Using HTML And CSS to understand easily. You can also watch the video tutorial below.
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 Starts --------->
<>
<>
<>Website Site<>
<>
<>
<>
<>
<!---------- Meta HTML Ends --------->
/********** 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 **********/
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 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 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 **********/
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
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 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 **********/
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
index.html
<!---------- Main Menu HTML Code Starts --------->
<>
<>
<>
<>
<>Home<>
<>
<>
<>iPhone<>
<>
<>
<>Samsung<>
<>
<>
<>Nokia<>
<>
<>
<>Motorola<>
<>
<>
<>iPad<>
<>
<>
<>Accessories<>
<>
<>
<>
<>
<!---------- Main Menu HTML Code Ends --------->
/********** 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 **********/
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 HTML Code Starts --------->
<>
<>
<>
<!---------- Slider HTML Code Ends --------->
This is no requirement CSS
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 HTML Code Starts --------->
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<!---------- Banner HTML Code Ends --------->
This is no requirement CSS
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
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>
<>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 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 **********/
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
<>
<>
<>
<>
<>
<>
<><>
<>
<>
<>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 --------->
/********** 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 **********/
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
<>
<>
<>
<>
<>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 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 **********/
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
<>
<>
<>Copyright © 2023, dezven.com. All Rights Reserved<>
<>
<!---------- Footer-bottom Section HTML Code Ends --------->
/********** 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 **********/
Sonam
Thank you so much bro you made my work very simple,
ipalalevi
Thank you so much!
Salami Demilade Anas
I was SOOO IMPRESED with this code, keep it up!!!
ruskin inimgba
post the code file
Christine
thank you this helped so much!
Varshini
Thanks a lot it helped me with my web project. Thank you so much.
Kevin Brian
easy to understand. thank you
Sophia
very easy tutorial to design shopping website using html and css