Aurus 3.0 Earbuds Presentation 🎧✨

A modern and interactive website presenting the Aurus 3.0 Earbuds, featuring a product animation, image gallery with features, and an x-ray comparison view. Designed with simplicity in mind, the emphasis is on delivering a powerful audio experience through engaging visuals and animations.

Installation 🛠️

1- Clone the repository:

• git clone https://github.com/your-username/aurus-earbuds-site.git

• Open index.html in a modern browser (Chrome, Safari, or Edge).

• Ensure the images/ folder and js/ folder are correctly located relative to the HTML file.

• No additional server setup is required for basic viewing, but you can run a local server for full functionality:

Example using Python

python -m http.server

Usage 📱💻

• Desktop/Tablet: Interact with the 3D-inspired product animation on the canvas 🖼️.

Explore the image gallery to see key features of the earbuds 🖼️🎵.

Use the x-ray slider to compare the normal and internal views of the earbuds 🔍.

• Mobile: Scroll to view the feature images and descriptions 📲.

The slider and gallery are optimized for mobile screens.

Features 🌟

• Smooth GSAP animations for gallery and scroll interactions ✨.

• Responsive layout using SCSS and CSS Grid 📐.

• X-ray slider to showcase internal design of the earbuds 🔬.

• Lightweight, modern design focused on usability and clarity 🖤.

• Skills / Technologies Used 💻🛠️

• JavaScript (JS): DOM manipulation and slider functionality ⚡

• GSAP: Animations for fade-ins and scroll-triggered effects ✨

• Sass (SCSS): Responsive styling, variables, and nesting for maintainable CSS 🎨

• HTML5 & CSS3: Structured and responsive markup 🏗️

• CSS Grid: Layout for images, gallery, and main sections 📐

Contributing 🤝

• Fork the repository 🍴

• Create your feature branch:

• git checkout -b my-new-feature

• Commit your changes: git commit -am 'Add some feature'

• Push to the branch: git push origin my-new-feature

• Submit a pull request 🎉

History 📜

• v1.0: Initial release with product animation, feature gallery, x-ray slider, and responsive SCSS layout.

Credits 👩‍💻👨‍💻

• Developed by Hannah Melo

• Uses GSAP for animations ✨

• Custom JS for slider functionality ⚡

• Styled with Sass (SCSS) and CSS Grid 🎨📐

License 📄

• This project is licensed under the MIT License. See the LICENSE file for details.