Skip to content
Submitted 2 months ago

im using container and flexbox

Muhammad Dzaky Kurniawan•20
@zakkunaw
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Satyaki Pal•20
    @Versatile28Posted about 1 month ago
    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

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