Studio — Multi-Page Agency Website

A clean, production-grade, static multi-page website for a digital design and development agency.

---

📖 Overview

Studio is a modern, dark-themed reference design with neon-green accents. Built with semantic HTML5, modern CSS3 (custom properties, fluid type, grid/flex), and vanilla JavaScript. It requires no build step, no framework, and no backend, making it incredibly fast and easy to deploy.

✨ Features

• 7 Fully Responsive Pages: Includes Home, About, Services, Portfolio, Blog, Pricing, and Contact.
• Modern UI/UX: Sticky navbar with scroll-triggered glass state, animated mobile menu, and scroll-reveal animations via IntersectionObserver.
• Interactive Elements: Animated number counters, auto-playing marquee strip, portfolio filter chips, and native <details> FAQ accordion.
• Forms: Static contact form with client-side validation and a newsletter form in the footer.
• Accessibility: Semantic landmarks, focus styles, ARIA labels, and respects prefers-reduced-motion.
• Image Fallback: Automatically replaces broken image links with a neutral placeholder to maintain layout integrity.
• 100% Static: Drop the folder onto any host (Netlify, Vercel, GitHub Pages, S3, etc.).

🚀 Quick Start

Live Preview Locally

Open index.html directly in a browser, or serve the folder using a local server:

# Python 3
python3 -m http.server 3000

# Node (any version)
npx serve .

Then open http://localhost:3000 in your browser.

📂 Project Structure

studio/
├── index.html
├── about.html
├── services.html
├── portfolio.html
├── blog.html
├── pricing.html
├── contact.html
├── css/
│   ├── styles.css       # design tokens, layout, components, responsive
│   └── animations.css   # keyframes + scroll-reveal helpers
├── js/
│   └── main.js          # nav, mobile menu, scroll reveal, counters, form, filter
├── assets/
│   ├── logo.svg
│   └── favicon.svg
├── README.md
├── LICENSE
└── .gitignore

🎨 Design System

All visual primitives — color, spacing, type, radii, easing, shadows — live as CSS custom properties in :root (see css/styles.css). Change a token in one place, and the whole site updates automatically.

Token	Value	Notes
--bg	#0a0b0d	Page background
--card	#14161a	Default surface
--accent	#c6f432	Neon lime — primary accent
--text	#ffffff	Primary text
--muted	#9aa0a8	Body / supporting text
--radius	18px	Default surface radius
--max	1240px	Container width
Font	Plus Jakarta Sans + Inter	Loaded from Google Fonts

🛠️ Customization Guide

1. Brand Name & Logo: Search for Studio in all *.html files and replace the brand mark <span class="brand-mark">S</span>.
2. Colors: Edit the CSS variables in css/styles.css under :root.
3. Typography: Replace the Google Font links in the <head> of each HTML file.
4. Content: Every section is plain HTML; no templating engine is required. Simply edit the text.
5. Form Endpoint: Wire the data-contact-form in js/main.js to a service like Formspree, Basin, or Web3Forms by replacing the submit handler.

🌐 Browser Support

Supports modern evergreen browsers: Chrome, Edge, Firefox, Safari (last 2 versions). Uses IntersectionObserver, CSS clamp(), aspect-ratio, and custom properties.

📦 Deployment

• GitHub Pages: Push to GitHub, then enable Pages in repo Settings → Pages → Branch: main / root.
• Netlify / Vercel: Drag-and-drop the folder, or connect the repository. No build command needed.
• Cloudflare Pages: Connect the repository, set framework preset to "None", and output dir to /.
• Live Deployment: https://small-wind-d3c8.fardeenahammedsharif.workers.dev/

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Made with ❤️ by Studio