Thank you very much for purchasing our theme! If you have any questions that aren't covered in this documentation, please feel free to email us.
Archid | Architecture & Interior Design HTML5 Template based on bootstrap 5x. With 2+ different home page layouts, 13+ Html files included Best Idea for Architectural Business, Interior Design, Construction and Business Startup. High Resolution Images and google fonts.
It will be fit any mobile or tablet devices. This is a flexible template uses fresh and clean design.
-assets (all assets/required file of this template) --bootstrap (bootstrap core files) --css (all css files) --slick slider (all owl slider files) --fonts (bootstrap icons and font-awesome font icon set ) --images (all images) --js (all javascript files) --magnific-popup (all files for image popup) --simple-text-rotator (text rotator plugin) --videos (html5 video formats) - email-templates (a basic email template functional with contact form) -and all other html files
Being based on Twitter Bootstrap, Archid inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.
Example markup:
<div class="row">
<div class="col-md-12">
Level 1 column
<div class="row">
<div class="col-md-6">Level 2</div>
<div class="col-md-6">Level 2</div>
</div>
</div>
</div>
CSS Files
<link rel="stylesheet" href="assets/css/all.min.css">
<link rel="stylesheet" href="assets/css/themify-icons.css">
<link rel="stylesheet" href="assets/css/elegant-line-icons.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/slick.min.css">
<link rel="stylesheet" href="assets/css/slider.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/nice-select.css">
<link rel="stylesheet" href="assets/css/odometer.min.css">
<link rel="stylesheet" href="assets/css/main.css">
@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
JavaScripts Files
<!-- jQuery Javascript Plugins --> <script src="assets/js/vendor/jquery-1.12.4.min.js"></script> <script src="assets/js/vendor/popper.min.js"></script> <script src="assets/js/vendor/bootstrap.min.js"></script> <script src="assets/js/vendor/waypoints.min.js"></script> <script src="assets/js/vendor/slick.min.js"></script> <script src="assets/js/vendor/headroom.min.js"></script> <script src="assets/js/vendor/jquery.smoothscroll.min.js"></script> <script src="assets/js/vendor/jquery.magnific-popup.min.js"></script> <script src="assets/js/vendor/jquery.ajaxchimp.min.js"></script> <script src="assets/js/vendor/jquery.mb.YTPlayer.min.js"></script> <script src="assets/js/vendor/odometer.min.js"></script> <script src="assets/js/vendor/jquery.nice-select.min.js"></script> <script src="assets/js/vendor/simpleParallax.min.js"></script> <script src="assets/js/vendor/wow.min.js"></script> <script src="assets/js/contact.js"></script> <script src="assets/js/appointment.js"></script> <script src="assets/js/main.js"></script>
There are two kinds of font icons used in this template.
Font Awesome is a @font-face iconset that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example:
<i class="fa fa-file"></i> <i class="fa fa-home"></i> <i class="fa fa-envelope"></i>
Flaticon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'mdi-[icon name]', for example:
<i class="bi bi-camera"></i> <span class="bi bi-globe"></span>
You can use all hero units (slider sections) at any pages. Just copy the Intro Section or Video Section or Slider section and past it in any pages. You can create new pages with this bolcks.
Example:
If you wish to make your homepage with html video slider just copy this code and past it on your new page.
<!-- Slide 1 -->
<div class="single-slide">
<div class="bg-img kenburns-top-right" style="background-image: url(assets/img/slider-1.jpg);"></div>
<div class="slider-content-wrap d-flex align-items-center text-left">
<div class="container">
<div class="slider-content">
<div class="dl-caption medium">
<div class="inner-layer">
<div data-animation="fade-in-right" data-delay="1s">Where Design Meets Purpose</div>
</div>
</div>
<div class="dl-caption big">
<div class="inner-layer">
<div data-animation="fade-in-left" data-delay="2s">Creating Spaces<br>That Inspire Living</div>
</div>
</div>
<div class="dl-caption small">
<div class="inner-layer">
<div data-animation="fade-in-left" data-delay="3s">We blend architecture and interior design to bring elegance and function into every space.</div>
</div>
</div>
<div class="dl-btn-group">
<div class="inner-layer">
<a href="#" class="dl-btn" data-animation="fade-in-left" data-delay="3.5s">Explore Projects <i class="arrow_right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Important: Dont forget to add required CSS files and Javascript files at header and footer.
You will get lots of shortcodes with this template. We made all shortcodes clean and re useable.
You can use all shortcodes at anywhere and in any pages of this template. Just copy any block you like and past it any where you wish.
Example:
<section class="service-section bg-dark padding">
<div class="container">
<div class="section-heading text-center mb-40 wow fadeInUp" data-wow-delay="200ms">
<h2>Architecture & Interior Services</h2>
<p>We design modern, functional, and aesthetic spaces that reflect your personality and vision. <br> From planning to execution, we craft your dream environment with care.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="300ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-1.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-city"></i>
</div>
<h3><a href="services.html">Architectural Design</a></h3>
<p>Creative and sustainable architectural solutions tailored to your lifestyle and space.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="400ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-2.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-brush"></i>
</div>
<h3><a href="services.html">Interior Design</a></h3>
<p>Elegant and functional interiors that transform your space into a stylish living experience.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="500ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-3.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-pen-fancy"></i>
</div>
<h3><a href="services.html">3D Visualization</a></h3>
<p>Photorealistic 3D renders that bring your ideas to life before the first brick is laid.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
</section><!-- /.service-section --><section class="service-section bg-dark padding">
<div class="container">
<div class="section-heading text-center mb-40 wow fadeInUp" data-wow-delay="200ms">
<h2>Architecture & Interior Services</h2>
<p>We design modern, functional, and aesthetic spaces that reflect your personality and vision. <br> From planning to execution, we craft your dream environment with care.</p>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="300ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-1.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-city"></i>
</div>
<h3><a href="services.html">Architectural Design</a></h3>
<p>Creative and sustainable architectural solutions tailored to your lifestyle and space.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="400ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-2.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-brush"></i>
</div>
<h3><a href="services.html">Interior Design</a></h3>
<p>Elegant and functional interiors that transform your space into a stylish living experience.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 sm-padding wow fadeInUp" data-wow-delay="500ms">
<div class="service-card">
<div class="service-thumb">
<img src="assets/img/service-3.jpg" alt="img">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fa-solid fa-pen-fancy"></i>
</div>
<h3><a href="services.html">3D Visualization</a></h3>
<p>Photorealistic 3D renders that bring your ideas to life before the first brick is laid.</p>
<a href="services.html" class="read-more"><i class="fa-solid fa-plus"></i></a>
</div>
</div>
</div>
</div>
</div>
</section><!-- /.service-section -->
Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template.
The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section. You can host video form root server or can add link form other server.
For browser support you have to provide two format video(.webm/.ogg and .mp4)
The markup:
<section class="hero-section video">
<div id="video-bg" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=9SYA55pfPCs',containment:'.hero-section',autoPlay:true, mute:true, showControls:false, startAt:0, opacity:1}"></div>
<div class="container">
<div class="hero-content text-center">
<h4>Architecture & Interior</h4>
<h1 class="text-uppercase">Innovative Designs<br>That Inspire Everyday Living</h1>
<p>Book a consultation with our expert team to bring your vision to life.<br>We specialize in modern architecture and elegant interior solutions.</p>
<a href="services.html" class="default-btn">Book an Appointment<span></span></a>
</div>
</div>
</section><!-- /.hero-section -->
In Archid HTML5 template there is full functional working contact form. We have also added a simple email template with this contact form.
To customize/change the email address please open "sendemail.php" file from root folder in any code editor .
Go to the line number 9. There is a line:
$to = 'youremail@gmail.com'; //put your email here
Replace the existing email address with your own mailing address.
Thats it! your template is ready now for receive message from others via mail.
Twitter Bootstrap: http://getbootstrap.com/
animate.css: http://daneden.github.io/animate.css/
Google Fonts: http://www.google.com/webfonts
Font Awesome: http://fontawesome.io/
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/
megamenu: http://bootsnav.danurstrap.com/
smoothscroll: http://cferdinandi.github.io/smooth-scroll/
countTo: https://github.com/mhuggins/jquery-countTo
stellar: http://markdalgleish.com/projects/stellar.js/
Shuffle: http://vestride.github.io/Shuffle/
inview: https://github.com/protonet/jquery.inview
slick slider: https://kenwheeler.github.io/slick/
Photos and Videos
Important!