Portico Architecture Studio HTML Template

Portico is a modern and premium multi-page HTML template designed for architecture studios, interior design firms, and built-environment practices. It includes 10 fully designed pages with a refined editorial design system, warm earth-tone color palette, large serif typography, and a layout rhythm that feels premium and intentional across every screen size.

This template is built using Bootstrap 5, providing a solid and flexible foundation that makes customization straightforward for developers of all levels.

What's Included

• Template — Full HTML source files ready to use
• Documentation — Step-by-step guide covering installation, customization, and structure

Pages Included

• Home (`index.html`) — Full-screen hero with overlay, selected work grid, studio philosophy, stats, services overview, testimonials, journal preview, client logos, and CTA band
• About (`about.html`) — Editorial hero, studio story, values grid, team portraits, stats, and CTA
• Services (`services.html`) — Services list, process section, capabilities overview, and CTA
• Service Detail (`service-detail.html`) — Full service breakdown, related projects, and inquiry CTA
• Projects (`projects.html`) — Filterable project grid with category tabs
• Project Detail (`project-detail.html`) — Full project case study with overview, image gallery, result metrics, and related projects
• Journal (`journal.html`) — Featured article, archive grid with categories and read times
• Journal Post (`journal-post.html`) — Full article layout with author bio and related posts
• Careers (`careers.html`) — Studio culture, benefits, open positions accordion, and application CTA
• Contact (`contact.html`) — Contact form with validation, studio info, and map placeholder

Template Features

• Premium architecture and design studio aesthetic
• 10 fully designed pages with unique layouts
• Built with Bootstrap 5 (latest stable)
• Warm editorial design system — earth tones, serif headings, refined spacing
• Cormorant Garamond + DM Sans Google Fonts pairing
• CSS custom properties for effortless theming
• Light inner-page hero component — no background images
• Transparent-to-solid scroll nav behavior
• Filterable project grid
• FAQ accordion
• Contact form with client-side validation and success state
• Scroll reveal animations
• Fully responsive design
• Cross-browser compatible
• Clean, well-structured BEM code
• No build tools required — works by opening index.html directly