wvJPrWz

index.html

<div class="body">
  <div class="container mt-3 mb-3">
    <div class="row">
      <div class="col-md-12">
        <div class="header">
          <button class="btn btn-default"><i class="fa fa-bars"></i></button>
          <button class="btn btn-default"><i class="fa fa-search"></i></button>
        </div>
        <div class="welcome-back">
          <h4 class="bold-label">Welcome Back <br>
            Shrikant!
          </h4>
        </div>
      </div>
    </div>
  </div>
  
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 pl-0 pr-0">
        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="https://www.landmarkmlp.com/js-plugin/owl.carousel/demos/assets/fullimage1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://www.landmarkmlp.com/js-plugin/owl.carousel/demos/assets/fullimage2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="https://www.landmarkmlp.com/js-plugin/owl.carousel/demos/assets/fullimage3.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div> <!-- end of carsoule -->
      </div> <!-- end of column -->
    </div> <!-- end of row -->
  </div> <!-- end of container fluid-->

  <div class="container mt-2">
    <div class="row mt-2">
      <div class="col-sm-12">
        <h4 class="bold-label">Treading Now</h4>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="card mb-2">
          <img src="https://gertlushgaming.co.uk/wp-content/uploads/2020/07/BALAN_WONDERWORLD_screenshot_27.jpg" class="card-image img" alt="..." >
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-custom">Go somewhere</a>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="card mb-2">
          <img src="https://www.siliconera.com/wp-content/uploads/2020/03/Bravely-Default-II-Demo-Siliconera.jpg" class="card-img-top" alt="..." class="card-image img">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-custom">Go somewhere</a>
          </div>
        </div>
      </div> <!-- end of column -->
       <div class="col-sm-6 col-md-4">
        <div class="card mb-2">
          <img class="card-image img" src="https://gamingbolt.com/wp-content/uploads/2020/12/balan-wonderworld.jpg" alt="..." >
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <a href="#" class="btn btn-custom">Go somewhere</a>
          </div>
        </div>
      </div> <!-- end of column -->
      
    </div>
  </div>
</div>
<section class="footer-section mt-2">
  <div class="footer-item">
    <div class="icon"><i class="fa fa-home"></i></div>
    <div class="footer-label">
      <span>Home</span>
    </div>
  </div>
  <div class="footer-item">
    <div class="icon"><i class="fa fa-th"></i></div>
    <div class="label">
      <span>Category</span>
    </div>
  </div>
  <div class="footer-item">
    <div class="icon"><i class="fa fa-search"></i></div>
    <div class="label">
      <span>Search</span>
    </div>
  </div>
  <div class="footer-item">
    <a href="#">
      <div class="icon"><i class="fa fa-percent"></i></div>
      <div class="label">
        <span>Offers</span>
      </div>
    </a>
  </div>
  <div class="footer-item">
    <div class="icon"><i class="fa fa-shopping-cart"></i></div>
    <div class="label">
      <span>Cart</span>
    </div>
  </div>
</section>
</div>

style.css

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

:root {
  --main:#6610f2;
  --hover-color:#7e3aee;
}
body {
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
}
.header {
  display:flex;
  justify-content:space-between;
}
.header .fa-bars{
  justify-content:start;
}
.welcome-back{
  padding-top:20px;
  padding-left:10px;
}
.bold-label{
  font-weight:600;
  font-size:24px;
}
.footer-section {
  display: flex;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background-color: var(--main);
}

.footer-item {
  padding: 15px 5px;
  color: white;
  flex-grow: 1 1 0px;
  flex-basis: 100%;
  text-align: center;
  align-content: space-between;
}

.footer-item:hover {
  background-color: var(--hover-color);
  cursor: pointer;
}

.footer-item a {
  text-decoration: none;
  color: white;
}

.item .icon {
  padding: 5px 5px;
  border: 1px solid;
  display: block;
  width: 100%;
}
.item .icon i.fa {
}
.item div span {
}
.btn-custom {
  background-color:var(--main);
  color:white;
}
.btn-custom:hover {
  color:white;
  background-color:var(--hover-color);
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

wvjprwz.markdown

wvJPrWz

A Pen by Shrikant-28 on CodePen.

License.