How to create responsive columm cards using CSS


Posted on January 29, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com


Preview :



Responsive card (Mobile Preview)

1

Post title

Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Read More

2

Post title

Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Read More

3

Post title

Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.

Read More

Desktop preview

Responsive Cards(Desktop Preview)


Desktop preview after hover

Responsive Cards(Desktop Preview on hover)


Create responsive cards using CSS:

What is a Responsive card?

=> Our awesome, Responsive card gives visitors an attractive Responsive card that can be used to show blog posts.

How can I use this Responsive card using CSS?

=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the Responsive card.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your Responsive card. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.

Is it safe to use the Responsive card in HTML?

=> Yes, it's completely safe to use the Responsive card as it is just built with HTML and CSS.

What are the advantages of the Responsive card?

=> Responsive card is a very good way for showing blog posts that can be easily viewed on mobile as well as on PC.

How can I download the source code of the Responsive card?

=> Scroll the page to the bottom there you will find our download button to download the code.

Overview of the Blog :

=> In this blog, you can learn, how to make a Responsive card using HTML and CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The Responsive card is a lightweight and easy-to-use HTML and CSS code that creates a Responsive card for you (that you can use inside in your blog post). In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our Responsive card using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.


You might like this :

Random password generator using JavaScript Responsive Contact us form Password Strength meter using JS Image Gallery with Filtering (HTML, CSS and JavaScript) Glowing button / Strobe Button (Pure CSS)




Step by step guide of creating a Responsive card (If you want to make a budget calculator using JavaScript click Here ) :

Step 1

=> Add the Broiler plate of HTML
              
<!DOCTYPE html>
<html>
<head>
<title>Responsive card - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
</body>
</html>

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css
                

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>

then add the CSS code between style tag or inside
style.css
file, then add this code


*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
                

then add below code to align the cards to the center

                
body{
display: flex;
justify-content: center;
align-items: center;
background:#ffffff9d;
min-height: 100vh;
}
.container{
width: 1000vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
                

Then add this code to style the cards

 
.container .cwb-cards{
position: relative;
width: 290px;
height: 440px;
background: #5cb7ec;
display: flex;
justify-content: center;
align-items: center;
margin: 25px;
box-shadow: 0 15px 45px black;
}
.container .cwb-cards .cwb-content{
padding: 40px;
align-items: center;
justify-content: center;
}
.container .cwb-cards .cwb-content h2{
position: absolute;
right: 30px;
font-size: 4em;
font-weight: 700;
color: rgb(89, 0, 255);
z-index: 1;
opacity: 0.1;
transition: 500ms;
}
                

Then add some hover effect


.container .cwb-cards:hover .cwb-content h2{
opacity: 1;
transform: translateY(-70px);
}
                

Then add style to the contents of the card


.container .cwb-cards .cwb-content h3{
position: relative;
font-size: 1.5em;
color: white;
z-index: 2;
opacity: 0.4;
letter-spacing: 1px;
transition: 500ms;
}
.container .cwb-cards .cwb-content p{
position: relative;
justify-content: center;
align-self: center;
font-size: 1.5em;
color: white;
z-index: 2;
font-weight: 200;
opacity: 0.4;
transition: 500ms;
}

Then add some more hover effect


.container .cwb-cards:hover .cwb-content h3, .container .cwb-cards:hover .cwb-content p{
opacity: 1;
}
.container .cwb-cards:hover a{
opacity: 1;
letter-spacing: 2px;
transition: 1000ms;
background: rgb(250, 252, 252);
}
                

Then add style to the link (Button)


a{
display: inline-block;
margin-top: 20px;
padding: 10px 15px;
color: black;
opacity: 0.8;
background: white;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
}
                

OR copy the code from below


Step 1) Add your HTML Code -

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Responsive blog card - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<div class="container"> <div class="cwb-cards"> <div class="cwb-content"> <h2>1</h2> <h3>Post title</h3> <p>Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="#">Read More</a> </div> </div> <div class="cwb-cards"> <div class="cwb-content"> <h2>2</h2> <h3>Post title</h3> <p>Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="#">Read More</a> </div> </div> <div class="cwb-cards"> <div class="cwb-content"> <h2>3</h2> <h3>Post title</h3> <p>Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="#">Read More</a> </div> </div> </div> <body>
</body>
</html>

Step 2) Add your CSS Code -

CSS Code
              
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected]&display=swap'); *{ margin: 0px; padding: 0px; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ display: flex; justify-content: center; align-items: center; background:#ffffff9d; min-height: 100vh; } .container{ width: 1000vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .container .cwb-cards{ position: relative; width: 290px; height: 440px; background: #5cb7ec; display: flex; justify-content: center; align-items: center; margin: 25px; box-shadow: 0 15px 45px black; } .container .cwb-cards .cwb-content{ padding: 40px; align-items: center; justify-content: center; } .container .cwb-cards .cwb-content h2{ position: absolute; right: 30px; font-size: 4em; font-weight: 700; color: rgb(89, 0, 255); z-index: 1; opacity: 0.1; transition: 500ms; } .container .cwb-cards:hover .cwb-content h2{ opacity: 1; transform: translateY(-70px); } .container .cwb-cards .cwb-content h3{ position: relative; font-size: 1.5em; color: white; z-index: 2; opacity: 0.4; letter-spacing: 1px; transition: 500ms; } .container .cwb-cards .cwb-content p{ position: relative; justify-content: center; align-self: center; font-size: 1.5em; color: white; z-index: 2; font-weight: 200; opacity: 0.4; transition: 500ms; } .container .cwb-cards:hover .cwb-content h3, .container .cwb-cards:hover .cwb-content p{ opacity: 1; } a{ display: inline-block; margin-top: 20px; padding: 10px 15px; color: black; opacity: 0.8; background: white; text-decoration: none; text-transform: uppercase; font-weight: 900; } .container .cwb-cards:hover a{ opacity: 1; letter-spacing: 2px; transition: 1000ms; background: rgb(250, 252, 252); } </style>




Leave a Comment:

Search