CSS Grid for responsive page, Flexbox to add text & img in single line

• I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers:

* {
    margin: 0;
    box-sizing: border-box;
}

• You can apply display: block to the image to remove the white space generated underneath
• I leave you the task of researching the reset CSS and the box-sizing: border-box
• If you want to center the content in the center of the screen and keep the footer below it, you can apply these changes to your body:

body {
    font-family: "figtree";
    background: hsl(47, 88%, 63%);
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: 1fr auto; /* new */
    min-height: 100vh; /* new */
}

To improve semantics, you can change the following:

• <div class="card"> por <main class="card">
• <div class="attribution"> por <footer class="attribution">

Hello @shubham-cj!

Your solution looks great!

I have a suggestion for improvement:

• In order to make your HTML code more semantic, and since that is the main title of the screen, you can replace the <a> with <h1>. Unlike what most people think, it's not just about the size and weight of the text.

The <h1> to <h6> tags are used to define HTML headings. <h1> defines the most important heading. <h6> defines the least important heading. Only use one <h1> per page - this should represent the main heading/subject for the whole page. Also, do not skip heading levels - start with <h1>, then use <h2>, and so on.

This tag change may have little or no visual impact but they make your HTML code more semantic and improve SEO optimization as well as the accessibility of your project.

I hope it helps!

Other than that, great job!