Desktop design

Mobile design

Results summary component

<div class="left"><div class="left-head">Your Result</div><div class="result"><div class="top">76</div><div class="bot">of 100</div></div><div class="great">Great</div><div class="description"><p>You scored higher than 65% of</p><p>the people who have taken</p><p>these tests.</p></div></div>

<div class="right-head"><div>Summary</div></div>

<div class="subject" id="Reaction"><div><img src="/assets/icon-reaction-be72482d.svg" alt="">Reaction</div><div class="marks"><div class="mark">80&nbsp;</div> / 100</div></div>

<div class="subject" id="Memory"><div><img src="/assets/icon-memory-e3ffe8ec.svg" alt="">Memory</div><div class="marks"><div class="mark">92&nbsp;</div> / 100</div></div>

<div class="subject" id="Verbal"><div><img src="/assets/icon-verbal-e4311301.svg" alt="">Verbal</div><div class="marks"><div class="mark">61&nbsp;</div> / 100</div></div>

<div class="subject" id="Visual"><div><img src="/assets/icon-visual-ffe31e7d.svg" alt="">Visual</div><div class="marks"><div class="mark">72&nbsp;</div> / 100</div></div>

<div class="footer">Challenge by<a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener">Frontend Mentor</a>. Coded by <a href="https://github.com/RayAsh37/results-summary-component">Ashray Shetty</a>.</div>

Design comparison

Please log in to post a comment

Community feedback

results-summary-component

Design comparison

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community