Athena Project #2

Book Recommendations is a website that gives the user book preferences in the following genre's: Fantasy, Mystery, Science Fiction, and Thriller. Along with recommendations there is also a page where the user can explore 4 very commmon fandoms. Theses fandoms include Grishaverse, Percy Jackson, Harry Potter, and Shadowhunters.

Book Recommendations Include: 12 Books for each genre A link to an external page that gives more information about the book

Fandom Page Include: All books in the fandom Reading order if fandom includes multiple series 2 videos pertaining to the fandom Major Character lists Personal character quizes

In order to navigate between pages there is a sidebar which when on the Book Recommendations page includes four tabs each corresponding to a different genre as well as an image that relates to said genre as well a tab that is the home page. The Book Recommendations page also includes an additional tab to navigate to to the Fandom page. Once on the fandom page there is 4 tabs that each link to a page for that specific fandom.

The home page and the fandom main page both include a second way to navigate from fandom page to fandom page and from genre page to genre page. Both of the main pages feature 4 images that correspond to a fandom and genre. Clicking on those will lead to the genre and fandom.

Each fandom page includes an image carousel that feautres images from the movie/tv show as well as music from them to play in the background. Each of the book recommendation pages also include music. I used AI to add the image carousel and music.

I made this project because I really like reading and so I wanted people to know what my favorite books are as well as what book series I could read all the time. I used HTML, CSS, and some Java Script to create this website.

I learned how to effectively used div blocks in the website since that is the basis of my website. I struggled trying to create the sidebar since it wouldn't look the way I wanted and sometimes the content would compress the sidebar.