Blog Card using HTML and CSS

0

























Hello Developers, Learning Robo provides a dynamic and eye-catching blog card snippet to display your details at a glance. This blog card snippet is exactly how it looks in HTML and CSS. Introducing our innovative blog card snippet, carefully designed with HTML and CSS. This blog card snippet allows you to add the title of your post, an image with the author and a short description of your blog. This blog card is responsive and customizable, so you can make sure your articles shine bright and grab your audience's attention. The blog card is fully responsive, so the information can be viewed on a variety of devices, such as desktop, laptop, tablet and smartphone. Take your user experience to the next level with a modern HTML and CSS blog card snippet that allows you to impress, engage and connect the world to your blog. Note: CSS is a piece of code that is stored in a separate file that is connected to the HTML file.

How to make Blog Card using HTML and CSS.[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.

<!DOCTYPE html> <html> <head> <title>Blog Card UI design - learningrobo</title> <meta name="description" content="Blog Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="blog card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="section1"> <div class="card"> <div class="cardin1"> <img src="https://images.freeimages.com/images/large-previews/079/quiet-place-1369425.jpg?fmt=webp&w=350" alt="Profile Image"> <h2>Post Title</h2> <h6>Author : Unknown <br> <i class="fa-solid fa-calendar-days"></i> 12 August 2023</h6> </div> <div class="cardin2"> <p>Explore the breathtaking beauty of untouched wilderness, where nature's symphony of flora and fauna harmonizes in perfect serenity.</p> <button>Read More..</button> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </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 make a file with a .css extension. 


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
*{
    box-sizing: border-box;
}
body{
    font-family: Arial, sans-serif;
    margin:0%;
}
.section1{
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);  
}
.card{
    display: flex;
    flex-direction:column;
    align-items:center;
    border-radius: 10px;
    width:300px;
    height:450px;
    background-color:#fff;
    padding:10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}
.cardin1{
    padding:10px;
    display: flex;
    flex-direction:column;
    border-radius: 10px;
    width:100%;
    height:290px;
}
.cardin1 img{
    width: 100%;
    height:200px;
    border-radius: 5px;
    object-fit:cover;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}
.cardin1 h2{
    margin:10px 0px 0px 0px;
    font-family: 'Play', sans-serif;
    font-size: 29px;
}
.cardin1 h6{
    margin:2px 0px 10px 0px;
    font-size:10px;
}
.cardin2{
    padding:10px;
    display: flex;
    flex-direction:column;
    justify-content:end;
    border-radius: 10px;
    height:140px;
}
.cardin2 p{
    margin:0px;
    font-size:14px;
}
.cardin2 button{
    margin:10px 0px;
    border:none;
    padding:10px 15px;
    background-color:#ff9a9e;
    border-radius:10px;
    font-size:16px;
    transition:.5s;
}
.cardin2 button:hover{
    transform: scale(1.05);
    cursor: pointer;
}
@media only screen and (max-width: 630px){
    .card{
        width:90%;
    }
}
.credit a{
    text-decoration: none;
    color: #fff;
    font-weight: 800;
}
.credit{
    color: #fff;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Blog Card using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Blog Card using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome