Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/0xabdulkhaliq/sunnyside-agency-landing-page

This is a solution to the "Sunnyside Agency Landing Page" challenge on Frontend Mentor
https://github.com/0xabdulkhaliq/sunnyside-agency-landing-page

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

Last synced: 11 days ago
JSON representation

This is a solution to the "Sunnyside Agency Landing Page" challenge on Frontend Mentor

Host: GitHub
URL: https://github.com/0xabdulkhaliq/sunnyside-agency-landing-page
Owner: 0xabdulkhaliq
License: mit
Created: 2023-05-24T03:25:34.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2024-03-02T16:43:16.000Z (9 months ago)
Last Synced: 2024-08-14T03:38:16.153Z (3 months ago)
Topics: css3, frontend, frontend-mentor, frontend-mentor-challenge, google-fonts, html5, javascript
Language: CSS
Homepage: https://0xabdulkhalid.github.io/sunnyside-agency-landing-page/
Size: 283 KB
Stars: 1
Watchers: 1
Forks: 2
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        


  

  
Sunnyside Agency Landing Page Solution

  

    Frontend Mentor Challenge

    


    


    View Demo

     · 

    Report Bug

     · 

    Request Feature

  





  

  

    

      

  

  

    

      

  

  

    

  









## **Preview**










## **Links**

- |||

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

  | Solution URL: | [SUNNYSIDE LANDING PAGE 🎯 [ ACCESSIBLE - BEM - VANILLA CSS3 - ES6 ]](https://www.frontendmentor.io/solutions/sunnyside-landing-page-accessible-bem-vanilla-css3-es6-FrM6b1vi3w) |

  | Live Site URL: | [https://0xabdulkhalid.github.io/sunnyside-agency-landing-page/](https://0xabdulkhalid.github.io/sunnyside-agency-landing-page/) |

  |||




## Pagespeed Insights Score:

  

- ||

  | :-----: |

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

  | |

  |  |

  | |

  | Check out [**Pagespeed Insights**](https://pagespeed.web.dev/analysis/https-0xabdulkhalid-github-io-sunnyside-agency-landing-page/wmmfau2ycs?form_factor=desktop) to get live score |

  ||




## The Challenge

- The challenge is to build out this Sunnyside Agency Landing Page and get it looking as close to the design as possible.

- Users should be able to:

    - View the optimal layout for the site depending on their device's screen size

    - Usage of Hamburger menu for mobile devices to display navigational links

    - See hover states for all interactive elements on the page




## **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)   ![JavaScript](https://img.shields.io/badge/JavaScript%20-%23F7DF1E.svg?style=for-the-badge&logo=javascript&logoColor=black)




## **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 👋**