Frontend Mentor - Results summary component solution

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
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

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

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: (https://patejo-coder.github.io/results-summary-component-main/)

My process

I demarcated all the elements on the page and defined the way I would create my Layout, after defining the step by step I would follow, I started styling one item at a time, going from left to right.

In this challenge in question, what made it most difficult for me was making :Hover increase the

and as a consequence it activated the Opacity of the image that was hidden in the

.

Built with

• Semantic HTML5 markup
• CSS (:Hover, .Scale, Opacity, Transisiton)
• Flexbox
• CSS Grid

What I learned

In this challenge in question I used the display grid to define the positioning of the elements, and something I learned and was very proud of was the use of: Hover to change the properties of the elements when hovering the mouse over them, in addition to the use of propiedae. Scale which was also of great help for the interactivity I created on the page.

These properties made some very charming effects possible.

.proud-of-this-css {
  #orange {
    background-color: hsl(0, 100%, 67%, .09);
    transition: .5s;
}

#orange:hover {
    scale: 1.1;
}

#orange img {
    opacity: 0;
    transition: 1s;
}

#orange:hover img {
    opacity: 1;
}
}

Continued development

I want to continue developing my knowledge about properties that can contribute to a good styling of the website, a good example of this is the use of :HOVER which allows me to make some effects that in my case so far are simple, but which are also very effective .

Author

• Frontend Mentor - @patejo-coder
• Instagram - @patejo_sama