Exercise #2: Landing Page

5 points

DUE: Friday, January 20 by 5:30pm

Instructions

One of the most common web development tasks is to build a Landing Page, the first thing visitors will see when visiting a web address. Developers and designers have built up a fairly common set of elements that you'll see used again and again and that give us a good opportunity to put our new CSS skills to work.

First, let's look at some well-designed landing pages: airbnb.com; shopify.com; notion.so. And of course uchicago.edu. Look at them on your laptop browser and with your phone.

Now, make your own landing page for an imaginary product, company, or institution. Your page should, at a minimum, contain the following elements:

1. A navigation bar across the top
2. A large, visually appealing hero element with a clear "call to action" button or link.
3. At least three sections with multi-column desktop layouts, for example:

• Pricing tiers
• User testimonials
• Stories or case studies
• Sample listings
• Popular or trending These sections should vary the number and spacing of columns. Use one column-count, one flexbox, and one css grid.

1. A footer element with links

Make your page display reasonably on mobile devices. Note that you are allowed to collapse or drop some elements in the mobile view.

Use at least two fonts other than the system default. You do not need to include any animation or other interactive elements, but are welcome to.

Clone this repositoriy, and edit index.html and styles/landing.css. Put all your styling into landing.css instead of putting your CSS directly in a <style> element or as a style attribute. You only need to make the landing page. There's no need to make a second html file, and all your links can have href="#".

Remember to include in your submission any classmates you collaborated with and any materials you consulted. Because these pages are for imaginary organizations you have each made up, we expect them to be fairly different from one another.

Grading Rubric:

• 1 point: Header with navigation elements
• 1 point: Hero element with a call to action button or link
• 1 point: Footer with links to "meta" pages: "About Us", "Terms of Service", "Privacy", etc.
• 1 point: Correct use of one column-count layout
• 1 point: Column-count changes to fewer columns on a narrow screen width (<500px)
• 1 point: Correct use of one flexbox layout
• 1 point: Flex direction changes to vertical on a narrow screen width
• 1 point: Correct use of one grid layout
• 1 point: Grid changes to fewer columns on a narrow screen width
• 1 point: Header and footer change to a vertical layout or are hidden on a narrow screen width

Resources:

• Designing Hero Images - Smashing Magazine
• High-resolution background images from
  • Unsplash
  • Burst
  • Magdeleine
  • The Art Institute of Chicago
• FontPair
• Color Suggestions
• Nonsense text generators
  • loremipsum.io
  • Riker Ipsum
  • Output of a neural net trained on Erowid reports
  • ChatGPT
• AI Image Generators
  • Dall-E 2
  • Stable Diffusion
  • Midjourney