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:

1. Skip links
2. Screen-reader only text
3. ARIA labels
4. Styling focus outlines
5. Meaningful alt text
6. Subtle scroll animations and transitions
7. Use of srcset and source for <picture> tags

My profile at Frontendmentor

emestabillo

Solution preview