Homework 4 – Coffee Regions Page

Task Definition

The goal of Homework 4 is to improve the layout from Homework 3 and organize the coffee region content into two columns.

Requirements:

1. Update the design of the previous Coffee Regions page.
2. Display all region blocks in two columns.
3. Tables must not be used.
4. The layout should be implemented using CSS positioning.

---

📝 Description

This project improves the Coffee Regions page by introducing a two-column layout for the content.

The page contains:

• A hero header with a coffee background image.
• A large centered title: The Best Coffee Regions.
• Six coffee region descriptions organized into two vertical columns.

Each region includes:

• Region name
• Description paragraph
• External link to learn more

Regions included:

• Brazil
• Colombia
• India
• Ethiopia
• Costa Rica
• Kenya

---

📁 Project Structure

/project
├─ index.html
├─ CSS/
│   └─ style.css
└─ Images/
    ├─ coffee-bgnd.jpeg
    └─ coffee.png

---

🎯 Purpose

The homework focuses on practicing:

1. CSS positioning
2. Two-column layout without tables
3. Semantic HTML structure
4. Improved page styling

This assignment demonstrates how layout can be controlled using absolute positioning and container references.

---

🔍 How It Works

1. Header Section

The header contains:

• Coffee background image
• Large decorative title
• Fixed height (400px)

.header {
	height: 400px;
	background-image: url("../Images/coffee-bgnd.jpeg");
	background-size: cover;
	background-position: center;
}

---

2. Two Column Layout

The main container uses position: relative.

Two columns are positioned inside it:

• .left
• .right

.main {
	position: relative;
}

.left,
.right {
	position: absolute;
	width: 49%;
	top: 0;
}

Left column is aligned to the left side, and right column to the right side.

---

3. Region Blocks

Each coffee region is represented as an <article> element.

Each block contains:

• <h2> – region title
• <p> – description
• <a> – external link

Example:

<article class="region">
	<h2>Brazil</h2>
	<p>...</p>
	<a href="https://en.wikipedia.org/wiki/Brazil">Learn more about Brazil</a>
</article>

---

4. Typography and Styling

The page uses Google Fonts:

• Raleway – main content font
• Covered By Your Grace – decorative header font

Additional styling features include:

• Uppercase region titles
• Centered headings
• Justified paragraph text
• Decorative separators between regions
• Custom link styling

---

📜 Example Layout

-----------------------------------
|        Header (coffee image)    |
|      The Best Coffee Regions    |
-----------------------------------

| Brazil        | Ethiopia        |
| Colombia      | Costa Rica      |
| India         | Kenya           |

---

📦 Usage

1. Open index.html in a web browser.

2. Ensure the following resources exist:

   • CSS/style.css
   • Images/coffee-bgnd.jpeg
   • Images/coffee.png

3. The page will display the header and coffee regions arranged in two columns.

---

✅ Project Status

Status: ✅ Completed

• Layout redesigned from Homework 3
• Two-column layout implemented using CSS positioning
• No tables used
• Clean and readable styling applied

---

📄 License

MIT License

---

Made with ❤️ using HTML + CSS by Sam Malikin