Parallax Website

A simple and visually appealing Parallax Scrolling Website built using HTML and CSS. This project demonstrates how to create a 3D parallax effect using CSS properties such as perspective, transform, and translateZ().

🚀 Features

• Smooth parallax scrolling effect
• Layered background and foreground images
• Fixed background sections
• Responsive layout structure
• Clean and beginner-friendly code

🛠️ Technologies Used

• HTML5
• CSS3

📂 Project Structure

Parallax-Website/
│
├── index.html
├── styles.css
├── background.png
├── foreground.png
├── sport-1.jpg
├── sport-2.jpg
└── sport-3.jpg

📸 Sections

The website includes:

• Hero section with parallax effect
• Adventure introduction section
• Biking showcase
• Paragliding showcase
• Surfing showcase

Each activity section uses a fixed background image to create an immersive scrolling experience.

⚙️ How It Works

The parallax effect is achieved using:

• perspective on the wrapper element
• transform-style: preserve-3d
• translateZ() for depth positioning
• scale() to compensate for perspective distortion
• background-attachment: fixed for section backgrounds

▶️ Getting Started

1. Clone the repository:

[git clone https://github.com/your-username/parallax-website.git](https://github.com/wwwsandipsingha801-collab/Parallax-Website.git)

2. Navigate to the project folder:

cd parallax-website

3. Open index.html in your browser.

🎯 Learning Objectives

This project helps in understanding:

• CSS 3D transforms
• Perspective and depth
• Positioning elements
• Background image handling
• Modern webpage layouts

📷 Preview

Scroll through the page to experience the layered parallax animation and fixed background sections.

🤝 Contributing

Contributions, suggestions, and improvements are welcome. Feel free to fork the repository and submit a pull request.

📄 License

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

---

Made with ❤️ using HTML and CSS.