Code Asteroid IDE : How to create card layout in HTML and CSS

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

How to create card layout in HTML and CSS Views: 516

Run

HTML

<div class="w-our-services">
    <div class="container w-service-container">
        <div class="w-service-title-con">Our Services</div>
        <div class="row w-service-blocks shape-image-con">
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/web-dev.png" /></div>
                    <div class="w-service-Title">
                        <h5>Web Development</h5>
                    </div>
                    <div class="w-service-content">
                        <p>We build high-end web apps using cutting-edge technologies like Angular, React, .Net Core,
                            and many more.</p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/mobile-dev.png" /></div>
                    <div class="w-service-Title">
                        <h5>Mobile App Development</h5>
                    </div>
                    <div class="w-service-content">
                        <p>We build native and cross-platform mobile apps by using technology like Kotlin and Ionic to
                            help retailers grow. </p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/digital-marketing.png" /></div>
                    <div class="w-service-Title">
                        <h5>Digital Marketing</h5>
                    </div>
                    <div class="w-service-content">
                        <p>We here to help you grow your business by using unique Digital marketing strategies that land
                            you to the high revenue. </p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/graphics-designing.png" /></div>
                    <div class="w-service-Title">
                        <h5>Graphic Designing</h5>
                    </div>
                    <div class="w-service-content">
                        <p>Our team is working 24hr on unique ideas to help you create the best market standard graphics
                            to showcase your products. </p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/ui-ux.png" /></div>
                    <div class="w-service-Title">
                        <h5>UI/UX</h5>
                    </div>
                    <div class="w-service-content">
                        <p>UI/UX is our specialty. We are here to help you create a clean and more interactive User
                            interface that is easy to navigate. </p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
            <div class="col-sm-1 col-lg-4 w-service-col">
                <div class="w-service-block">
                    <div class="w-service-img"><img src="https://www.services.hackhackathon.com/assets/service-icons/content-writing.png" /></div>
                    <div class="w-service-Title">
                        <h5>Content Writing</h5>
                    </div>
                    <div class="w-service-content">
                        <p>We have innovative content writers that can craft your ideas and product description on
                            digital paper to market your product.</p>
                    </div>
                    <div class="w-service-readmore"><a href="#">Read More </a> </div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.w-service-title-con {
    text-align: center;
    font-size: 35px;
    font-weight: 400;
    color: #e2353c;
    margin-bottom: 25px;
}

.w-service-col {
    padding-bottom: 30px;
}

.w-service-block {
    padding: 30px 20px;
    box-shadow: 0 0 15px -5px #999;
    border-radius: 5px;
}

.w-service-img {
    margin-bottom: 15px;
}

.w-service-readmore a {
    color: #e42128 !important;
    font-weight: 500;
}

.w-service-content p {
    color: #6a6a6a;
}
.w-our-services {
padding: 30px 0;
}

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.