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.

• Overview
  • The challenge
  • Screenshot
  • Link
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

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

• Live Site URL: Results summary component

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

The recap that is recorded here is basic css which I often rarely use.

• gradient color in css:

.sec-1 {
    background: linear-gradient($Light_slate_blue_bg, $Light_royal_blue_bg);
}

• hide scrollbars for different browsers :

.container {

    // mozila
    -ms-overflow-style: none; 
    scrollbar-width: none;

    // chrome
    &::-webkit-scrollbar{ 
        display: none;
    }
}

The Sass code here can be simplified even more. The use of @import is deprecated, so the future of this project will be adapted to the latest version of SASS. In addition, use font files that can still be optimized using SASS.

• CSS Grid - the easiest guide to use the grid, there is a picture of each code that will be generated, cool
• Hide Scroll bar - Hide scroll bar, but while still being able to scroll
• @font-face rules in SASS - guide to using font files on a project in SASS with @mixin

• Frontend Mentor - @fidaatag
• Twitter - @fidaatag
• Linkedin - Fidaa Mustaghfiroh