Updated 1 week ago
NYC team · same business day
View live demo →
Specs

What's in the box.

Frameworks
7
all included
License
Personal
1 commercial site
Updates
Lifetime
free, quarterly

Stelna Angular is a creative Creative Agency & Multi-Service Shop HTML5 Single-Page Application built on Angular 11 and Bootstrap 4. It ships with 23+ routed views, a filterable photo gallery, a full e-commerce module with cart and checkout, a blog module, delivered as a true Angular SPA with instant route transitions, lazy-loaded feature modules, and a typed TypeScript service layer.

Built for Angular developers delivering creative agency & multi-service shop html5 platforms and enterprise applications. The architecture follows Angular best practices: typed service layers, lazy-loaded feature modules, Angular Reactive Forms on all form views, and a clean folder structure that scales from a single project to a team codebase. Wire any backend REST API and the UI layer is production-ready from day one.

Everything in the Package

  • 23+ fully designed Angular routes across feature modules
  • Angular 11 with lazy-loaded modules and typed Angular Router
  • Bootstrap 4 — full grid, utility classes, and component library
  • Angular Reactive Forms — validation, error messages, and loading states on all form routes
  • RxJS BehaviorSubject manages shared state — filters, cart items, and UI state as observable streams
  • Angular HttpClient ready for REST API integration with environment-based base URLs
  • Angular Meta and Title services — per-route SEO meta tags on every component
  • ARIA v1.3 compliant across all routes — skip nav, landmarks, aria-label, aria-describedby
  • Retina-ready, fully responsive from 320px to 1920px+
  • Angular CLI production build — ng build –configuration production ready
  • Swiper.js integrated for touch-friendly carousels

TypeScript Architecture and Module Structure

  • Feature modules lazy-loaded via loadChildren — initial bundle is the shell and home route only
  • Typed interfaces for all domain models — swap the data source for real API integration
  • RxJS BehaviorSubject and Observable streams for reactive state management across components
  • Angular HttpClient with environment-based baseUrl — dev and production URLs configured separately
  • Shared components: NavbarComponent, FooterComponent, BackToTopComponent, and feature-specific cards
  • Angular Reactive Forms with per-control validators and inline error messages via ngIf
  • Folder structure: src/app/pages/, src/app/components/, src/app/services/, src/app/models/

All 23 Routes

  • /home-v1 — v2 — Two distinct hero and service showcase layouts
  • /about-us — Agency story and creative mission
  • /portfolio — Client work archive
  • /portfolio-detail — Individual project detail page
  • /services — Service offerings
  • /service-detail — Individual service detail page
  • /team–team-detail — Staff directory and individual profile pages
  • /shop-3 — Column, 4-Column, Left Sidebar, Right Sidebar) — Multiple shop layout variants
  • /product-detail — Individual product page
  • /cart–checkout — Purchase flow pages
  • /wishlist — Saved products page
  • /gallery — Visual showcase page
  • /blog-grid–blog-detail — Editorial archive and full article view
  • /faq — Frequently asked questions
  • /contact-us — Contact form and location

Key Features

  • 23 Fully Designed HTML5 Pages across home, portfolio, services, shop, team, blog, and utilities
  • 2 Unique Home Layouts — distinct hero styles and creative service showcase arrangements
  • Bootstrap 4 — responsive, mobile-first grid system
  • Portfolio & Portfolio Detail — client work archive and individual project detail pages
  • Services & Service Detail — service offerings with individual detail views
  • Team & Team Detail — staff directory with individual profile pages
  • Shop in Multiple Column Layouts — 3-column, 4-column, left sidebar, and right sidebar shop variants
  • Product Detail, Cart, Checkout & Wishlist — complete e-commerce purchase flow
  • Gallery Page — visual showcase and image collection page
  • Blog Grid & Blog Detail — editorial content in grid and full article formats
  • FAQ Page — frequently asked questions for clients
  • Slick Carousel — featured work and testimonial sliders

Performance and SEO

  • Angular Meta and Title services set per-route title, og:title, and meta description on every component init
  • Lazy-loaded feature modules keep the initial bundle minimal — secondary routes load on demand
  • Angular Ivy compilation, tree-shaking, and chunk optimisation applied automatically on production build
  • Google Fonts loaded with font-display: swap to prevent invisible-text flash
  • All images carry descriptive alt attributes meeting WCAG 1.1.1
  • ARIA v1.3 compliance across all routes meets WCAG 2.1 AA accessibility requirements

Use Cases

  • Creative Agency & Multi-Service Shop HTML5 Platforms: Enterprise-ready Angular SPA with lazy-loaded modules and typed service architecture
  • Angular Developers: Feature modules, Reactive Forms, and RxJS service patterns reduce project setup time significantly
  • Agencies: Deliver a scalable creative agency & multi-service shop html5 app to clients with Angular CLI production build included
  • Enterprise Teams: Strict TypeScript typing, ARIA compliance, and Angular best practices throughout

Credits and Dependencies

  • Angular 11 — MIT License
  • Bootstrap 4 — MIT License
  • RxJS — Apache-2.0 License
  • TypeScript — Apache-2.0 License
  • ng-bootstrap — MIT License
  • Swiper.js — MIT License
  • Slick — MIT License
  • Isotope — MIT License
  • CounterUp — MIT License
  • Magnific — MIT License
  • Lightbox — MIT License
  • ionRange — MIT License
  • Font Awesome 6 — Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT
  • Google Fonts — SIL Open Font License
  • Demo images: Unsplash — Unsplash License (free for commercial use, no attribution required)
  • Demo images: Freepik — Freepik License (free for commercial use with attribution)
  • All demo images are for preview purposes only and are NOT included in the download.
v1.0  Initial Angular Release
- Angular 11 lazy-loaded module architecture
- 23+ routed views with typed Angular Router
- Angular Reactive Forms with per-control validators on all form routes
- RxJS BehaviorSubject service layer for reactive state management
- Angular Meta and Title service integration on all page components
- ARIA v1.3 compliance across all routes
- Angular CLI production build configuration included

Production code · accessibility ready

Open the source. Read the actual code.

Every Stelna — Organic Drinks Angular Template template ships hand-written, semantic, and accessibility-ready. Tabs preserved. Comments in plain English. BEM naming. WCAG 2.2 AA tested. No spaghetti, no inline JavaScript scattered through the document. Your team extends without rewriting — and your users get a site that works for screen readers, keyboard navigation, and reduced-motion preferences out of the box.

Semantic HTML5Real <section> / <article> / <nav> tags — not div soup.
WCAG 2.2 AA accessibilityReal ARIA, focus order, 4.5:1+ color contrast, keyboard nav.
BEM class systemPredictable naming so your team can extend without breaking.
Reduced-motion respectedprefers-reduced-motion media query disables non-essential transitions.
Skip-link + landmark rolesScreen-reader-friendly navigation at every page top.
Lighthouse 100 a11yAudited per release. Default install scores 100 / 96 / 100 / 100.
hero.html hero.css hero.js
stelna-organic-drinks-angular-template/hero · v1.0.0 · WCAG 2.2 AA
1<!-- Stelna — Organic Drinks Angular Template hero — semantic, accessible, AICE-priced -->
2<section class="hero hero--cover" role="region" aria-label="Featured">
3 <div class="hero__inner">
4 <h1 class="hero__h1">Built for businesses <em>that ship</em></h1>
5 <a class="btn btn--primary" href="/shop">Shop now</a>
6 </div>
7</section>
8
9/* hero.css — focus-visible & reduced-motion respected */
10.hero :focus-visible { outline: 2px solid var(--c-cyan); }
11@media (prefers-reduced-motion: reduce) { .hero * { animation: none !important; } }
12
13// AICE rebuild cost manifest
14const aice = { claude: '$2,400', buy: '$19' };
Changelog · 1 version

What's changed.

  • Initial release.
  • Angular + RxJS reactive patterns; modular component structure.
  • Detailed documentation included with quick-start guide.
Tags
Customer reviews · 0 verified

What customers actually said.

No reviews yet — be the first.

Managed launch · 2 hosting tiers · NYC infrastructure

Don’t have hosting? We launch Stelna — Organic Drinks Angular Template for you.

Skip cPanel. Skip the FTP upload. Skip the DNS configuration. Each hosting tier includes the install, plugin config, and your domain pointed live in 24 hours. Same NYC team that built the template handles your launch.

99.9%Uptime SLA
24hSetup time
NYCSame-day support
Starter
$9.99/mo
  • 1 Website
  • 10 GB Storage
  • Free SSL
  • 1 Database
Deluxe
$27.99/mo
  • 10 Websites
  • 50 GB Storage
  • Free SSL (all sites)
  • 25 Databases
Ultimate
$35.99/mo
  • 25 Websites
  • 75 GB Storage
  • Free SSL (all sites)
  • 50 Databases
Launch
$62.99/mo
  • 100 GB Storage
  • 4 GB RAM
  • 2 CPUs
  • Free SSL
Grow
$155.99/mo
  • 300 GB Storage
  • 16 GB RAM
  • 8 CPUs
  • Free SSL
Expand
$217.99/mo
  • 400 GB Storage
  • 32 GB RAM
  • 16 CPUs
  • Free SSL

Free SSL · 99.9% uptime · 24/7 support · No domain included

Every tier includes — NYC infrastructure

99.9%Uptime SLAMonitored 24/7
24hSetup timeSame business day
SSLHTTPS day oneAuto-renewed
CDNGlobal edge cache15 PoPs worldwide
DailyAuto backups30-day retention
NYCStudio supportSame-day response
From the NYC studio

Save $5 on Stelna — Organic Drinks Angular Template today.

Plus weekly drops · AICE rebuild reports · early access to designs we haven't listed publicly. Same email goes to designers shipping with Letam, Bunlicious, and Aiga.

No spam · unsubscribe anytime · 3,500+ designers ship from this list

Stelna — Organic Drinks Angular Template
$19 · Angular Templates