Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Use the local JSON data to dynamically populate the content
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Below are clearer class names at a glance. Still a work in progress, but I'm improving
<div class="desktop-container">
<section class="results-section">
<header class="results-section-header">Your Result</header>
<div class="results-section-score">
76 <span class="out-of-total">of 100</span>
</div>
<div class="results-section-text-container">
<div class="results-section-text">
<div>Great</div>
<span class="results-section-percentage">
You scored higher than 65% of the people who have taken these tests!
</span>
</div>
</div>
</section>
<section class="summary-section">
<h3 class="summary-section-header">Summary</h3>
<div class="reaction-category">
<span
><img src="./assets/images/icon-reaction.svg" alt="bolt-icon" />
Reaction</span
>
<span class="summary-section-test-scores"
>80<span class="out-of-total"> / 100</span></span
>
</div>
<div class="memory-category">
<span>
<img src="./assets/images/icon-memory.svg" alt="brain-icon" />
Memory</span
>
<span class="summary-section-test-scores"
>92<span class="out-of-total"> / 100</span></span
>
</div>
<div class="verbal-category">
<span>
<img src="./assets/images/icon-verbal.svg" alt="speech-bubble-icon" />
Verbal</span
>
<span class="summary-section-test-scores"
>61<span class="out-of-total"> / 100</span></span
>
</div>
<div class="visual-category">
<span>
<img src="./assets/images/icon-visual.svg" alt="eye-icon" />
Visual</span
>
<span class="summary-section-test-scores"
>72<span class="out-of-total"> / 100</span></span
>
</div>
<button class="continue-button">Continue</button>
</section>
</div>Below is some CSS that I was new to using: gradients
.results-section {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background: linear-gradient(
180deg,
rgba(119, 85, 255, 1) 20%,
rgba(47, 44, 233, 1) 100%
);
height: 45rem;
border-radius: 0 0 70px 70px;
text-align: center;
}Working on using relative units of measurement rather than hardset ones for ease of use on diff screen sizes
- Website - Click here to view site
- Frontend Mentor - @LBuchananCates
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent