Frontend Mentor - Sunnyside agency landing page solution

This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor.

Overview

The challenge

Users should be able to:

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

Links

• Live Site URL: https://sunnyside-agency-landing-page-bice.vercel.app/

Built with

• Mobile-first workflow
• HTML5
• Flexbox
• Next.js - React framework
• styled components - For styles

One small thing I learned

There's something called Variable Fonts.

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference... - MDN Web Docs

The challenge tells us to use the font called Fraunces, but if you just go to https://fonts.google.com/specimen/Fraunces and pick the styles, it won't work like you want to.

You need to import it like this:

<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9,700..900,50&display=swap" rel="stylesheet" />

opsz = Optical sizing SOFT = Softness

Author

• GitHub - https://github.com/devdiogo
• Frontend Mentor - @devdiogo