Homework 3 – Coffee Regions Page

Task Definition

Create an HTML page with CSS styling that showcases the best coffee regions in the world.

Requirements:

• Header with a coffee photo background, height of 400px.
• Centered title: The Best Coffee Regions.
• Sections/blocks for each region with:
  • Region name as a heading.
  • Description paragraph.
  • Link to learn more.

Regions included: Brazil, Colombia, India, Ethiopia, Costa Rica, Kenya.

---

📝 Solution Structure

HTML

• Header:

  <div class="header">
  	<h1>The Best Coffee Regions</h1>
  </div>

• Main content:

  • Each region is an <li> inside a <ul>.
  • <h2> for region name.
  • <p> for description.
  • <a> linking to Wikipedia page.

CSS

• Body: whitesmoke background, Raleway font.

• Header:

  • Height: 400px
  • Background image: coffee-bgnd.jpeg
  • Centered with background-size: cover and background-position: center
  • Top padding for vertical alignment

• Title (h1):

  • Font: "Covered By Your Grace", cursive
  • Font size: 100px
  • Color: semi-transparent teal
  • Centered text

🔹 Features

1. Responsive header with hero image.

2. Coffee regions blocks with clean structure:

   • Region name, description, and external link.

3. Custom fonts via Google Fonts (Raleway and Covered By Your Grace).

4. Favicon support for the page.

---

📦 Usage

1. Open index.html in a browser.
2. Ensure CSS/style.css is linked correctly.
3. Ensure image coffee-bgnd.jpeg is in the Images folder.
4. Click "Learn More" links to access Wikipedia pages for each region.

---

✅ Status

Completed – static HTML page with external CSS, readable layout, and proper headings for each coffee region.

---

📄 License

MIT License

---

Created with ❤️ using HTML + CSS by Sam Malikin