Record Media

A multi-page marketing website for Record Media, a digital agency — built as a fully static site with HTML5, CSS3, and vanilla JavaScript (no frameworks, no build step). The site is responsive across mobile, tablet, and desktop, with a dark theme and a red (#ff0000) accent.

---

Features

• Six pages: Home, Services, Portfolio, About Us, Blogs, and Careers.
• Responsive design — mobile (≤767px), tablet (768–1024px), and desktop (≥1025px) breakpoints.
• Off-canvas navigation drawer on mobile/tablet — slide-in menu with backdrop, body-scroll lock, Esc/backdrop/link close, ARIA attributes, and a Tab focus-trap. Desktop keeps an inline nav bar.
• Latest Works gallery with category tabs and a YouTube video lightbox (opens on click, Esc/backdrop/× to close).
• Team carousel — infinite drag/swipe horizontal scroll.
• Partners logo strip — auto-scrolling marquee on mobile; static grid on desktop.
• Scroll-reveal fade-in animations via IntersectionObserver.
• Animated stat counters that count up when scrolled into view.
• Services page section navigation — clickable prev/next controls with smooth scroll.
• Scroll indicator with a smooth scroll to the next section.
• Text tickers, hover effects, and newsletter/contact form UX (front-end only).

---

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, Grid, Flexbox)
Behavior	Vanilla JavaScript (ES5-compatible, IIFE-scoped)
Font	Inter via Google Fonts
Media	YouTube embeds (video lightbox); Unsplash images (placeholders)

Dependencies: none to install — no package manager, bundler, or backend. The only external resources are the Google Fonts stylesheet and remote images/embeds, loaded at runtime.

---

Project Structure

Record Media/
├── index.html          # Home
├── services.html       # Services
├── portfolio.html      # Portfolio (showroom mosaic)
├── about.html          # About Us (team + contact)
├── blogs.html          # Blogs
├── careers.html        # Careers (job listings)
├── css/
│   ├── style.css       # Main stylesheet (theme, layout, components)
│   └── responsive.css  # Media queries (mobile, tablet, small-mobile)
├── js/
│   └── script.js       # All site behavior (shared across pages)
├── assets/             # Images, logos, and icon PNG/WebP files
└── README.md

---

Getting Started

No installation or build is required — it's a static site.

Clone

git clone https://github.com/joeka7/Record-Media.git
cd Record-Media

Run in development

Because pages reference each other and load assets via relative paths, serve the folder over a local HTTP server (opening the file directly with file:// also works, but a server avoids browser quirks).

Pick any one:

# Python 3
python -m http.server 8000

# Node (no install; uses npx)
npx serve .

# PHP
php -S localhost:8000

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

VS Code: the "Live Server" extension also works — right-click index.html → Open with Live Server.

Production

There is no build step. Deploy the folder as-is to any static host (GitHub Pages, Netlify, Vercel, or any web server). Ensure the whole directory — *.html, css/, js/, and assets/ — is uploaded together so relative paths resolve.

---

Configuration

There are no environment variables and no config files — the project has no backend, API, or secrets. Content and settings are edited directly in the source:

• Theme tokens (colors, fonts, container width, spacing) live as CSS custom properties in the :root block of css/style.css:

  :root {
    --bg: #080000;          /* page background */
    --red: #ff0000;         /* accent color */
    --white: #ffffff;
    --font: "Inter", sans-serif;
    --nav-h: 85px;          /* navbar height */
    --max-w: 1500px;        /* content container width */
    --ease: 0.3s ease;      /* shared transition */
  }

• Responsive breakpoints are defined in css/responsive.css: max-width: 1024px (nav drawer), max-width: 767px (mobile), max-width: 480px (small mobile), and 768–1024px (tablet).

• Video lightbox IDs: work cards use a data-video="<youtube-id>" attribute; cards without one fall back to a pool defined in js/script.js.

---

Usage Examples

Add a work item to the Latest Works gallery (in index.html), with a category filter and a YouTube video:

<div class="work-card" data-category="branding" data-video="dQw4w9WgXcQ">
  <img src="assets/your-image.webp" alt="Project name" />
  <div class="work-card__play">
    <div class="work-card__play-btn">
      <svg viewBox="0 0 24 24"><polygon points="5,3 19,11 5,19" /></svg>
    </div>
  </div>
</div>

Add a tile to the portfolio showroom mosaic (in portfolio.html) — use a size modifier (--sq, --wide, or --big) so the tile fits the masonry rhythm:

<div class="showroom-item showroom-item--wide">
  <img src="assets/your-work.webp" alt="Work title" />
</div>

Change the accent color site-wide — edit one line in css/style.css:

:root { --red: #ff0000; }  /* change to your brand color */

---

Troubleshooting

Issue	Cause / Fix
Images or links don't load when opening index.html directly	Some browsers restrict file://. Serve via a local HTTP server (see Run in development).
Fonts look like a fallback (not Inter)	The Google Fonts stylesheet needs internet access; check your connection or the @import in css/style.css.
Latest Works videos don't play	Video embeds require internet access and a valid data-video YouTube ID on the .work-card.
A portfolio/gallery image is blank	A placeholder Unsplash URL may be unavailable — replace the src with a local asset in assets/.
Mobile menu won't open	Ensure js/script.js is loaded (each page includes <script src="js/script.js"></script> before </body>).
Editing CSS shows no change	Two stylesheets load — style.css (base) and responsive.css (breakpoints). Confirm you're editing the one that applies at your viewport width.

---

Future Improvements

• Replace remote Unsplash placeholders with final, self-hosted project images.
• Wire the newsletter and contact forms to a real backend or form service (currently front-end only).
• Add build tooling (minification/bundling) and image optimization for production.
• Add real content for the Blogs and Careers listings.

---

License

No license file is currently included in the repository. All rights reserved by Record Media unless a LICENSE file is added.

TODO: add a LICENSE file if the project is to be distributed under specific terms.