Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/0xabdulkhaliq/results-summary-component

This is a solution to the "Results Summary Component" challenge on Frontend Mentor - (Beta)
https://github.com/0xabdulkhaliq/results-summary-component

css3 frontend frontend-mentor frontendmentor-challenge google-fonts html5

Last synced: about 2 months ago
JSON representation

This is a solution to the "Results Summary Component" challenge on Frontend Mentor - (Beta)

Host: GitHub
URL: https://github.com/0xabdulkhaliq/results-summary-component
Owner: 0xabdulkhaliq
License: mit
Created: 2023-05-17T01:45:02.000Z (almost 2 years ago)
Default Branch: main
Last Pushed: 2023-05-26T14:24:29.000Z (over 1 year ago)
Last Synced: 2024-11-08T11:23:18.887Z (3 months ago)
Topics: css3, frontend, frontend-mentor, frontendmentor-challenge, google-fonts, html5
Language: HTML
Homepage: https://0xabdulkhalid.github.io/results-summary-component/
Size: 102 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

  
Results Summary Component Solution

  

    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      

  

  

    

      

  

  

    

  









## **Preview**










## **Links**

- |||

  | :----- | :----- |

  | Solution URL: | [RESULTS SUMMARY COMPONENT 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 ]](https://www.frontendmentor.io/solutions/results-summary-component-accessible-bem-vanilla-css3-D1GG5zijOk) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/results-summary-component/](https://0xabdulkhalid.github.io/results-summary-component/) |

  |||




## Pagespeed Insights Score:

  

- ||

  | :-----: |

  |  Overall score 98.3% for Both Mobile & Desktop
(Below score is for mobile devices) |

  | |

  |  |

  | |

  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-results-summary-component/h485zblpcq?form_factor=mobile) to get live score |

  ||




## The Challenge

- The challenge is to build out this Results Summary Component and get it looking as close to the design as possible.

- 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, retrieve data from `data.json` file to display the results dynamically using JavaScript




## **Built With**

 ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)  




## **Tools Used**

![Google](https://img.shields.io/badge/google-DA4437?style=for-the-badge&logo=google&logoColor=white)    ![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=for-the-badge&logo=prettier&logoColor=F7BA3E)   ![Visual Studio Code](https://img.shields.io/badge/VS%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   ![Git](https://img.shields.io/badge/Git-F05032?style=for-the-badge&logo=git&logoColor=white)




## **Acknowledgment**

- Challenge was provided by [Frontend Mentor](https://www.frontendmentor.io)




## **Let's Connect 👋**