MediumGeneral
Watercolor Agency Website 2

👤 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 don't have a font license yet so please use something from Google fonts.

Can you build a functional prototype for the home page?

🚀 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 screen-size reponsiveness.

📗 Recommended Pre-study

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

CSS Position (absolute/relative)
https://css-tricks.com/almanac/properties/p/position/

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

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

📋 Project Requirements:

Goal: Create an eye-catching, responsive and animated home page.

1. Navigation Bar:

   • Evenly space the logo and links
   • Source and add SVG icons for the social media links
   • Add an animated mobile "hamburger" menu for smaller screens.
   • Ensure tab/shift+tab navigation works seamlessly.

2. Hero Section:

   • Overlap the text on top of the two-tone watercolor image.
   • Use padding to prevent the text from touching the top or left sides of the browser.
   • Don't let the text paragraph get too wide.
   • Make a rounded "pill" button as the main CTA (Call to Action).

3. "About" Blocks (Below the Hero):

   • Build an alternating layout
   • Rotate the decorative "splash" image with CSS transforms to create the illusion of multiple assets.
   • Center all the text for mobile users.

⚠️ Challenge

Try creating a logo for the navigation bar's home link in Inkscape