Hello developers, today in this blog you'll learn how to create a Responsive Card Design with a hover effect in HTML & CSS.
Cards are a very important part of any website. It is
used to display some important information in short to viewers for posts,
products, services, etc.
In this post, you can see three cards with images,
heading, some dummy text, and author content. These cards are made responsive
by using CSS media query property. We used the hover effect with this card.
When you see this page on the mobile device, these three
cards automatically get adjusted one after the other which covers the height and
width of the device.
The source code for making this Responsive Card Design is
given below,if you want the source code of this program, you can copy it. You can use this Responsive Card
Design with your creativity and can take this to the next level.
Responsive
Card Design [Source Code]
To make this website, you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name index.html and remember, you've to create a file with a .html extension.
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you've to create a file with a .css extension.
body{
background-color: orange;
}
body::-webkit-scrollbar {
display: none;
}
.main{
display:flex;
}
@media only screen and (max-width:900px){
.main{
flex-direction: column;
margin:30px;
}
}
.card{
width: 90%;
height: 500px;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(242,245,248,1) 35%, rgba(236,236,237,1) 100%);
box-shadow: 0 13px 15px rgba(0, 0, 0, 0.3);
border-radius: 10px;
margin: 30px 20px 20px 10px;
transition: background-color .5s, box-shadow .5s, margin-left .5s;
}
.card:hover{
background-color: #ffff;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.3);
transition: background-color .5s, box-shadow .5s, margin-left .5s;
}
.post-image{
width: 92%;
height: 220px;
margin: 15px;
border-radius: 10px 10px 10px;
float: left;
}
.post-content{
width: 90%;
height: 250px;
float: left;
margin-left: 5px;
overflow: hidden;
}
a{
font-size: 28px;
font-family: 'Roboto', sans-serif;
color: #000;
text-decoration: none;
}
.post-header{
font-size: 28px;
font-family: 'Roboto', sans-serif;
margin-top: 15px;
color: #000000;
margin-left: 10px;
text-align: center;
}
.post-text{
font-size: 15px;
padding-left: 20px;
color: #000;
font-family: 'Roboto', sans-serif;
}
.author{
width: 95%;
height: 60px;
background-color: #12192c;
margin-left: 20px;
margin-top: 5px;
color:#fff;
border-radius:15px;
}
.author-content{
width: 60%;
height: 60px;
margin-left: 10px;
float: left;
color:#fff
}
.author-name{
font-size: 20px;
color: #fff;
font-family: 'Roboto', sans-serif;
font-weight: bold;
margin-top: 10px;
padding-left: 10px;
}
.date{
font-size: 13px;
font-family: 'Roboto', sans-serif;
margin-top: -15px;
padding-left: 10px;
}
Thank you for reading our blog. If you face any problem in creating this Responsive 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