Web Design Practice
Although I am genuinely a fan of Scooby-Doo, I also made this site in order to practice web design techniques. I've made some notes about certain design aspects of the project below. If you would like to see some of my other sites, please visit my portfolio site.
Horizontal Navigation
This page contains an example of a horizontal navigation bar with a drop-down menu. I designed the menu items to resemble the tabs on the top of file folders, changing color and increasing in height when hovered over. The horizontal menu collapses to a single button with a dropdown and a side drop-down on smaller screens.
Collapsible Content
On the series page, sections that describe the different Scooby-Doo Series can be expanded and collapsed again. I used the same technique in a slightly different way on the movies page to show and hide spoilers for the movies.
Table Sorting
On each series page, there is a table of episodes in that series with details about the plot, and the table can be sorted according to the type of monster in the episode.
Animated Logo
I've done animated logos before, but this one is a little different because it loops infinitely, spinning the flower next to the title. To be honest, I usually wouldn't recommend doing this because constant motion can be a little distracting, but this was an experiment, just to see how it would look, and most of the pages are long enough that readers will not be looking at the title most of the time. The logo also goes outside of the main header section at large screen sizes. I did this intentionally because I wanted to see how it looked.