🐾 Vet Care Website

Welcome to the Vet Care Website — a modern, responsive platform for pet owners to manage their pets’ health, book appointments, and access reliable care information. This project is designed for cat and dog owners who want to keep their pets healthy and happy.

---

🌟 Overview

The Vet Care Website is your digital companion for pet care. Users can:

• Access species-specific care information (vaccines, appointments, general care)
• Book veterinary appointments online
• Track upcoming vaccinations and appointments
• Receive reminders
• Enjoy a fully responsive, mobile-friendly experience

---

🎯 Intended Users

• New Pet Owners — Need guidance on basic care, vaccines, and appointments
• Experienced Owners — Want tools to manage recurring care for multiple pets
• Busy Professionals — Appreciate quick, mobile-friendly access and easy booking
• Families — Need to manage care for several pets in one place
• Users with Accessibility Needs — Rely on accessible, easy-to-navigate design

---

🧱 Features

• 🎨 Custom responsive design with Bootstrap 5
• 🐶 Species-specific care info for cats, dogs.
• 📅 Appointment booking with date/time selection
• 💉 Vaccination tracker
• 📱 Mobile-friendly navigation and layout
• 🧭 Clear, accessible navigation and forms
• 📂 Clean project structure for easy updates

---

📁 Folder Structure

vet-care-website/
├── assets/
│   ├── css/
│   │   └── styles.css
│   ├── js/
│   │   ├── script.js
│   │   └── auth.js
│   └── images/
│       └── [all image files]
├── index.html
├── README.md

---

💡 Pages Breakdown

index.html

• Navigation Bar: Responsive, mobile-friendly, with quick links
• Hero Section: Welcome message and quick access to booking
• Pet Care Sections: Info for dogs and cats
• Appointment Booking: Book vet visits online
• Contact Form: Reach out for support or questions
• Footer: Contact info and social links

---

🧰 Technologies Used

• HTML5
• CSS3 (with Bootstrap 5)
• JavaScript (vanilla)
• MicroModal for accessible modals
• Responsive design principles
• Google Fonts: 'Lora', serif; 'Nunito', sans-serif.

---

🌐 How to Use

1. Clone or download the project:

   git clone https://github.com/your-username/vet-care-website

2. Open index.html in your browser. No build step or dependencies needed — it's pure HTML/CSS/JS with Bootstrap CDN.

---

📝 Sign in Instructions

• Sign in using the email: [email protected]
• A nickname is required when signing in or registering. This is because the Reqres API does not check passwords, so appointments are stored locally and filtered by nickname for demo purposes.

---

🎨 Customization

• Update text in .html files for your own content
• Add or change images in assets/images/
• Adjust layout/colors in assets/css/styles.css
• Extend features by editing or adding JS in assets/js/

---

🚦 Known Issues & Limitations

• All users must use the same email to register/sign in (Reqres API limitation)
• User-specific appointments are filtered by a frontend-only “nickname” field
• Anyone with the shared email and any password accepted by Reqres can sign in
• Nickname-based filtering is for demo purposes only and not secure

---

📬 Contact

Built with care by Christopher Quinones.

For suggestions, feature requests, or bug reports, open an issue or contact:
[email protected]

---

🙌 Acknowledgements

• Bootstrap 5
• favicon.io
• pexels.com and unsplash.com for demo images
• MicroModal for accessible modals