Service Card Design using HTML & CSS

0

Service Card Design using HTML & CSS

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

A service card is more important for any service provider or a service-providing company to describe its services to the viewers or clients. The card must contain the title of the service and the description of the service that provide provided by the service proving company. These may also contain short sentences, long paragraphs, bullet point sections.

In this blog (Service Card Design), there are six service cards with the icon, title, and description of the service that is provided. The hover effect has been used in this project. When you hover over the card, the card will be zoomed in because of the box shadow.

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

Service Card Design [Source Code]

To make this website (Service Card Design), 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 card || Learningrobo </title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="u1">OUR SERVICES</div> <div class="cont"> <div class="card1"> <div><i class="fa fa-medkit" style="font-size:50px;"></i><br><span class="p1">FIRST AID</span> <p class="p2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit similique omnis culpa, dolor minima numquam alias, nemo saepe, nesciunt deserunt nostrum quam magnam quibusdam aliquam quas facilis dolorum? Ex, sunt.</p></div> </div> <div class="card1"> <div><i class="fa fa-cut" style="font-size:50px;"></i><br><span class="p1">SPA</span> <p class="p2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus inventore maxime aspernatur esse, ipsa ut ab harum dolorem eveniet adipisci recusandae quasi odio saepe omnis impedit suscipit fugit minima blanditiis! </p></div> </div> <div class="card1"> <div><i class="fa fa-music" style="font-size:50px;"></i><br><span class="p1">MUSIC</span> <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas sunt, est quisquam dignissimos, modi commodi alias eos molestiae consectetur eum ut assumenda fugiat porro temporibus impedit, placeat totam harum natus. </p></div> </div> <div class="card1"> <div><i class="fa fa-medkit" style="font-size:50px;"></i><br><span class="p1">FIRST AID</span> <p class="p2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit similique omnis culpa, dolor minima numquam alias, nemo saepe, nesciunt deserunt nostrum quam magnam quibusdam aliquam quas facilis dolorum? Ex, sunt.</p></div> </div> <div class="card1"> <div><i class="fa fa-cut" style="font-size:50px;"></i><br><span class="p1">SPA</span> <p class="p2"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus inventore maxime aspernatur esse, ipsa ut ab harum dolorem eveniet adipisci recusandae quasi odio saepe omnis impedit suscipit fugit minima blanditiis! </p></div> </div> <div class="card1"> <div><i class="fa fa-music" style="font-size:50px;"></i><br><span class="p1">MUSIC</span> <p class="p2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas sunt, est quisquam dignissimos, modi commodi alias eos molestiae consectetur eum ut assumenda fugiat porro temporibus impedit, placeat totam harum natus. </p></div> </div> </div> <div class="credit">Made with <span style="color:black;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></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: #ec008c; 
    background: -webkit-linear-gradient(to right, #fc6767, #ec008c); 
    background: linear-gradient(to right, #fc6767, #ec008c);
  }
  .cont{
      display:flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

  }
  .card1 {
    font-family: 'PT Sans Narrow', sans-serif;
    height:300px;
    width:25%;
    color:#202124;
    background-color:#fff ;
    border-radius: 8px; 
    margin: 20px;
    padding: 10px;
    text-align: center;
  }
  .card1:hover{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    cursor: pointer;
  }
  .fa{
      padding:10px 0;
      color:#12192c
  }
  .p1{
      position: relative;
      color:#fff;
      padding:5px 30px;
      font-size:14px;
      background-color:#fc6767;
      border-radius: 6px;
  }
  .u1{
      color:black;
      padding:5px;
      text-align: center;
      font-size: 30px;
  }
.credit a{
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  }
  
  .credit {
      text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px;
  }
We hope you would like this Service Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this 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.

Author - Shruthika (Pacific Creation Student Ambassador )

Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome