Submitted about 1 month ago

Blog preview card

hkaur108•100

@hkaur108

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

Djamel1133•880

@Djamel1133Posted about 1 month ago

Hi again, good job, you're moving forward. I am sorry to tell you this, but I noticed some remarks:

Not all HTML should be a series of div elements. For example:

<div class="parent-container">
    <div class="card-wrapper">
        <div class="img-container"></div>
        <div class="info-container"></div>
</div>

Try to use semantic HTML elements (e.g., body, footer, main, section) and group related elements in a single div or section to style them in your CSS file.

Special characters like & should be replaced with HTML entities. See HTML Entities. I think this (&) is the origin of all your problems.

To center your content (parent-container), you can use Flexbox. Try this:

main {  /* Add <main> at the top of the <body> in your HTML file */
    height: 100vh;  /* 100% of screen height */
    display: flex;
    justify-content: center;  /* Center elements horizontally */
    align-items: center;  /* Center elements vertically */
}

For images, use an img tag directly (do not use background images):

<div class="img-container">
    <img class="hero-image" src="assets/images/illustration-article.svg" alt="Image of code fragment with HTML tags">
</div>

And style the image in your CSS file:

.hero-image {
    width: 100%;
    margin: auto;
    margin-bottom: var(--spacing-medium);
}

Note that the source of the image is given by the src attribute in the img tag in the HTML file.

See you at the next challenge and enjoy!

Marked as helpful

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord