Responsive Service Card Design using HTML & CSS

Responsive Service Card Design using HTML & CSS

Hello developers, today in this blog you'll learn how to create a Responsive Service Card Design using HTML & CSS.

A service card is more important for any service provider which describes its services to the viewers. The card must contain the title of the service and the description of the service that you provide. These may also contain short sentences, long paragraphs, bullet point sections.

In this blog (Responsive Service Card), there are four service cards with the title and the description of the service that you provide. The hover effect has been used in this project. As per many services you provide you can create many cards. This page [Responsive Service Card], is made responsive by using a media query.


The source code of this Responsive Service Card using HTML & CSS is given below, and you can copy the source code of this program. You can use this code of Responsive Service Card with your creativity and can take this card to the next level.


Responsive Service Card [Source Code]


To make this website (Responsive Service Card), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.


<!DOCTYPE html> <html> <head> <title> Service cards || Learningrobo </title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="row"> <div class="col-md-4"> <div class="service-card"> <div class="title"> Title 1 </div> <p class="bodyin">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Learningrobo</p> </div> </div> <div class="col-md-4"> <div class="service-card"> <div class="title"> Title 2 </div> <p class="bodyin">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Learningrobo </p> </div> </div> <div class="col-md-4"> <div class="service-card"> <div class="title"> Title 3 </div> <p class="bodyin">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Learningrobo </p> </div> </div> <div class="col-md-4"> <div class="service-card"> <div class="title"> Title 4 </div> <p class="bodyin">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br><br> Learningrobo </p> </div> </div> </div> </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


  body{
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  }
  .service-card {
    font-family: 'Overpass', sans-serif;
    height: auto;
    width:90%;
    color:darkgray;
    background-color: #12192c;
    border-radius: 12px;
    margin: 20px;
    box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
    transition: all .15s ease;
    cursor: pointer;
  }
  .title{
    padding: 15px;
    font-size: 24px;
    border-bottom: 2px solid #FAD961;
    color:#fff;
  }
  .bodyin {
    font-size: 16px;
    padding: 15px;
  }
  .service-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .row{
    display: flex;
  }
  @media screen and (max-width: 900px) {
    .row{
        display: flex;
        flex-direction: column;
      }
  }


We hope you would like this Responsive Service Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Service Card Design using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

 

 

 

 

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome