Affapress Documentation

This documentation contains a complete tutorial that will make you easier to customize the look of the template as you want.

Thank you very much for purchasing from Affapress.

If you have any issues or questions that this documentation does not cover, you can send us a message to support@affapress.com.
You can get more updates documentation here!


Template Installation


You can view this template in any web browser from your desktop computer. Because the files are written in HTML, you do not need an internet connection in order to display or edit the template from your text editor.

All of the HTML files are given a descriptive name to make it easier to distingish what each file will display.

Upload to The Server

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.
  2. Select template layout which you want, choose "boxed or stretched" folder and there will have several files with the extension labeled .html. This is where all your content will. In addition to .html you should see a file labeled .css. The .css files are going to be the files that will tell the .html how to to be styled. CSS is simply a way to take text, images, and other elements and change the look of them. It's very important to keep the .css file with the HTML or the HTML will not look how the design is meant to look. Along with the HTML and CSS files, you will also have five additional folders to upload: css, fonts, images, js and mailchimp.
  3. Start your FTP client (I persoanlly use Filezilla which is free) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.
  4. Locate the domain folder you wish to upload your template files to on your server. You are going to want to click and drag every file that you have labeled .html, .css, .js into your FTP client.
  5. Once the files are done uploading, you can try access your website via browser.

Change The Template Color

It's easy to change color of this template, you just need to change the a line code below:

  1. Open the .html file (example index.html).
  2. Find this line of code in <head> section:
                        <!-- Custom Colors -->
                        <!--<link rel="stylesheet" href="css/colors/green.css">-->
                        <!--<link rel="stylesheet" href="css/colors/orange.css">-->
                    	<!--<link rel="stylesheet" href="css/colors/purple.css">-->
                    	<!--<link rel="stylesheet" href="css/colors/red.css">-->
                        <!--<link rel="stylesheet" href="css/colors/yellow.css">-->
                        
  3. Choose your favorite color with remove one of the comment tag like this:
                        <!-- Custom Colors -->
                        <!--<link rel="stylesheet" href="css/colors/green.css">-->
                        <link rel="stylesheet" href="css/colors/orange.css">
                    	<!--<link rel="stylesheet" href="css/colors/purple.css">-->
                    	<!--<link rel="stylesheet" href="css/colors/red.css">-->
                        <!--<link rel="stylesheet" href="css/colors/yellow.css">-->
                        
  4. Save and see the result!

HTML Structure


This site template has a fixed layout with a variation of column layouts depending on the page. This template uses the 1170 grid system (12 columns) which will help streamline any customization you wish to make. If you're unfamiliar with the 1170 grid system, be sure to read about it here.

The main structure of this site is wrapped in a 'container' div. Inside of that div you will find each major section of the site given an appropritae grid size all equalling 12 columns in length. For example, the '#main' element has a class of 'col-md-8' and the '#side' element has a class of 'col-md-4'. The total columns equals 12 columns.

                <div class="container">
                    <div class="row">
                        <div id="main" class="col-md-8"></div>
                        <div id="side" class="col-md-4"></div>
                    </div>
                </div>
                

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following in /css/style.css :

                .navbar { text-align:center; }
                

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

                #header .navbar { text-align:center; }
                

So, to ensure that your new styles are applied, make sure that they carry enough 'weight' and that there isn't a style lower in the CSS file that is being applied after yours.


Web Elements

You can see all the HTML element examples for this template and you can see the source code to learn how to make it from this link:


Navigation

– Conference

                <nav id="navigation" class="navbar navbar-conference navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand">
        					<a href="index.html"><img src="images/logo.png" alt="Logo"></a> <!-- logo -->
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-ticket">Get a Ticket</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

– Corporate

                <nav id="navigation" class="navbar navbar-corporate navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand navbar-brand-affix"> <!-- logo -->
        					<a href="index.html">
        						<img src="images/logo.png" alt="Logo" class="brand-main">
        						<img src="images/logo-dark.png" alt="Logo" class="brand-secondary">
        					</a>
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#signup" class="nav-link smooth-scroll">Get a Free Quote</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

– Course

                <nav id="navigation" class="navbar-wrap">
        			<div class="navbar navbar-course navbar-landing navbar-affix scrollspy">

        				<!-- .container -->
        				<div class="container">

        					<div class="navbar-brand">
        						<a href="index.html"><img src="images/logo.png" alt="Logo"></a> <!-- logo -->
        					</div>

        					<ul class="nav"> <!-- menu -->
        						<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        						....
        						<li class="nav-menu-btn">
        							<a href="#signup" class="nav-link smooth-scroll">Get an Information</a>
        						</li>
        					</ul>

        					<div class="nav-btn-mobile"> <!-- button -->
        						<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        					</div>

        				</div>
        				<!-- .container end -->

        			</div>
        		</nav>
                

– Ebook

                <nav id="navigation" class="navbar-wrap">

        			<!-- .navbar -->
        			<div class="navbar navbar-ebook navbar-landing navbar-affix scrollspy">
        				<div class="container">

        					<div class="navbar-brand">
        						<a href="index.html"><img src="images/logo-dark.png" alt="Logo"></a> <!-- logo -->
        					</div>

        					<ul class="nav"> <!-- menu -->
        						<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        						....
        						<li class="nav-menu-btn">
        							<a href="#" class="nav-link" data-toggle="modal" data-target="#modal-download">Get a Free Sample</a>
        						</li>
        					</ul>

        					<div class="nav-btn-mobile"> <!-- button -->
        						<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        					</div>

        				</div>
        			</div>
        			<!-- .navbar end -->

        		</nav>
                

– Entrepreneur

                <nav id="navigation" class="navbar navbar-entrepreneur navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand navbar-brand-affix"> <!-- logo -->
        					<a href="index.html">
        						<img src="images/logo.png" alt="Logo" class="brand-main">
        						<img src="images/logo-dark.png" alt="Logo" class="brand-secondary">
        					</a>
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#schedule" class="nav-link smooth-scroll">Consult with Me</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

– Hotel

                <div class="navbar-top-hotel">

        			<!-- .container -->
        			<div class="container">

        				<div class="nav-left">
        					<p>text</p>
        				</div>

        				<div class="nav-right">
        					<ul class="nav-socials">
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        						....
        					</ul>
        					<div class="nav-btn">
        						<a href="#"><i class="ion ion-ios-telephone"></i> 1 (234) 567-8901</a>
        					</div>
        				</div>

        			</div>
        			<!-- .container end -->

        		</div>
                
                <nav id="navigation" class="navbar navbar-hotel navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand">
        					<a href="index.html"><img src="images/logo-dark.png" alt="Logo"></a> <!-- logo -->
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#availability" class="nav-link smooth-scroll">Booking Now</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

– Medical

                <nav id="navigation" class="navbar-wrap">

        			<!-- .navbar -->
        			<div class="navbar navbar-medical footer-general navbar-affix scrollspy">
        				<div class="container">

        					<div class="navbar-brand">
        						<a href="index.html"><img src="images/logo-dark.png" alt="Logo"></a> <!-- logo -->
        					</div>

        					<ul class="nav"> <!-- menu -->
        						<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        						....
        					</ul>

        					<div class="nav-btn-mobile"> <!-- button -->
        						<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        					</div>

        				</div>
        			</div>
        			<!-- .navbar end -->

        		</nav>
                

– Real Estate

                <nav id="navigation" class="navbar navbar-realestate navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand navbar-brand-affix"> <!-- logo -->
        					<a href="index.html">
        						<img src="images/logo.png" alt="Logo" class="brand-main">
        						<img src="images/logo-dark.png" alt="Logo" class="brand-secondary">
        					</a>
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#contact" class="nav-link smooth-scroll">Contact Me</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

– SEO

                <div class="navbar-top-seo">

        			<!-- .container -->
        			<div class="container">

        				<div class="nav-left">
        					<p>text</p>
        				</div>

        				<div class="nav-right">
        					<div class="nav-txt">
        						<a href="#">info@affapress.com</a>
        					</div>
        					<ul class="nav-socials">
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        						....
        					</ul>
        					<div class="nav-btn">
        						<a href="#"><i class="ion ion-ios-telephone"></i> 1 (234) 567-8901</a>
        					</div>
        				</div>

        			</div>
        			<!-- .container end -->

        		</div>
                
                <nav id="navigation" class="navbar navbar-seo navbar-landing navbar-affix scrollspy">

        			<!-- .container -->
        			<div class="container">

        				<div class="navbar-brand">
        					<a href="index.html"><img src="images/logo-dark.png" alt="Logo"></a> <!-- logo -->
        				</div>

        				<ul class="nav"> <!-- menu -->
        					<li><a href="#header" class="nav-link smooth-scroll active">Home</a></li>
        					....
        					<li class="nav-menu-btn">
        						<a href="#" data-toggle="modal" data-target="#modal-analysis">Get a Free Analysis</a>
        					</li>
        				</ul>

        				<div class="nav-btn-mobile"> <!-- button -->
        					<a href="#" class="navbar-btn-toggle"><i class="ion ion-android-menu"></i></a>
        				</div>

        			</div>
        			<!-- .container end -->

        		</nav>
                

Header

– Conference

                <header id="header" class="header-conference affa-bg-img text-white">

        			<!-- .header-overlay -->
        			<div class="header-overlay bg-color-overlay80">

        				<!-- .container -->
        				<div class="container">

        					<!-- .row -->
        					<div class="row">

        						<!-- col -->
        						<div class="col-md-6">

        							<div class="header-txt"> <!-- heading -->
        								<h1>text</h1>
        								<p>text</p>
        							</div>

        							<div class="header-countdown" data-date="01/01/2020"> <!-- countdown -->
        								<div class="countdown-item"> <!-- days -->
        						            <h4>{dn}</h4>
        						            <p>{dl}</p>
        						        </div>
        								<div class="countdown-item"> <!-- hours -->
        									<h4>{hn}</h4>
        						            <p>{hl}</p>
        						        </div>
        								<div class="countdown-item"> <!-- minutes -->
        									<h4>{mn}</h4>
        						            <p>{ml}</p>
        						        </div>
        								<div class="countdown-item"> <!-- seconds -->
        									<h4>{sn}</h4>
        									<p>{sl}</p>
        								</div>
        							</div>

        						</div>
        						<!-- col end -->

        						<div class="col-md-6 col-xl-5 offset-xl-1">
        							<div class="header-form bg-dark-overlay80 animation" data-animation="animation-fade-in-down" data-delay="500" data-nooffset="true"> <!-- form -->
        								<h4>text</h4>
        								<p>text</p>
        								<form method="post" action="#" class="affa-form-signup form-conference">
        									<div class="submit-status"></div>
        									<input type="text" name="name" placeholder="Name">
        									<input type="text" name="email" placeholder="Email">
        									<input type="submit" name="submit" value="Sign Up Now!">
        								</form>
        								<p class="form-info">text</p>
        							</div>
        						</div>

        					</div>
        					<!-- .row end -->

        	            </div>
        				<!-- .container end -->

        			</div>
        	        <!-- .header-overlay end -->

        			<figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– Corporate

                <header id="header" class="header-corporate affa-bg-img text-white">

        			<!-- .header-overlay -->
        			<div class="header-overlay bg-black-overlay50">

        				<!-- .container -->
        				<div class="container">

        					<div class="header-txt"> <!-- heading -->
                                <h1 class="animation" data-animation="animation-fade-in-left" data-delay="500" data-nooffset="true">text</h1>
        						<h2 class="animation" data-animation="animation-fade-in-up" data-delay="1200" data-nooffset="true">text</h2>
                                <p class="animation" data-animation="animation-fade-in" data-delay="1700" data-nooffset="true">text</p>
                            </div>

        					<div class="header-btn animation" data-animation="animation-fade-in-down" data-delay="2200" data-nooffset="true"> <!-- button -->
        						<a href="#services" class="smooth-scroll"><i class="ion ion-ios-arrow-thin-down"></i></a>
        	                </div>

        	            </div>
        				<!-- .container end -->

        			</div>
        	        <!-- .header-overlay end -->

        			<figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– Course

                <header id="header" class="header-course affa-bg-img" data-parallax="scroll" data-speed="0.2" data-natural-width="1920" data-natural-height="1080" data-image-src="images/content/bg/1.jpg">

        			<!-- .header-content -->
        			<div class="header-content affa-bg-color text-white padding-top40-sm padding-top60 padding-bottom40-sm padding-bottom60">

        				<!-- .container -->
        				<div class="container">

        					<h1 class="animation" data-animation="animation-fade-in-down" data-delay="300" data-nooffset="true">text</h1>
        					<p class="animation" data-animation="animation-fade-in" data-delay="1000" data-nooffset="true">text</p>

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .header-content end -->

                    <figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– Ebook

                <header id="header" class="header-ebook affa-bg-white">

        			<!-- .container -->
        			<div class="container">

        				<!-- .row -->
        				<div class="row">

        					<!-- col -->
        					<div class="col-md-5 col-lg-6">

        						<div class="header-txt"> <!-- heading -->
        							<h1>text</h1>
        							<h2>text</h2>
        							<p>text</p>
        						</div>

        						<div class="header-btn animation" data-animation="animation-fade-in-up" data-delay="800" data-nooffset="true"> <!-- button -->
                                    <a href="#" class="btn-custom">text</a>
                                    <a href="#" class="btn-download" data-toggle="modal" data-target="#modal-download">text</a>
        						</div>

        					</div>
        					<!-- col end -->

        					<div class="col-md-7 col-lg-6">
        						<div class="header-book affa-bg-grey"> <!-- book -->
        							<figure><img src="images/content/landing/book.png" alt="Book" class="animation" data-animation="animation-fade-in" data-delay="300" data-nooffset="true"></figure>
        							<div class="book-info">
        								<p>text</p>
        								<div class="book-formats">
        									<span class="colored">PDF</span>
        									<span>ePUB</span>
        								</div>
        							</div>
        						</div>
        					</div>

        				</div>
        				<!-- .row end -->

                    </div>
        			<!-- .container end -->

        		</header>
                

– Entrepreneur

                <header id="header" class="header-entrepreneur affa-bg-img text-white">

        			<!-- .header-overlay -->
        			<div class="header-overlay">

        				<!-- .container -->
        				<div class="container">

        					<div class="header-form"> <!-- form -->
        						<h1 class="animation" data-animation="animation-fade-in-left" data-delay="500" data-nooffset="true">text</h1>
        						<form method="post" action="#" class="affa-form-signup form-entrepreneur bg-dark-overlay90 animation" data-animation="animation-fade-in-up" data-delay="1200" data-nooffset="true">
        							<div class="submit-status"></div>
        							<div class="form-fields">
        								<input type="text" name="name" placeholder="Your name">
        								<input type="text" name="email" placeholder="Email address">
        								<textarea name="message" placeholder="Message text"></textarea>
        							</div>
        							<p class="form-info">text</p>
        							<div class="form-submit">
        								<input type="submit" name="submit" value="Send and Get a Quote">
        							</div>
        						</form>
        					</div>

        	            </div>
        				<!-- .container end -->

        			</div>
        	        <!-- .header-overlay end -->

        			<figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– Hotel

                <header id="header" class="header-hotel affa-bg-img text-white">

        			<!-- .header-overlay -->
        			<div class="header-overlay bg-black-overlay30">

        				<!-- .container -->
        				<div class="container">

        					<div class="header-txt"> <!-- form -->
        						<h1 class="animation" data-animation="animation-fade-in-left" data-delay="500" data-nooffset="true">text</h1>
        						<p class="animation" data-animation="animation-fade-in-up" data-delay="1200" data-nooffset="true">text</p>
        					</div>

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .header-overlay end -->

        			<figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– Medical

                <header id="header" class="header-medical">

        			<!-- .header-bg -->
        			<div class="header-bg affa-bg-grey">

        				<!-- .container -->
        				<div class="container">

        					<!-- .row -->
        					<div class="row">

        						<!-- col -->
        						<div class="col-md-5 col-lg-6">

        							<div class="header-txt"> <!-- text -->
        								<h1>text</h1>
        								<p>text</p>
        								<ul>
        									<li><i class="ion ion-android-favorite"></i>text</li>
        									...
        								</ul>
        							</div>

        							<div class="header-btn"> <!-- button -->
        								<a href="#appointment" class="btn-custom smooth-scroll"><i class="ion ion-calendar"></i>text</a>
        								<p>text</p>
        							</div>

        						</div>
        						<!-- col end -->

        						<div class="col-md-7 col-lg-6 col-xl-5">
        							<div class="header-img"> <!-- image -->
        								<figure><img src="images/content/landing/1.png" alt="Doctor"></figure>
        							</div>
        						</div>

        					</div>
        					<!-- .row end -->

        					<!-- #appointment -->
        					<div id="appointment" class="header-form animation-visible" data-animation="animation-pulse">
        						<form method="post" action="#" class="affa-form-signup form-medical">
        							<div class="submit-status"></div>
        							<h4 class="form-heading">text</h4>
        							<div class="form-fields">
        								<div class="row">
        									<div class="col-md-6">
        										<input type="text" name="first_name" placeholder="First Name">
        									</div>
        									<div class="col-md-6">
        										<input type="text" name="last_name" placeholder="Last Name">
        									</div>
        								</div>
        								<div class="row">
        									<div class="col-md-6">
        										<input type="text" name="phone" placeholder="Phone Number">
        									</div>
        									<div class="col-md-6">
        										<input type="text" name="email" placeholder="Email Address">
        									</div>
        								</div>
        							</div>
        							<div class="form-submit">
        								<p>text</p>
        								<input type="submit" name="submit" value="Request an Appointment">
        							</div>
        						</form>
        					</div>
        					<!-- #appointment end -->

        	            </div>
        				<!-- .container end -->

        			</div>
        			<!-- .header-bg -->

        		</header>
                

– Real Estate

                <header id="header" class="header-realestate affa-bg-img text-white">

        			<!-- .header-overlay -->
        			<div class="header-overlay bg-black-overlay40">

        				<!-- .container -->
        				<div class="container">

        					<div class="header-txt"> <!-- heading -->
        						<h1 class="animation" data-animation="animation-fade-in-left" data-delay="500" data-nooffset="true">text</h1>
        						<h2 class="animation header-txt-underline" data-animation="animation-fade-in-up" data-delay="1200" data-nooffset="true">text</h2>
        						<p class="animation" data-animation="animation-fade-in" data-delay="1700" data-nooffset="true">text</p>
        					</div>

        					<div class="header-btn animation" data-animation="animation-fade-in-down" data-delay="2200" data-nooffset="true"> <!-- button -->
        						<a href="#about" class="smooth-scroll"><i class="ion ion-ios-arrow-thin-down"></i></a>
        	                </div>

        	            </div>
        				<!-- .container end -->

        			</div>
        	        <!-- .header-overlay end -->

        			<figure class="bg-img-base" style="background-image:url(images/content/bg/1.jpg);"></figure> <!-- background -->

        		</header>
                

– SEO

                <header id="header" class="header-seo header-landing affa-bg-color text-white">

        			<!-- .header-bg -->
        			<div class="header-bg header-bg-img">

        				<!-- .container -->
        				<div class="container">

        					<div class="header-txt"> <!-- heading -->
        						<h1 class="animation" data-animation="animation-fade-in-left" data-delay="500" data-nooffset="true">text</h1>
        						<p class="animation" data-animation="animation-fade-in" data-delay="1200" data-nooffset="true">text</p>
        					</div>

        					<div class="header-btn animation" data-animation="animation-fade-in-up" data-delay="1700" data-nooffset="true"> <!-- button -->
        						<a href="#" class="btn-custom btn-white" data-toggle="modal" data-target="#modal-analysis">text</a>
        					</div>

        	            </div>
        				<!-- .container end -->

        			</div>
        			<!-- .header-bg end -->

        		</header>
                

Footer

– Conference

                <footer id="footer" class="footer-conference footer-landing">

                    <!-- .footer-widgets -->
        			<div class="footer-widgets affa-bg-dark text-white">

        				<!-- .container -->
        				<div class="container">
        					<div class="row">

        						<div class="col-md-4"> <!-- 1 -->
        							<div class="widget">
        								<h4 class="widget-title">text</h4>
        								<p>text</p>
        							</div>
        						</div>

        	                    ....

        	                </div>
        	            </div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-widgets end -->

        			<!-- .footer-nav -->
        			<div class="footer-nav affa-bg-color text-white">

        				<!-- .container -->
        				<div class="container">

        					<div class="footer-logo">
        						<img src="images/logo.png" alt="Logo"> <!-- logo -->
        					</div>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-nav end -->

        		</footer>
                

– Corporate

                <footer id="footer" class="footer-corporate footer-landing affa-bg-img text-white">

                    <!-- .footer-overlay -->
        			<div class="footer-overlay bg-dark-overlay90">

        				<!-- .container -->
        		        <div class="container">

        					<div class="affa-subscribe animation-visible" data-animation="animation-pulse"> <!-- subscribe -->
        						<i class="subscribe-icon ion ion-android-mail"></i>
        						<span class="subscribe-icon-shadow"></span>
        						<div class="subscribe-wrap">
        							<h4>text</h4>
        							<form method="post" action="#" class="affa-form-subscribe form-general">
        								<input type="text" name="email" placeholder="Enter your email address">
        							</form>
        						</div>
        					</div>

        					<!-- .footer-widgets -->
        					<div class="footer-widgets">
        		                <div class="row">

        							<div class="col-md-4"> <!-- 1 -->
        								<div class="widget">
        			                        <img src="images/logo.png" alt="Logo" class="margin-bottom10">
        			                        <p>text</p>
        								</div>
        							</div>

        		                    ....

        		                </div>
        		            </div>
        					<!-- .footer-widgets end -->

        		            <div class="footer-nav">
        						<p>text</p> <!-- copyright text -->
        						<ul>
        		                    <li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        		                    ....
        		                </ul>
        		            </div>

        				</div>
        		        <!-- .container end -->

        			</div>
        			<!-- .footer-overlay end -->

        			<figure class="bg-img-base bg-img-blur" style="background-image:url(images/content/bg/3.jpg);"></figure> <!-- background -->

        		</footer>
                

– Course

                <footer id="footer" class="footer-course footer-landing">

        			<!-- .footer-widgets -->
        			<div class="footer-widgets affa-bg-grey">

        				<!-- .container -->
        				<div class="container">

        					<!-- .row -->
        					<div class="row">

        						<div class="col-md-4"> <!-- 1 -->
        							<div class="widget">
        		                        <h4 class="widget-title">text</h4>
        		                        <p>text</p>
        							</div>
        						</div>

        	                    ....

        	                </div>
        					<!-- .row end -->

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-widgets end -->

        			<!-- .footer-nav -->
        			<div class="footer-nav affa-bg-color text-white">

        				<!-- .container -->
        				<div class="container">

        					<div class="footer-logo">
        						<img src="images/logo.png" alt="Logo"> <!-- logo -->
        					</div>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-nav end -->


        		</footer>
                

– Ebook

                <footer id="footer" class="footer-ebook footer-landing">

        			<!-- .footer-widgets -->
        			<div class="footer-widgets affa-bg-white">

        				<!-- .container -->
        				<div class="container">
        					<div class="row">

        						<div class="col-md-4"> <!-- 1 -->
        							<div class="widget">
        								<h4 class="widget-title">text</h4>
        								<p>text</p>
        							</div>
        						</div>

        	                    ....

        	                </div>
        	            </div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-widgets end -->

        			<!-- .footer-nav -->
        			<div class="footer-nav affa-bg-dark text-white">

        				<!-- .container -->
        				<div class="container">

        					<div class="footer-logo">
        						<img src="images/logo.png" alt="Logo"> <!-- logo -->
        					</div>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        				</div>
        				<!-- .container end -->

        			</div>
        			<!-- .footer-nav end -->

        		</footer>
                

– Entrepreneur

                <footer id="footer" class="footer-entrepreneur footer-landing affa-bg-dark text-white">

        			<!-- .container -->
        	        <div class="container">
        				<div class="footer-txt">

        					<div class="footer-logo">
        						<img src="images/logo.png" alt="Logo"> <!-- logo -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        	                    <li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        				</div>
        			</div>
        	        <!-- .container end -->

        		</footer>
                

– Hotel

                <footer id="footer" class="footer-hotel footer-landing affa-bg-grey">

        			<!-- .container -->
        			<div class="container">

        				<!-- .footer-widgets -->
        				<div class="footer-widgets">

        					<!-- .row -->
        					<div class="row">

        						<div class="col-md-4 col-lg-3"> <!-- 1 -->
        							<div class="widget">
        								<h4 class="widget-title">text</h4>
        								<ul>
        									<li>(+62) 1234567890</li>
        									....
        		                        </ul>
        								<ul class="affa-socials-hotel margin-top20-sm margin-top40">
        									<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        									....
        								</ul>
        							</div>
        						</div>

        						....

        					</div>
        					<!-- .row end -->

        				</div>
        				<!-- .footer-widgets end -->

        				<!-- .footer-nav -->
        				<div class="footer-nav">

        					<div class="footer-logo">
        						<img src="images/logo-dark.png" alt="Logo"> <!-- logo -->
        					</div>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        				</div>
        				<!-- .footer-nav end -->

        			</div>
        			<!-- .container end -->

        		</footer>
                

– Medical

                <footer id="footer" class="footer-medical footer-landing affa-bg-white">

        			<!-- .container -->
        			<div class="container">

        				<!-- .footer-widgets -->
        				<div class="footer-widgets">

        					<!-- .row -->
        					<div class="row">

        						<div class="col-md-4"> <!-- 1 -->
        							<div class="widget">
        								<h4 class="widget-title">text</h4>
        								<p>text</p>
        							</div>
        						</div>

        	                    ....

        					</div>
        					<!-- .row end -->

        				</div>
        				<!-- .footer-widgets end -->

        				<!-- .footer-nav -->
        				<div class="footer-nav">

        					<div class="footer-logo">
        						<img src="images/logo-dark.png" alt="Logo"> <!-- logo -->
        					</div>

        					<div class="footer-copyright">
        						<p>text</p> <!-- copyright text -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        				</div>
        				<!-- .footer-nav end -->

        			</div>
        			<!-- .container end -->

        		</footer>
                

– Real Estate

                <footer id="footer" class="footer-realestate footer-landing affa-bg-dark text-white">

        			<!-- .container -->
        	        <div class="container">

        				<!-- .footer-nav -->
        				<div class="footer-nav">

        					<div class="footer-logo">
        						<img src="images/logo.png" alt="Logo"> <!-- logo -->
        					</div>

        					<ul class="footer-socials"> <!-- socials -->
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>

        				</div>
        				<!-- .footer-nav end -->

        			</div>
        			<!-- .container end -->

        		</footer>
                

– SEO

                <footer id="footer" class="footer-seo footer-landing affa-bg-dark text-white">

        			<!-- .container -->
        			<div class="container">

        				<!-- .footer-widgets -->
        				<div class="footer-widgets">
            				<div class="row">

        						<div class="col-md-3 col-lg-4"> <!-- 1 -->
        							<div class="widget">
        								<img src="images/logo.png" alt="Logo" class="margin-bottom10">
        								<p>text</p>
        							</div>
        						</div>

        						....

        					</div>
        				</div>
        				<!-- .footer-widgets end -->

        				<div class="footer-nav">
        					<p>text</p> <!-- copyright text -->
        					<ul>
        						<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
        	                    ....
        					</ul>
        				</div>

        			</div>
        			<!-- .container end -->

        		</footer>
                

Accodion

– General

                <div id="accordion1" class="affa-panel" role="tablist" aria-multiselectable="true">

					<div class="panel"> <!-- 1 -->
						<div id="heading11" class="panel-heading" role="tab">
	                        <h4>
	                            <a href="#collapse11" role="button" data-toggle="collapse" data-parent="#accordion1" aria-expanded="true" aria-controls="collapse11">text</a>
	                        </h4>
	                    </div>
						<div id="collapse11" class="panel-collapse collapse show" role="tabpanel" data-parent="#accordion1" aria-labelledby="heading11">
	                        <div class="panel-body">
	                        	<p>text</p>
	                        </div>
	                    </div>
	                </div>

	                ....

	            </div>
                

Calendar

– Entrepreneur

                <div class="affa-calendar-entrepreneur"></div>
                

Callout

– Corporate

                <div class="affa-callout-corporate text-padding">
					<h2>text</h2>
					<h3>text</h3>
					<p>text</p>
					<ul>
	                    <li><a href="#" title="Facebook" class="link-facebook animation" data-animation="animation-bounce-in"><i class="ion ion-social-facebook"></i></a></li>
	                    ....
	                </ul>
				</div>
                

– Ebook

                <div class="affa-callout-ebook">
					<h2>text</h2>
					<div class="callout-btn animation" data-animation="animation-bounce-in">
						<a href="#" class="btn-download" data-toggle="modal" data-target="#modal-download">text</a>
					</div>
				</div>
                

– Entrepreneur

                <div class="affa-callout-entrepreneur">
					<h3>text</h3>
					<a href="#schedule" class="smooth-scroll">text</a>
				</div>
                

– Medical

                <div class="affa-callout-medical">
					<h2>text</h2>
					<div class="callout-btn animation" data-animation="animation-bounce-in">
						<a href="#appointment" class="btn-custom btn-white smooth-scroll"><i class="ion ion ion-calendar"></i>text</a>
					</div>
				</div>
                

– Real Estate

                <div class="affa-callout-realestate">
					<h2>text</h2>
					<a href="#contact" class="btn-custom btn-white smooth-scroll">text</a>
				</div>
                

– SEO

                <div class="affa-callout-seo">
    				<h2>text</h2>
    				<a href="#" class="btn-custom btn-white" data-toggle="modal" data-target="#modal-analysis">text</a>
    			</div>
                

Circle

– SEO

                <div class="affa-circle-seo">
					<div class="circle-outer">

						<div class="circle-pointer circle-left circle-top circle-position-1 animation" data-animation="animation-fade-in-down"> <!-- 1 -->
							<div class="pointer-text">
								<p>text</p>
							</div>
							<div class="pointer-elemen">
								<div class="pointer-icon"></div>
							</div>
						</div>

						<div class="circle-pointer circle-right circle-top circle-short circle-position-2 animation" data-animation="animation-fade-in-down" data-delay="300"> <!-- 2 -->
							<div class="pointer-text">
								<p>text</p>
							</div>
							<div class="pointer-elemen">
								<div class="pointer-icon"></div>
							</div>
						</div>

						<div class="circle-pointer circle-left circle-bottom circle-short circle-position-3 animation" data-animation="animation-fade-in-up" data-delay="600"> <!-- 3 -->
							<div class="pointer-text">
								<p>text</p>
							</div>
							<div class="pointer-elemen">
								<div class="pointer-icon"></div>
							</div>
						</div>

						<div class="circle-pointer circle-right circle-bottom circle-position-4 animation" data-animation="animation-fade-in-up" data-delay="900"> <!-- 4 -->
							<div class="pointer-text">
								<p>text</p>
							</div>
							<div class="pointer-elemen">
								<div class="pointer-icon"></div>
							</div>
						</div>

						<div class="circle-middle"> <!-- 5 -->
							<div class="circle-inner">
								<p>text</p>
							</div>
						</div>

					</div>
				</div>
                

Clients

– Conference

                <div class="carousel-slider clients-conference-slider">

					<div class="slick-slide"> <!-- 1 -->
						<figure class="affa-client-conference">
							<img src="images/content/clients/1.png" alt="Logo">
						</figure>
					</div>

					....

				</div>
                

– Course

                <div class="carousel-slider clients-course-slider">

					<div class="slick-slide"> <!-- 1 -->
						<figure class="affa-client-course">
							<img src="images/content/clients/1.png" alt="Logo">
						</figure>
					</div>

					....

				</div>
                

– Ebook

                <div class="affa-clients-ebook">
					<figure><img src="images/content/avatars/1.jpg" alt="Avatar" data-original-title="Mugiwara Kiwolen"></figure>
					....
				</div>
                

– Entrepreneur

                <div class="carousel-slider clients-entrepreneur-slider">

					<div class="slick-slide"> <!-- 1 -->
						<figure class="affa-client-entrepreneur">
							<img src="images/content/clients/1.png" alt="Logo">
						</figure>
					</div>

					....

				</div>
                

– SEO

                <div class="carousel-slider clients-seo-slider">

					<div class="slick-slide"> <!-- 1 -->
						<figure class="affa-client-seo">
							<img src="images/content/clients/1.png" alt="Logo">
						</figure>
					</div>

					....

				</div>
                

Content Block

– Corporate

                <div class="affa-block-corporate">
                    <div class="row">

	                    <div class="col-md-4"> <!-- 1 -->
	                        <div class="affa-feature-icon-corporate feature-icon-2 feature-icon-sm">
	                            <span class="feature-icon-wrap">
									<i class="ion ion-android-microphone"></i>
								</span>
	                            <h4>text</h4>
	                            <p>text</p>
	                        </div>
	                    </div>

	                    ....

	                </div>
	            </div>
                

– Real Estate

                <div class="affa-block-realestate">

					<div class="post-heading-left-realestate2">
						<h4>text</h4>
					</div>
					<div class="row">
						<div class="col-md-4"> <!-- 1 -->
							<h5>text</h5>
							<p>text</p>
						</div>
						....
					</div>

					<div class="post-heading-left-realestate2 margin-top20">
						<h4>text</h4>
					</div>
					<div class="row">
						<div class="col-md-4"> <!-- 1 -->
							<ul>
								<li>text</li>
								....
							</ul>
						</div>
						....
					</div>

				</div>
                

– SEO

                <div class="affa-block-seo">
        			<div class="row">

						<div class="col-md-4"> <!-- 1 -->
							<div class="affa-feature-icon-seo">
								<i class="ion ion-android-microphone"></i>
								<h4>text</h4>
								<h5>text</h5>
								<p>text</p>
							</div>
     	 				</div>

						....

					</div>
				</div>
                

Counter

– Course

                <div class="affa-counter-course">
					<h3><span>1520</span></h3>
					<h4>text</h4>
					<p>text</p>
				</div>
                

– SEO

                <div class="affa-counter-seo">
					<i class="ion ion-link"></i>
					<h3><span>1520</span></h3>
					<h4>text</h4>
					<p>text</p>
				</div>
                

FAQ

– Conference

                <div class="affa-faq-conference">
					<h4>text</h4>
					<p>text</p>
				</div>
                

– Medical

                <div class="affa-faq-medical">
					<h4>text</h4>
					<p>text</p>
				</div>
                

Feature

– General

                <div class="affa-feature-icon">
                    <i class="ion ion-settings"></i>
                    <h4>text</h4>
                    <p>text</p>
                </div>
                

– Conference

                <div class="affa-feature-conference">
					<img src="images/content/icons/google.png" alt="Icon">
                    <h4>text</h4>
                    <p>text</p>
				</div>
                

– Corporate

                <div class="affa-feature-icon-corporate">
                    <div class="feature-icon-heading">
						<span class="feature-icon-wrap">
							<i class="ion ion-ios-world"></i>
						</span>
						<h4>text</h4>
					</div>
					<p>text</p>
                </div>
                

– Course

                <div class="affa-feature-icon-course">
					<span class="feature-icon-wrap">
						<i class="ion ion-clock"></i>
					</span>
					<div class="feature-icon-txt">
						<h4>text</h4>
						<p>text</p>
					</div>
				</div>
                

– Ebook

                <div class="affa-feature-icon-ebook">
					<i class="ion ion-ios-copy"></i>
					<h4>text</h4>
					<p>text</p>
				</div>
                

– Entrepreneur

                <div class="affa-feature-icon-entrepreneur">
					<span class="feature-icon-wrap">
						<i class="ion ion-android-globe"></i>
					</span>
					<h4>text</h4>
					<p>text</p>
					<a href="#">Learn More <i class="ion ion-ios-arrow-forward"></i></a>
				</div>
                

– Medical

                <div class="affa-feature-icon-medical">
					<i class="ion ion-network"></i>
					<h4>text</h4>
					<p>text</p>
				</div>
                

– Real Estate

                <div class="affa-feature-icon-realestate text-center-sm">
					<span class="feature-icon-wrap">
						<i class="ion ion-home"></i>
					</span>
					<h4>text</h4>
					<p>text</p>
                </div>
                

– SEO

                <div class="affa-feature-icon-seo">
					<i class="ion ion-android-microphone"></i>
					<h4>text</h4>
					<h5>text</h5>
					<p>text</p>
				</div>
                

Form Check

– Hotel

                <form class="affa-form-check-hotel">

					<div class="input-lg">
						<label for="input-check-in">Check in</label>
						<input type="date" name="check_in" id="input-check-in">
					</div>

					<div class="input-sm">
						<label for="input-night">Night</label>
						<select name="night" id="input-night">
							<option value="1">1</option>
							....
						</select>
					</div>

					<div class="input-lg">
						<label for="input-check-out">Check out</label>
						<input type="date" name="check_out" id="input-check-out">
					</div>

					<div class="input-sm">
						<label for="input-adults">Adults</label>
						<input type="number" name="adults" id="input-adults" min="1" max="20" value="1">
					</div>

					<div class="input-sm">
						<label for="input-children">Children</label>
						<input type="number" name="children" id="input-children" min="0" max="20" value="0">
					</div>

					<div class="input-submit">
						<input type="submit" name="submit" value="Check Availability">
					</div>

				</form>
                

Form Contact

– General

                <form method="post" action="#" class="affa-form-contact form-general">
					<div class="submit-status"></div>
					<input type="text" name="name" placeholder="Your Name">
					<input type="text" name="email" placeholder="Your Email">
					<textarea name="message" placeholder="Your Message"></textarea>
					<div class="form-submit">
						<input type="submit" name="submit" value="Send Message">
					</div>
				</form>
                

– Entrepreneur

                <form method="post" action="#" class="affa-form-contact form-general form-entrepreneur">
					<div class="submit-status"></div>
					<input type="text" name="name" placeholder="Name">
					<input type="text" name="email" placeholder="Email">
					<textarea name="message" placeholder="Message text"></textarea>
					<div class="form-submit">
						<input type="submit" name="submit" value="Send Message">
					</div>
				</form>
                

Form Signup

– Corporate

                <div class="affa-signup-corporate animation-visible" data-animation="animation-tada">
					<form method="post" action="#" class="affa-form-signup form-corporate">
						<i class="form-icon ion ion-arrow-graph-up-right"></i>
						<div class="submit-status"></div>
						<h2 class="form-heading">text</h2>
						<div class="form-fields">
                            <select name="type">
								<option value="Corporate">Corporate</option>
								....
                            </select>
							<input type="text" name="name" placeholder="Your name">
							<input type="text" name="email" placeholder="Email address">
							<textarea name="message" placeholder="Message text"></textarea>
                        </div>
						<p class="form-info">text</a></p>
						<div class="form-submit">
							<input type="submit" name="submit" value="Send and Get an Access">
						</div>
                    </form>
				</div>
                

– Course

                <div class="affa-signup-course animation-visible" data-animation="animation-tada">
					<form method="post" action="#" class="affa-form-signup form-course">
						<div class="submit-status"></div>
						<h2 class="form-heading">text</h2>
						<p class="form-desc">text</p>
						<div class="form-fields">
							<input type="text" name="name" placeholder="Your name">
							<input type="text" name="email" placeholder="Email address">
						</div>
						<div class="form-submit">
							<input type="submit" name="submit" value="Subscribe Now">
						</div>
						<p class="form-info">text</a></p>
                    </form>
				</div>
                

– Real Estate

                <div class="affa-signup-realestate animation-visible" data-animation="animation-tada">
					<form method="post" action="#" class="affa-form-signup form-realestate bg-dark-overlay80 text-white">
						<div class="submit-status"></div>
						<div class="form-heading">
							<h2>text</h2>
							<p>text</p>
						</div>
						<div class="form-fields">
							<input type="text" name="name" placeholder="Your Name">
							<input type="text" name="email" placeholder="Your Email">
							<input type="text" name="subject" placeholder="Subject">
							<textarea name="message" placeholder="Your Message"></textarea>
							<input type="submit" name="submit" value="Send Message">
						</div>
						<p class="form-info">text</p>
					</form>
				</div>
                

Form Subscribe

– Course

                <div class="affa-subscribe-course">
					<div class="subscribe-heading">
						<h2>text</h2>
						<p>text</p>
					</div>
					<form method="post" action="#" class="affa-form-subscribe form-general animation-visible" data-animation="animation-shake">
						<input type="text" name="email" placeholder="Enter your email address">
						<input type="submit" name="submit" value="Subscribe">
					</form>
				</div>
                

– Ebook

                <div class="affa-subscribe-ebook animation-visible" data-animation="animation-pulse">
    				<div class="subscribe-heading">
    					<h2>text</h2>
    					<p>text</p>
    				</div>
    				<form method="post" action="#" class="affa-form-subscribe form-general">
    					<input type="text" name="email" placeholder="Enter your email address">
    					<input type="submit" name="submit" value="Subscribe">
    				</form>
    			</div>
                

– Medical

                <div class="affa-subscribe-medical">
					<div class="subscribe-heading">
						<h2>text</h2>
						<p>text</p>
					</div>
					<form method="post" action="#" class="affa-form-subscribe form-general">
						<input type="text" name="email" placeholder="Enter your email address">
						<input type="submit" name="submit" value="Subscribe">
					</form>
				</div>
                

– SEO

                <form method="post" action="#" class="affa-form-subscribe form-general form-seo animation-visible" data-animation="animation-shake">
					<input type="text" name="email" placeholder="Enter your email address">
				</form>
                

Gallery

– Hotel

                <div class="affa-gallery-hotel">
					<a href="images/content/gallery/1.jpg" data-fancybox="gallery" data-caption="Swimming Pool">
						<figure class="gallery-img" style="background-image:url(images/content/gallery/1.jpg);"></figure>
					</a>
					<div class="gallery-txt bg-color-overlay90 text-white">
						<h4>text</h4>
						<p>text</p>
					</div>
				</div>
                

– Real Estate

                <div class="affa-gallery-realestate">
					<a href="images/content/gallery/1.jpg" data-fancybox="gallery" data-caption="Family Room">
						<figure class="gallery-img" style="background-image:url(images/content/gallery/1.jpg);"></figure>
					</a>
					<div class="gallery-txt bg-dark-overlay70 text-white">
						<div class="gallery-txt-wrap">
							<h4>text</h4>
							<p>text</p>
						</div>
					</div>
				</div>
                

Image Layers

– General

                <figure class="affa-img-layers-ebook img-layer-right-front margin-bottom40">
					<div class="img-layer-left">
						<img src="images/content/landing/ipad.png" alt="Image Left" class="animation" data-animation="animation-fade-in-left" data-delay="300">
					</div>
					<div class="img-layer-right">
						<img src="images/content/landing/iphone.png" alt="Image Right" class="animation" data-animation="animation-fade-in-left" data-delay="700">
					</div>
				</figure>
                

Map

– General

                <div class="affa-map-conference">
    				<div id="mapconference" class="map-embed" data-lat="-12.043333" data-lng="-77.028333" data-zoom="15" data-scrollwheel="false" data-doubleclickzoom="false" data-defaultui="false"></div> <!-- map -->
    				<div class="map-overlay">
    					<div class="container">
    						<div class="map-txt"> <!-- text -->
    							<h4>text</h4>
    							<p>text</p>
    							<a href="#" class="btn-custom">Get Direction</a>
    						</div>
    					</div>
    				</div>
    			</div>
                

– Real Estate

                <div class="affa-map-realestate">
    				<div id="maprealestate" class="map-embed" data-lat="-12.043333" data-lng="-77.028333" data-zoom="15" data-scrollwheel="false" data-doubleclickzoom="false" data-defaultui="false"></div> <!-- map -->
    				<div class="map-overlay">
    					<div class="container">
    						<div class="map-txt"> <!-- text -->
    							<h4>text</h4>
    							<p>text</p>
    							<a href="#" class="btn-custom">Get Direction</a>
    						</div>
    					</div>
    				</div>
    			</div>
                

Note: You can see the complete documentation here!


Material

– Course

                <div class="affa-material-course">
					<figure><img src="images/content/courses/1.jpg" alt="Course"></figure>
					<div class="material-txt">
						<h5>text</h5>
						<p>text</p>
					</div>
				</div>
                

Portfolio

– Entrepreneur

                <div class="affa-portfolio-entrepreneur">
					<figure class="portfolio-img" style="background-image:url(images/content/portfolios/1.jpg);"></figure>
					<div class="portfolio-txt bg-color-overlay90 text-white">
						<div class="portfolio-txt-wrap">
							<h4>text</h4>
							<p>text</p>
							<a href="#">text</a>
						</div>
					</div>
				</div>
                

Pricing Table

– Conference

                <div class="affa-tbl-pricing-conference row">

					<div class="col-md-4"> <!-- 1 -->
						<div class="tbl-prc-col">
							<div class="tbl-prc-heading">
								<h4>text</h4>
								<h3>text</h3>
							</div>
							<ul class="tbl-prc-list">
								<li>text</li>
								....
							</ul>
							<div class="tbl-prc-footer">
								<a href="#">text</a>
							</div>
						</div>
					</div>

					....

				</div>
                

– SEO

                <div class="affa-tbl-pricing-seo row">

					<div class="col-md-4"> <!-- 1 -->
						<div class="tbl-prc-col">
							<div class="tbl-prc-heading">
								<h4>text</h4>
								<p>text</p>
							</div>
							<div class="tbl-prc-price">
								<h3>$29.99</h3>
							</div>
							<ul class="tbl-prc-list">
								<li>text</li>
								....
							</ul>
							<div class="tbl-prc-footer">
								<a href="#" class="btn-custom">text</a>
							</div>
						</div>
					</div>

					....

				</div>
                

Profile

– Entrepreneur

                <div class="affa-profile-entrepreneur">
					<figure><img src="images/content/avatars/1.jpg" alt="Avatar"></figure>
					<h4>text</h4>
					<p>text</p>
				</div>
                

Progress Bar

– General

                <div class="affa-progress-bar">
					<h4>text - <i>95</i>%</h4>
					<div class="progress-bar-line in">
						<div class="progress-bar-val">95%</div>
					</div>
				</div>
                

Rooms

– Hotel

                <div class="carousel-slider rooms-hotel-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-room-hotel">
							<figure><img src="images/content/rooms/1.jpg" alt="Image"></figure>
							<div class="room-txt">
								<h4>text</h4>
								<p>text</p>
								<a href="#">Check Details <i class="ion ion-ios-arrow-thin-right"></i></a>
							</div>
						</div>
					</div>

					....

				</div>
                

Speaker

– Conference

                <div class="affa-speaker-conference">
					<figure><img src="images/content/avatars/1.jpg" alt="Avatar"></figure>
					<div class="speaker-txt">
						<div class="speaker-name">
							<h4>text</h4>
							<p>text</p>
						</div>
						<div class="speaker-desc">
							<p>text</p>
						</div>
					</div>
				</div>
                

Tabs

– Conference

                <div class="affa-tabs-conference margin-bottom-min">

					<ul id="schedule-tabs" class="nav nav-tabs">
						<li class="nav-item">
							<a href="#schedule-tab-content-1" class="nav-link active" data-toggle="tab">text</a>
						</li>
						....
					</ul>

					<!-- tabs-content -->
					<div class="tab-content">

						<div id="schedule-tab-content-1" class="tab-pane fade show active"> <!-- 1 -->
							<div class="row">
								<div class="col-md-6">
									<div class="affa-schedules-conference">
										<div class="schedule-item"> <!-- 1 -->
											<div class="schedule-wrap">
												<span class="schedule-icon">
													<i class="ion ion-android-contact"></i>
												</span>
												<h5>text</h5>
												<h4>text</h4>
												<p>text</p>
											</div>
										</div>
										....
									</div>
								</div>
								....
							</div>
						</div>

						....

					</div>
					<!-- tabs-content end -->

				</div>
                

Teacher

– Course

                <div class="affa-teacher-course">
					<div class="teacher-body">
						<div class="teacher-header">
							<img src="images/content/avatars/1.jpg" alt="Avatar">
							<h5>text</h5>
							<p>text</p>
						</div>
						<div class="teacher-desc">
							<p>text</p>
						</div>
					</div>
					<div class="teacher-footer">
						<ul class="teacher-social">
							<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
							....
						</ul>
					</div>
				</div>
                

Team

– Corporate

                <div class="affa-team-corporate">
					<figure><img src="images/content/avatars/1-lg.jpg" alt="Avatar"></figure>
					<div class="team-overlay bg-color-overlay90">
						<div class="team-content">
							<img src="images/content/avatars/1.jpg" alt="Avatar">
                            <h4>text</h4>
                            <p>text</p>
                            <ul>
                                <li><a href="#"><i class="ion ion-social-facebook"></i></a></li>
                                ....
                            </ul>
						</div>
                    </div>
                </div>
                

Teams

– Medical

                <div class="carousel-slider teams-medical-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-team-medical">
							<figure><img src="images/content/avatars/doctor-1.png" alt="Doctor"></figure>
							<div class="team-txt">
								<div class="team-name">
									<h4>text</h4>
									<p>text</p>
								</div>
								<div class="team-desc">
									<p>text</p>
								</div>
								<ul class="team-socials">
									<li><a href="#" title="Facebook"><i class="ion ion-social-facebook"></i></a></li>
				                    ....
								</ul>
							</div>
						</div>
					</div>

					....

				</div>
                

Testimonials

– Corporate

                <div class="carousel-slider testimonials-corporate-slider">

	                <div class="slick-slide"> <!-- 1 -->
	                    <div class="affa-testimonial-corporate">
	                        <div class="testimonial-txt">
								<p>text</p>
	                        </div>
	                        <div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
	                            <h4>text</h4>
	                            <p>text</p>
	                        </div>
	                    </div>
	                </div>

	                ....

	            </div>
                

– Course

                <div class="carousel-slider testimonials-course-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-testimonial-course">
							<div class="testimonial-txt">
								<p>text</p>
							</div>
							<div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
								<h4>text</h4>
								<p>text</p>
							</div>
						</div>
					</div>

					....

				</div>
                

– Ebook

                <div class="affa-testimonial-ebook">
					<div class="testimonial-txt">
						<p>text</p>
					</div>
					<div class="testimonial-name">
						<img src="images/content/avatars/1.jpg" alt="Avatar">
						<h4>text</h4>
						<p>text</p>
					</div>
				</div>
                

– Entrepreneur

                <div class="carousel-slider testimonials-entrepreneur-slider affa-bg-grey">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-testimonial-entrepreneur">
							<div class="testimonial-txt">
								<p>text</p>
							</div>
							<div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
								<h4>text</h4>
								<p>text</p>
							</div>
						</div>
					</div>

					....

				</div>
                

– Hotel

                <div class="carousel-slider testimonials-hotel-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-testimonial-hotel">
							<div class="testimonial-txt">
								<p>text</p>
							</div>
							<div class="testimonial-rating">
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
							</div>
							<div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
								<h4>text</h4>
								<p>text</p>
							</div>
						</div>
					</div>

					....

				</div>
                

– Medical

                <div class="carousel-slider testimonials-medical-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-testimonial-medical">
							<div class="testimonial-txt">
								<p>text</p>
							</div>
							<div class="testimonial-rating">
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
								<i class="ion ion-android-star"></i>
							</div>
							<div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
								<h4>text</h4>
								<p>text</p>
							</div>
						</div>
					</div>

					....

				</div>
                

– Real Estate

                <div class="carousel-slider testimonials-realestate-slider">

					<div class="slick-slide"> <!-- 1 -->
						<div class="affa-testimonial-realestate">
							<div class="testimonial-txt">
								<p>text</p>
							</div>
							<div class="testimonial-name">
								<img src="images/content/avatars/1.jpg" alt="Avatar">
								<h4>text</h4>
								<p>text</p>
							</div>
						</div>
					</div>

					....

				</div>
                

Timeline

– General

                <ul class="affa-timeline margin-bottom80-sm margin-bottom100">
                    <li>
						<h4>text</h4>
						<h5>text</h5>
						<p>text</p>
					</li>
					....
				</ul>
                

Ionicons Icon Packs

You can also use built in icon packs in this template, all icons use CSS Font feature, so you can edit and give color to the icon easily. For referrences to easier you use all icons you can visit here!


CSS Structure


I'm using one main CSS file (/css/style.css), in this template which you are free to modify depending on the customization you require. There are also two additional style sheets that I do not recommend changing. Those style sheets reside in the /css/ folder. Below are 3 additional CSS files:

  • bootstrap.min.css - This is a main stylesheet that required for basic template styling like grid, form, input and web elements.
  • ionicons.min.css - CSS stylesheets for font icon packs.
  • jquery.fancybox.min.css - This stylesheet used for styling the images gallery popup.
  • jquery.scrollbar.css - This stylesheet used for styling the scroll bar.
  • slick.css - This stylesheet use for styling all the web carousel elements.
  • slick-theme.css - Add additional styling to make Slick Slider look more beautiful.
  • animate.min.css - This stylesheet use for styling the animation effects.
  • zabuto_calendar.min.css - This stylesheet use for styling the calendar elements.
  • no-js.css - This stylesheet will be enabled if your browser don't support javascript.
  • older-browser.css - This stylesheet will be enabled if you use Internet Explorer 9 and below.
  • boxed.css - This stylesheet use for boxed layout template.
  • spacer.css - This stylesheet use for styling the space between elements.
  • general.css - CSS stylesheets for general site styles.

The main CSS file (/css/style.css) contains all of the specific stylings for the page. The file was divided into several sessions as below:

                /* ========================= General ========================= */

                General styles for all web elements

                /* ========================= Navigation ========================= */

                CSS styles for the navigation section

                /* ========================= Header ========================= */

                CSS styles for the header section

                /* ========================= Elements ========================= */

                CSS styles for specific web elements

                /* ========================= Footer ========================= */

                CSS styles for the footer section

                /* ========================= Media Queries ========================= */

                CSS styles for support all kinds of different screen sizes
                

If you would like to edit a specific section of the site, simply find the appropriate label in the .css file, and then scroll down until you find the appropriate style that needs to be edited.


Scripts


This theme uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.


PHP Integration


Contact & Signup Form

This template use the PHP engine for activate contact & signup proses. Through the contact form a message will direct send to your email address. Then for the signup form a message will send to guest/visitor and your email address. So you can edit your email address in the files below:

/includes/process-contact.php
/includes/process-signup.php

Find this line of code and replace with your email address:

                $my_email = 'support@affapress.com'; // Change with your email address
                

Subscribe Form

This template use the PHP engine for subscribe form that has supported with MailChimp integration. To activate this integration you must make some adjusment to several .php files.

Required: You has already signed in mailchimp.com and was familiar with the features provided by the MailChimp.

To adjust the MailChimp integration, follow this instruction:

  1. Open the /includes/mailchimp/config.inc.php file.
  2. Change $apikey variable with your MailChimp API Key, you can see in https://admin.mailchimp.com/account/api
  3. Also write your MailChimp List ID in $listId variable. To get the List ID, login to your MailChimp account » select one of the list that has been created » go to Settings menu » List name & defaults.

Calendar Data

You can see the Calendar example here!

To adjust the Calendar Data integration, follow this instruction:

  1. Open the /includes/calendar-data.php file.
  2. Change the value of $arr variable with the data you need. You can see the complete documentation here!
  3. Save it and see the calendar will display according to the data you have input.

Credits




Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. Please contact me via email or social media. I'll do my best to assist!