PETOBIA-student-activity-team-project

PETOBIA Team Project

A multi-page responsive website for a student-run pet adoption initiative. Developed collaboratively using HTML5 and CSS3, practicing unified UI design across team-built pages.

| Project Status | Type | Strategy | Deployment | | :------------- | :-------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :------------------- | | `STABLE` |  |  | `Local/GitHub Pages` |

---

Table of Contents

• Overview
• Pages
• Tech Stack
• Design Highlights
• Project Structure
• Getting Started

---

Overview

PETOBIA is a student-run pet adoption and welfare website developed as a collaborative student activity assignment. The project simulates the full informational surface of a real nonprofit animal shelter: from a branded landing page to adoption listings, services, and community registration.

The primary goals were to practice multi-page site architecture, semantic HTML5, responsive CSS layout, and the fundamentals of team-based frontend development — including consistent design language across independently developed pages.

---

---

Pages

Page	File	Description
Home	homepage.html	Branded landing page with hero section and featured animals
Adoption	adopt.html	Grid of animals available for adoption with details
Services	services.html	Pet welfare and shelter services offered
About Us	aboutus.html	Organization story, mission, and team information
Contact	contact.html	Contact form and shelter address
Login	login.html	Member login page
Sign Up	signup.html	New community member registration form

---

---

Tech Stack

Layer	Technology
Structure	HTML5 (Semantic elements, forms, navigation)
Styling	CSS3 (Flexbox, custom layout, responsive media queries)
Assets	Static images (pet photography, brand icons)
Dependencies	None — zero external libraries

---

---

Design Highlights

• Pet-centric visual design — warm, approachable palette with animal imagery throughout
• Mobile-first layout — responsive grid adapts from mobile to desktop
• Consistent navigation — shared header/nav across all pages for unified UX
• Card-based adoption grid — each adoptable animal displayed with photo, name, and CTA
• Accessible forms — labeled inputs on login, signup, and contact pages

---

---

Project Structure

PETOBIA-student-activity-team-project/
├── homepage.html          # Main landing page
├── adopt.html             # Adoption listings
├── services.html          # Services overview
├── aboutus.html           # About the organization
├── contact.html           # Contact form
├── login.html             # Member login
├── signup.html            # Registration page
│
├── css/                   # Stylesheets
│   └── style.css          # Global styles (shared across all pages)
│
└── images/                # Pet photos and brand assets
    └── [pet and logo images]

---

---

Getting Started

# Clone the repository
git clone https://github.com/AhmedTyson/PETOBIA-student-activity-team-project.git

# Navigate to the directory
cd PETOBIA-student-activity-team-project

# Open in browser
start homepage.html

No dependencies or build step required. Open any page directly in a modern browser.