Responsive Blog Card Design using CSS Flexbox





Hello developers, today in this blog, you'll learn how to create a Responsive Blog Cards using Flexbox | HTML & CSS.

In a blog website where one or a group of people puts their efforts to give some valuable information to visitors and subscribers to learn something new, in this modern world apart from content developers, others also want to concentrate to create good looking user interface. To make good looking user interface developers provide blog postcard design for their website.

Each blog postcard must contain the image or video, the title, a small description of that particular post, and a hyperlink to read the complete post.

In this Responsive Blog Card Design using CSS Flexbox, there are five cards with an image, a title, a description, and a button with a hyperlink. CSS flexbox has been used. Flexbox is mainly used to lay a collection of items out in one direction or another. Here, flexbox is used to create a column axis layout.

The source code of this Responsive Blog Card Design using CSS Flexbox is given below, if you want the source code of this program, you can copy it. You can use this Responsive Blog Card Design using CSS Flexbox code on your projects.

Responsive Blog Card Design using CSS Flexbox [Source Code]

To make this website, you would like to make two files: an HTML file & 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.

<html> <head> <title>Blog post card|| Learning robo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flexbox"> <ul class="flex-card-list"> <li class="flex-card-listitem"> <div class="flex-card"> <div class="flex-card-image"> <img src="https://cdn.pixabay.com/photo/2017/04/16/19/18/mug-2235591__340.png" /> </div> <div class="flex-card-content"> <h3 class="flex-card-heading">Title</h3> <p>I'm First card Learning robo</p> <a href="#" class="flex-card-button">Read More</a> </div> </div> </li> <li class="flex-card-listitem"> <div class="flex-card"> <div class="flex-card-image"> <img src="https://cdn.pixabay.com/photo/2017/04/18/02/24/mail-2237468__340.png" /> </div> <div class="flex-card-content"> <h3 class="flex-card-heading">Title</h3> <p>I'm Second card Learning robo</p> <a href="#" class="flex-card-button">Read More</a> </div> </div> </li> <li class="flex-card-listitem"> <div class="flex-card"> <div class="flex-card-image"> <img src="https://cdn.pixabay.com/photo/2017/04/28/01/43/cheese-2267165__340.png" /> </div> <div class="flex-card-content"> <h3 class="flex-card-heading">Title</h3> <p>I'm Third card Learning robo</p> <a href="#" class="flex-card-button">Read More</a> </div> </div> </li> <li class="flex-card-listitem"> <div class="flex-card"> <div class="flex-card-image"> <img src="https://cdn.pixabay.com/photo/2017/04/18/02/22/vr-2237467__340.png" /> </div> <div class="flex-card-content"> <h3 class="flex-card-heading">Title</h3> <p>I'm Fourth card Learning robo</p> <a href="#" class="flex-card-button">Read More</a> </div> </div> </li> <li class="flex-card-listitem"> <div class="flex-card"> <div class="flex-card-image"> <img src="https://cdn.pixabay.com/photo/2017/04/19/00/59/office-2240932__340.png" /> </div> <div class="flex-card-content"> <h3 class="flex-card-heading">Title</h3> <p>I'm Fifth card Learning robo</p> <a href="#" class="flex-card-button">Read More</a> </div> </div> </li> </ul> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive and page responsive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


body {
    background-color: #FF9A8B;
    background-image: linear-gradient(90deg, #FF9A8B 0%, #FF6A88 55%, #FF99AC 100%);
    margin:0;
  }
  ul
  {
    list-style-type: none;
    padding: 0; 
  }
  .flexbox .flex-card-list {
    display:flex;
    flex-wrap:wrap;
    justify-content: center;
  }
  .flexbox .flex-card-listitem {
    display:flex;
    background-color: #fff;
    padding: 1em;
    border-radius: 10px;
  }
  
  .flexbox .flex-card {
    display:flex;
    flex-direction:column;
  }
  .flex-card-list li {
    width:400px;
    margin: .55em;
  }
  .flexbox .flex-card-content {
    display:flex;
    flex:1 0 auto; 
    flex-direction:column;
  }
  .flexbox .flex-card-content p {
    flex:1 0 auto;
    font-weight: 900;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  .flex-card-button {
   background-color: #FF6A88;
    padding: 1em;
    text-align:center;
    text-decoration: none;
    color: #202124;
    border-radius:10px;
    width:150px;
    font-weight: 900;
  }
  .flex-card-button:hover{
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .flex-card-image img{
      width:400Px;
      height:250px;
      border-radius: 12px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  .flex-card-heading{
      border:3px solid #FF9A8B;
      padding:5px;
      width:100px;
      border-radius:5px;
      text-align: center;
      color:#202124
  }
  .credit{
    text-align: center;
    color: #000;
    font-weight: 900;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
    text-decoration: none;
    color:#202124;
    font-weight: bold;
}   
We hope you would like this Responsive Blog Card Design using CSS Flexbox.

Thank you for reading our blog. If you face any problem in creating this Responsive Blog Card Design using CSS Flexbox, 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