Skip to content
Submitted over 2 years ago

Four Card feature section

FARAZ ALI•110
@farazali00
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

mistakes are accepted!

Community feedback

  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    Congratulations on your solution Faraz. It's a great step in the right direction. Here are few tips to make it look better:

    1. Use Grid layout with two rows and three columns
    2. The card on the left will span two rows and one column on the left.
    3. The card on right will span 2 rows and one column on the right
    4. The other two cards will span one row each and on the same column.
    5. Give your grid-container align-items property and value of center
    Marked as helpful
    1
    FARAZ ALI•110
    @farazali00Posted over 2 years ago

    @qudus2019 Thanks brother

    0
  • Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    To reduce the accessibility issues, always use landmarks in your html

    1
    FARAZ ALI•110
    @farazali00Posted over 2 years ago

    @qudus2019 what do you mean by landmarks?

    0
    Abdulqudus Sanusi•500
    @qudus2019Posted over 2 years ago

    @farazali00 landmarks are used to group content together for better accessibility and SEO;

    Examples of landmarks are : main tag, header tag, footer tag, div tag , section tag, article tag ,aside tag:

    Use case example : In the code below, main tag, header tag, footer tag and div tag with class of student, are serving as landmarks. Main tag groups the main content in your HTML together.

    In the above, div groups related info together i.e h1 and p.

    Read more on landmarks

        <body>
       <header></header>
        <main> 
           <div class="student">
               <h2>Student</h2>
                 <p>Student description</p>
              </div>
          </main>
<footer></footer>```
    Marked as helpful
    1

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