Skip to content
Submitted over 1 year ago

Result Summary Component Solution (Not responsive; Only for desktop)

h415232•110
@h415232
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a hard time creating the summary cards (the one with colors). Can you suggest a way to make the alignment of the SVG image and the text better? I am admittedly using hard-coded pixel values, but I think using CSS Flex box, but I am new to CSS Flex box so I was not able to make it as dynamic as possible.

Any feedback will be helpful, thanks! :)

Community feedback

  • C H A R A N 🎯•2,670
    @0xabdulPosted over 1 year ago

    Hey there Congratulations on finishing the Result summary card component 🤩

    • In Html : 🏷️
    • the html Document should be contained only one main landmarks ✅
    • The main landmarks..?
    • A main landmarkidentifies the primary content of the page
    • If a page includes more than one main landmark, each should have a unique label.
    • for easy way to using the non- semantic elements clear the all Accessibility reports👍
    • EX :
    <body>
<div class="main" role="main">
//Whole html code here 🏷️
</div>
</body>
    • in fact using the header tag by ordering or sequence Ex : <h1> , <h2> , <h3> , <h4><h5> , <h6>
    • please Avoid ☝️
    <h3>great  </h3>
<h1>summary  </h1>
<h4> </h4>
<h2>great  </h2>
    • please do👍
    <h1>your results </h1>
<h2>great </h2>
<h3>summary </h3>
<h4> 100</h4>
    • the Accessibility reports clear..
    • In Css 🎨
    • in this result summary card is not center align so fix the problem
    • EX :
    body {
display : flex;
align-items : center;
justify-content : center;
height : 100vh;
overflow-x : hidden;
}
    • Happy Code ✨
    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