how to create eCommerce website design using html and css

Hello friends, in this blog you will learn how to create an "eCommerce" website using only html and css. You might know "eCommerce" is a website that sells products or services on the Internet. Or that sells certain products directly to consumers. Like filipkart, amazon etc.

You can design an eCommerce website using html and css. Most of the eCommerce website is designed with java-script or jquery, you will be taught how to design an eCommerce website in html and css.

You can see in this image which is designed using html and css. Which looks very beautiful and attractive, with menu-bar and input search form designed with search icon and in this image the button is designed using css hover and social media is added on the footer of the image.

You can easily view this eCommerce website on laptop and pc. This website is not designed in response. You cannot see it properly in mobile tablet. To make it responsive, use the @ Media property.

eCommerce Website Design Source Codes

First let's understand the html code of eCommerce website website div is taken inside body tag whose class name is wrapper Another div tag is taken inside this wrapper whose class name is main, two div is taken inside class name main There is a class named navbar and container, three div is taken inside the class name navbar, whose class name is given logo nav and right-nav An img tag is taken inside the class logo using img tag to link the image Is done for

A ul tag is taken inside the class nav ul tag is called unorder list Five li tags are taken inside this ul tag is called list style A tag is taken inside this list style This tag is called an anchor This tag is called, this tag is used for the link, inside this tag, the menu is named.

A form tag has been taken under the class right-nav. Two input and an i tag have been taken inside this form tag. The first type of input is search and class name search is given. Below this input is the i tag using this tag. For the link of the icon which is linked to the class name which is written the class name fa fa-search it means for the search icon i tag below the second input tag type button and value = "Login" and The class name is given login

Now h1 p button and img tag are also taken inside the class container tag h1 is called the largest heading tag which is used for heading.
The p tag is taken under this heading, inside which the i tag is taken, the font tag is inside this i tag.

If you are having difficulties in understanding, then you can understand it by looking at the tutorial below, which will make you easier to understand.

Video Tutorial of eCommerce Website Design Using Html And CSS

I hope that you will understand by looking at this tutorial how the code is written and styled in the eCommerce website, this website will help you completely if you are in the beginning of html css or you have learned this. There will be full cooperation in learning design. Which you can design a good website.

You will have the option of two files to create an eCommerce website, one is the html file and the other is the css file, these two files have been given below, such that you can easily copy and paste them into your file. Download the image of shoes by clicking on the image button below this website.

HTML CODE FILE :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="iconhover.css" rel="stylesheet">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
   <div class="wrapper">
      <div class="main">
          <div class="navbar">
              <div class="logo">
<img src="image/nikelogo1.png"></div>
<div class="nav">
                  <ul>
<li><a href="#">NEW RELEASES</a></li>
<li><a href="#">MENS</a></li>
<li><a href="#">WOMENS</a></li>
<li><a href="#">KIDS</a></li>
<li><a href="#">CONTACT US</a></li>
</ul>
</div>
<div class="right-nav">
                  <form>
                      <input type="search" value="" placeholder="Search by keyword" class="search">
                      <i class="fa fa-search"></i>
                      <input type="button" value="Login" class="login">
                  </form>
</div>
</div>
<div class="container">
             <h1>
Nike Running Shoes For Men (Blue)</h1>
<p class="star">
<i class="fa fa-star"></i>
                 <i class="fa fa-star"></i>
                 <i class="fa fa-star"></i>
                 <i class="fa fa-star"></i>
                 <i class="fa fa-star-half"></i>
                 <span>4.6</span>
             </p>
<p class="text">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button class="button">ADD TO CART</button>
            <button class="button">BUY NOW</button>
            <img src="image/shoenike.png" class="shoes">
            <p class="social-icon">
<i class="fa fa-facebook"></i>
                <i class="fa fa-twitter"></i>
                <i class="fa fa-instagram"></i>
            </p>
</div>
</div>
</div>
</body>
</html>

CSS CODE FILE :

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper{
    width: 100%;
    height: 100vh;
    background-color: #070c24;
    float: left;
    font-family: 'Open Sans Condensed', sans-serif;
}
.main{
    width: 80%;
    height: 550px;
    margin: 60px auto;
   background: linear-gradient(70deg, #2B3143 60%,#006DBC 40.1%);
   border-radius: 10px;
}
.navbar{
    width: 90%;
   margin: auto;
    
}
.logo{
    width:7%;
    float: left;
    margin-top:15px;
}
.logo img{
    width: 100%;
    height: 50px;
}
.nav{
    width: 50%;
    float: left;
    
}
.nav ul{
    margin-left: 15%;
    margin-top: 30px;

}
.nav ul li{
    opacity: 1;
    display: inline;
    margin: 15px 0;
    transition: all 0.3s ease-in-out;
}
.nav ul a:hover{
    color: #006DBC;
}
.nav ul li a{
    text-decoration: none;
    color: #E1E4E5;
    padding: 5px 2%;
    font-size: 12px;
    text-align: center;
}
.right-nav{
    width:43%;
    float: left;
}
.right-nav form{
    position: relative;
}
.search{
    margin:30px 15%;
    outline: none;
      z-index: 1;
      background: none;
      border: none;
      color: #d1d1d1;
      font-size: 13px;
      font-weight: 400;
      padding: 5px 0;
      border-bottom: 1px solid #2B3143;     
}
.search::placeholder{
    color: #2B3143;
}
.right-nav form i{
    position: absolute;
    left: 10%;
    top: 35px;
    font-size: 14px;
    color: #2B3143;
}

.login{
    width: 30%;
    height: 40px;
    background: linear-gradient(#464646,#2B3143);
    color: #f1f1f1;
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 20px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
   
    
}
.login:hover{
    background: linear-gradient(#4a4a4a,#2B3143);
    color: #006DBC;
}
.container{
    width: 90%;
    margin:80px auto;
}
.container h1{
    width: 60%;
    font-size:50px;
    font-weight: bold;
    color: #E1E4E5;
    
}
.star i, .star span{
    color: #FAF66C;
    font-size: 9px;
    padding: 10px 0.1%;
}
.star span{
    color: #E1E4E5;
}
.text{
    width: 60%;
    color: #ADB3C3;
    text-align: justify;
    font-size: 13px;
}
.button{
    margin: 20px 1%;
    width: 18%;
    height: 70px;
    border-radius: 40px;
    border: none;
    color: #f1f1f1;
    background-color: #006DBC;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
.button:hover{
    background-color: #2B3143;
    border: 1px solid #f1f1f1;
    
}
.shoes{
    position: absolute;
    width: 38%;
    top: 200px;
    transform: rotate(-20deg);
}
.social-icon{
    margin-top: 130px;
}
.social-icon i{
    font-size: 16px;
    color: #ADB3C3;
    margin-left: 1%;
    cursor: pointer;
    border-radius: 50%;
}

eCommerce Website Design Source Codes

Video Tutorial of eCommerce Website Design Using Html And CSS

HTML CODE FILE :

CSS CODE FILE :

1 Comments

Post a Comment

About Us

Contact Form

how to create eCommerce website design using html and css

eCommerce Website Design Source Codes

Video Tutorial of eCommerce Website Design Using Html And CSS

HTML CODE FILE :

CSS CODE FILE :

You might like

1 Comments

Post a Comment

Contact Form