Responsive Service Card Design using HTML & CSS with modern UI

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 HTML & CSS with modern UI.

A service card is very much important for any service-providing company that describes its services to the viewers. The card must contain the title of the service and the description of the service that the company provides and also the respective icon of the service. These may also contain a description of the service.

In this blog (Responsive Service Card Design), there are three service cards with the title and the description of the service with their respective icons and also there is a button named as Read more to read more, which makes the user know more about the service. CSS media query property and hover effect has been used in every service card. While hovering the card, the background color of the card changes and also the shape of the card changes. The card shape is changed by using CSS border-radius property. You can create many cards as number of service you provide.

The source code of this Responsive Service Card Design 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 subsequent level.

Responsive Service Card Design using HTML & CSS with modern UI [Source Code]

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> <head> <title>Service Cards</title> <meta charset="utf-8"> <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/c39c442009.js" crossorigin="anonymous"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="head"> <h1>Service Cards</h1> </div> <div class="cards"> <div class="box1"> <i class="fas fa-robot"></i> <h1>Twitter</h1> <p class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p> <a href="#">Read more</a> </div> <div class="box2"> <i class="fas fa-code"></i> <h1>Instagram</h1> <p class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p> <a href="#">Read more</a> </div> <div class="box3"> <i class="fas fa-clipboard"></i> <h1>Youtube</h1> <p class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aliquid non eligendi, nemo est neque reiciendis error?</p> <a href="#">Read more</a> </div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


 body{
            margin:10px;
            padding:10px;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Poppins',Sans-Serif;
            display: flex;
             background:  #12192c;
        }
        .cards{
            display:flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .cards.box{
            position: relative;            
        }
        .box1,.box2,.box3{
            border:none;
            padding:20px;
            height:360px;
            width:260px;
            margin:20px;
            margin-top:10%;
            text-align: center;
            position: relative;
            box-sizing: border-box;
            font-family: 'Poppins',Sans-Serif;
            background: #00C9A7;
            border-radius:50px 0px 55px 0px;
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            
        }
        
        .content{
            font-size: 17px;
        }
        .fas{
           font-size: 50px;
        }
        .cards a{
            font-size:17px;
            text-decoration: none;
            border:1px solid ;
            border-radius: 20px;
            padding:8px;
            margin:22px 0;
            box-sizing: border-box;
            cursor: pointer;
            position: absolute;
            left:10%;
            background-color: black;
            color:white;
            width:80%;
            height:38px;
        }
           .box1:hover a{
            background-color:white;
            color: #90ee90;
            box-shadow: 10px 12px 4px 0px rgba(0, 0, 0, 0.24)inset;
            border:1px solid #000;
        }
        .box2:hover a{
            background-color:white;
            color: #90ee90;
            box-shadow: 10px 12px 4px 0px rgba(0, 0, 0, 0.24)inset;
            border:1px solid #000;
        }
        .box3:hover a{
            background-color:white;
            color:#90ee90;
            box-shadow: 10px 12px 4px 0px rgba(0, 0, 0, 0.24)inset;
            border:1px solid #000;
        }
        .box1:hover{
           background: #90ee90; 
            border-radius:35px 34px 33px 33px;
            border:1px solid #90ee90;
            box-shadow:0 5px 10px #90ee90;
        }
        .box2:hover{
            background:#90ee90;
            border-radius:35px 34px 33px 33px;
            border:1px solid #90ee90;
            box-shadow:0 5px 10px #90ee90;
        }
        .box3:hover{
            background: #90ee90;
            border-radius:35px 34px 33px 33px;
            border:1px solid #90ee90;
            box-shadow:0 5px 10px #90ee90;
        }
        .head{
            text-align: center;
            position: absolute;
            top:5%;
            font-size: 30px;
            font-family: Georgia;
            color: #fff;
        }
       
        @media screen and (max-width:900px)
        {
            .cards{
                display: flex;
                
            }
            .head{
                text-align: center;
                font-size: 12px;
                position: absolute;
                top:1%;
            }
        }
We hope you would like this Responsive Service Card Design using HTML & CSS with modern UI.

Thank you for reading our blog. If you face any problem in creating this Responsive Service Card Design using HTML & CSS with modern UI, 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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

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