Graycemuthui/Sunnyside

This is a landing page website for Sunnyside Agency

Sunnyside agency landing page

This is a solution to the Sunnyside agency landing page 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
• Useful resources
• Author
• Contributing
• Show your support

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: Add live site URL here

My process

Built with

• HTML
• CSS
• Javascript

What I learned

I got to revise on HTML, CSS AND JS. Also got to get a better understanding of creating a hamburger menu with a different approach from what I am used to. I also learnt how to use grid.

• Here is some code I'm proud of

<div class="hamburger">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</div>

.clip-path: polygon(0 4%, 90% 4%, 100% 0, 100% 99%, 75% 100%, 30% 100%, 0 100%);

document.querySelectorAll(".nav-links").forEach((n) =>
  n.addEventListener("click", () => {
    hamburger.classList.remove("active");
    navLinks.classList.remove("active");
  })
);

Useful resources

• Hamburger Menu - This helped me with my hamburger menu.
• Clipper - This helped me create the message like shape on the hamburger menu.

Author

• Website - Grayce Muthui
• Frontend Mentor - @Graycemuthui
• Twitter - @Grayce_Muthui

🤝 Contributing

• Contributions, issues, and feature requests are welcome!

• Feel free to check the issues page.

Show your support

• Give a ⭐️ if you like this project!