Code Asteroid IDE : How to create responsive service cards using 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 service cards using HTML and CSS Views: 872 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">

<section class="5th_part_section custom-sub-section">
    <div class="container m-product-container">
        <div class="center margin_bottom_30">
            <label class="custom-variety-product font-22">Variety of Products</label>
        </div>
        <div class="margin-bootom-20 m-product-display">
            <div class="row margin-zero">
                <div class="col-xl-3 col-lg-3 col-md-3 col-6 center our-product-mobileview">
                    <a class="mkc-product-section" href="#">
                        <div class="custom-round-con"><i class="fab fa-youtube"></i></div>
                        <div class="font-18">
                            Exams Tips and Tricks
                        </div>
                    </a>
                    <span><a class="youtube-subscribe-btn" href="#"><i
                                class="fab fa-youtube"></i><span>Subscribe</span></a>
                    </span>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-6 center our-product-mobileview">
                    <a class="mkc-product-section" href="#">
                        <div class="custom-round-con"><i class="fas fa-book-open"></i></div>
                        <div class="font-18">Blogs</div>
                    </a>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-6 center our-product-mobileview">
                    <a class="mkc-product-section" href="#">
                        <div class="custom-round-con"><i class="fas fa-book"></i></div>
                        <div class="font-18">Online Test Series</div>
                    </a>
                </div>
                <div class="col-xl-3 col-lg-3 col-md-3 col-6 center our-product-mobileview">
                    <a class="mkc-product-section" href="#">
                        <div class="custom-round-con"><i class="fas fa-bolt"></i></div>
                        <div class="font-18">Distance Learning Program (DLP)</div>
                    </a>
                </div>
            </div>
        </div>
        <div class="margin_bottom_40 product-description-con">
            <p class="font-16">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to
                demonstrate the visual form of a document without relying on meaningful content (also called greeking).
                Replacing the actual content with placeholder
                text allows designers to design the form of the content before the content itself has been produced. The
                lorem ipsum text is typically a scrambled section of De finibus bonorum et malorum, a 1st-century BC
                Latin text by Cicero,
                with words altered, added, and removed to make it nonsensical, improper Latin.</p>
            <a href="#" class="custom-variety-btn">Know More</a>
        </div>
    </div>
</section>

CSS

.custom-sub-section {
    padding: 30px 25px;
}
.center {
    text-align: center;
}
.margin_bottom_30 {
    margin: 0 0 30px 0;
}
.margin-bootom-20 {
    margin-bottom: 20px;
}
.margin_bottom_40 {
    margin: 0 0 40px 0;
}
.margin-zero {
    margin: 0 !important;
}
.custom-variety-product {
    font-weight: bold;
}
.font-22 {
    font-size: 22px;
}
.custom-variety-product:before {
    content: "";
    position: absolute;
    height: 40px;
    width: 142px;
    border-bottom: 2px solid #b11d1a;
    margin: 0px 28px;
}
.mkc-product-section {
    color: #000;
    text-decoration: none;
    transition: ease .3s;
}
.custom-round-con {
    border: 3px solid #cccccc;
    border-radius: 50%;
    display: inline-block;
    height: 130px;
    margin: 0 0 15px 0;
    position: relative;
    text-align: center;
    background-color: #ebebeb;
    width: 130px;
    transition: ease .3s;
}
.custom-round-con i {
    font-size: 35px;
    color: gray;
    line-height: 3.5;
    transition: ease .3s;
}
.font-18 {
    font-size: 18px;
}
.font-16 {
    font-size: 16px;
}
.youtube-subscribe-btn {
    color: #d70505;
    font-size: 17px;
    text-decoration: none;
}
.youtube-subscribe-btn span {
    margin-left: 5px;
}
.product-description-con {
    text-align: center;
}
.custom-variety-btn {
    font-size: 17px;
    color: black;
    border: 1px solid black;
    padding: 8px;
    display: inline-block;
    transition: ease 0.2s;
}
.custom-variety-btn:hover {
    text-decoration: none;
    transition: ease 0.2s;
    color: #fff;
    background-color: #000000a6;
}
.mkc-product-section:hover {
    color: #007bff !important;
    text-decoration: none;
    transition: ease .3s;
}
.mkc-product-section:hover .custom-round-con {
    border: 3px solid #007bff;
    transition: ease .3s;
}

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.