Wildlife-Photography-website — HTML 作品集模板

SHA-256: f26d4543bb5a7f529de40cdcda8abfd8f2a5227ab0f8be3f147f0592ee58d331

2026-10-13T06:15:32.619Z

# 🦁 Wildlife Photography Website

![Website](https://img.shields.io/badge/Website-Responsive-blue)
![License](https://img.shields.io/badge/License-MIT-green)
![HTML5](https://img.shields.io/badge/HTML5-orange)
![CSS3](https://img.shields.io/badge/CSS3-blue)

---

## 📝 About This README

This `README.md` file serves as documentation for the **Wildlife Photography Website** project.  
It explains the website’s features, folder structure, technologies used, and how to run or modify the project.  
If you are browsing this repository on GitHub or another platform, this document helps you understand the project purpose and setup quickly.

---

## 🌟 Overview
This is a responsive wildlife-themed website designed to showcase animals through **images**, **videos**, **galleries**, and a **join form**. The website is fully built using **HTML5** and **CSS3**, utilizing **Flexbox** and **CSS Grid** to create a modern, responsive design that works across all devices.

---

## 🛠 Features

- **Responsive Navigation Bar**: Fixed at the top with hover underline effects; adapts to mobile, tablet, and desktop.  
- **Hero Section**: Full-screen background image with a centered search bar for quick navigation.  
- **Hornbill Section**: Text combined with multiple responsive images with hover zoom effects.  
- **Wildlife Showcase Section**: Highlighted animal images with hover scaling effects.  
- **Gallery Section**: Masonry-style CSS Grid layout for responsive images.  
- **Video Section**: Grid layout for video previews with hover effects.  
- **Join Form Section**: Interactive form with styled input fields and submit button.  
- **Footer Section**: Multi-column layout with contact info, social icons, and copyright.

---

## ⚙️ Prerequisites

- **Modern web browser** (e.g., Chrome, Firefox, Safari, Edge)  
- **Internet connection** (for accessing fonts, images, or resources)

---

## 💻 Technologies Used

- **HTML5**  
- **CSS3**  
- **Flexbox** (for layout)  
- **CSS Grid** (for gallery and video sections)  
- **Google Fonts**: `Kaushan Script`, `Jua`, `Oswald`, `Roboto`, `Kameron`

---

## 📂 Folder Structure
- **index.html** - The Main HTML file for the Project.
- **style.css**  - Contains stylesheet for the Project.
- **images**     - Directory for Images Used in the Project.
- **videos**     - Directory for Videos Used in the Project.
- **README.md**  - Documentation for Understanding the Project.

---

## 🚀 How to Run

1.Clone the repository:
```bash

git clone https://github.com/Mohamed-Asif-1000/Wildlife-Photography-website.git

```

2.Navigate to the Project Folder
```bash

cd wildlife-website

```

3.Open index.html in your preferred web browser.

---

## 📌 Usage

- **View Animals**    : Explore different wildlife sections with images and videos.

- **Gallery & Videos**: Enjoy interactive and responsive layouts.

- **Join Form**       : Submit your details using the form.

- **Navigation**      : Use the responsive menu to quickly move between sections.

---

## 📝 License

This project is licensed under the MIT License.
See the [LICENSE](LICENSE) file for details.

---

## 🙏 Acknowledgements

Inspired by various wildlife conservation efforts and resources.

---

## 📷 Media Credits

All Media Used in the Project are free-to-use resources from : 
- **Unsplash** - For Wildlife Photographs and Videos
- **Pixabay**  - For Wildlife Photographs and Videos

Full credit goes to the respective photographers and creators for sharing their work publicly.

---

## 👤 Author

**Mohamed Asif A**


🌿Wildlife Enthusiast & Front-End Developer
🔗 [www.linkedin.com/in/mohamed-asif-a-14162326atm]