🐾 Clay Cat Breed Viewer

A modern and visually appealing web application that displays information about different cat breeds using a beautiful Claymorphism + Glass UI design.

---

🌟 Preview

✨ Clean UI ✨ Soft shadows (Claymorphism) ✨ Smooth animations ✨ Responsive layout

---

🚀 Features

• 🐱 Random Cat Breed Fetching Fetch and display a new cat breed with one click.

• 📊 Detailed Breed Information

  • Name, origin, lifespan
  • Weight (metric & imperial)
  • Temperament traits
  • Behavior ratings (1–5 scale)

• 🎨 Modern UI Design

  • Claymorphism + Glass effect
  • Soft shadows & depth
  • Smooth hover animations

• 📱 Responsive Design Works seamlessly on mobile, tablet, and desktop.

• ⚡ Fast & Lightweight Built with pure HTML, CSS, and JavaScript.

---

🛠️ Tech Stack

• HTML5 – Structure
• CSS3 – Claymorphism + Animations
• JavaScript (Vanilla JS) – API handling & DOM manipulation

---

📂 Project Structure

📁 project-folder
│── index.html
│── styles.css
│── script.js
│── README.md

---

🔧 How to Run

1. Clone or download the project
2. Open the folder
3. Run index.html in your browser

# Example
git clone https://github.com/your-username/cat-breed-viewer.git
cd cat-breed-viewer

---

🎯 Purpose

This project was built to:

• Practice API integration
• Improve JavaScript DOM manipulation
• Explore modern UI trends like Claymorphism
• Build a clean and interactive frontend project

---

💡 Future Improvements

• 🖼️ Add real cat images
• 🌙 Dark mode toggle
• 🔍 Search/filter breeds
• ⭐ Favorite breeds feature
• 🎬 Smooth page transitions

---

🤝 Contributing

Contributions are welcome! Feel free to fork the repo and improve the UI or features.

---

📜 License

This project is open-source and available under the MIT License.

---

❤️ Acknowledgement

Thanks to the public API used for providing cat breed data.

---

⭐ If you like this project, give it a star!