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.
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%;
}
}
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.
Post a Comment
Thank you
Learning robo team