This download ships with the full SummitRoof media kit: 11 fully-built pages, 3 homepage variants (Bold, Modern, Minimal), a complete photographic-style placeholder system across 7 categories, branded documentation and a one-page replacement cheat sheet. Drop your own photography into the matching placeholder folder and the design snaps to your brand with no HTML edits required.

What’s inside

• 11 pages — home (3 variants), about, services, service single, projects gallery, blog, blog single, contact and 404
• 3 homepage variants — full-bleed photographic hero (Bold), split hero with photo service cards (Modern), clean photo-led (Minimal)
• Conversion-first components — inline quote form on the hero, before/after slider, FAQ accordion, animated stats band, testimonials with avatars, sticky quote CTA
• Photography placeholder system — 23 premium SVG placeholders in 7 categories (hero, crew, tools, roofs, team, people, areas) sized to match the original layout slots
• Documentation — visual replacement guide, per-slot dimensions, recommended sources (Adobe Stock, Shutterstock, Envato Elements, AI generators, custom local photography) and Squoosh-based optimization workflow

Design & theming

• 114 design tokens mirroring the Figma system — colors, spacing, radius, shadows and type — change once, updates everywhere
• Three-tone palette — ember (CTA orange), slate (cool neutrals), steel (link blue) — hand-tuned for AA contrast
• Light + dark mode — auto from system preference, toggle in the header, prefers-color-scheme aware, no flash on first paint
• Typography — Sora (display) + Inter (body) referenced with a system-sans fallback; drop the woff2 files into assets/fonts/ for self-hosted production

Motion & interaction

• Cinematic per-scene rhythm — every section is assigned a tempo (hero, brisk, walk, immersive, gravity, crescendo, resolution) for a directed feel rather than a pile of effects
• Word-level headline reveals, scroll-revealed service cards, weighted smooth scroll (desktop only), pointer-parallax hero (desktop only), branded loader with repeat-visitor skip
• GPU-only animation — transform and opacity only, CLS ~0 across the entire kit
• prefers-reduced-motion honored across every animation, smooth scroll and parallax

Technical details

• No framework, no build step — pure HTML, design-token CSS and vanilla JavaScript; file:// openable, drops into any host or CMS
• 11 modular JS files in assets/js/motion/ — each module is independent, remove any file to disable that feature
• 4-layer CSS — motion tokens, design tokens + components, reveal engine, premium experience layer
• Responsive — mobile, tablet and desktop layouts with no horizontal overflow; object-fit: cover on every image for clean crops at any ratio
• Accessibility — visible focus rings, keyboard-operable nav and FAQ, ARIA on accordions and dialogs, skip link, screen-reader-clean word reveals
• Performance — fetchpriority="high" on hero, loading="lazy" below the fold, ~15 KB motion footprint, no jQuery, no Bootstrap, no Swiper, no GSAP

How customers replace the photography

The downloadable package ships with a complete branded placeholder media system — every image slot is filled with a premium SVG placeholder that mirrors the original photo’s role, aspect ratio and visual weight. To swap in your own photography:

1. Open documentation/media-assets.html for the visual catalog and per-slot recommended dimensions.
2. Resize your photos to match (1920 × 1080 for hero, 1600 × 1000 for gallery, 1000 × 1000 for avatars).
3. Optimize to .webp at quality 80 via Squoosh — target < 250 KB per image.
4. Replace the placeholder file with your photo at the matching path, keeping the same root filename. Done.

Sources for premium photography

We recommend custom local photography as the highest-quality option. For stock imagery use Adobe Stock, Shutterstock, Envato Elements, iStock or AI generators (Midjourney, Adobe Firefly, Google Imagen). Sources and per-crop guidance are listed in the included documentation.

Browser & device support

Tested on the latest stable releases of Chrome, Edge, Firefox and Safari across phone, tablet and desktop breakpoints. Forms are client-side demos — wire the data-quote-form action to your backend or email service for live use.

Files & folders

• summitroof/ — root HTML pages and AJT-JS folder
• assets/css/ — motion-tokens.css, style.css, animations.css, premium.css (load order is fixed in every page)
• assets/js/motion/ — 11 vanilla modules — loader.js, theme.js, reveal.js, header.js, beforeAfter.js, accordion.js, parallax.js, smooth-scroll.js and more
• assets/images/placeholders/ — 23 SVG placeholders across 7 categories
• documentation/ — index.html, media-assets.html (visual replacement guide), photography-system.md
• REPLACE-MEDIA.md — one-page replacement cheat sheet
• README.md, AUTHOR.md

Credits

Built entirely with first-party code by Design Garage Studio — no jQuery, no Bootstrap, no Swiper, no GSAP, no external JS libraries. Display font Sora and body font Inter are both Open Font License (OFL). The placeholder system is fully original SVG and free to ship with the kit.

© 2026 Design Garage Studio. Summit Roofing Co. used throughout sample content is a fictional demo brand, not the item author.

Archline is a modern, clean, and highly flexible HTML template designed for architecture firms, interior designers, construction companies, and creative studios. Crafted with a strong focus on aesthetics and usability, it helps you showcase your projects, services, and brand identity in a professional and engaging way.

The template includes beautifully designed pages such as project showcase, services, about, blog, and contact, allowing you to present your work with clarity and style. With pixel-perfect design, clean code structure, and developer-friendly components, Archline makes customization simple and efficient.

Archline is fully responsive and optimized for all modern devices and browsers, ensuring your website looks stunning on desktops, tablets, and smartphones. It is also SEO-friendly and built with best practices to help improve your online visibility.

Main Features

• 03 Home page variations
• W3C validated code
• Built with HTML5, CSS3 & Bootstrap
• Smooth Gsap Animations and interactive effects
• Easy to Customize
• Fully Responsive Layout (Mobile, Tablet & Desktop)
• Minimal and Clean
• Fonts Awesome Icons
• Off-canvas Menu
• Free Google Fonts.
• Awesome Unique Look
• All files are well commented
• Well Documentation
• Free Updates
• Displays well in all modern browsers and devices

What do you get?

• Main files
• documentation

Images:

• Freepik
• Unspalsh

Note:

• Images are only for demo purpose and not included with the download bundle.

Mistral is a modern and immersive portfolio template designed for photographers, creative studios, and visual storytellers. Built with performance and aesthetics in mind, it combines clean layouts with smooth GSAP-powered animations to create a refined browsing experience.

From cinematic hero sections to subtle scroll reveals and parallax effects, every detail is crafted to elevate visual content without distraction.

Perfect for showcasing photography, editorial work, travel projects, or creative direction.

Features

• Fully responsive and mobile-optimized design
• Built with HTML5, CSS3, and vanilla JavaScript
• Smooth GSAP + ScrollTrigger animations
• Parallax effects for immersive storytelling
• Clean and minimal layout structure
• Cross-browser compatibility
• Well-organized and commented code
• Easy to customize and adapt

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)
• GSAP + ScrollTrigger
• OwlCarousel
• Lenis (smooth scrolling)

Suitable For

• Photographers
• Creative studios
• Freelancers
• Travel and editorial projects
• Agencies

Features:

• Build with React Js v19.x
• Build with Bootstrap
• Dark & Light version available
• No jQuery Dependency
• Fully Responsive layout
• Clean & Modern Design
• Well documented
• Use Feather Icons, Material Design Icons & Unicons Icons
• Free Google Fonts
• High-Speed Performance
• Great Menu for Small Devices
• Smooth Scroll
• Free Updates
• And much more…..

Version 1.0.0 - 10th January 2026
---------
 - Initial Released

Features:

• Build with React Js v19.x
• Build with Bootstrap
• Dark & Light version available
• No jQuery Dependency
• Fully Responsive layout
• Clean & Modern Design
• Well documented
• Use Feather Icons, Material Design Icons & Unicons Icons
• Free Google Fonts
• High-Speed Performance
• Great Menu for Small Devices
• Smooth Scroll
• Free Updates
• And much more…..

Version 1.0.0 - 10th January 2026
---------
 - Initial Released

The template includes 3 unique homepage variations, 4 gallery layouts, detailed blog pages, client testimonials, pricing tables, team sections, and more. Every section is thoughtfully designed and cleanly coded, making customization easy and flexible.

Zeo is fully responsive, SEO-optimized, and compatible across all major browsers. Whether you’re launching a personal blog or a photography portfolio, Zeo offers the perfect foundation to highlight your work and connect with your audience.

Full Features List

• 3 Home Pages
• Unlimited Blog
• 100% Fluid Responsive – Fits any device perfectly
• Tested on real devices
• Working PHP AJAX Contact Form.
• Flexible Layout
• Flat, modern and clean design.
• Retina Optimised
• Social Links
• Clean & Commented Code
• Advanced Typography
• Custom Font Support
• Pixel Perfect Design
• Cross Browser Compatibility
• Parallax effect
• Awesome Unique Look
• Unique effects and functionality
• Google font
• Quick, Dedicated & Professional Support
• Well Documented

Credits

Please check all credits on the documentation folder. Images not included to the .zip

Full Features List

• 3 Home Pages
• Unlimited Blog
• 100% Fluid Responsive – Fits any device perfectly
• Tested on real devices
• Working PHP AJAX Contact Form.
• Flexible Layout
• Flat, modern and clean design.
• Retina Optimised
• Social Links
• Clean & Commented Code
• Advanced Typography
• Custom Font Support
• Pixel Perfect Design
• Built on Bootstrap 4
• Cross Browser Compatibility
• Parallax effect
• Awesome Unique Look
• Unique effects and functionality
• Google font
• Quick, Dedicated & Professional Support
• Well Documented

Credits

Please check all credits on the documentation folder. Images not included to the .zip

The standard information sections will help anyone to customize according to their branding info. This template is very well commented and also have proper help documentation too.

Features:

• Built with Django 5x with Bootstrap 4x
• 150+ Website templates with Multi Pages
• Unique Design
• Fully Responsive Design
• Valid HTML5 & CSS3.
• Retina-ready
• Google fonts
• 200+ beautiful UI elements
• High quality retina ready icon sets
• And much more..

With Clippa, your website will have a sleek and professional look. It follows the latest Bootstrap 5 Grid System. Hence, your website layout becomes responsive and visually appealing across all devices. Your website will look pixel-perfect on a desktop computer, tablet, or mobile phone.

Main Features

• 06 Modern Home Page
• Modern and Clean Design
• Based on Bootstrap Latest Version
• HTML5, CSS3, jQuery
• 100% Responsive
• Working Contact Form PHP
• Easy to Customize
• Valid HTML5
• SEO optimized
• Retina Ready
• Based On Sass
• Minimal and Clean
• HTML CSS JS Included
• Fonts Awesome Icons
• linea Icons
• Free Google Fonts.
• Awesome Unique Look
• All files are well commented
• Well Documentation
• Free Updates
• Displays well in all modern browsers and devices

What do you get?

• HTML content
• documentation

Sources and Credits:

• jQuery
• bootstrap
• Swiper
• YouTubePopUp
• parallaxie
• magnificPopup

Font:

• jQuery
• bootstrap
• Swiper
• YouTubePopUp
• parallaxie
• magnificPopup

• Poppins
• Roboto

Font:

• jQuery
• bootstrap
• Swiper
• YouTubePopUp
• parallaxie
• magnificPopup

Images:

• Pexels
• Unspalsh

Note:

• Images are only for demo purpose and not included with the download bundle.

Artmart – Art Gallery & Auctions HTML Template

Artmart is a sophisticated and modern HTML template designed for art galleries, creative exhibitions, and online auctions. Whether you want to showcase art collections, host auctions, or promote events, Artmart is the perfect solution to bring your vision to life.

Key Features

• Elegant Design: A clean and visually stunning layout tailored for art-related platforms.
• Auction Pages: Dedicated templates for live and timed auctions with bidding functionalities.
• Art Galleries: Stunning gallery layouts including grid and masonry styles.
• Responsive & Retina Ready: Looks flawless on all devices, including mobile, tablet, and desktop.
• Cross-Browser Compatible: Seamless performance on Chrome, Firefox, Safari, and more.
• SEO Optimized: Structured HTML5 code for better search engine rankings.
• Easy to Customize: Clean and well-commented code for smooth editing.
• Google Fonts: Choose from a wide variety of modern typography options.
• Detailed Documentation: Step-by-step guide for setting up and customizing the template.
• Animations: Smooth CSS3 animations for an engaging user experience.

Why Choose Artmart?

Artmart combines aesthetics with functionality, making it ideal for artists, galleries, and auctioneers to create a professional online presence. Its customizable components and user-friendly codebase ensure that even developers with minimal experience can set up the template quickly.

Note

This is an HTML template and does not include any backend functionalities. Images are for demo purposes only and not included in the download package.

Start Your Art Journey Today!

Transform your creative ideas into reality with Artmart – Art Gallery & Auctions HTML Template. Grab it now and create a stunning platform for art and auctions!