How to create a card using HTML and CSS?

Hey, what’s up, guys. In one of my previous posts, I had created a navigation bar using HTML and CSS (Here’s the link – How to create navigation bar using HTML and CSS? ). In this post, we will see how we can create a card using HTML and CSS. So, let’s begin.

First, let me show you a screenshot of my browser window with the page that I have created. So, you will have an idea of what our card will look like. Here’s the screenshot.

I have created two cards with images and some text. Both the cards are same except the image.

Now, let’s see the HTML for it.

<!DOCTYPE html>
<html lang="en">
   <head>
    <title>HTML CSS Card</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="cardstyle.css">
   </head>

   <body>
    <div class="card">
        <img src="camp.png" alt="Camp" style="width: 100%">
        <div class="container">
          <h4><b>Lorem Ipsum</b></h4> 
          <p>Lorem ipsum dolor sit amet.</p> 
        </div>
      </div>

      <div class="card">
        <img src="night.jpg" alt="Camp" style="width: 100%">
        <div class="container">
          <h4><b>Lorem Ipsum</b></h4> 
          <p>Lorem ipsum dolor sit amet.</p> 
        </div>
      </div>


   </body>
</html>

Let me explain the HTML a little bit.

Here I have used two <div> with class=”card” for two cards. Since both the cards are same except the image, I will explain one <div>. I have used <img> tag and an another <div> with class=”container” inside our parent <div>. The <img> tag contains the path of the image and the <div> with class=”container” contains some text inside <h4> and <p> tags.

Now let’s see the CSS.

cardstyle.css

.card {
    background-color: #00897b;
    margin: auto;
    margin-top: 100px;
    width: 15%;
    border-radius: 8px;
    box-shadow: 10px 10px 15px 5px rgba(17, 16, 16, 0.2);
  }
  
  
  img {
    border-radius: 8px 8px 0px 0px;
  }
  
  .container {
    padding: 1px 15px;
  }

Most of the properties are easy to understand. I will only talk about the box-shadow property values here that I have used inside the card class.

The first value of the box-shadow is the horizontal offset of the shadow. If you use a positive value then the shadow will be on the right side of the box, and putting a negative value puts the shadow on the left side of the box.

The second value is the vertical offset of the shadow. If you use a positive value then the shadow will be below the box, and a negative value puts the shadow above the box.

The third value is optional. It is the blur radius. You use this to blur the shadow.

The fourth value also is optional. It is the size of the shadow. Using positive value increses the size of the shadow and nagtive value decreases the size of the shadow.

The fifth value is the color of the shadow. It is also an optional value.

That’s all about creating a card using HTML and CSS.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: