Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

im using container and flexbox

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Versatile28

Posted

  1. Google Fonts Not Imported: The font-family: 'Figtree' is defined but the Google Fonts import is missing. You need to add this in the <head> section:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;500;700;900&display=swap" rel="stylesheet">
  1. Image Border Radius Not Round Enough: The image's border-radius property needs adjustment to make it fully round.

  2. Alt Text Missing for Avatar Image: The image for the avatar has no alt attribute, which is important for accessibility. Add a descriptive alt tag:

<img src="assets/images/image-avatar.webp" alt="Profile picture of Greg Hooper">
  1. Missing <main> Element: For better accessibility, wrap the card in a <main> tag:
<main class="container"> <!-- Card content --> </main>
0

Please log in to post a comment

Log in with GitHub
Discord logo

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