aniqatc / hogwarts

🧙🏻‍♀️ Landing page for Hogwarts, fictional school from the Harry Potter series.

Hogwarts Landing Page

https://hogwarts.aniqa.dev/

🧙🏻‍♀️ 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.

Preview

Tech

• HTML5
• CSS3
• JavaScript

Key Features

• 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 @media declarations and grid-column and nth-child()
• Utilized @keyframes animations that appear on :hover for 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 else statements
• 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 for loops

Future Features

• Add footsteps that follow mouse cursor