WORK STUDIO LANDING PAGE

This is a creative, animated landing page for a Work Studio, showcasing various design projects using HTML, CSS, and JavaScript along with animations powered by Locomotive Scroll.

Table of Contents

• Demo
• Features
• Technologies Used
• Setup
• Usage
• File Structure
• Credits
• License

Demo

You can view the live demo of the landing page here:
Live Demo

Features

• Smooth scrolling animations using Locomotive Scroll.
• Video background loader with animated text.
• Projects displayed with hover effects and blur animations.
• Scrollable project images with an overlay description.

Technologies Used

• HTML5
• CSS3
• JavaScript
• Locomotive Scroll (for smooth scrolling effects)
• GSAP(for loading animation)

Setup

1. Clone the repository to your local machine:

   git clone https://github.com/yourusername/work-studio-landing-page.git

2.Navigate to the project directory:

 cd work-studio-landing-page

3.Open index.html in your browser to view the landing page.

Usage

Simply open the index.html file in a modern web browser. The page should load with smooth animations, video backgrounds, and scrollable content sections.

Local Development

If you want to make changes or add new features, you can modify the style.css or index.html files directly. Additionally, you can add custom JS animations in the script.js file.

Locomotive Scroll Integration

Ensure that the Locomotive Scroll CDN is included in the head section of your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css" />

File Structure

work-studio-landing-page/ │ ├── index.html # Main HTML file ├── style.css # Main CSS file for styling ├── script.js # JS file (if you want to add animations) └── assets/ # Folder containing images, videos, etc.

Credit

Video Background from Works Studio. Smooth Scrolling powered by Locomotive Scroll.