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
• Acknowledgments

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: https://github.com/CNash23/results-comp/blob/main/index.html)
• Live Site URL: https://cnash23.github.io/results-comp/

My process

I made my sections, gave them a color and positioned them. Then added the content within each one. After doing this, I added styling and more detailed positioning of the contents within each section.

Built with

• HTML
• • CSS Grid

What I learned

I learned about the background-image linear gradient style attribute which makes blended colors. Fun! I also learned more about using spans to isolate elements for precise positioning.

.proud-of-this-css {
  background-image: linear-gradient(
    hsla(256, 72%, 46%, 1),
    hsla(241, 72%, 46%, 0)
  );
}

Continued development

I will continue to focus on learning more advanced HTML and CSS.

Author

• Website - Clea Carty
• Frontend Mentor - @CNash23

Acknowledgments

Special thanks to Frank Chambergo of Fullstack Academy for helping me with the postioning of some elements.