🌐 Web Studio — Digital Agency Website

A modern, responsive multi-page website for a digital web studio and creative agency. This was my very first web development project, built to master semantic HTML5 markup, responsive CSS layout techniques, and interactive JavaScript features from scratch! 🚀

---

🎨 Figma Mockup

🔗 Web Studio Design Layout (Version 3.0)

---

✨ Features

• 📄 Multi-Page Layout: Includes the main landing page (Studio) and the dedicated showcase catalog (Portfolio).
• 📱 Fully Responsive Design: Seamlessly adapts across mobile phones, tablets, and desktop monitors.
• 👁️ Retina Display Ready: Includes @2x high-density image assets for crisp visuals on Apple and high-DPI screens.
• 📜 Smart Scroll Header: Automatically hides when scrolling down to maximize screen space and smoothly reappears when scrolling up.
• 🪟 Interactive Modal Window: Popup callback & order form with backdrop blur and smooth open/close animations.
• 🍔 Mobile Navigation Menu: Full-screen responsive slide-out hamburger menu with quick contact links.
• 🎨 Modern CSS Architecture: Built using CSS custom properties (variables), Flexbox layout, and smooth micro-interactions.

---

🛠️ Tech Stack

Technology	Purpose
HTML5	Semantic tags (<header>, <nav>, <section>, <article>, <footer>), accessibility, form controls
CSS3	Flexbox, CSS Variables, Media Queries, keyframes & transitions
JavaScript (ES6)	DOM manipulation, modal controller, scroll observer, mobile menu toggle
Figma	Pixel-perfect UI implementation based on design mockup

---

📁 Project Structure

Web-Studio/
├── css/
│   └── styles.css          # Core stylesheets & CSS variables
├── images/                 # Optimized vector (SVG) and raster (@1x, @2x) assets
├── js/
│   ├── modal.js            # Modal window toggle logic
│   └── mobile-menu.js      # Mobile navigation drawer logic
├── index.html              # Main studio landing page
├── portfolio.html          # Portfolio showcase page
└── README.md               # Project documentation

---

🚀 Getting Started

To view or work with this project locally:

1. Clone the repository:

   git clone https://github.com/iberikofer/Web-Studio.git

2. Open the project:

   • Simply open index.html in your favorite web browser, or
   • Use the Live Server extension in VS Code for live reloading.