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