🧙🏻♀️ A landing page about the fictional institution, Hogwarts, from the Harry Potter series. Utilizes CSS grids, flexbox, animations, form validation, if-else statements based on user inputs, and for loops to enable toggling between different content.
- HTML5
- CSS3
- JavaScript
- A fully responsive and minimalistic webpage
- Courses section: overlayed text on an element that appears on
:hover - Courses section: responsive grid with the help of
@mediadeclarations andgrid-columnandnth-child() - Utilized
@keyframesanimations that appear on:hoverfor all buttons and text overlays - Sticky navigation that appears at the bottom of the window after the hero is no longer in the viewport using
IntersectionObserver - Functional form with logic built with
if elsestatements - Form has two buttons that execute different logic and print different messages based on user input
- Form validation to avoid incomplete or empty answers - printing a message to prompt user to complete the form again
- Utilized
scrollIntoView()to allow smooth scrolling - Created cards with a subtle animation to represent each Hogwarts house — clicking on each card will toggle content relating to the respective Hogwarts house
- Used nested
forloops
- Add footsteps that follow mouse cursor