Studio Olimpo Clone — Landing Page

A responsive landing page clone of the Studio Olimpo website built using HTML, CSS, JavaScript, GSAP, and Lenis.js.
This project demonstrates modern web design practices with smooth animations, scroll-based effects, and interactive UI components.

---

🚀 Features

• Smooth Animations: Implemented with GSAP for natural motion and fluid transitions.
• Lenis.js Integration: Provides buttery smooth scroll experience across sections.
• Loading Animation: A custom loader plays on page reload before the content appears.
• Responsive Design: Fully responsive layout adapting across desktop, tablet, and mobile.
• Cursor Effect: A moving circle follows the cursor across the page.

🎬 Scroll & Section Animations

• Text and elements animate into view on scroll using GSAP.
• Sections reveal themselves with subtle parallax and stagger effects.
• Accordion Component: On scroll, accordion-like sections expand, and hidden text/content becomes visible.

📖 Animated Menu

• A menu button triggers a full-screen animated menu.
• The menu slides/fades in smoothly using GSAP timelines.
• Inside the menu, each item animates sequentially (stagger effect), giving a modern polished look.
• Closing the menu reverses the animation seamlessly.

---

🛠️ Tech Stack

• HTML5
• CSS3 (Flexbox & modern layout practices)
• JavaScript (ES6)
• GSAP — animations & scroll effects
• Lenis.js — smooth scrolling experience

---

📂 Usage — Setup & Run Locally

1. Clone the repo:

   git clone https://github.com/Owais-khan-1/Studio-Olimpo-Web-Project.git

   cd Studio-Olimpo-Web-Project

2. Simply open the index.html file in your browser — the website will load immediately.

Contact

If you have any questions or suggestions about this project, feel free to reach out:

Email: khanowaiszai@gmail.com

Author: Owais Khan

⭐ If you found this project helpful or inspiring, don’t forget to star the repo!

Thanks for checking out this project!