Blog Post Card Design using HTML & CSS

Blog Post Card Design using HTML & CSS

Hello developers, today in this blog you'll learn to create a Blog Post Card Design using HTML & CSS.


The Blog Post Card is used to showcase the image with its title and some description about the post and the read more button is used to a brief description about the post.

In this blog (Blog Post Card Design) on the left side of the card, there is an image and on the right side, there is a title with its description and above the title, there is a date that shows when the post has been published and below the description, there is a button named as read more. The hover effect has been used to change the color of the card and the button. While hovering the card, the card is made to move up slightly by using the CSS transform property.

The source code of this Blog Post Card Design is given below, if you want the source code of this program, you can copy it. You can use this Blog Post Card Design code with your creativity and can take this Blog Post Card Design to the next level.

Blog Post Card Design [Source Code]

To make this website (Blog Post Card Design), you need to create two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Blog Crads</title> <link rel ="stylesheet" href = "style.css"> </head> <body> <div class="cards"> <h4>BLOG CARDS</h4> <div class="card"> <div class="head"> <img class="img" src="https://t4.ftcdn.net/jpg/04/55/60/27/240_F_455602774_6Khx8ErGHMorYXaJWDSz6QfhjzcCSgfR.jpg" alt="image"> <div class="content"> <h5>18 November 2019</h5> <h3>TRENDING TECHNOLOGY</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? Alias dignissimos quo cum, nulla esse facere atque, blanditiis doloribus at sunt quas, repellendus </p> <a href="#" class="button">READ MORE</a> </div> </div> </div> <div class="card"> <div class="head"> <img class="img" src="https://t4.ftcdn.net/jpg/03/08/69/75/240_F_308697506_9dsBYHXm9FwuW0qcEqimAEXUvzTwfzwe.jpg" alt="image"> <div class="content"> <h5>26 December 2019</h5> <h3>TRENDING TECHNOLOGY</h3> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae voluptate repellendus magni illo ea animi? Alias dignissimos quo cum, nulla esse facere atque, blanditiis doloribus at sunt quas, repellendus </p> <a href="#" class="button">READ MORE</a> </div> </div> </div> </div> </body> </html>
CSS provides style to an HTML page.To make the page attractive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
          *{
            box-sizing: border-box;
            font-family: arial;
          }
          body{
               background:#282828;
          }
            .card{
                width:60%;
                height:300px;
                border:2px solid #000;
                border-radius: 30px;
                margin:auto;
                margin-bottom: 3%;
                background-color: #829BE3;
                box-shadow: 8px 8px 5px 0px rgba(0, 0, 0, 0.31);
            
            }
            .card:hover{
                background: #BBD1FF;
            }
            .card:hover .button{
                background: #000;
                color:#BBD1FF;
                border:2px solid #000;
            }
            .cards:hover .img{
                opacity: 0.85;
            }
            .cards{
                margin: auto;
                margin-top:5%;
            }
            .card:hover {
                 transform: translateY(-10px);
                 transition-duration:.3s;
            }
            .head{
                display:flex;
                justify-content: center;
            }
            .img{
                width:400px;
                height:250px;
                transform:translate(-40px);
                margin-top:23px;
                object-fit: cover;
                border-radius: 20px;
            }
            .button{
                border:2px solid #000;
                border-radius: 20px;
                padding:7px 20px;
                position: absolute;
                font-size: 15px;
                color:#000;
                background: #BBD1FF;
                box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.31) inset;
                font-size: 16px;
                text-decoration: none;
                cursor: pointer;
            }
            h3{
                font-size: 25px;
            }
            h4{
                text-align: center;
                font-size: 40px;
                color:#fff;
            }
            h5{
                font-size: 15px;
            }
            p{
                font-size: 18px;
            }
            
We hope you would like this Blog Post Card Design using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Blog Post 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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome