AURA & LOOM Desgn HTML Teaplate

🌿 Key Features 1. Visual Design & Aesthetics Organic Modernism: Moves away from sharp angles to soft curves, arches, and rounded corners (border-radius), creating a welcoming and natural feel. Earthy Color Palette: Uses a sophisticated mix of Cream (#f9f9f7), Sage Green (#6b705c), and Terracotta (#c17c5f) to evoke sustainability and luxury. Editorial Typography: Pairs Playfair Display (Serif) for elegant, high-fashion headings with Lato (Sans-Serif) for clean, readable body text. Soft Shadows: Utilizes diffuse, low-opacity box shadows to create depth without harsh lines. Arch & Circle Motifs: The Hero image and Team photos use arch and circular masks to break the standard rectangular grid. 2. User Interface (UI) Elements Glassmorphism Header: The navigation bar becomes semi-transparent with a blur effect (backdrop-filter) upon scrolling. Minimalist Service Cards: Clean white cards with subtle numbering and iconography that lift gently on hover. Underline Animations: Navigation links feature a smooth width-expansion underline effect on hover. Image Zoom Effects: Portfolio and Hero images slowly scale up (transform: scale) when hovered or loaded, adding a cinematic feel. Circular Stats Badge: A floating badge in the About section highlights key metrics (e.g., "10+ Years") in a circular frame. 3. Interactivity & Motion Scroll-Triggered Animations: Elements fade in and slide up (fade-in-up) as the user scrolls down using the Intersection Observer API. Number Counters: Animated counters in the About section that count up from zero to the target number. Smooth Scrolling: Native CSS scroll-behavior: smooth for seamless navigation between sections. Mobile Hamburger Menu: A clean, full-width dropdown menu for mobile devices. ⚙️ Technical Specifications 1. Code Architecture Single File Structure: All HTML, CSS, and JavaScript are contained within one .html file for easy deployment and testing. Semantic HTML5: Uses proper tags (

,

,

,

,