🎬 Media Discovery Platform

Explore. Discover. Experience.

A stunning, cinematic media portfolio built with pure HTML & CSS — zero JavaScript. Features a dark mode toggle, responsive CSS Grid gallery, smooth scroll experience, and a beautifully crafted contact section.

---

🖼️ Preview

---

✨ Features

• 🌙 Dark Mode — Pure CSS dark/light toggle using a hidden checkbox — no JavaScript needed
• 📐 Responsive CSS Grid Gallery — Cards adapt beautifully across mobile, tablet, and desktop
• 🎞️ Cinematic Project Showcase — Featured & standard cards with genre badges, star ratings, and tags
• 🧭 Sticky Navbar — Clean navigation with smooth anchor scroll
• 📬 Contact Form — Accessible form layout with contact details sidebar
• ♿ Accessibility — Semantic HTML5, ARIA labels, and loading="lazy" on all images
• ⚡ Zero JavaScript — Every interaction is powered purely by CSS

---

📁 Project Structure

MediaDiscoveryPlatform/
├── index.html        # Main HTML — structure, sections, and content
├── index.css         # All styling — layout, dark mode, animations
└── images/           # Project card images
    ├── stellar_odyssey.png
    ├── last_kingdom.png
    ├── ocean_depths.png
    ├── neon_nights.png
    ├── whispers_wind.png
    └── shadow_protocol.png

---

🗂️ Sections

Section	Description
Hero	Full-screen welcome section with headline and CTA
Projects Gallery	CSS Grid of 6 media cards across genres
Contact	Contact form + info panel (email, location, availability)
Footer	Brand, navigation links, social icons, and back-to-top

---

🎭 Media Cards

Each card in the gallery includes:

• Genre badge (Sci-Fi, Drama, Documentary, Thriller, Fantasy, Mystery)
• Star rating
• Title & description
• Tags and year

One card is designated as featured and spans a wider column in the grid.

---

🚀 Getting Started

No build tools. No dependencies. Just open and go.

# Clone the repo
git clone https://github.com/omsingh017/MediaDiscoveryPlatform.git

# Open in browser
open index.html

Or simply drag index.html into your browser.

---

🛠️ Built With

• HTML5 — Semantic markup with accessibility in mind
• CSS3 — Custom properties, CSS Grid, Flexbox, transitions
• No frameworks. No libraries. No JavaScript.

---

🌐 Live Demo

Deploy this to GitHub Pages in one click: Go to Settings → Pages → Branch: main → Save

Your site will be live at: https://omsingh017.github.io/MediaDiscoveryPlatform/

---

📄 License

This project is open source and available under the MIT License.

---

Crafted with ♥ using pure HTML & CSS