This is a solution to the Sunnyside agency landing page challenge on Frontend Mentor.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Live Site URL: https://sunnyside-agency-landing-page-bice.vercel.app/
- Mobile-first workflow
- HTML5
- Flexbox
- Next.js - React framework
- styled components - For styles
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
- GitHub - https://github.com/devdiogo
- Frontend Mentor - @devdiogo