Yourhub

CSS CARD: Create a responsive CSS Card using HTML and CSS

Author- Premraj MS

Create a responsive BLOG Card using HTML and CSS: A CSS card is a web design component that uses CSS to create a box-like element with rounded corners, shadows, and other visual effects. CSS cards can display content, including blog posts, product listings, and user profiles. In this post, I am sharing how to create a responsive CSS BLOG Card using HTML and CSS.

A blog card is a component that displays a summary of a blog post, typically including the post title, featured image, and a short excerpt. Blog cards are often used on blog homepages and archive pages to showcase a selection of recent or popular posts.

The terms "blog card" and "CSS card" are often used interchangeably, and the distinction between them may not be universally agreed upon. However, it's important to note that these terms can carry slightly different connotations in the context of web development and design. Let's delve into the subtle differences between the two:

1. Blog Card:

  • A blog card is typically a specific component or design element used to showcase or preview blog posts on a website or blog archive.
  • It is specifically tailored to present blog post content in a visually appealing and structured manner, often including elements like the blog post title, author, publication date, a brief excerpt, and an image or featured thumbnail.
  • Blog cards are designed to encourage users to click on the card to access the full blog post or article.

2. CSS Card:

  • A CSS card, on the other hand, is a more general term used to describe a content container or display element that can be used for various purposes, not just for blog posts.
  • CSS cards are versatile and can be employed to showcase different types of content, such as products, services, user profiles, portfolio items, or any other information that can be logically organized into a card-like layout.
  • CSS cards are often defined and styled using CSS, which controls the visual presentation, including elements like colours, borders, shadows, and responsive behaviour.

Source code

This CSS will create a blog card with rounded corners, a shadow, and a hover effect. This CSS card can be customized to match the design of any website. They are a versatile and effective way to display content in a visually appealing way. 

Index.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- FOR RESPONSIVENESS -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- TITLE  -->
    <title>Cards in html css</title>

    <!-- CSS EXTERNAL LINKING -->
    <link rel="stylesheet" href="style.css">

    <!-- fontawesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <!-- MAIN CONTAINER  -->
    <div class="container">
        <h1><center>CSS CARD</center></h1><br><br>
        <!-- BLOG CARDS CONTAINER  -->
        <div class="blogcards">

            <!-- CARD NO 1  -->
            <div class="card">
                <div class="image">
                    <span class="lable"><i class="fa fa-tags" aria-hidden="true"></i> Nature</span>
                    <img src="https://cdn.pixabay.com/photo/2023/07/28/14/37/flower-8155370_1280.jpg" alt="">
                </div>
                <div class="heading">
                    <h2><a href="#">Most expensive flower in the whole world?</a></h2>
                </div>
                <div class="cardInfo">
                    <span class="author"><i class="fa fa-user" aria-hidden="true"></i> Fluratech</span>
                    <span class="comments"><i class="fa fa-comment-o" aria-hidden="true"></i> 100</span>
                </div>
                <div class="cardParagraph">The most expensive flower in the world is the Juliet Rose, which sold for
                    $15.8 million. 
                </div>

            </div>

            <!-- CARD NO 2  -->
            <div class="card">
                <div class="image">
                    <span class="lable"><i class="fa fa-tags" aria-hidden="true"></i> Nature</span>
                    <img src="https://cdn.pixabay.com/photo/2023/09/16/22/05/japan-8257601_1280.jpg" alt="">
                </div>
                <div class="heading">
                    <h2><a href="#">Where is the waterfall in jurassic park?</a></h2>
                </div>
                <div class="cardInfo">
                    <span class="author"><i class="fa fa-user" aria-hidden="true"></i> Fluratech</span>
                    <span class="comments"><i class="fa fa-comment-o" aria-hidden="true"></i> 100</span>
                </div>
                <div class="cardParagraph">The waterfall in Jurassic Park is Manawaiopuna Falls, also known as Jurassic Falls.
                </div>

            </div>

            <!-- CARD NO 3 -->
            <div class="card">
                <div class="image">
                    <span class="lable"><i class="fa fa-tags" aria-hidden="true"></i> Nature</span>
                    <img src="https://cdn.pixabay.com/photo/2023/09/15/15/52/african-lily-8255030_1280.jpg" alt="">
                </div>
                <div class="heading">
                    <h2><a href="#">Most expensive flower in the whole world?</a></h2>
                </div>
                <div class="cardInfo">
                    <span class="author"><i class="fa fa-user" aria-hidden="true"></i> Fluratech</span>
                    <span class="comments"><i class="fa fa-comment-o" aria-hidden="true"></i> 100</span>
                </div>
                <div class="cardParagraph">The most expensive flower in the world is the Juliet Rose, which sold for
                    $15.8 million. 
                </div>

            </div>

            

        </div>

    </div>
</body>

</html>

style.css



@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;800&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
}

body{
    background-color: rgb(255, 255, 255);

}

.container{
    max-width: 1000px;
    margin: auto;
}

.blogcards{
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-gap: 30px;
    
}

.blogcards .card{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    background-color: rgb(255, 255, 255);
    border-radius: 0 0 20px 0;
}
    
.blogcards .card .image{
    overflow: hidden; 
    width: 100%;
    height: 200px;
}
.blogcards .card .image img{
    height: 200px;
    width: 100%;
    transition: 0.3s all ease-in-out;
    
}
.blogcards .card .image img:hover{
    transform: scale(1.9);
}

.blogcards .card .image .lable{
    background-color: rgb(112, 179, 103);
    padding: 3px 5px 3px 5px;
    font-weight: 500;
    color: white;
    position: absolute;
    margin: 5px 10px 5px 5px;
    font-size: 13px;
}

.blogcards .card .heading{
    padding:15px 10px 0 10px;
}
.blogcards .card .heading h2{
    font-size: 20px;
}
.blogcards .card .heading h2 a{
    color: rgb(71, 114, 255);
}
.blogcards .card .heading h2:hover a{
    color: rgb(56, 56, 56);
}

.blogcards .card .cardInfo{
    font-size: 14px;
    padding: 10px;
    color: rgb(87, 87, 87);
}

.blogcards .card .cardInfo span{ margin-right: 10px;}

.blogcards .card .cardParagraph{
    font-size: 15.5px;
    color:rgb(43, 42, 42) ;
    padding: 0 10px 20px 10px;
    font-weight: 400;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* MEDIAQUERY FOR RESPONSIVENESS */

@media only screen and (max-width: 1000px) {
    .blogcards{
        display: grid;
        grid-template-columns: 45% 45%;
        grid-gap: 10%;
        margin: 20px;
    }
  }
  @media only screen and (max-width: 500px) {
    .blogcards{
        display: grid;
        grid-template-columns: auto;
        grid-gap: 30px;
        margin: 20px;
    }
  }

This HTML code you provided is for a blog card with an image, heading, author, comments and paragraph. The CSS code is used to style the blog card and make it responsive.

Summary of the Source code:

HTML

  • The <html> and </html> tags enclose the entire HTML document.
  • The <head> and </head> tags contain information about the document, such as the title and meta tags.
  • The <body> and </body> tags contain the content of the document, such as the blog cards.
  • The <div> tag is used to create a container for the blog cards.
  • The <img> tag is used to insert an image into the blog card.
  • The <h2> tag is used to create a heading for the blog card.
  • The <author> and <comments> tags are used to display the author and number of comments for the blog card, respectively.
  • The <paragraph> tag is used to display the paragraph text for the blog card.

CSS

  • The @import rule is used to import another CSS file.
  • The * selector matches all elements in the document.
  • The margin and padding properties are used to control the space around elements.
  • The box-sizing property is used to control how the margin and padding are calculated.
  • The text-decoration property is used to control the text decoration, such as underlines and overlines.
  • The font-family property is used to specify the font family for the text.
  • The background-color property is used to set the background color of an element.
  • The max-width property is used to specify the maximum width of an element.
  • The margin property is used to control the space around an element.
  • The display property is used to specify the display type of an element.
  • The grid-template-columns property is used to specify the number of columns in a grid layout.
  • The grid-gap property is used to specify the space between grid items.
  • The box-shadow property is used to add a shadow to an element.
  • The overflow property is used to control how content that overflows an element is displayed.
  • The width and height properties are used to specify the width and height of an element.
  • The transition property is used to specify how an element's properties should change over time.
  • The transform property is used to transform an element, such as scaling, rotating, or translating it.
  • The position property is used to specify the position of an element relative to its parent element.
  • The font-size property is used to specify the size of the text.
  • The color property is used to specify the colour of the text.

The CSS code also includes media queries to make the blog card responsive. This means that the blog card will be displayed differently depending on the screen size of the device. For example, on smaller screens, the blog card will be displayed in a single column, but on larger screens, it will be displayed in two columns.

In conclusion, sharing the source code for a blog card is a valuable and practical endeavour for web developers and designers. It allows for the exchange of knowledge, fosters collaboration, and promotes the creation of visually appealing and user-friendly blog post previews on websites. By offering transparency and accessibility to the code that powers these components, we empower fellow developers to learn, adapt, and customize blog cards to their specific needs.

The sharing of source code not only accelerates the development process but also encourages innovation and the enhancement of user experiences. Through this practice, the web development community can collectively raise the bar for the quality of content presentation and interactivity on the internet.

So, whether you're a seasoned developer sharing your expertise or a learner seeking to understand and implement blog cards, the act of sharing source code exemplifies the spirit of open collaboration and continuous improvement that drives the world of web development forward. It is a testament to the power of knowledge sharing in shaping the digital landscape and ensuring that the web remains an engaging and dynamic platform for information dissemination.

Discussions

Post a Comment