Hello Dear Readers, Today In this Post, You will learn How to Create a Responsive ECommerce Website Using Bootstrap 5 (Part-2). Earlier I have shared Responsive ECommerce Website Using Bootstrap 5 (Part-1). and now it’s time to Responsive ECommerce Website.

This is a part of two website As you already know Complete Responsive Website is the most popular that is displayed our information properly to locate the page or file that the user requests. For those who aren’t familiar with how it looks, have you seen a page like this before? Looking at the default page, you can imagine how cringe-worthy it would feel like as a user to suddenly drop on an empty page like this.

So I decided to create this amazing Complete Responsive Website I hope you will like it, Include a set of links to popular pages on your site and try to tempt a lost visitor to continue browsing. Otherwise, they’ll have to go all the way back from the homepage and rummage through the site’s contents to find what they are looking for.

If you create a truly unique, engaging, page, visitors will want to tell the world. This can be a great source of new links. There you are, surfing in your favorite search engine when you happen upon just the thing you’re looking for.

People who land on your website are looking for its content, usually via a link. They would have clicked that link expecting one thing, so why show them a hand-drawn panda? Instead, your Complete Responsive Website should get them to where they need to be. Keeping these things in mind, I created this page.

Play Video

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with a beautiful Complete Responsive Website created with only CSS and Bootstrap 5. Today’s tutorial will show you how to create a Complete Responsive landing page Website using only HTML and CSS.

If you’re a beginner you can use this Awesome design in your project and websites. I believe this UI design code will help you a lot. Or if you have some knowledge of Bootstrap 5 you can add some great design in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to go to the second part of this page. You can use this program on your projects, websites, and HTML pages.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="Description" content="Enter your description here" />
  <title>HeadPhones</title>
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <link rel="" href="./berlin/1001fonts-berlin-eula.txt">
  
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/responsive-style.css">
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">

<header>
    <nav class="navbar navbar-expand-lg navigation-wrap">
      <div class="container">
        <a class="navbar-brand" href="#">
          <img decoding="async" src="images/logo.png" class="img-fluid" alt="logo">
        </a>
        <button class="navbar-toggler p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          
          <i class="fas fa-stream navbar-toggler-icon"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#about">About Us</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#features">Features</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#headphones">Headphones</a>
            </li> 
            <li class="nav-item">
              <a class="nav-link" href="#contacts">Contact Us</a>
            </li>
            <li>
              <a href="javascript:void(0)" class="main-btn">Buy Now</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  
  
  <section id="home" class="hero_slider">
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel"> 
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img decoding="async" src="./images/bg/bg-1.jpg" class="d-block w-100" alt="img-1">
          <div class="carousel-caption col-md-6 col-10 col-offset-md-6">
            <h2>Live Smart</h2>
            <h1>Hear <span>Smart</span> </h1>
            <p>Stylish, folded design with Active noise cancellation for crystal clear audio 3.5mm Wired or Bluetooth
              wireless conncectivity</p>
          </div>
        </div>
        <div class="carousel-item">
          <img decoding="async" src="./images/bg/bg-2.jpg" class="d-block w-100" alt="img-2">
          <div class="carousel-caption col-md-6 col-10 col-offset-md-6">
            <h2>Live Smart</h2>
            <h1>Hear <span>Smart</span> </h1>
            <p>Stylish, folded design with Active noise cancellation for crystal clear audio 3.5mm Wired or Bluetooth
              wireless conncectivity</p>
          </div>
        </div>
        <div class="carousel-item">
          <img decoding="async" src="./images/bg/bg-3.jpg" class="d-block w-100" alt="img-3">
          <div class="carousel-caption col-md-6 col-10 col-offset-md-6">
            <h2>Live Smart</h2>
            <h1>Hear <span>Smart</span> </h1>
            <p>Stylish, folded design with Active noise cancellation for crystal clear audio 3.5mm Wired or Bluetooth
              wireless conncectivity</p>
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>
   
  
  <section id="about">
    <div class="about-section wrapper">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-5 col-md-5 mb-lg-0 mb-5 about-slider">
            <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
              <div class="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2" aria-label="Slide 3"></button>
              </div>
              <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="10000">
                  <img decoding="async" src="./images/img/img-1.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item" data-bs-interval="2000">
                  <img decoding="async" src="./images/img/img-4.jpg" class="d-block w-100" alt="...">
                </div>
                <div class="carousel-item">
                  <img decoding="async" src="./images/img/img-3.jpg" class="d-block w-100" alt="...">
                </div>
              </div> 
            </div>
          </div>
          <div class="col-lg-7 col-md-7 text-sec position-relative px-lg-5">
            <div class="rectangle-shape small"></div>
            <div class="circle-shape large"></div>
            <h2>Loud & Clear <br>Music</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit
              amet leo. Mauris feugiat erat tellus. Lorem ipsum dolor sit amet consectetur adipisicing elit. A quam
              similique, modi blanditiis, alias porro et dolore, corporis sit asperiores sed optio omnis autem officia
              exercitationem dolorem animi mollitia? Sapiente.</p>
            <a href="javascript:void(0)" class="main-btn">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </section>
   
  
  <section id="features">
    <div class="features wrapper">
      <div class="container">
        <div class="row pt-md-5 pt-2">
          <div class="col-lg-5 col-md-5 mb-lg-0 mb-5 text-sec ">
            <h2>Wear it with ease & comfort ever.</h2>
            <p>At risus viverra adipiscing at. Iaculis urna id volutpat lacus laoreet non curabitur. Enim lobortis
              scelerisque fermentum dui faucibus in. Nisl suscipit adipiscing.</p>
            <div class="feature-img-box">
              <img decoding="async" src="images/img/features.png" class="img-fluid">
            </div>
          </div>
          <div class="col-lg-7 col-md-7 mt-lg-5 mb-lg-0 mb-5">
            <div class="row">
              <div class="card col-6 border-0 mb-3">
                <div>
                  <div class="icon">
                    <img decoding="async" src="images/img/wifi.png" class="img-fluid">
                  </div>
                  <div>
                    <h4>Wireless</h4>
                    <p>Nisl suscipit adipiscing bibendum est. Tempus imperdiet nulla malesuada.</p>
                  </div>
                </div>
              </div>
              <div class="card col-6 border-0 mb-3">
                <div>
                  <div class="icon">
                    <img decoding="async" src="images/img/noise.png" class="img-fluid">
                  </div>
                  <div class="">
                    <h4>Noise Cancelling</h4>
                    <p>Nisl suscipit adipiscing bibendum est. Tempus imperdiet nulla malesuada.</p>
                  </div>
                </div>
              </div>

<div class="card col-6 border-0 mb-3">
                <div>
                  <div class="icon">
                    <img decoding="async" src="images/img/sound.png" class="img-fluid">
                  </div>
                  <div>
                    <h4>Wireless</h4>
                    <p>Nisl suscipit adipiscing bibendum est. Tempus imperdiet nulla malesuada.</p>
                  </div>
                </div>
              </div>

<div class="card col-6 border-0 mb-3">
                <div>
                  <div class="icon">
                    <img decoding="async" src="images/img/bluetooth.png" class="img-fluid">
                  </div>
                  <div class="">
                    <h4>Bluetooth</h4>
                    <p>Nisl suscipit adipiscing bibendum est. Tempus imperdiet nulla malesuada.</p>
                  </div>
                </div>
              </div>

<div class="card col-6 border-0 mb-3">
                <div>
                  <div class="icon">
                    <img decoding="async" src="images/img/microfon.png" class="img-fluid">
                  </div>
                  <div class="">
                    <h4>Microphone</h4>
                    <p>Nisl suscipit adipiscing bibendum est. Tempus imperdiet nulla malesuada.</p>
                  </div>
                </div>
              </div>

</div>
          </div>
        </div>
      </div>
    </div>
  </section>
   
  
  <section id="headphones">
    <div class="choose wrapper">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center">
            <h2>Choose your wireless headphone</h2>
            <p>Make music listening to a magical experience. Because we value your taste and your money</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4">
            <div class="card border-0 text-center">
              <div class="product-img" id="zoom-img"></div>
              <div class="product-des p-md-4 p-1">
                <div class="product-star pb-3">
                  <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>
                <a href="javascript:void(0)">
                  <h4>On-Ear HeadPhones</h4>
                </a>
                <div class="product-price">
                  <p>RS. 750.00</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card border-0 text-center">
              <div class="product-img" id="zoom-img-1"></div>
              <div class="product-des p-md-4 p-1">
                <div class="product-star pb-3">
                  <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>
                <a href="javascript:void(0)">
                  <h4>Light HeadPhones</h4>
                </a>
                <div class="product-price">
                  <p>RS. 750.00</p>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-4">
            <div class="card border-0 text-center">
              <div class="product-img" id="zoom-img-2"></div>
              <div class="product-des p-md-4 p-1">
                <div class="product-star pb-3">
                  <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>
                <a href="javascript:void(0)">
                  <h4>Kids HeadPhones</h4>
                </a>
                <div class="product-price">
                  <p>RS. 750.00</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
   
  
  <div>
    <div class="style-section wrapper mb-5">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-6 col-md-5 mb-lg-0 mb-5 style-img">
            <img decoding="async" src="images/img/headphone-img.png" class="img-fluid">
          </div>
          <div class="col-lg-6 col-md-7 text-sec position-relative">
            <div class="rectangle-shape small"></div>
            <div class="circle-shape large"></div>
            <h2>Sterlined Headphone <br>Style 2021</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam et purus a odio finibus bibendum in sit
              amet leo. Mauris feugiat erat tellus. Lorem ipsum dolor sit amet consectetur adipisicing elit. A quam
              similique, modi blanditiis, alias porro et dolore, corporis sit asperiores sed optio omnis autem officia
              exercitationem dolorem animi mollitia? Sapiente.</p>
            <a href="javascript:void(0)" class="main-btn mt-2">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  
  <section id="contacts">
    <div class="contacts-section wrapper">
      <div class="container">
        <div class="row">
          <div class="col-sm-12 text-center">
            <h2>Say hello to us</h2>
            <p>Make music listening to a magical experience. Because we value your taste and your money</p>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 text-center">
            <form class="contact-form p-mb-5 p-1">
              <input type="text" placeholder="Your name here">
              <div class="form-group">
                <input type="email" value="" placeholder="Your email address">
                <button type="submit" class="btn subscribe">Send <i class="fas fa-arrow-right"></i></button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
   
  
  <footer>
    <div class="footer py-4">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6 text-md-start text-center">
            <div class="footer-logo text-muted mb-3 mb-md-0"> 
              © 2021. CODE4EDUCATION. All rights reserved.
            </div>
          </div>
          <div class="col-md-6 text-center">
            <p>Follow Us</p>
            <div class="footer-social pt-1">
              <a href="#"><i class="fab fa-facebook-f"></i></a>
              <a href="#"><i class="fab fa-twitter"></i></a>
              <a href="#"><i class="fab fa-dribbble"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"></script>
  
  <script src="js/main.js"></script>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:active,
:hover,
:focus {
  outline: 0 !important;
  outline-offset: 0;
}

a,
a:hover {
  text-decoration: none;
}

a:hover {
  color: var(--primary-color) !important;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/*===== Variable Define =====*/
:root {
  --primary-color: #fd8eaf;
  --white-color: #fff;
  --text-color: #9e9999;
  --black-color: #000;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 100%;
  font-weight: 400;
}

/*
=========================================
    Custom Scrollbar
=========================================
*/

::-webkit-scrollbar {
  width: 0.625rem;
}

::-webkit-scrollbar-track {
  background: var(--white-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
}

/*
==========================================
   Custom CSS Design
==========================================
*/

h1 {
  font-size: 6.25rem;
  font-weight: 900;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

h1 span {
  color: var(--white-color);
}

h2 {
  font-weight: 700;
  position: relative;
  font-size: 2.1875rem;
  text-transform: capitalize;
  color: var(--black-color);
  line-height: 3.7rem;
}

h2:before {
  background: #ef6d9f;
  border-radius: 0.3125rem;
  content: '';
  position: absolute;
  top: -1.5625rem;
  left: 0;
  width: 1.875rem;
  height: 0.3125rem;
}

h4 {
  color: var(--black-color);
  text-transform: capitalize;
  font-size: 1.25rem;
  font-weight: 900;
  margin-bottom: 0.9375rem;
  transition: all .3s linear;
}

h5 {
  color: var(--black-color);
  text-transform: capitalize;
  font-family: var(--primary-color);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

p {
  font-size: 1.125rem;
  color: var(--text-color);
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: 0.0625rem;
}
.main-btn{
  width: 9.375rem;
  height: 3.125rem;
  border: 0.063rem solid var(--primary-color); 
  color:var(--black-color);
  font-size: 1.125rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
  transition: 0.3s;
}
.main-btn::before, .main-btn::after {
  position: absolute;
  background: var(--white-color);
  z-index: -1;
  transition: 0.3s;
  content: '';
}
.main-btn::before {
  height: 3.125rem;
  width: 8.125rem;
}

.main-btn::after {
  width: 9.375rem;
  height: 1.875rem;
}
.noselect {
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.main-btn:hover::before {
  width: 0px;
  background: var(--white-color);
}

.main-btn:hover::after {
  height: 0px;
  background: var(--white-color);
}

.main-btn:hover {
  background: var(--white-color);
  color:var(--primary-color);
}  
.wrapper {
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}

.text-content {
  width: 60%;
  margin: auto;
}
 
/*
==========================================
   Header Design
==========================================
*/
.navigation-wrap{
  position:fixed;
  width:100%;
  left:0;
  z-index:1000;
  -webkit-transition:all 0.3s ease-out;
  transition:all 0.3s ease-out;
} 
.navigation-wrap .nav-item{
  padding:0 0.5rem;
  transition:all 200ms linear;
}
.navbar-toggler:focus{
  outline:none;
  border:unset;
  box-shadow: none;
}
.nav-link{
  padding-top:0.9375rem;
  font-size: 0.9375rem;
  font-weight: 400;
  text-transform: capitalize;
  color:var(--white-color);
  letter-spacing:0.0625rem;
}
.nav-link:hover,
.nav-link.active{
  color:var(--primary-color);
}
.navigation-wrap .main-btn{
  color:var(--white-color);
  margin:auto;
}
.navigation-wrap .main-btn:hover{
  background-color:transparent;
}
.navigation-wrap .main-btn::before,
.navigation-wrap .main-btn::after{
  background-color:transparent;
}

/* Change navbar styling on scroll */
.navigation-wrap.scroll-on{
  position:fixed;
  background-color:var(--black-color);
  top:0;
  left:0;
  width:100%;
  box-shadow: 0 0.125rem 1.75rem 0 rgba(0,0,0,0.09);
  transition:all .15s ease-in-out 0s;
}
.navigation-wrap.scroll-on .nav-link:hover,
.navigation-wrap.scroll-on .nav-link.active{
  color:var(--primary-color);
}
.navigation-wrap.scroll-on .main-btn{
  color:var(--white-color);
  margin:auto;
}
.navigation-wrap.scroll-on .main-btn:hover{
  background-color:transparent;
}
.navigation-wrap.scroll-on .main-btn::before,
.navigation-wrap.scroll-on .main-btn::after{
  background-color:var(--black-color);
}
 
/*
==========================================
   top-banner Design
==========================================
*/ 
.hero_slider .carousel-caption{
  text-align: left;
  top:50%;
  left:50%;
  bottom:0;
  right:0;
  transform:translate(-75%, -35%);
  max-width: 1320px;
}
.hero_slider .carousel-caption h2{
  color:var(--white-color);
} 
.hero_slider .carousel-caption p{
  color:var(--white-color);
}
/*
==========================================
 about section Design
==========================================
*/
.about-section .carousel-inner{
  border-radius: 0 0 5rem;
}
.about-section .main-btn span,
.style-section .main-btn span{
  color:var(--black-color);
}
.about-section .carousel-indicators{
  margin-bottom:-2.5rem;
}
.about-section .carousel-indicators [data-bs-target]{
  width:0.625rem;
  height:0.625rem;
  border-radius: 50%;
  background-color:var(--primary-color);
}

/* Rectangle & Circle Shapes */
.rectangle-shape,
.circle-shape {
  content: '';
  border: 0.25rem solid;
  border-bottom-color: #ef6d9f;
  border-right-color: #ef6d9f;
  border-top-color: #ee8d6d;
  border-left-color: #ee8d6d;
  background-image: -moz-linear-gradient(top, #ee8d6d 0%, #ef6d9f 100%);
  background-image: -webkit-linear-gradient(top, #ee8d6d 0%, #ef6d9f 100%);
  background-image: linear-gradient(to bottom, #ee8d6d 0%, #ef6d9f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$colorBtnPrimaryHover', endColorstr='$colorPrimary', GradientType=0);
  background-size: 100% 0;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 40%;
  margin: auto;
}
.rectangle-shape.small,
.circle-shape.small{
  border-width:0.1875rem;
  width:1.25rem;
  height:1.25rem;
  animation: animationframesone 35s alternate infinite linear;
} 
.rectangle-shape.large,
.circle-shape.large{ 
  width:2.5rem;
  height:2.5rem;
  animation: animationframesthree 35s alternate infinite linear;
} 
.circle-shape.large{
  left:0;
  right:0;
  bottom:15%;
  opacity: .5;
}
.rectangle-shape.small{
  left:0;
  bottom:10%;
}
.rectangle-shape{
  border-radius: 0.1875rem;
}
.circle-shape{
  border-radius: 50%;
}
@keyframes animationframesone {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

20% {
    transform: translate(4.5625rem, -0.0625rem) rotate(36deg);
  }

40% {
    transform: translate(8.8125rem, 4.5rem) rotate(72deg);
  }

60% {
    transform: translate(5.1875rem, 7.625rem) rotate(108deg);
  }

80% {
    transform: translate(-2.5rem, 4.5rem) rotate(144deg);
  }

100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes animationframesthree {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1.2);
  }

20% {
    transform: translate(-4.25rem, -6.25rem) rotate(70deg) scale(0.5);
  }

40% {
    transform: translate(7.1875rem, 3.4375rem) rotate(120deg) scale(1);
  }

60% {
    transform: translate(2.1875rem, 8.75rem) rotate(155deg) scale(1.2);
  }

80% {
    transform: translate(-2.1875rem, 5.625rem) rotate(180deg) scale(0.5);
  }

100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/*
==========================================
 Features section Design
==========================================
*/
.features .card{
  cursor:pointer;
}
.features .card .icon{
  box-shadow: 0.0625rem 0.25rem 1.25rem rgb(26 26 26 / 9%);
  border-radius: 0;
  padding:1.25rem 0;
  width:5rem;
  text-align: center;
  height:auto;
  margin-bottom:2.5rem;
  border-top-right-radius: 1.5625rem;
}
.features .card img{
  display:block;
  opacity:.75;
  margin:0 auto;
  filter:brightness(0);
} 
.features .card:hover .icon img{ 
  filter:brightness(1);
} 
.features .card:hover h4{ 
  color:var(--primary-color);
}

/*
==========================================
 choose section Design
==========================================
*/
.choose h2:before,
.contacts-section h2:before{
  left:47%;
}
.choose .card .product-star{
  color:var(--text-color);
  font-size: 100%;
}
.choose .card a h4{
  color:#1a1a1a;
  display:inline-block;
  font-size: 1.5rem;
  width:100%;
  font-weight: 500;
  margin: 0 0 0.93rem;
  line-height: normal;
}
.choose .card:hover a h4{
  color:var(--primary-color);
}
.choose .card .product-img{
  width:100%;
  height:21.125rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
  transition:all 0.3s;
} 
.choose .card:hover .product-img{
  transition:all 0.3s;
  transform:scale(1.1);
}
#zoom-img{
  background-image:url("../images/img/Product1.jpg");
}
#zoom-img-1{
  background-image:url("../images/img/Product1.jpg");
}
#zoom-img-2{
  background-image:url("../images/img/Product1.jpg");
}

/*
==========================================
contact section Design
==========================================
*/
form .form-group,
form input[type=text]{
  box-shadow: 0.0625rem 0.375rem 0.625rem 0.1875rem rgb(26 26 26 / 7%);
  display: inline-block;
  margin:0 0.9375rem;
  border-radius: 1.875rem;
}
form input[type=email],
form input[type=text]{
  display: inline-block;
  padding:0 1.5625rem;
  height:4.375rem;
  font-size: 1.125rem;
  line-height: 1.7;
  margin-bottom:0;
  border-radius: 1.875rem;
}
 
form input[type=email],
form input[type=text],
form .form-group{
  background-color:var(--white-color);
  color:var(--text-color);
  border:0.0625rem solid rgba(255,255,255,0.7);
}
.subscribe{
  float:right;
  width:auto;
  display:inline-block;
  height:3.75rem;
  padding:0.3125rem 0.3125rem 0.3125rem 1.5625rem;
  border-radius: 1.875rem;
  margin:0.3125rem;
  color:var(--white-color);
  background:var(--primary-color);
  border:0.0625rem solid transparent;
  z-index:1;
  cursor:pointer;
  font-size: 1.125rem;
  outline:0;
  transition: all .4s ease-in-out;
}
.subscribe i{
  background: var(--white-color);
  color:var(--primary-color);
  width:3rem;
  height:3rem;
  line-height: 3rem;
  margin-left:0.3125rem;
  text-align: center;
  border-radius: 100%;
}
/*
==========================================
footer section Design
==========================================
*/
.footer{
  background:var(--black-color);
} 
.footer .footer-social a i{
  color:var(--white-color);
  font-size: 1.5rem;
  padding:0 1rem;
}
.footer .footer-social a:hover i{
  color:var(--primary-color);
}

@media (max-width: 1024px) {
    /* Custom CSS */
    h1 {
        font-size: 3.25rem;
    }

h2 {
        font-size: 1.375rem;
        line-height: 1.8rem;
    }

.wrapper {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    } 
}

@media (max-width: 991px) {
    /* Custom CSS */
    h4,
    .choose .card a h4 {
        font-size: 0.9375rem;
        margin-bottom: 0.625rem
    }

p {
        font-size: 0.8125rem;
        line-height: 1.3125rem;
    }
    .text-content {
        width: 100%;
    }

/* Banner Design */ 
    #home{
        padding:4.375rem 0 0.375rem;
    }

/* navbar brand */
    .navigation-wrap .navbar-brand img{
        height:2.8125rem;
    } 
    .navbar-toggler{
        color:var(--text-color);
    }
    .navbar-toggler i{
        color:var(--text-color);
        line-height: 2;
    }
    .navigation-wrap{
        text-align: center;
        background-color:var(--black-color);
    }
    .navigation-wrap .nav-link{
        line-height:1.875rem;
    }

/* top banner */ 
    .hero_slider .carousel-caption{
        transform:translate(-70%, -50%);
    }

/* feature */ 
    .features .card .icon{
        margin-bottom:20px;
    }

/* headphone */ 
    #zoom-img,
    #zoom-img-1,
    #zoom-img-2{
        height:220px;
    }

/* Contact */
    form input[type=text]{
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 767px) {
    /* Custom CSS */
    .main-btn{
        margin:auto;
    }
    .text-sec {
        text-align: center;
        padding-top: 1.875rem;
    } 
    h2:before {
        left: 45%;
    }

/* top banner */ 
    .hero_slider .carousel-caption{
        transform:translate(-45%, -70%);
    }
    .hero_slider .carousel-caption h2::before{
        left:0;
    }
}

@media(max-width:575px) {

/* top banner */ 
    h1 {
        font-size: 1.5rem;
        margin-bottom:0.675rem;
    }

h2 {
        font-size: 1.25rem;
        line-height: 1rem;
        margin-bottom: 5px;
    }

/* about */ 
    .about-slider,
    .feature-img-box,
    .style-img{
        width:50%;
        margin:auto;
    }
    .about-section .carousel-inner{
        border-radius: 0 0 1.875rem;
    }

/* headphone */ 
    #zoom-img,
    #zoom-img-1,
    #zoom-img-2{
        height:13.75rem;
        width:50%;
        text-align: center;
        margin:auto;
    }

/* contact us */ 
    form input[type=email],
    form input[type=text],
    .subscribe{
        padding:0 0.625rem;
        font-size: 0.875rem;
        text-align: center;
    }
    .subscribe{
        font-size: 0.875rem;
    }
    form .form-group,
    form input[type=text]{
        margin:0;
        width:100%;
    }
    form .form-group{
        white-space:nowrap;
    }
    form input[type=email]{
        width:50%;
    }
    
}

@media (max-width: 430px) { 
    /* Custom CSS */
    h2:before {
        top: -0.8rem;
    }

/* Top banner */
    .hero_slider .carousel-caption p{
        font-size: 0.75rem;
        line-height: 1.125rem;
    }
}

JS

2 thoughts on “Responsive ECommerce Website Using Bootstrap 5 (Part-2).”

zortilonrel says:

December 2, 2021 at 8:47 pm

I was recommended this web site by my cousin. I’m not sure whether this post is written by him as nobody else know such detailed about my trouble. You’re incredible! Thanks!

prestigeautodetailingkc.com says:

August 11, 2023 at 8:41 am

I really enjoy the blog article.Thanks Again.

Responsive ECommerce Website Using Bootstrap 5 (Part-2).

HTML

CSS

JS

2 thoughts on “Responsive ECommerce Website Using Bootstrap 5 (Part-2).”

Leave a Reply Cancel reply

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

How To Make Form Validation Using JavaScript