Submitted over 1 year ago

Result summary Component

Eric Jan Estiva•230

@oceanotrash

Preview site View code

This is a solution for...Results summary component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Community feedback

C H A R A N 🎯•2,670

@0xabdulPosted over 1 year ago

Hello there well congrats on completing the results summary card component 👍

In Html :
in fact using the header tag like <h1><h2><h3><h4> this in line by line or sequence way
Ex :

<h1>Your results </h1>
<h2>great </h2>
<h3>summary </h3>

And you not use the semantic elements for Accessibility reports so fix the problem

<html>
<body>
    <header> 
       <div class="container"> 
         <div class="result"> 
           <h3 class="title">Your Result</h3> 
           <div class="circle"> 
             <h1>76</h1> 
           
             <p>of 100</p> 
           </div> 
  
           <b>Great</b> 
           <p class="info"> 
             You scored higher than 65% of the people who have taken these tests. 
           </p> 
         </div> 
       <header>
       <main>
       <div class="summary"> 
           <h2class="title">Summary</h2> 
  
           <div class="rows-summary"> 
             <div class="row"> 
               <div class="badge"> 
                 <img src="/assets/images/icon-reaction.svg" alt="reaction" /> 
                 <b>Reaction</b> 
               </div> 
               <p><b> 80</b> / 100</p> 
             </div> 
  
             <div class="row"> 
               <div class="badge"> 
                 <img src="/assets/images/icon-memory.svg" alt="reaction" /> 
                 <b>Memory</b> 
               </div> 
               <p><b> 92</b> / 100</p> 
             </div> 
  
             <div class="row"> 
               <div class="badge"> 
                 <img src="/assets/images/icon-verbal.svg" alt="reaction" /> 
                 <b>Verbal</b> 
               </div> 
               <p><b> 61</b> / 100</p> 
             </div> 
  
             <div class="row"> 
               <div class="badge"> 
                 <img src="/assets/images/icon-visual.svg" alt="reaction" /> 
                 <b>Visual</b> 
               </div> 
               <p><b> 72</b> / 100</p> 
             </div> 
           </div> 
  
           <button class="btn">Continue</button> 
         </div> 
       </div> 
      <main>
</body>
</html>

your code I should moderate for clear the Accessibility reports and Clarification..
I Hope it's useful for you
Happy Coding

Please log in to post a comment

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