Skip to content
Submitted about 2 years ago

four-card-feature-section-master

SEIFELESLLAM SEIF•110
@SEIFSEIF4
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

Any feedback are welcome

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Do not set up your media query in this manner, "(width>=768px)" it is not fully supported.

    • To give your HTML code structure, you want to set up your code in the following manner:

    <body>
   <header></header>
   <main>
      <section>
            <div class="supervisor-card"></div>
            <div class="team-card"></div>
            <div class="karma-card"></div>
            <div class="calculator-card"></div>
      </section>
   </main>
</body>

    The Header Element represents the your site’s introductory content.

    The Main Element identifies the main content of your content..

    The Section Element is used to wrap content that is related to each other, which these four cards are.

    Lastly, since none of the cards can stand on their own, a simple Div will do for each card.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 🍂🦃

    Marked as helpful
    1
    SEIFELESLLAM SEIF•110
    @SEIFSEIF4Posted about 2 years ago

    @vcarames hey as always i appreciate your suggestions

    • for the media query (width>=768px)just do the job and I am planning to add more media to add more Responsibility but after I fully understand this : (https://web.dev/learn/design/) this very useful btw thank you

    • For Semantic HTML5 Elements & Accessibility i am working on improving it also and i will update all prev Code ASAP

    0
    バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

    @SEIFSEIF4

    Your coding is continuously improving every time that I see them. Keep up the great work!

    https://web.dev is a great website. I like that they are still adding to it.

    Marked as helpful
    1
    SEIFELESLLAM SEIF•110
    @SEIFSEIF4Posted about 2 years ago

    @vcarames I'm so grateful for your words.it actually motivate me a lot.

    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