This was a project for Module 2 (Web Development Basics) of Scrimba's Frontend Developer Path. I made a birthday tribute page that showcased hover effects that changed the images in <div>'s. At first they look like presents, but when hovered over, they reveal animated GIFs that pair with a message in the given section.
I customized the project by changing the person it was made in tribute to and altering the GIFs that are revealed under each present. I also changed the page background image. It initially transitioned between a blue and pink image. I transition it between 5 colors that are part of a Star Trek theme - the page is dedicated to Data, from Star Trek: The Next Generation.
I also used semantic HTML elements instead of using <div> elements for all of the containers.
- background: linear-gradient()
- background-size: cover
- background-position: center
- text-shadow
- display: flex
- flex-direction: column
- align-items
- element:hover
Deployed at: https://vish213-birthday.netlify.app/