Tychos-Supernova icon indicating copy to clipboard operation
Tychos-Supernova copied to clipboard

A tribute page for the supernova that changed the world and the curiosity to understand it

Tycho's Supernova

Tycho's Supernova is a tribute page, part of Free Code Camp project work. It's a self-directed projected complete with the content and the design.

Objectives

  • Create an interesting parallax scrolling effect to help the page tell a story.
  • Create a fully responsive design without the use of external libraries.
  • Create a CSS grid layout that allows for different experiences on different devices and screen sizes.

Technologies Used

  • HTML
  • CSS

User Stories

  • User can scroll down the page and read the story of SN1572.
  • User can see a parallax effect on non-touch screen devices.
  • User can see css animations and transitions throughout.
  • User can click on links to learn more
  • User can click on the creator's link to twitter and the github project

Screenshots and details

Parallax scrolling used to create color to BnW change
The use of different techniques to amplify the illusion of "windows" and aid in telling a narrative
Animated text, links, and footer
Using grid to create an alternative adappted for mobile