Bytrix is a premium dark editorial HTML template built for creative agencies, branding studios, design consultancies, and digital production companies. It combines a sharp typographic hierarchy, an acid-lime accent system, and a fully component-driven layout to deliver a site that feels high-end from the start.

Built on Bootstrap 5.3.8 with zero build tools required. Open index.html and it works.

What Makes Bytrix Different

Most agency templates look the same. Bytrix takes a different direction with a dark, editorial aesthetic using warm near-black backgrounds, a single lime accent, and the Syne typeface, a geometric display font used by serious design studios worldwide. The result is a template that feels like it came from an award-winning studio.

Key Features

  • 2 Homepage Variants. Home 1 features a full-viewport dark hero with background texture, editorial service rows, and a testimonials carousel. Home 2 is a centered editorial hero with no background image, a project list with hover-reveal thumbnails, a service tile grid, and a full-width quote block. Same codebase, completely different feel.
  • 11 Fully Designed Pages. Every page has a unique layout and section order.
  • Dark-First Design. All pages use a warm near-black base. The acid-lime accent appears on CTAs, active states, section labels, and key words in headings.
  • Syne and DM Sans Typography. Syne for headings (weights 400 to 800) and DM Sans for body text (weights 300 to 500). Both loaded from Google Fonts.
  • Portfolio Filter. JavaScript-powered category tabs that show and hide portfolio items without any external library.
  • Animated Stat Counters. Numbers count up from zero when scrolled into view using Intersection Observer.
  • Scroll Reveal. Sections fade and slide in as the user scrolls, with staggered delays.
  • Bootstrap Carousel Testimonials. Custom prev and next controls styled to match the template.
  • FAQ Accordion. Bootstrap Collapse-powered with a plus-to-close icon animation.
  • Working Contact Form. Client-side validation, success state, and fields disabled after submit. No server required.
  • Marquee Ticker Strip. Scrolling service tags on a lime background. Pauses on hover.
  • Mobile Navigation Panel. Off-canvas slide-in drawer with nested submenus and active state per page.
  • CSS Design Tokens. All colors, spacing, fonts, and transitions are defined as CSS custom properties. Change a variable once and it updates everywhere.
  • No Build Tools. No Node, no Webpack, no CLI. Unzip and open in a browser. Works via the file:// protocol.
  • Zero CDN Dependencies. Bootstrap and all assets are either local or load gracefully without a connection.
  • Fully Responsive. Tested at 375px, 768px, 1024px, and 1440px.

Pages Included

  • index.html — Home 1: editorial dark hero, marquee, service rows, stats, work cards, testimonials carousel
  • index-2.html — Home 2: centered hero, project list with thumbnails, service tile grid, full-width quote
  • about.html — Studio story, values, 6-person team grid, process steps
  • services.html — 5 service rows and a FAQ accordion
  • service-detail.html — Service overview, deliverables list, process steps, related work
  • portfolio.html — Filterable portfolio grid with 6 categories, powered by JavaScript
  • case-study.html — Project metadata, challenge section, approach steps, result metrics
  • blog.html — Featured post and 6-card article grid
  • blog-post.html — Long-form article layout with author card and sidebar
  • contact.html — Contact form with validation and office info
  • careers.html — Culture section, job listings, and benefits list

What's Included

  • 11 HTML pages
  • assets/css/main.css — full design system, fully commented and structured
  • assets/css/bootstrap.min.css — Bootstrap 5.3.8
  • assets/js/main.js — custom JavaScript for nav, counters, form handling, filter tabs, and scroll reveal
  • assets/js/bootstrap.bundle.min.js and bootstrap.bundle.js (unminified copy)
  • assets/img/ — all demo images sourced from Unsplash
  • documentation/ — full setup and customization guide

Technical Details

  • Framework: Bootstrap 5.3.8
  • Fonts: Syne and DM Sans via Google Fonts
  • JavaScript: Vanilla JS, no jQuery
  • Browser support: Chrome, Firefox, Safari, Edge (latest versions)
  • Responsive: mobile-first, tested from 375px to 1920px
  • Code quality: W3C-compliant HTML, BEM-style CSS naming, zero inline styles