HW1 — HTML/CSS Landing Page

A simple, responsive landing page built with plain HTML and CSS. The page showcases headings, internal links that jump to sections in a secondary page, and a styled footer with contact details and a newsletter UI.

---

Preview & Structure

HW1---HTML-CSS/
├─ images/
│  └─ sayhello.png
├─ index.html        # Main landing page
├─ X.html            # Anchor targets (READ, Number 13, Sign Up, etc.)
└─ styles.css        # Global styles + media queries

Background image: images/sayhello.png (centered, no-repeat).

---

How to Run

1. Download/clone this folder.
2. Open index.html directly in a browser or use a local server (recommended for CSS cache busting):
   • VS Code → Live Server extension → Right‑click index.html → Open with Live Server.

If the background image doesn’t appear, double‑check the file name and relative path: images/sayhello.png (case‑sensitive on some systems).

---

Features

• Clean header with “LOCATION FAVOURITES” and a stylized “No. 13” link.
• CTA section with “GET IN TOUCH” button (navigates to an anchor on X.html).
• Footer with headquarters, multiple office blocks, and a newsletter input/button.
• Internal navigation: links and form actions target anchors in X.html (#Read, #Number, #SignUp, #GetInTouch, #ContactUs).

---

Responsive Behavior (Media Queries)

• @media (max-width: 900px)

  • .header width → 70%
  • .content width → 80%; padding reduced
  • .right-content padding compacted
  • .offices-side stretches to 100%

• @media (max-width: 560px)

  • .top-container stacks vertically
  • .left-content / .right-content take full width; right border removed
  • .bottom-left-footer stacks with normal white‑space

---

Tech Notes & Conventions

• Typography & Colors: Minimal system font stack with accent color rgb(198, 166, 87) via .orange-text.
• Layout:
  • Flexbox used for footer sections (.top-container, .bottom-left-footer, .offices-side).
  • Content is width‑constrained via percentages for straightforward responsiveness.
• Buttons & Links:
  • Some navigation uses <form action="X.html#..."> solely for navigation.
    • In production, prefer a semantic anchor:

      <a class="in-touch-button" href="X.html#GetInTouch">GET IN TOUCH</a>

    • If you must keep a <button>, use type="button" plus JS to navigate.
• Accessibility:
  • Use meaningful link text (e.g., “Read our latest articles”) and ensure sufficient color contrast.
  • Inputs should have associated labels; placeholder text is not a label.
  • Consider :focus styles for keyboard navigation.

---

Known Tasks / Possible Improvements

• Add label for the email input and basic form validation.
• Replace form‑based navigation with anchors (see snippet above).
• Add alt text for decorative vs meaningful images appropriately.
• Extract inline styles (letter‑spacing, font‑weights) into styles.css for consistency.
• Consider a mobile navigation pattern if new sections are added.

---

Troubleshooting

• Background not showing: ensure images/sayhello.png exists and that the path in styles.css is url("images/sayhello.png"). Clear cache / hard‑refresh (Ctrl+F5).
• Anchors not working: verify IDs exist in X.html (id="Read", id="Number", etc.).
• Font sizes look off: some browsers apply default zoom; reset to 100% or define a CSS base:

  html { font-size: 16px; }
  body { line-height: 1.5; }

---

Educational use for CS 174 Homework.