You are currently viewing E-Commerce Website Using HTML ,CSS & JavaScript

E-Commerce Website Using HTML ,CSS & JavaScript

Hello Coders👨‍💻!!In this article we will learn how to make an e-commerce website using html ,css and javascript.

An online store called an e-commerce website lets you buy and sell different things over the Internet. The structure and content of our webpage are created using HTML. Our goal should be to win our users’ hearts. To do it, we employ CSS. CSS enables us to use a variety of colours, fonts, and layouts to make our website visually appealing. Our e-commerce store will get some new features, and we’ll use some JavaScript ideas to make that happen.

Creating E-Commerce Website Using HTML , CSS & JavaScript

Check out how my website appears😀.

E-Commerce Website Using HTML ,CSS & JavaScript
Preview Of E-Commerce Website

 

I’m here to help you and will together will learn, so don’t feel sad. When you have an e-commerce website, you can shop as much as you like. Read the blog all the way through to learn how to create one.

This webpage responds to all device sizes. When a website is fully responsive, it may be viewed on any website and will adapt its content to the device being used to view it.

There are three main sections on any web page: the header, the body, and the footer. Simply said, we adjust the text between the HTML tags according to each section.

Step1: Adding Header To Our Webpage

E-Commerce Website Using HTML
E-Commerce Website Header Section

 

<!-- Header Section -->
<div class="header">
    <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 class="row">
        <div class="col-2">
          <h1>
            Give Your Workout <br />
            A New Style!
          </h1>
          <p>
            Success isn't always about greatness. It's about consistency.
            Consistent <br />hard work gains success. Greatness will come.
          </p>
          <a href="#" target="_blank" rel="noopener noreferrer" class="btn">Explore Now →</a>
        </div>
        <div class="col-2">
          <img src="https://i.ibb.co/QpTmdX5/image1.png" alt="" />
        </div>
      </div>
    </div>
  </div>

The <“div class=”header”> tag is used to carry either an introduction or a group of navigational links. Only the largest blocks of navigation links are covered by the <nav> tag.

The <img> tag is used to embed images on HTML pages.To specify the path to the image, we use “src”. I want my website’s logo to appear here. I must particularly acknowledge that in order to implement CSS functions. I’ve created a class called “logo” just for that purpose.

25+ Html Css Card Design Layout Style ( Source Code)

Additionally, we added an image to our header’s background and the toggle image by using the <img> tag.

An unordered list is defined using the <ul> tag. The <li> tag marks the beginning of the list item.
To link to websites or anything else that a URL can address, we utilise the <a> tag and its “href” attribute. The target of the link should be specified in the <a> tags. The div tag is used to group HTML elements together. I’ve created a div class here named “intro.” The <h1> and <h3> tags specify the headings.

Let’s look at how I can use CSS to make this header appealing.

* {
    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;
  }

There are three techniques to include CSS in HTML texts. These are internal, external, and inline CSS. I’ve utilised an external CSS file in this case. HTML components having a specific class attribute are chosen using the class selector.

We inserted padding and margin as “zero” here using the global selector. The box is “border-box” in size.

We set the item inside it to be posted at the “centre” and its display to be “flex” using the class selector (.navbar). Its padding was similarly set to “20 px.” We style the paragraph, list item, anchor tag, and unorder list solely utilising the nav bar and the elements inside of it. Just now, we incorporated the style.

E-Commerce Website Using HTML ,CSS & JavaScript
E-Commerce Website Button

 

If you’re wondering how we generated this “explore now” button, we first created a hyperlink tag using the <a> anchor tag with a class named (.btn). We have now added the border radius and background colour to our button using this (.btn) class.

Step2: Adding Body To Our Webpage

E-Commerce Website Using HTML ,CSS & JavaScriptE-Commerce Website Using HTML ,CSS & JavaScript
E-Commerce Website Product Section

 

<!-- Featured categories -->
<div class="categories">
  <div class="small-container">
    <div class="row">
      <div class="col-3">
        <img src="https://i.ibb.co/sqnY1pG/category-1.jpg" alt="" />
      </div>
      <div class="col-3">
        <img src="https://i.ibb.co/GCJLQRQ/category-2.jpg" alt="" />
      </div>
      <div class="col-3">
        <img src="https://i.ibb.co/wYsXqP5/category-3.jpg" alt="" />
      </div>
    </div>
  </div>
</div>

<!-- Featured products -->
<div class="small-container">
  <h2 class="title">Featured Products</h2>
  <div class="row">
    <div class="col-4">
      <a href="product_details.html"><img src="https://i.ibb.co/47Sk9QL/product-1.jpg" alt="" /></a>
      <a href="product_details.html">
        <h4>Red Printed T-shirt</h4>
      </a>
      <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>
  <h2 class="title">Latest Products</h2>
  <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>
<!-- offer -->
<div class="offer">
  <div class="small-container">
    <div class="row">
      <div class="col-2">
        <img src="https://i.ibb.co/HF5TncZ/exclusive.png" alt="" class="offer-img" />
      </div>
      <div class="col-2">
        <p>Exclusively Available on RedStore</p>
        <h1>Smart Band 4</h1>
        <small>The Mi Smart Band 4 features a 39.9% larger (than Mi Band 3)
          AMOLED color full-touch display with adjustable brightness, so
          everything is clear as can be.</small>
        <br />
        <a href="#" class="btn">Buy Now →</a>
      </div>
    </div>
  </div>
</div>

<!-- Testimonial -->
<div class="testimonial">
  <div class="small-container">
    <div class="row">
      <div class="col-3">
        <i class="fas fa-quote-left"></i>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Perferendis, quae molestias error id est voluptatibus quos amet
          numquam aspernatur nam cumque ullam? Veritatis eveniet et, maxime
          eaque soluta quas modi.
        </p>
        <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>
        <img src="https://i.ibb.co/zfXD2Tx/user-1.png" alt="" />
        <h3>Marta W.</h3>
      </div>

      <div class="col-3">
        <i class="fas fa-quote-left"></i>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Perferendis, quae molestias error id est voluptatibus quos amet
          numquam aspernatur nam cumque ullam? Veritatis eveniet et, maxime
          eaque soluta quas modi.
        </p>
        <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>
        <img src="https://i.ibb.co/FVyK1KM/user-2.png" alt="" />
        <h3>Rula P.</h3>
      </div>

      <div class="col-3">
        <i class="fas fa-quote-left"></i>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Perferendis, quae molestias error id est voluptatibus quos amet
          numquam aspernatur nam cumque ullam? Veritatis eveniet et, maxime
          eaque soluta quas modi.
        </p>
        <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>
        <img src="https://i.ibb.co/jZ3tQqK/user-3.png" alt="" />
        <h3>Vika Z.</h3>
      </div>
    </div>
  </div>
</div>
<!-- brands -->
<div class="brands">
  <div class="small-container">
    <div class="row">
      <div class="col-5">
        <img src="https://i.ibb.co/Gfwzz1S/logo-godrej.png" alt="" />
      </div>

      <div class="col-5">
        <img src="https://i.ibb.co/vjrRZFM/logo-oppo.png" alt="" />
      </div>

      <div class="col-5">
        <img src="https://i.ibb.co/3zs234S/logo-coca-cola.png" alt="" />
      </div>

      <div class="col-5">
        <img src="https://i.ibb.co/7Wt343W/logo-paypal.png" alt="" />
      </div>

      <div class="col-5">
        <img src="https://i.ibb.co/GVSNwJD/logo-philips.png" alt="" />
      </div>
    </div>
  </div>
</div>

We used the images to build the body section, and the paragraph tag is being used for the content. Additionally, we added icons from the typeface Awesome to the body section’s text. In this part, you may find some shopping photographs with product descriptions. To highlight the new clothes, we have also created a featured section to our body.

E-Commerce Website Using HTML ,CSS

To get more visitors to our e-commerce website, we developed a banner section where we will display a banner of new apparel or technologies that have just been introduced.

E-Commerce Website Using HTML ,CSS & JS

Let’s look at how I can use CSS to make this body section appealing.

.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;
  }

As you can see, we simply added styling to our body section using the class selector. The top and bottom margins have been added as “70px” using the.categories class, first. Our section has been divided into columns, thus we will use the column class to add the width and height to the content in those classes.

E-Commerce Website Using HTML ,CSS & JS

.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);
  }

 

Step3: Adding Footer To Our Webpage

E-Commerce Website Using HTML ,CSS & JS

This image shows our eCommerce webpage’s “footer.” Links and icons are displayed here. I’ll show you how I did.

<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 &copy; 2021 - Red Store</p>
    </div>
  </div>

We have created a section with the div class “footer” defined. The <ul> tag was used to construct an unordered list. I use the <li> tag to begin the list item. To link to online pages, we employ the <a> tag and its “href” attribute. The target of the link should be specified in the <a> tag. Another div class called “social-links” has been defined. The font-awesome icons have been imported. We also inserted an image of our website’s logo to the footer within the <img> tag.

/* 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;
    }
  }

We have included the footer style in this. You only need to read through the code once to understand how we formatted our footer. The media query was utilised to provide responsiveness to our website, which is now the most crucial aspect. As the size reduces, we added a condition to the maximum width, and the content size adjusts in line with the window size.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Note:

You may be wondering where we have employed javascript functionality. To find out, please resize your browser window. When you do, you will see that we have added a hamburger menu to our website and changed the navigation bar.

E-Commerce Website Using HTML ,CSS & JS

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';
  }
}

With the help of the getElementById method, we have just established a variable named menuItem that will hold the value of the HTML element we have chosen. The minimum height of our menu item will then be changed from zero to 200px using the menutoggle method.

Here Below we will we provide you the link to the zip file for downloading the source code of our Webpage.

Let’s take a look at our Video Output.

Codepen Preview Of e commerce website 

If you guys are intrested in how to make a hamburger menu using HTML , CSS & Javascript. Just follow up the link.

Hamburger Menu

 

All of that pertains to building our online store. Therefore, I believe you have a foundational understanding of website creation. We appreciate you taking the time to read this.

Now We have Successfully created our ecommerce store using HTML , CSS & Javascript . You can use this project directly by copying into your  IDE. WE hope you understood the project , If you any doubt feel free to comment!!

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Sunil Pradhan

Leave a Reply