Frontend Mentor - Results summary component solution

You can see the actual web site use this link https://burakzaif.github.io/Result-Summary-Component-UI/

This is a solution to the Results summary component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources

Overview

The challenge

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

Links

• Solution URL: Add solution URL here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

I'm happy because I learned a very nice feature in CSS. Thanks to this feature, we can tonally layer multiple colors in sequence from top to bottom or from right to left. You can see this feature in the background of the body or in the color transitions in the Score part on the right side of the application.

body{
    background: linear-gradient(to bottom, 
        hsl(0, 0%, 100%), 
        hsl(221, 100%, 96%), 
        hsl(241, 100%, 89%), 
        hsla(224, 30%, 27%, 0.1));
}

Continued development

After this project, I will continue to learn JavaScript. I really want to make dynamic my codes with JS. So will enhance my Front-End knowledge with JS and so on. That's my goal 😁.

Useful resources

• Example resource 1 - This helpmed me to find beautiful fonts for styling.