Animal Kingdom is a responsive website for a fictional zoo that showcases a variety of animals in an interactive and visually appealing layout. Built with HTML, CSS, and JavaScript, the site demonstrates modern web design principles using Flexbox and CSS Grid for a fluid, responsive experience.
Check out the live demo at Animal Kingdom Live
- Responsive Design: Layout adjusts seamlessly between mobile and desktop views using Flexbox and CSS Grid.
- Interactive Animal Cards: Clickable cards that display more details about each animal via JavaScript alerts.
- Search Functionality: Dynamic filtering of animal cards based on user input.
- Uniform Image Presentation: All images are cropped and resized uniformly with the use of CSS's
object-fit: cover;ensuring a consistent look. - Semantic Markup: Structured with semantic HTML5 elements (header, nav, aside, section, article, and footer) for better accessibility and SEO.
- index.html: The main page that features the animal cards and search sidebar.
- style.css: The CSS file containing all the styles for layout, responsive design, and image formatting.
- script.js: The JavaScript file that implements the search functionality and handles interactive alerts.
- README.md: This documentation file.
© 2025 Animal Kingdom. All Rights Reserved. | Developed & Designed by DevByRico