HardGeneral
Author Footer

👤 Client Story:

I'm an author that writes creative children's books. My website is bright and colorful but I feel like it could be more interactive and it could create more enthusiasm around my upcoming book releases. So I'd like to redo the footer and add a book preview with a form to sign up for my new newsletter. I'm not happy with the font for "Coming soon" so please add a new one. Also, to make the books interactive, lets flip the book-image over and show a text summary on the back.

Can you implement a creative soution?

🚀 Summary

This project will help you practice CSS flexbox principles and necessitate understanding of the box-model for padding and margin. Additionally, this hard level project includes common requests related to creative choices and design modification.

📗 Recommended Pre-study

CSS Box-model
https://css-tricks.com/the-css-box-model/\

CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flip Cards
https://devsnap.me/css-flip-cards

📋 Project Requirements:

Goal: Build a mobile-responsive grid of books with interesting animations and detailed footer for a Children's author.

1. Coming Soon:

   • Space the books evenly, add shadow and spacing around.
   • Display 2 books at a time for mobile users.
   • Display 4 books for desktop users.
   • Select and link a new font in the head section.

2. Footer:

   • Setup working call and social media links.
   • Ensure the left and right sections don't have too much space on mobile devices.
   • Stack the content vertically centered for mobile devices.
   • Ensure shift/shift+tab navigation works and can submit the form.

3. Interactivity:

   • Use 3d CSS transforms to flip the book on click.
   • Include a clickable link on the back side to "read more."
   • Make sure the input is formatted as an email.
   • Ensure tab/shift+tab navigation flips the books and can access the links.

⚠️ Challenge

Try expanding the project to include a hero section and navigation bar above the given sections.