“Arkit” Documentation by “DynamicLayers” v1.0


“Arkit”

Created: 10/09/2019
By: DynamicLayers


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!


Table of Contents

  1. HTML Structure
  2. Template Components
  3. CSS Files and Structure
  4. JavaScript
  5. Sources and Credits

A) HTML Structure - top

Below is the general HTML structure of the landing page.

1) index.html File Structure - top

The Template layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, portfolio section you can showcase your portfolio with awesome animation, team section is for your team members, testimonial section here you can published your customer reviews, contact section here you can put your contact information & footer that show copyright information.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="description" content="Architecture & Interior HTML Template">
        <meta name="author" content="DynamicLayers">
       
        <title>Arkit | Architecture & Interior HTML Template</title>
        
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
		
		<!-- Font Awesome CSS -->
        <link rel="stylesheet" href="css/fontawesome.min.css">
        <!-- Themify Icons CSS -->
        <link rel="stylesheet" href="css/themify-icons.css">
        <!-- Elegant Line Icons CSS -->
        <link rel="stylesheet" href="css/elegant-line-icons.css">
        <!-- Elegant Icons CSS -->
        <link rel="stylesheet" href="css/elegant-font-icons.css">
        <!-- Flat Icons CSS -->
        <link rel="stylesheet" href="css/flaticon.css">
        <!-- animate CSS -->
        <link rel="stylesheet" href="css/animate.min.css">
		<!-- Bootstrap CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Slicknav CSS -->
        <link rel="stylesheet" href="css/slicknav.min.css">
        <!--Slick Slider-->
        <link rel="stylesheet" href="css/slick.css">
        <!--Slider CSS-->
        <link rel="stylesheet" href="css/slider.css">
        <!-- Venobox CSS -->
        <link rel="stylesheet" href="css/venobox/venobox.css">
		<!-- OWL-Carousel CSS -->
        <link rel="stylesheet" href="css/owl.carousel.css">
		<!-- Main CSS -->
        <link rel="stylesheet" href="css/main.css">
		<!-- Responsive CSS -->
        <link rel="stylesheet" href="css/responsive.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body data-spy="scroll" data-target="#navmenu" data-offset="70">
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        
        <div class="site-preloader-wrap">
            <div class="spinner"></div>
        </div><!-- Preloader -->
        
        <header id="header" class="header-section">
            
		</header> <!--.header-section -->
		
        <div class="header-height"></div>

        <div id="main-slider" class="dl-slider">
            
        </div><!--/.slider-section-->
        
        <section class="about-section padding">
            
        </section><!--/.about-section-->
        
        <section class="service-section bg-grey padding">
           
        </section><!--/.service-section-->
        
        <section class="projects-section padding">
            
        </section><!--/.projects-section-->
        
        <section class="team-section padding">
            
        </section><!--/.team-section-->
        
        <section class="testimonial-section bg-grey padding">
           
        </section><!--/.testimonial-section-->
        
        <section class="blog-section padding">
            
        </section><!--/.blog-section-->
        
        <div class="sponsor-section bg-grey">
           
        </div><!--/.sponsor-section-->
		
        <section class="widget-section padding">
            
        </section><!--/.widget-section-->
        
		<footer class="footer-section align-center">
			
		</footer><!-- /.footer-section -->

		<a data-scroll href="#header" id="scroll-to-top"><i class="arrow_carrot-up"></i></a>
	
		<!-- jQuery Lib -->
		<script src="js/vendor/jquery-1.12.4.min.js"></script>
		<!-- Bootstrap JS -->
		<script src="js/vendor/bootstrap.min.js"></script>
		<!-- Tether JS -->
		<script src="js/vendor/tether.min.js"></script>
		<!-- Slicknav JS -->
		<script src="js/vendor/jquery.slicknav.min.js"></script>
		<!-- OWL-Carousel JS -->
		<script src="js/vendor/owl.carousel.min.js"></script>
		<!-- Smooth Scroll JS -->
		<script src="js/vendor/smooth-scroll.min.js"></script>
        <!-- Venobox JS -->
        <script src="js/vendor/venobox.min.js"></script>
		<!-- Ajaxchimp JS -->
		<script src="js/vendor/jquery.ajaxchimp.min.js"></script>
		<!--Slick Slider-->
		<script src="js/vendor/slick.min.js"></script>
		<!--Counterup JS-->
		<script src="js/vendor/jquery.counterup.min.js"></script>
		<!--Waypoints JS-->
		<script src="js/vendor/jquery.waypoints.v2.0.3.min.js"></script>
		<!--YTPlayer Js-->
		<script src="js/vendor/jquery.mb.YTPlayer.min.js"></script>
		<!-- Wow JS -->
		<script src="js/vendor/wow.min.js"></script>
        <!-- Google Map JS -->
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPH8h1UpcK01BdcvoZeOzq-_wJqRxN1Pc"></script>
		<!-- Main JS -->
		<script src="js/main.js"></script>

    </body>
</html>
        

B) Template Components - top

The site is made of many sections like header, slider, testimonials, services and more...

1) Header Section - top

You can change menu name with your needs from here...

<header id="header" class="header-section">
	<div class="container">
		<nav class="navbar ">
			<a href="index.html" class="navbar-brand"><img src="img/logo-dark.png" alt="Arkit"></a>
			<div class="d-flex menu-wrap">
			   <div id="mainmenu" class="mainmenu">
				   <ul class="nav">
					   <li><a data-scroll class="nav-link active" href="index.html">Home<span class="sr-only">(current)</span></a> 
							<ul>
							   <li><a href="index.html">Home Default</a></li>
							   <li><a href="index-2.html">Home Modern</a></li>
							   <li><a href="index-3.html">Home Classic</a></li>
							   <li><a href="index-4.html">Home Dark</a></li>
							   <li><a href="index-5.html">Home Video Bg</a></li>
							</ul>
						</li>
						<li><a href="#">About</a> 
							<ul>
							   <li><a href="about-us.html">About Us</a></li>
							   <li><a href="about-company.html">About Company</a></li>
							</ul>
						</li>
						<li><a href="#">Services</a> 
							<ul>
							   <li><a href="services-1.html">Services 01</a></li>
							   <li><a href="services-2.html">Services 02</a></li>
							   <li><a href="services-3.html">Services 03</a></li>
							</ul>
						</li>
						<li><a href="#">Projects</a> 
							<ul>
							   <li><a href="projects.html">All Projects</a></li>
							   <li><a href="project-single.html">Projects Single</a></li>
							</ul>
						</li>
						<li><a href="#">Pages</a> 
							<ul>
							   <li><a href="team.html">Our Team</a></li>
							   <li><a href="testimonial.html">Testimonial</a></li>
							   <li><a href="404.html">404 Error</a></li>
							</ul>
						</li>
						<li><a href="#">Blog</a> 
							<ul>
							   <li><a href="blog-grid.html">Blog Grid</a></li>
							   <li><a href="blog-classic.html">Blog Classic</a></li>
							   <li><a href="blog-single.html">Blog Single</a></li>
							</ul>
						</li>
						<li><a href="contact.html">Contact</a></li>
						<li class="phone"><i class="fa fa-phone"></i> (+123) 456 789 101</li>
					</ul>
			   </div>
			</div>
		</nav>
	</div>
</header> <!--.header-section -->

2) Slider Section - top

You need to change images and texts in this slider.


<div id="main-slider" class="dl-slider">
	<div class="single-slide">
		<div class="bg-img kenburns-top-right" style="background-image: url(img/slider-1.jpg);"></div>
		<div class="overlay"></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">Residencial</div></div></div>
					<div class="dl-caption dl-border" data-animation="fade-in-left" data-delay="0s"></div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2s">Dream home might be</div></div>
					</div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2.5s">closer than you think.</div></div></div>
					<div class="dl-caption small"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="3s">Business is the activity of making money.</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">View Projects <i class="arrow_right"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>  
	</div><!--Slide-1-->
	<div class="single-slide">
		<div class="bg-img kenburns-top-right" style="background-image: url(img/slider-2.jpg);"></div>
		<div class="overlay"></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">Residencial</div></div></div>
					<div class="dl-caption dl-border" data-animation="fade-in-left" data-delay="4s"></div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2s">Open the door to</div></div>
					</div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2.5s">better kind of interior.</div></div></div>
					<div class="dl-caption small"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="3s">Business is the activity of making money.</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">View Projects <i class="arrow_right"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>  
	</div><!--Slide-2-->
	<div class="single-slide">
		<div class="bg-img kenburns-top-right" style="background-image: url(img/slider-3.jpg);"></div>
		<div class="overlay"></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">Residencial</div></div></div>
					<div class="dl-caption dl-border" data-animation="fade-in-left" data-delay="0s"></div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2s">Dream home might be</div></div>
					</div>
					<div class="dl-caption big"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="2.5s">closer than you think.</div></div></div>
					<div class="dl-caption small"><div class="inner-layer"><div data-animation="fade-in-left" data-delay="3s">Business is the activity of making money.</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">View Projects <i class="arrow_right"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>  
	</div><!--Slide-3-->
</div><!--/.slider-section-->

3) About Section - top


<section class="about-section padding">
	<div class="container">
		<div class="row about-wrap d-flex align-items-center">
			<div class="col-md-6 xs-padding">
				<div class="about-content">
					<h2>Creating place that enhance <br> the human experience.</h2>
					<p>Arkit is a different kind of architecture practice. Founded by LoganCee in 1991, we’re an employee-owned firm pursuing a democratic design process that values everyone’s input.</p>
					<p>Today we have more than 150 people in London, Hong Kong and Sydney providing architecture, interior and urban design services from concept to completion.</p>
					<a href="#" class="default-btn">More About Us</a>
				</div>
			</div>
			<div class="col-md-6 xs-padding">
				<div class="about-bg">
					<div class="about-bg"></div>
					<div class="dots"></div>
					<div class="year-text">
					   <div class="year-content">
							<h2>10</h2>
							<span>Years of experience</span>
					   </div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--/.about-section-->


4) Services Section - top


<section class="service-section bg-grey padding">
   <div class="dots"></div>
	<div class="container">
		<div class="section-heading text-center mb-40">
		   <span>Services</span>
		   <h2>Our speciallization</h2>
		</div><!--/.section-heading-->
		<div class="service-wrap row">
			<div class="col-lg-4 col-sm-6 padding-15">
				<div class="service-item">
					<div class="service-thumb">
						<img src="img/service-1.jpg" alt="thumb">
					</div>
					<div class="service-content">
						<i class="m-flaticon-refinery"></i>
						<h3>Architecture</h3>
						<p>We offer a fully integrated service that complements the architectural concept, we ensure all projects.</p>
						<a href="#">View Projects</a>
					</div>
				</div>
			</div><!--Item 1-->
			<div class="col-lg-4 col-sm-6 padding-15">
				<div class="service-item">
					<div class="service-thumb">
						<img src="img/service-2.jpg" alt="thumb">
					</div>
					<div class="service-content">
						<i class="m-flaticon-industrial-robot-1"></i>
						<h3>Interior Design</h3>
						<p>We offer a fully integrated service that complements the architectural concept, we ensure all projects.</p>
						<a href="#">View Projects</a>
					</div>
				</div>
			</div><!--Item 3-->
			<div class="col-lg-4 col-sm-6 padding-15">
				<div class="service-item">
					<div class="service-thumb">
						<img src="img/service-3.jpg" alt="thumb">
					</div>
					<div class="service-content">
						<i class="m-flaticon-factory"></i>
						<h3>Commercial Design</h3>
						<p>We offer a fully integrated service that complements the architectural concept, we ensure all projects.</p>
						<a href="#">View Projects</a>
					</div>
				</div>
			</div><!--Item 3-->
		</div>
	</div>
</section><!--/.service-section-->


5) Projects Section - top


<section class="projects-section padding">
	<div class="container-fluid">
		<div class="section-heading text-center mb-40">
		   <span>Projects</span>
		   <h2>Latest works</h2>
		</div><!--/.section-heading-->
		<div id="projects-carousel" class="projects-carousel owl-carousel">
			<div class="project-item">
				<img src="img/project-1.jpg" alt="projects">
				<div class="overlay"></div>
				<a href="img/project-1.jpg" class="view-icon img-popup" data-gall="myGallery"> <i class="fas fa-expand"></i></a>
				<div class="projects-content">
					<a href="projects.html" class="category">Interior</a>
					<h3><a href="project-single.html" class="tittle">Rectangular house near italy</a></h3>
				</div>
			</div>
			<div class="project-item">
				<img src="img/project-2.jpg" alt="projects">
				<div class="overlay"></div>
				<a href="img/project-2.jpg" class="view-icon img-popup" data-gall="myGallery"> <i class="fas fa-expand"></i></a>
				<div class="projects-content">
					<a href="projects.html" class="category">Architecture</a>
					<h3><a href="project-single.html" class="tittle">Cathedral of brasilia brasilia</a></h3>
				</div>
			</div>
			<div class="project-item">
				<img src="img/project-3.jpg" alt="projects">
				<div class="overlay"></div>
				<a href="img/project-3.jpg" class="view-icon img-popup" data-gall="myGallery"> <i class="fas fa-expand"></i></a>
				<div class="projects-content">
					<a href="projects.html" class="category">Design</a>
					<h3><a href="project-single.html" class="tittle">Harpa concert hall reykjavik</a></h3>
				</div>
			</div>
			<div class="project-item">
				<img src="img/project-4.jpg" alt="projects">
				<div class="overlay"></div>
				<a href="img/project-4.jpg" class="view-icon img-popup" data-gall="myGallery"> <i class="fas fa-expand"></i></a>
				<div class="projects-content">
					<a href="projects.html" class="category">Architecture</a>
					<h3><a href="project-single.html" class="tittle">Milwauke museum wisconsin</a></h3>
				</div>
			</div>
			<div class="project-item">
				<img src="img/project-5.jpg" alt="projects">
				<div class="overlay"></div>
				<a href="img/project-5.jpg" class="view-icon img-popup" data-gall="myGallery"> <i class="fas fa-expand"></i></a>
				<div class="projects-content">
					<a href="projects.html" class="category">Design</a>
					<h3><a href="project-single.html" class="tittle">The dancing house prague</a></h3>
				</div>
			</div>
		</div>
	</div>
</section><!--/.projects-section-->


6) Team Section - top


<section class="team-section padding">
	<div class="container">
		<div class="section-heading text-center mb-40">
		   <span>Team</span>
		   <h2>Speciallized team</h2>
		</div><!--/.section-heading-->
		<div class="row team-wrap">
			<div class="col-lg-3 col-sm-6 padding-15">
				<div class="team-item">
				   <div class="overlay"></div>
					<img src="img/team-1.jpg" alt="team">
					<div class="team-content">
						<h3>Jhon Castellon</h3>
						<span>Architect</span>
					</div>
					<ul class="team-social">
						<li><a href="#"><i class="ti-facebook"></i></a></li>
						<li><a href="#"><i class="ti-twitter"></i></a></li>
						<li><a href="#"><i class="ti-instagram"></i></a></li>
						<li><a href="#"><i class="ti-youtube"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 padding-15">
				<div class="team-item">
				   <div class="overlay"></div>
					<img src="img/team-2.jpg" alt="team">
					<div class="team-content">
						<h3>José Carpio</h3>
						<span>Designer</span>
					</div>
					<ul class="team-social">
						<li><a href="#"><i class="ti-facebook"></i></a></li>
						<li><a href="#"><i class="ti-twitter"></i></a></li>
						<li><a href="#"><i class="ti-instagram"></i></a></li>
						<li><a href="#"><i class="ti-youtube"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 padding-15">
				<div class="team-item">
				   <div class="overlay"></div>
					<img src="img/team-3.jpg" alt="team">
					<div class="team-content">
						<h3>Valentin Lacoste</h3>
						<span>Developer</span>
					</div>
					<ul class="team-social">
						<li><a href="#"><i class="ti-facebook"></i></a></li>
						<li><a href="#"><i class="ti-twitter"></i></a></li>
						<li><a href="#"><i class="ti-instagram"></i></a></li>
						<li><a href="#"><i class="ti-youtube"></i></a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 padding-15">
				<div class="team-item">
				   <div class="overlay"></div>
					<img src="img/team-4.jpg" alt="team">
					<div class="team-content">
						<h3>Kyle Frederick</h3>
						<span>Marketer</span>
					</div>
					<ul class="team-social">
						<li><a href="#"><i class="ti-facebook"></i></a></li>
						<li><a href="#"><i class="ti-twitter"></i></a></li>
						<li><a href="#"><i class="ti-instagram"></i></a></li>
						<li><a href="#"><i class="ti-youtube"></i></a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</section><!--/.team-section-->


7) Testimonials Section - top


<section class="testimonial-section bg-grey padding">
   <div class="dots"></div>
	<div class="container">
		<div class="section-heading text-center mb-40">
		   <span>Testimonial</span>
		   <h2>What people says</h2>
		</div><!--/.section-heading-->
		<div id="testimonial-carousel" class="testimonial-carousel owl-carousel">
			<div class="testi-item d-flex align-items-center">
				<img src="img/testi-1.jpg" alt="img">
				<div class="testi-content">
					<p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and know that it was built by the very best!"</p>
					<h3>Kyle Frederick</h3>
					<ul class="rattings">
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
					</ul>
					<span>Director</span>
				</div>
				<i class="fa fa-quote-right"></i>
			</div>
			<div class="testi-item d-flex align-items-center">
				<img src="img/testi-2.jpg" alt="img">
				<div class="testi-content">
					<p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and know that it was built by the very best!"</p>
					<h3>Valentin Lacoste</h3>
					<ul class="rattings">
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
					</ul>
					<span>Director</span>
				</div>
				<i class="fa fa-quote-right"></i>
			</div>
			<div class="testi-item d-flex align-items-center">
				<img src="img/testi-3.jpg" alt="img">
				<div class="testi-content">
					<p>"Thank you for guiding us through the construction process, understanding, and always ready to accommodate our needs. We love our new space and know that it was built by the very best!"</p>
					<h3>José Carpio</h3>
					<ul class="rattings">
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
						<li><i class="fa fa-star"></i></li>
					</ul>
					<span>Director</span>
				</div>
				<i class="fa fa-quote-right"></i>
			</div>
		</div>
	</div>
</section><!--/.testimonial-section-->


8) Blog Section - top


<section class="blog-section padding">
	<div class="container">
	   <div class="section-heading text-center mb-40">
		   <span>From Blog</span>
		   <h2>Speciallized news</h2>
		</div><!--/.section-heading-->
		<div class="row blog-wrap">
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="blog-item">
					<div class="blog-thumb">
						<img src="img/post-1.jpg" alt="post">
						<span class="category"><a href="#">interior</a></span>
					</div>
					<div class="blog-content">
						<h3><a href="#">Minimalist trending in modern architecture 2019</a></h3>
						<p>Building first evolved out dynamics between needs means available building materials attendant skills.</p>
						<a href="#" class="read-more">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="blog-item">
					<div class="blog-thumb">
						<img src="img/post-2.jpg" alt="post">
						<span class="category"><a href="#">Architecture</a></span>
					</div>
					<div class="blog-content">
					   <h3><a href="#">Terrace in the town yamazaki kentaro design workshop.</a></h3>
						<p>Building first evolved out dynamics between needs means available building materials attendant skills.</p>
						<a href="#" class="read-more">Read More</a>
					</div>
				</div>
			</div>
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="blog-item">
					<div class="blog-thumb">
						<img src="img/post-3.jpg" alt="post">
						<span class="category"><a href="#">Design</a></span>
					</div>
					<div class="blog-content">
						<h3><a href="#">W270 house são paulo arquitetos fabio jorge architeqture.</a></h3>
						<p>Building first evolved out dynamics between needs means available building materials attendant skills.</p>
						<a href="#" class="read-more">Read More</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--/.blog-section-->


9) Sponsor Section - top


<div class="sponsor-section bg-grey">
   <div class="dots"></div>
	<div class="container">
		<div id="sponsor-carousel" class="sponsor-carousel owl-carousel">
			<div class="sponsor-item">
				<img src="img/sponsor1.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor2.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor3.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor4.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor5.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor6.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor7.png" alt="sponsor">
			</div>
			<div class="sponsor-item">
				<img src="img/sponsor8.png" alt="sponsor">
			</div>
		</div>
	</div>
</div><!--/.sponsor-section-->

10) Widget Section - top


<section class="widget-section padding">
	<div class="container">
		<div class="row">
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="widget-content">
					<a href="#"><img src="img/logo-dark.png" alt="brand"></a>
					<p>Building your own home is about desire, fantasy. But it’s achievable anyone can do it.</p>
				</div>
			</div>
			<div class="col-lg-2 col-sm-6 sm-padding">
				<div class="widget-content">
					<h4>Company</h4>
					<ul class="widget-links">
						<li><a href="#">About Us</a></li>
						<li><a href="#">Our Services</a></li>
						<li><a href="#">Clients Reviews</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</div>
			</div>
			<div class="col-lg-3 col-sm-6 sm-padding">
				<div class="widget-content">
					<h4>Headquaters</h4>
					<p>962 Fifth Avenue, 3rd Floor New York, NY10022</p>
					<span>Hello@dynamiclayers.net</span>
					<span>(+123) 456 789 101</span>
				</div>
			</div>
			<div class="col-lg-4 col-sm-6 sm-padding">
				<div class="widget-content">
					<h4>Newslatter Subscription</h4>
					<p>Subscribe and get 10% off from our <br>architecture company.</p>
					<div class="subscribe-box clearfix">
						<div class="subscribe-form-wrap">
							<form action="#" class="subscribe-form">
								<input type="email" name="email" id="subs-email" class="form-input" placeholder="Enter Your Email Address...">
								<button type="submit" class="submit-btn">Subscribe</button>
								<div id="subscribe-result">
									<p class="subscription-success"></p>
									<p class="subscription-error"></p>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section><!--/.widget-section-->


11) Footer Section - top


<footer class="footer-section align-center">
	<div class="container">
		<p>© 2019 Arkit Powered by DynamicLayers</p>
	</div>
</footer><!-- /.footer-section -->


12) Configure Contact Form - top

Just change subject line and recipient email address from contact.php file.


// Only process POST reqeusts.
if ($_SERVER["REQUEST_METHOD"] == "POST") {
	// Get the form fields and remove whitespace.
	$name = strip_tags(trim($_POST["name"]));
	$name = str_replace(array("\r","\n"),array(" "," "),$name);
	$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
	$message = trim($_POST["message"]);

	// Check that data was sent to the mailer.
	if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
		// Set a 400 (bad request) response code and exit.
		http_response_code(400);
		echo "Oops! There was a problem with your submission. Please complete the form and try again.";
		exit;
	}

	// Update this to your desired email address.
	$recipient = "contact@yourdomain.com";
	$subject = "Message from $name";

	// Email content.
	$email_content = "Name: $name\n";
	$email_content .= "Email: $email\n\n";
	$email_content .= "Subject: $subject\n\n";
	$email_content .= "Message: $message\n";

	// Email headers.
	$email_headers = "From: $name <$email>\r\nReply-to: <$email>";

	// Send the email.
	if (mail($recipient, $subject, $email_content, $email_headers)) {
		// Set a 200 (okay) response code.
		http_response_code(200);
		echo "Thank You! Your message has been sent.";
	} else {
		// Set a 500 (internal server error) response code.
		http_response_code(500);
		echo "Oops! Something went wrong and we couldn't send your message.";
	}

} else {
	// Not a POST request, set a 403 (forbidden) response code.
	http_response_code(403);
	echo "There was a problem with your submission, please try again.";
}



C) CSS Files and Structure - top

These are the css files:

  1. bootstrap.min.css
  2. font-awesome.min.css
  3. themify-icons.css
  4. elegant-font-icons.css
  5. elegant-line-icons.css
  6. venobox.css
  7. slicknav.min.css
  8. animate.min.css
  9. owl.carousel.css
  10. main.css
  11. responsive.css

 


D) JavaScript - top

This theme use these Javascript files:

  1. jquery-1.12.4.min.js
  2. bootstrap.min.js
  3. tether.min.js
  4. jquery.slicknav.min.js
  5. owl.carousel.min.js
  6. smooth-scroll.min.js
  7. venobox.min.js
  8. jquery.ajaxchimp.min.js
  9. wow.min.js
  10. main.js

E) Sources and Credits - top

  1. Bootstrap 4
  2. VenoBox
  3. Smooth Scroll
  4. Owl Carousel
  5. Slicknav
  6. Ajaxchimp


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.

DynamicLayers

Go To Table of Contents