Frontend Mentor - Loopstudios landing page

The challenge

The challenge is to build out this landing page and get it looking as close to the design as possible.

Figma and Sketch files are provided
Optimized assets are found in the /images folder.
There is also a style-guide.md file, which contains the information such as color palette and fonts.

User Stories:

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

Tools I used

Javascript
SCSS
BEM
Grid and Flexbox
Figma
Animate On Scroll library
Perfect Pixel

Learning outcomes

My focus for this project is to improve accessibility practices. I was able to implement:

Skip links
Screen-reader only text
ARIA labels
Styling focus outlines
Meaningful alt text
Subtle scroll animations and transitions
Use of srcset and source for <picture> tags

My profile at Frontendmentor

Solution preview