Oriel - Digital Agency HTML Template

Oriel is a modern digital agency website template designed for creative studios, digital agencies, AI-powered businesses, and technology consultancies. Featuring a clean layout, contemporary typography, subtle gradients, and a polished visual identity, Oriel helps businesses present their services, showcase projects, communicate their process, and convert visitors into potential clients. The template includes a structured landing page with dedicated sections for agency introduction, services, portfolio, case studies, team, pricing, and contact. Its modern design balances creative presentation with a professional, business-focused user experience. Key highlights

• Modern AI-inspired digital agency design
• Clean typography and gradient accents
• Dedicated portfolio and case study sections
• Services, team, pricing, and contact sections
• Responsive layout for desktop, tablet, and mobile
• Organized website files for customization
• Suitable for creative studios, technology companies, and digital agencies

Features

• Eight responsive HTML pages with services, team, pricing and contact sections.
• HTML5, CSS3 and vanilla JavaScript; no build process required.
• GSAP animations and Lenis smooth scrolling.
• Interactive portfolio, project detail drawer and before-and-after slider.
• Project cost and timeline estimator with USD, EUR, SGD and MYR.
• Four-step project brief builder and live studio clocks.
• Sora, Geist and Geist Mono typography.
• Included offline documentation.

Requirements

• A modern web browser.
• Basic HTML, CSS and JavaScript knowledge for customization.
• A code editor and a web hosting account.
• An internet connection for Google Fonts and externally hosted animation libraries.

Instructions

1. Download and extract the ZIP package.
2. Open the digital-agency-website folder in your code editor.
3. Open index.html in a modern browser to preview the website.
4. Edit the HTML files to customize page content, headings, links, and contact details.
5. Edit assets/site.css to customize colors, typography, spacing, and layout.
6. Edit assets/site.js to customize interactive features and animations.
7. Replace the demonstration images in the images folder with your own appropriately licensed assets.
8. Review DOCUMENTATION.md and the included documentation/index.html for additional guidance.
9. Upload the complete website folder to your hosting provider.

Note: Externally hosted fonts and animation libraries may require an internet connection.