https://github.com/syntapy/fcc_tribute
Tribute to Abdul-Baha. Freecodecamp css project
https://github.com/syntapy/fcc_tribute
Last synced: 6 months ago
JSON representation
Tribute to Abdul-Baha. Freecodecamp css project
- Host: GitHub
- URL: https://github.com/syntapy/fcc_tribute
- Owner: syntapy
- Created: 2021-10-19T23:09:45.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-01-10T00:35:08.000Z (over 3 years ago)
- Last Synced: 2025-02-08T06:14:05.224Z (over 1 year ago)
- Language: HTML
- Size: 192 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Intro
=====
My first CSS project for freecodecamp
View on [Github Pages](https://syntapy.github.io/fcc_tribute/)
Implemented based in [figma design](https://www.figma.com/file/V2DberliY6Y7uoZTu7vYsV/Abbas-Effendi-Tribute?node-id=0%3A1&t=DEqw7dAmPYHP0N2k-1) I made
Tested in Firefox 108 devtools
Todo
====
Main thing left is to support all screen sizes. It looks unprofessional to have part of an element cut off at the bottom of the page
I can fix this in pure CSS through animations, where top elements dissappear and lower elements appear as you scroll down
I could also fit the elements into the page on a case by case basis with respect to screen dimensions
But this requires the height and width of the quote element, which needs a simple line of javascript incorporated
Animation Approach
------------------
For all sizes
- [ ] screenshot tests
- [ ] h1 should be title, h2s in main portion
- [ ] make sure remote fonts are enabled
- [ ] double check sizes are good for both fonts enabled/fonts disabled
- media query?
- [ ] img should have more padding / margin in portrait/mobile mode
- [ ] img should fill right side in landscape mobile mode
- [ ] max width of quote in large landscape screens
- [ ] subtitle should not go beyond picture
- [ ] decrease space between quote and attribution
- [ ] header should fill screen when scrolled to top
- [ ] quote should not be cut-off in smaller portrait modes
- [ ] add tiny turqoise outline to picture
Animation types
- [ ] type 1
- pg load
- img fades in and moves up a little
- scroll down
- img fades out while quote fades in
- quote fades out while text body fades in except top bar
- top bar fades in fast at/near top
- small scroll resistance between fades
- Maybe?? -> fast fade out at small top horizontal sliver
- [ ] type 2
- pg load
- img / quote fade in together
- scroll down
- img / quote fade out together
- text body fades in except top bar
- top bar fades in fast at/near top
- small scroll resistance between fades
- Maybe?? -> fast fade out at small top horizontal sliver
- [ ] type 3
- Everything fades in on pg load
- No fade in on switch to landscape
- Nothing fades on scroll down
Browsers
- [ ] Firefox
- [ ] Firefox esr
- [ ] Chromium
- [ ] Webkit
Common Screen Sizes
- 360 x 640
- 360 x 720
- 360 x 760
- 360 x 780
- 375 x 667
- 375 x 812
- 414 x 736
- 414 x 896
- 768 x 1024
- 1366 x 768
- 1440 x 900
- 1536 x 864
- 1920 x 1080