Textbook Gallery

1. Features I included:

Semantics:

• Figure, hgroup, main, section, article, aside, nav, header, footer, table

Animation (CSS Transition / CSS KeyFrames):

1. Trigger transitions and animations on hover
2. The buttons on the textbooks have a fade-in and swoop-up animation - Keyframes
3. Overlay & zoom in on the textbooks - Transition
4. Hover selection of the About Section card and the navigation buttons

Responsiveness:

• Bootstrap Grid system for layout responsiveness

Accessibility:

1. Reduced Motion Option
2. Customized Dark Mode
3. Full Keyboard Navigation

1. References:

1. I used a certain color combination from a website that shows some cool color combinations that you can try. I did also tweak the color combination a little bit to fit my personal taste too. Only used this site to know what color codes go well together. Here is the one line of code I used.

• https://grabient.com/HQNhE4BpgFhBmIDsJowIzOvC0BMArIUhvtKjBRgByQaw1TDwAMr0NM+QA?angle=45
• "background: linear-gradient(45deg, #3a51c8 0%, #a22b9a 50%, #efa61e 100%);"

3. Notes (Important):

Because the information about the books are not important, I have copied the same book information across all book pages and Gallery.