A stunning, state-of-the-art web application concept designed for Floravie, an elegant, boutique florist. This website was developed as an academic demonstration and a highly refined sample project for an institute showcase, presenting a masterclass in modern frontend layout design, premium aesthetic branding, and fluid interactive user experiences.
Floravie represents a premium online presence for a high-end, boutique flower shop. The website serves as a custom academic sample demonstrating how sophisticated design paradigms, modern typography, and refined animations can be woven together to elevate a boutique e-commerce showcase. It centers around a soft, luxurious pastel palette, crisp typography, and realistic vector line-art backgrounds.
- 🌹 Premium Hand-Drawn CSS Vector Art: Features high-performance, beautifully detailed inline SVG rose sketches and floral outline borders framing the header and hero sections.
- 🌫️ Modern Glassmorphic Header: A fully sticky, semi-transparent navigation header styled with custom backdrop filters and light pink borders that blend beautifully with the background on scroll.
- ✒️ Romantic Calligraphic Typography: Incorporates elegant font family pairings, using
Great Vibesfor gorgeous signature cursive overlays alongside premium serif headings. - 🎯 Smart ScrollSpy Navigation: Features dynamic, vanilla JavaScript-driven scroll-tracking that automatically highlights the active menu item in the navigation bar as the user scrolls through the page.
- 💫 Delicate Micro-Animations: Includes a floating animation for the hero bouquet, smooth cubic-bezier hover zooms on floral cards, and soft pink glowing shadows.
- 📱 100% Fully Responsive Layout: Hand-crafted media queries ensure the design adapts seamlessly to widescreen monitors, laptops, tablets, and mobile devices—with smart responsiveness that hides background illustrations on narrower viewports to maximize text legibility.
- 🔗 Offset Anchor Linking: Prevents sticky header overlap using dedicated CSS scroll-margins.
- HTML5: Clean, semantic structure with descriptive tag configurations.
- CSS3: Built using a custom vanilla design system featuring:
- Custom CSS Custom Properties (variables) for absolute theme consistency.
- CSS Flexbox & CSS Grid for fluid structural alignment.
- Hardware-accelerated Keyframe Animations.
- Vanilla JavaScript: Fast, lightweight DOM manipulation script for scroll tracking (ScrollSpy).
- Google Fonts:
- Cinzel (Logo branding)
- Playfair Display (Editorial headings)
- Plus Jakarta Sans (Sleek body copy)
- Great Vibes (Romantic cursive signature)
- Icons: FontAwesome v6 Vector library.
├── assets/ # High-quality optimized images, logo, and mockups
├── index.html # Main website structure & ScrollSpy DOM scripts
├── style.css # Consolidated stylesheet containing layouts, SVGs, and queries
└── README.md # Project presentation (this file)
This project was custom-developed and engineered upon request to serve as a high-fidelity web implementation for a Graphic Design Graduation Project.
It represents a highly successful collaboration where editorial branding, custom pastel palettes, detailed floral sketches, and professional graphic design layouts are translated into a fully responsive, state-of-the-art interactive web experience. It showcases how premium static designs are brought to life through advanced frontend code.