Responsive Service Card Design using CSS flexbox

0

Responsive Service Card Design using HTML & CSS with modern UI

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

A service card is very much 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 and also the respective icon of the service. These may also contain short sentences, long paragraphs, bullet point sections.

In this blog (Responsive Service Card Design using CSS flexbox), there are six service cards with the title and the description of the service with their respective icons that you provide. Many cards can be created as per the number of services you provide. CSS flexbox has been used. Flexbox is mainly used to lay a collection of items in one direction or another. Here, flexbox is used to create a column axis layout.

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

Responsive Service Card Design using CSS flexbox[Source Codes]

To make this website (Responsive 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 lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Cards</title> <link rel="stylesheet" href="style.css" /> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400&display=swap" rel="stylesheet"> </head> <body> <section class="wrapper"> <div class="container"> <div class="cards"> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path d="M31.85,18H16v8a4,4,0,0,0,8,0h2a6,6,0,0,1-12,0V18H0V16a16,16,0,0,1,32,0v2ZM16,2A13.977,13.977,0,0,0,2,16H30A13.977,13.977,0,0,0,16,2Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Peace of Mind</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24.5" height="32.667" viewBox="0 0 24.5 32.667"> <path d="M22.458,12.25h0V30.523a2.1,2.1,0,0,1-2.042,2.144H4.083a2.1,2.1,0,0,1-2.042-2.144V12.25h0C.919,12.25,0,11.025,0,9.545V6.84C0,5.308.919,4.083,2.042,4.083H22.458c1.123,0,2.042,1.225,2.042,2.705V9.494C24.5,11.025,23.581,12.25,22.458,12.25ZM4.083,29.655a.981.981,0,0,0,1.021.97H19.4a1.015,1.015,0,0,0,1.021-.97v-7.2H18.375a6.125,6.125,0,0,1-12.25,0H4.083Zm12.25-7.2a4.083,4.083,0,1,0-4.083,4.083A4.1,4.1,0,0,0,16.333,22.458ZM4.083,20.417h2.4a6.115,6.115,0,0,1,11.535,0h2.4V12.25H4.083ZM21.438,6.125H3.063c-.561,0-1.021.919-1.021,2.042s.459,2.042,1.021,2.042H21.438c.561,0,1.021-.919,1.021-2.042S22,6.125,21.438,6.125ZM19.4,2.042H5.1A1.021,1.021,0,1,1,5.1,0H19.4a1.021,1.021,0,1,1,0,2.042Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Coffee Breaks</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="34" height="36.267" viewBox="0 0 34 36.267"> <path d="M34,13.6H31.733V36.267H2.267V13.6H0V6.8H9.69a4.387,4.387,0,0,1-.623-2.267A4.5,4.5,0,0,1,17,1.587a4.5,4.5,0,0,1,7.933,2.947A4.387,4.387,0,0,1,24.31,6.8H34ZM18.133,34H29.467V24.933H18.133Zm0-11.333H29.467V13.6H18.133ZM4.533,34H15.867V24.933H4.533Zm0-11.333H15.867V13.6H4.533ZM13.6,2.267a2.267,2.267,0,1,0,2.267,2.267A2.273,2.273,0,0,0,13.6,2.267Zm6.8,0a2.267,2.267,0,1,0,2.267,2.267A2.273,2.273,0,0,0,20.4,2.267Zm11.333,6.8H2.267v2.267H31.733Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Rewards</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="32" viewBox="0 0 28 32"> <path d="M28,30a2.006,2.006,0,0,1-2,2H2a2.006,2.006,0,0,1-2-2V12a2.51,2.51,0,0,1,.1-.6.966.966,0,0,1,.05-.9L5,.5A.982.982,0,0,1,5.85.05.184.184,0,0,1,6,0H22a.184.184,0,0,1,.15.05A.926.926,0,0,1,23,.5l4.85,10a1.063,1.063,0,0,1,.05.95,2.149,2.149,0,0,1,.1.6ZM6.6,2,2.75,10h7.6L11.7,2ZM14,2l-2,8h4Zm2,10H12v8h4ZM21.4,2H16.35l1.35,8h7.55ZM26,13a1,1,0,0,0-1-1H18V22H10V12H3a1,1,0,0,0-1,1V29a1,1,0,0,0,1,1H25a1,1,0,0,0,1-1ZM10,26h2v2H10ZM4,26H8v2H4Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Delivery</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="30" height="32" viewBox="0 0 30 32"> <path d="M28,32H2a2.006,2.006,0,0,1-2-2V18L4,4H8V6H5.45L2,18H15a1.46,1.46,0,0,1-.45-.1,1.192,1.192,0,0,1-.55-.3L8.35,11.9a1.131,1.131,0,0,1,1.6-1.6l4,4.05V1A1.015,1.015,0,0,1,15,0a1.047,1.047,0,0,1,1.05,1V14.25L20,10.3a1.131,1.131,0,1,1,1.6,1.6l-5.7,5.7a1.022,1.022,0,0,1-.45.25.845.845,0,0,1-.5.15h13L24.5,6H22V4h4l4,14V30A2.006,2.006,0,0,1,28,32ZM20,18H10v4H20Zm8,3a1,1,0,0,0-1-1H22v4H8V20H3a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H27a1,1,0,0,0,1-1Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Inbox</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> <div class="cards__box"> <div class="cards__icon"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"> <path d="M32,16a3.945,3.945,0,0,1-3.7,3.95,11.37,11.37,0,0,1-.8,1.95,3.935,3.935,0,0,1-5.55,5.55,10.693,10.693,0,0,1-1.95.8A4.031,4.031,0,0,1,16,32a3.945,3.945,0,0,1-3.95-3.7,11.37,11.37,0,0,1-1.95-.8,3.935,3.935,0,0,1-5.55-5.55A10.692,10.692,0,0,1,3.75,20,4.031,4.031,0,0,1,0,16a3.945,3.945,0,0,1,3.7-3.95,11.37,11.37,0,0,1,.8-1.95,4,4,0,0,1,.2-5.4,3.937,3.937,0,0,1,5.35-.2A10.692,10.692,0,0,1,12,3.7,4.026,4.026,0,0,1,16,0a3.945,3.945,0,0,1,3.95,3.7,11.37,11.37,0,0,1,1.95.8,3.935,3.935,0,0,1,5.55,5.55,10.693,10.693,0,0,1,.8,1.95A4.031,4.031,0,0,1,32,16Zm-5.2-2a11.191,11.191,0,0,0-1.75-4.2l.85-.85A2.015,2.015,0,0,0,23.05,6.1l-.85.85A10.436,10.436,0,0,0,18,5.2V4a2,2,0,0,0-4,0V5.2A11.191,11.191,0,0,0,9.8,6.95L8.95,6.1A2.015,2.015,0,0,0,6.1,8.95l.85.85A10.436,10.436,0,0,0,5.2,14H4a2,2,0,0,0,0,4H5.2a11.191,11.191,0,0,0,1.75,4.2l-.85.85A2.015,2.015,0,0,0,8.95,25.9l.85-.85A10.436,10.436,0,0,0,14,26.8V28a2,2,0,0,0,4,0V26.8a11.191,11.191,0,0,0,4.2-1.75l.85.85a2.015,2.015,0,0,0,2.85-2.85l-.85-.85A10.436,10.436,0,0,0,26.8,18H28a2,2,0,0,0,0-4ZM16,22a6,6,0,1,1,6-6A6.018,6.018,0,0,1,16,22Zm0-10a4,4,0,1,0,4,4A4.012,4.012,0,0,0,16,12Z" fill="#fff" fill-rule="evenodd" /> </svg> </div> <h4>Settings</h4> <p class="light"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices accumsan ornare. Phasellus tristique </p> </div> </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </section> </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. 


/* resets */

html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    background-color: #08AEEA;
background-image: linear-gradient(0deg, #08AEEA 0%, #2AF598 100%);

  }
  
  .wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
  }
  
  .container {
    max-width: 100%;
    width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
  }
  
  .light {
    font-weight: 300;
    color:#fff
  }
  
  p {
    color: rgba(0,0,0,.65);
  }
  

  /* cards */
  
  .cards {
    display: flex;
    justify-content: space-between;
    padding-bottom: 100px;
    flex-wrap: wrap;
    margin: 0 -15px;
    color:#fff
  }
  .cards__box {
    background-color: #12192c;
    padding: 65px 50px 45px;
    flex: 1 100%;
    margin: 15px;
    text-align: center;
    border-radius: 10px;
    color:#fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  @media (min-width: 768px) {
    .cards__box {
      flex: 1 calc(50% - 30px);
    }
  }
  @media (min-width: 1024px) {
    .cards__box {
      flex: 1 calc(32% - 30px);
    }
  }
  .cards__box h4 {
    margin: 25px 0 20px 0;
    font-style: normal;
  }
  .cards__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 88px;
    max-height: 88px;
    background-color: #12192c;
    border: 3px solid #2AF598;
    padding: 28px;
    border-radius: 50%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }

  .credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
}
We hope you would like this Responsive Service Card Design using CSS flexbox.

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

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