MediumGeneral
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.

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 medium 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/

📋 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:

   • Not included in "Medium" level.

⚠️ Challenge

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