We Build Truly Inspiring Works

Whether it’s a personal blog, a business site, or an e-commerce platform, I deliver tailored solutions to meet your needs. 

Moddie Website

The Project Overview

Moddie is a premium modular home builder focused on modern families. The goal was to build a high-conversion, visually stunning landing page that mirrors the “factory-built, installed in one day” precision of the product. The project required a blend of architectural minimalism and advanced front-end functionality.

Core Features & Solutions

  • Custom Modular Range Selector: Built a bespoke, tabbed “House Selector” using HTML, CSS, and Vanilla JS. It features a standardized aspect-ratio carousel to prevent layout shifting and includes a custom lightbox gallery for high-resolution floorplan and interior viewing.
  • Performance-Optimized Hero Section: Developed a full-screen video hero with great proportions. I engineered a custom mobile override that anchors content to the bottom of the viewport, ensuring the background video remains the focal point without being obscured by UI elements.
  • Smart Branding Logic: Implemented a “Smart Header” that detects scroll depth to toggle between transparent and solid states, including a dynamic logo-swap system (white-to-black) to maintain perfect contrast at all times.
  • Interactive Location Badge: Designed a compact, responsive Google Maps integration with a custom “Moddie” aesthetic. It features a grayscale-to-color hover transition to maintain the site’s monochrome palette while remaining functional.
  • Lead Retention Strategy: Designed and coded a custom “Thank You” page with automated redirect logic. The page uses lead-retention links (Pricing/Range) to keep users engaged in the sales funnel even after form submission.

Technical Toolkit

  • Framework: Elementor (WordPress) with heavy Custom HTML/CSS/JS overrides.
  • Languages: CSS3 (Flexbox/Grid), JavaScript (DOM Manipulation, Preloading), SVG.
  • UX Focus: Mobile-first responsiveness, Layout Stability (CLS optimization), and fast-loading image preloading scripts.

The Result

A seamless, fast-loading digital experience that translates the luxury and efficiency of modular building into a mobile-responsive interface. The site effectively guides users from high-level inspiration to technical site assessments with zero friction.

Project URL: https://moddie.com.au/

Technologies Used: Elementor, CSS3, HTML5, JS

Client: Moddie Australia

Budget: AUD$800

Location: Victoria Australia

Timeline: 2 Weeks


Discover more from Petruth Web Solutions

Subscribe to get the latest posts sent to your email.

Scroll to Top