!DOCTYPE html

html lang="en"

head

    meta charset="UTF-8"

    meta name="viewport" content="width=device-width, initial-scale=1.0"

    titleTest Blog Design/title

    style

        body {

            font-family: Arial, sans-serif;

            background: #f5f5f5;

            padding: 20px;

        }

        .blog-card {

            background: #fff;

            border-radius: 10px;

            box-shadow: 0 2px 8px rgba(0,0,0,0.1);

            padding: 20px;

            max-width: 600px;

            margin: 20px auto;

        }

        .blog-card img {

            width: 100%;

            border-radius: 10px;

        }

        .blog-title {

            font-size: 24px;

            font-weight: bold;

            margin: 15px 0 10px;

        }

        .blog-meta {

            font-size: 14px;

            color: #888;

            margin-bottom: 15px;

        }

        .blog-description {

            font-size: 16px;

            line-height: 1.6;

            color: #333;

        }

        .blog-tags {

            margin-top: 15px;

        }

        .blog-tags span {

            display: inline-block;

            background: #007bff;

            color: #fff;

            padding: 3px 8px;

            border-radius: 5px;

            font-size: 12px;

            margin-right: 5px;

        }

    /style

/head

body

div class="blog-card"

    img src="https://via.placeholder.com/600x300" alt="Blog Image"

    div class="blog-title"Sample Blog Title/div

    div class="blog-meta"Posted on Sep 15, 2025 | Category: Technology/div

    div class="blog-description"

        This is a sample blog description. It contains a few lines of text to test the layout and design of your blog card. You can replace this with your test content.

    /div

    div class="blog-tags"

        spanLaravel/span

        spanHTML/span

        spanCSS/span

    /div

/div

/body

/html