Red Square

Solution for a challenge from Frontendpractice.com.

Github Pages | Frontend Practice

Table of Contents

• Overview
  • Built With
• Features
• Useful Resources

Overview

Built With

• Grid
• Flex
• Vanilla JS

Features

The challenge was to build an application to complete the following user stories:

• User story: Recreate the layout
• User story: Animate the sections and text fading in on scroll.
• User story: Create the blur & hover effect that appears when hovering the "Let's talk" sentence at the bottom of the page.

Useful Resources

• Dev.to
• WOW Animation
• Blog - Background Opacity & Text
• Geeks for Geeks - Before/After & Hover
• Stack Overflow - Blur & Hover
• Blog - Blur background
• Stack Overflow - Blur issues
• MDN Docs - Backdrop Filter