How to make responsive Blog cards using HTML & CSS? || CSS Cards || HTML Cards || Blog layout || Blog Card Ideas

 Hello Everyone, Welcome to another Web-Development tutorial. In this tutorial, you will learn to make Blog Postcards.

Blog Cards are cards made with HTML and some CSS. A Blog Card Displays and Image( Related to the Post Topic ), the Heading or Title of The Post, and some text under the heading to show what the post contains.

Let's Start the Article -

Let me show you a card made by me -

What is a Car?

Here you will learn, what is a car. The Above image is of a Porshe. It is the world one of the fastest car.

I will provide you the code for this card. It is made by me. As you can see, there's a Heading, a short text related to the post, and an image.

HTML & CSS cards look more attractive when there is some radius in the borders means rounded corners.

In These days, every company is using the rounded corners technology for their OS, Applications. Because it looks attractive.

 

First You have to add some HTML -

<div class="card"> 

  <img src="https://cdn.pixabay.com/photo/2016/11/22/23/44/porsche-1851246__340.jpg" alt="Avatar" style="width:100%; border-radius: 25px;">

  <div class="container">

    <a href="" style="text-decoration: none; color: orangered"><h1><b>What is a Car?</b></h4></a> 

    <p style="font-family: 'Ubuntu', sans-serif;">Here you will learn, what is a car. The Above image is of a Porshe. It is worlds one of the most fastest car.</p> 

  </div>

</div>

</body>

</html> 

Then, add some CSS-

.card {

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

  transition: 0.3s;

  width: 40%;

  border-radius: 25px;

}

.card:hover {

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

}

.container {

  padding: 2px 16px;

}

Here is the full code to make a card -

We can add more effects to the card to attract users just like we have added the rounded corners.

Like adding text effects - 

text-shadow: 2px 2px 8px #FF0000;

Add the above code in the .card:hover CSS style part. Like this-

.card:hover {

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

  text-shadow: 2px 2px 8px #FF0000;

What will this code do?

When you hover over the card, you will see a red shadow behind the text.

Then type this code under the text-shadow line - 

width: 300px;

 Then, paste this code - 

height: 300px;

 Then paste this code -

transform: rotate(360deg);

Now, in the .card CSS style part, type the below code -

  transition: width 2s, height 2s, transform 2s;

Like this -

.card {

  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

  transition: 0.3s;

  width: 40%;

  border-radius: 25px;

  transition: width 2s, height 2s, transform 2s;

}

.card:hover {

  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

  width: 300px;

  height: 300px;

  transform: rotate(360deg);

}

To check if it works correctly just hover over the card.

And! Here's the Final code - !!!!!!!

The Output Of the Code