EasyGeneral
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. For our next meeting, we only want to establish the "Hero" section including the main image, title and "Contact us" button. We don't need responsive sizing, we'll just be displaying it on a large computer screen. We don't have a font license yet so please use something from Google fonts.

Can you build an alternative functional prototype for the home page?

🚀 Summary

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

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

📋 Project Requirements:

Goal: Create an eye-catching, responsive hero section for the Home page.

1. Navigation Bar:

   • Not included in "Easy" level.

2. Hero Section:

   • Overlap the text on top of the two-tone watercolor image. *(Hint: Try position:absolute; left:0px; and top:0px - don't forget the parent container needs a position too.)
   • 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):

   • Not included in "Easy" level.

⚠️ Challenge

Try adding the navigation bar with display:flex; and justify-content:space-between;