Responsive Info Cards in HTML and CSS | Project Series Day - 24 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Responsive Info Cards Design with the help of HTML and CSS. It is Project Series Day 24. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making info cards to use in websites step by step.
Video Preview of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
We first made the div for the card and put the icons for the same.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="content">
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">face</i></div>
<p class="title">Profile</p>
<p class="text">Click to see or edit your profile page.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">favorite_border</i></div>
<p class="title">Favourites</p>
<p class="text">Check all your favourites in one place.</p>
</div>
<!-- end card -->
<!-- card -->
<div class="card">
<div class="icon"><i class="material-icons md-36">alternate_email</i></div>
<p class="title">Contacts</p>
<p class="text">Add or change your contacts and links.</p>
</div>
<!-- end card -->
</div>
</div>CSS🎈( step - 2)
Now let's design the amazing info cards
body {
width: 100vw;
background-color: #1D1D1D;
margin: 0;
font-family: helvetica;
}
.wrapper {
width: 100vw;
margin: 0 auto;
height: 400px;
background-color: #161616;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
.wrapper {
height: 700px;
}
}
.content {
max-width: 1024px;
width: 100%;
padding: 0 4%;
padding-top: 250px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 767px) {
.content {
padding-top: 300px;
flex-direction: column;
}
}
.card {
width: 100%;
max-width: 300px;
min-width: 200px;
height: 250px;
background-color: #292929;
margin: 10px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
border: 2px solid rgba(7, 7, 7, 0.12);
font-size: 16px;
transition: all 0.3s ease;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
transition: all 0.3s ease;
}
.icon {
margin: 0 auto;
width: 100%;
height: 80px;
max-width: 80px;
background: linear-gradient(90deg, #FF7E7E 0%, #FF4848 40%, rgba(0, 0, 0, 0.28) 60%);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
color: white;
transition: all 0.8s ease;
background-position: 0px;
background-size: 200px;
}
.material-icons.md-18 {
font-size: 18px;
}
.material-icons.md-24 {
font-size: 24px;
}
.material-icons.md-36 {
font-size: 36px;
}
.material-icons.md-48 {
font-size: 48px;
}
.card .title {
width: 100%;
margin: 0;
text-align: center;
margin-top: 30px;
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 4px;
}
.card .text {
width: 80%;
margin: 0 auto;
font-size: 13px;
text-align: center;
margin-top: 20px;
color: white;
font-weight: 200;
letter-spacing: 2px;
opacity: 0;
max-height: 0;
transition: all 0.3s ease;
}
.card:hover {
height: 270px;
}
.card:hover .info {
height: 90%;
}
.card:hover .text {
transition: all 0.3s ease;
opacity: 1;
max-height: 40px;
}
.card:hover .icon {
background-position: -120px;
transition: all 0.3s ease;
}
.card:hover .icon i {
background: linear-gradient(90deg, #FF7E7E, #FF4848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 1;
transition: all 0.3s ease;
}
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.