Frontend Mentor - Sunnyside agency landing page solution

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 site depending on their device's screen size
• See hover states for all interactive elements on the page

Screenshot

Links

• Solution URL: (Website Github Repo)
• Live Site URL: (Website Live Link)

My process

• Study the layout for all devices
• Structure html to make it simple to replicate

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• Javascript DOM manipulation

What I learned

To see how you can add code snippets, see below:

window.addEventListener("resize", function(){
    if (viewport > 500) {
        viewport = this.window.innerWidth
        arrowImage.width = viewport / 40;
        console.log("Viewport: ", viewport, "\nArrow: ", arrowImage.width);
    } else {
        console.log("Something is wrong.")
    }
})
};

With this code I can update the size of any element base on the viewport width.

Continued development

• Tablet screen can be refined more

Author

• Website - David McLean
• Frontend Mentor - @davupls
• Twitter - @davutech

Acknowledgments

To my Sister for taking the time out to check how the website looked on different devices, thank you.

An to Matthew Thomas for doing the same.