https://github.com/jdegand/red-square

Frontend Practice Challenge - Red Square
https://github.com/jdegand/red-square

frontend-practice

Last synced: over 1 year ago
JSON representation

Frontend Practice Challenge - Red Square

• Host: GitHub
• URL: https://github.com/jdegand/red-square
• Owner: jdegand
• License: mit
• Created: 2021-10-13T20:58:30.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2021-10-13T21:02:45.000Z (almost 5 years ago)
• Last Synced: 2025-01-22T09:12:59.127Z (over 1 year ago)
• Topics: frontend-practice
• Language: CSS
• Homepage: https://jdegand.github.io/red-square/
• Size: 2.19 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
Red Square




   Solution for a challenge from  Frontendpractice.com.





  


    

      Github Pages

    

     | 

    

      Frontend Practice    

    

  



## Table of Contents

- [Overview](#overview)

  - [Built With](#built-with)

- [Features](#features)

- [Useful Resources](#useful-resources)

## Overview

![](red-square-desktop.png)

![](red-square-mobile.png)

### Built With

- Grid 

- Flex

- Vanilla JS

## Features

The [challenge](https://www.frontendpractice.com/project/red-square) was to build an application to complete the following user stories:

- [x] User story: Recreate the layout

- [x] User story: Animate the sections and text fading in on scroll.

- [x] 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](https://dev.to/jslim/fading-up-sections-using-intersection-observer-3fhj)

- [WOW Animation](https://wowjs.uk/)

- [Blog](https://coder-coder.com/background-image-opacity/) - Background Opacity & Text

- [Geeks for Geeks](https://www.geeksforgeeks.org/how-to-write-hover-condition-for-abefore-and-aafter-in-css/) - Before/After & Hover

- [Stack Overflow](https://stackoverflow.com/questions/54917586/blur-entire-background-on-hover/54917700) - Blur & Hover

- [Blog](https://blog.prototypr.io/how-to-make-a-background-blur-in-css-with-one-line-of-code-e446c7236e60) - Blur background

- [Stack Overflow](https://stackoverflow.com/questions/20377990/why-doesnt-blur0-remove-all-text-blur-in-webkit-chrome-on-retina-screens) - Blur issues

- [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) - Backdrop Filter