HardGeneral
Watercolor Agency Website

👤 Client Story:

We are a creative agency focused on captivating world of art and primarily build art-related portfolios. Over time, our agency has grown, and now we're ready to showcase our unique approach to this niche through an updated design. We're excited to see our Figma designer's vision come to life. We need responsive sizing as a given and we'd like to make a good impression with some fancy animations on load and scroll.

Can you build a functional prototype for the home page?

🚀 Summary

This project will help you practice responsive design principles and includes requests related to "fancy" animations.

📗 Recommended Pre-study

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

CSS Flexbox practice game
https://flexboxfroggy.com/](https://flexboxfroggy.com

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

📋 Project Requirements:

Goal: Create an eye-catching Home page with animations and full mobile-responsiveness.

1. Navigation Bar:

   • Add an animated mobile "hamburger" menu for smaller screens.
   • Ensure tab/shift+tab navigation works seamlessly.

2. Hero Section:

   • Center the text between the top and the bottom of the image.
   • Use padding to keep the text from touching the edge of the website or the artwork.
   • Use margins to add other spacing.
   • Don't include responsive sizing (phone-size). Only check that it looks correct on desktop-size screens.
   • Create a unique "paint-stroke" loading animation for the image.
     (The visual appearance of "paint-strokes" is subjective and up to your interpretation)

3. "About our Studio" Blocks:

   • Display 3 evenly spaced blocks for desktop users.
   • Display a vertical column for mobile users.
   • Animate a fade-in for the blocks, one at a time in brief succession.

⚠️ Challenge

Rebuild this project using a Tailwind, Bootstrap, or a CSS library you've never tried.