Code Asteroid IDE : How to create responsive Card design in HTML and CSS

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Code War
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

How to create responsive Card design in HTML and CSS Views: 1155 By: Ankur Hack

Contribute Run

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="helper-con">
  <h3>
    Hover over card for animation effect
  </h3>
</div>

<div class="container custom-container">
  <div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 padding-zero margin-botton-20 c-for-mobile">
      <div class="c-box-shadow">
        <div>
          <a href="#" class="text-decoration-none">
            <div class="custom-img-book-list-con">
              <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2022-01-22-01-07-headphone.jpg" class="img-responsive width-100">
            </div>
            <div class="margin-botton-10">
              <label class="custom-title-book margin-zero">Pton noise cancelling headphone with mic</label>
            </div>
            <div class="margin-botton-10">
              <label class="c-off-mrp"><i class="fas fa-rupee-sign"></i>
                250</label>
              <label class="c-actual-mrp"><i class="fas fa-rupee-sign"></i> 550</label>
              <label class="c-percentage-off">35% off</label>
            </div>
          </a>
        </div>
        <div class="c-add-cart-con">
          <a href="#" class="c-add-cart-a">
            <i class="fas fa-shopping-cart"></i> Add To Cart
          </a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 padding-zero margin-botton-20 c-for-mobile">
      <div class="c-box-shadow">
        <div>
          <a href="#" class="text-decoration-none">
            <div class="custom-img-book-list-con">
              <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2022-01-22-01-15-earphone.jpg" class="img-responsive width-100">
            </div>
            <div class="margin-botton-10">
              <label class="custom-title-book margin-zero">Pton noise cancelling earpod with mic</label>
            </div>
            <div class="margin-botton-10">
              <label class="c-off-mrp"><i class="fas fa-rupee-sign"></i>
                250</label>
              <label class="c-actual-mrp"><i class="fas fa-rupee-sign"></i> 550</label>
              <label class="c-percentage-off">35% off</label>
            </div>
          </a>
        </div>
        <div class="c-add-cart-con">
          <a href="#" class="c-add-cart-a">
            <i class="fas fa-shopping-cart"></i> Add To Cart
          </a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 padding-zero margin-botton-20 c-for-mobile">
      <div class="c-box-shadow">
        <div>
          <a href="#" class="text-decoration-none">
            <div class="custom-img-book-list-con">
              <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2022-01-22-01-01-zebo.jpg" class="img-responsive width-100">
            </div>
            <div class="margin-botton-10">
              <label class="custom-title-book margin-zero">Wireless charger for android mobile phone</label>
            </div>
            <div class="margin-botton-10">
              <label class="c-off-mrp"><i class="fas fa-rupee-sign"></i>
                250</label>
              <label class="c-actual-mrp"><i class="fas fa-rupee-sign"></i> 550</label>
              <label class="c-percentage-off">35% off</label>
            </div>
          </a>
        </div>
        <div class="c-add-cart-con">
          <a href="#" class="c-add-cart-a">
            <i class="fas fa-shopping-cart"></i> Add To Cart
          </a>
        </div>
      </div>
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 padding-zero margin-botton-20 c-for-mobile">
      <div class="c-box-shadow">
        <div>
          <a href="#" class="text-decoration-none">
            <div class="custom-img-book-list-con">
              <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2022-01-22-01-27-watch.jpg" class="img-responsive width-100">
            </div>
            <div class="margin-botton-10">
              <label class="custom-title-book margin-zero">Best smart watch with activity tracker</label>
            </div>
            <div class="margin-botton-10">
              <label class="c-off-mrp"><i class="fas fa-rupee-sign"></i>
                250</label>
              <label class="c-actual-mrp"><i class="fas fa-rupee-sign"></i> 550</label>
              <label class="c-percentage-off">35% off</label>
            </div>
          </a>
        </div>
        <div class="c-add-cart-con">
          <a href="#" class="c-add-cart-a">
            <i class="fas fa-shopping-cart"></i> Add To Cart
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.helper-con{
  text-align:center;
  margin-top:30px;
}
.custom-container{
  margin-top:30px;
}
a{
  text-decoration:none !important;
}
div.c-box-shadow:hover {
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-radius: 2px;
    transition: ease .5s;
}

.c-box-shadow {
    padding: 15px 0 0 0;
    width: 95%;
    margin: auto;
    transition: ease .5s;
  text-align:center;
}
.custom-img-book-list-con {
    width: 65%;
    margin: auto;
    margin-bottom: 10px;
}
.width-100 {
    width: 100%;
}
.margin-botton-10 {
    margin: 0 0 10px 0;
}
.custom-title-book {
    padding: 0 15px;
    color: black;
    cursor: pointer;
    font-size: 14px;
}
.c-off-mrp {
    color: black;
    font-weight: 600;
    margin: 0 10px 0 0;
    font-size: 14px;
}
.c-actual-mrp {
    color: darkgray;
    font-weight: 600;
    margin: 0 10px 0 0;
    position: relative;
    font-size: 14px;
}
.c-percentage-off {
    color: rgb(44, 131, 63);
    font-weight: 600;
    font-size: 14px;
}
.c-add-cart-a {
    border-top: 1px solid;
    border-bottom: 1px solid;
    border-color: #dbdbdb;
    color: black;
    font-weight: 600;
    padding: 8px 40px;
    font-size: 14px;
    display: block;
    transition: ease .5s;
}
.c-add-cart-a:hover {
    color: white;
    background: rgb(24, 26, 25) !important;
    text-decoration: none;
}
.c-actual-mrp::after {
    content: "";
    left: 0px;
    margin-top: calc(-0.5px);
    position: absolute;
    right: 0px;
    top: 50%;
    border-bottom: 1px solid darkgrey;
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.