Premium dark-mode landing page for a sports supplements brand. Built with vanilla HTML, CSS and JavaScript — no frameworks, no dependencies.
https://rekol08.github.io/tenutre/
Tenutre is a fully responsive, dark-mode landing page for a sports supplements brand. The design focuses on premium aesthetics with smooth animations, glassmorphism effects, and interactive components — all built without any CSS or JavaScript frameworks.
- Dark mode design with Tenutre institutional green (
#1E6B3C) and gold accents - Fully responsive — mobile, tablet and desktop
- Animated hero section with floating badge elements and orbit rings
- Flip cards for product categories (hover on desktop, tap on mobile)
- Scroll reveal animations using Intersection Observer API
- Animated counters that trigger on viewport entry
- Animated progress bars for metrics dashboard
- Particle system for visual depth
- Sticky navbar with blur effect on scroll
- Mobile hamburger menu
- Smooth scroll navigation
- Parallax effect on hero visual
- GitHub Pages deployment
tenutre/
├── index.html # Main HTML structure
├── styles.css # All styles, animations and responsive layout
├── script.js # Interactions, scroll effects and particle system
└── README.md
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure, accessibility (ARIA) |
| CSS3 | Custom properties, animations, glassmorphism, grid/flexbox |
| JavaScript (ES6+) | Intersection Observer, particle system, counters, flip cards |
| Google Fonts | Montserrat + Inter |
| GitHub Pages | Hosting & deployment |
- Navbar — Sticky with scroll blur, mobile hamburger menu
- Hero — Animated headline, floating badges, supplement bottle SVG, orbit rings
- Social Proof — Animated metrics bar
- Products — 6 flip cards (Proteins, Vitamins, Fat Burners, Pre-Workout, BCAAs, Natural Wellness)
- Results — Stats + animated progress bars dashboard
- Testimonials — 3 glassmorphism cards
- About — Brand story with rotating rings visual
- CTA — Final call to action with trust badges
- Footer — Full links, social, legal
git clone https://github.com/REKOL08/tenutre.git
cd tenutreOpen index.html in your browser — no build step, no dependencies.
This project is open source and available under the MIT License.
Made with 💚 by REKOL08