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
- 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.
- Select /html/ folder, then choose layout which you want, 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.
- 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.
- 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.
- 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:
- Open the .html file (example index.html).
- Find this line of code in <head> section:
<!-- Custom Colors --> <!--<link rel="stylesheet" href="css/colors/green/color.css">--> <!--<link rel="stylesheet" href="css/colors/orange/color.css">--> <!--<link rel="stylesheet" href="css/colors/pink/color.css">--> <!--<link rel="stylesheet" href="css/colors/purple/color.css">--> <!--<link rel="stylesheet" href="css/colors/yellow/color.css">--> - Choose your favorite color with remove one of the comment tag like this:
<!-- Custom Colors --> <!--<link rel="stylesheet" href="css/colors/green/color.css">--> <link rel="stylesheet" href="css/colors/orange/color.css"> <!--<link rel="stylesheet" href="css/colors/pink/color.css">--> <!--<link rel="stylesheet" href="css/colors/purple/color.css">--> <!--<link rel="stylesheet" href="css/colors/yellow/color.css">--> - Save and see the result!
Change Logo Template
It's easy to change logo of this template, you just need to replace the image at folder images, name logo files is logo.png, logo-affix.png, and logo-footer.png
- open folder images
- replace files logo with your files logo
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-sm-8' and the '#side' element has a class of 'col-sm-4'. The total columns equals 12 columns.
<div class="container">
<div class="row">
<div id="main" class="col-sm-8"></div>
<div id="side" class="col-sm-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.
Site Logo
You can change the main site logo with change this code:
<div class="navbar-brand">
<a href="index.html"><img src="images/logo.png" alt="Logo"></a> <!-- site logo -->
</div>
Main Navigation
You can change the main site navigation with change this code:
<ul class="nav navbar-nav">
<li><a href="#header" class="smooth-scroll">Home</a></li>
....
<li><a href="page.html">Page</a></li>
<li class="menu-btn"><a href="#contact" class="smooth-scroll">Contact</a></li>
</ul>
Header Content
In this section you can change the template header content elements.
Header Layout 1:
<div class="header-content">
<!-- .container -->
<div class="container">
<div class="header-txt-center">
<h1>....</h1>
<p>....</p>
<div class="header-button">
<button type="button" class="btn-custom btn-border btn-icon big hvr-shutter-out-horizontal border"><i class="ion ion-android-download"></i> Download</button>
</div>
<div class="center-image">
<img class="animation" data-animation="fadeInUp" src="images/header-mockup.png" alt="header mockup">
</div>
</div>
</div>
<!-- .container end -->
</div>
Header Layout 2:
<!-- .slider-pro -->
<div class="slider-pro">
<div class="sp-slides">
<div class="sp-slide"> <!-- 1 -->
<img class="sp-image" src="images/blank.gif" data-src="images/content/sliders/1.jpg" alt="Image">
<div class="header-overlay header-overlay40">
<div class="container">
<div class="header-txt-left">
<h1 class="sp-layer sp-layer-1" data-show-transition="right" data-show-delay="200">....</h1>
<p class="sp-layer sp-layer-2" data-show-transition="right" data-show-delay="400">....</p>
<div class="sp-layer sp-layer-3" data-show-transition="right" data-show-delay="600">
<a href="page.html" class="btn-custom btn-border btn-white">....</a>
<a href="#contact" class="btn-custom smooth-scroll">....</a>
</div>
</div>
</div>
</div>
</div>
....
</div>
<!-- .slider-pro end -->
Header Layout 3:
<div class="header-content">
<!-- .container -->
<div class="container padding-bottom120 padding-top80">
<!-- .row -->
<div class="row">
<div class="col-sm-5">
<div class="affa-contact">
<h3 class="contact-heading">....</h3>
<form method="post" action="#" class="affa-form-contact">
....
</form>
<p class="contact-note"><a href="#">Terms & Conditions</a></p>
</div>
</div>
<div class="col-sm-7 col-sm-offset-0 col-md-7 col-md-offset-0 col-lg-6 col-lg-offset-1">
<div class="margin-top60 margin-top0-sm">
<div class="header-txt-left">
<h1>....</h1>
<p>....</p>
</div>
<div class="header-txt-left-icon">
<i class="ion ...."></i>
<div class="header-txt-left-icon-content">
<h5 class="heading">....</h5>
<p>....</p>
</div>
</div>
<div class="header-txt-left-icon">
<i class="ion ...."></i>
<div class="header-txt-left-icon-content">
<h5 class="heading">....</h5>
<p>....</p>
</div>
</div>
<div class="header-txt-left-icon">
<i class="ion ...."></i>
<div class="header-txt-left-icon-content">
<h5 class="heading">....</h5>
<p>....</p>
</div>
</div>
<div class="header-txt-left-icon">
<i class="ion ...."></i>
<div class="header-txt-left-icon-content">
<h5 class="heading">....</h5>
<p>....</p>
</div>
</div>
<div class="header-txt-left-icon">
<i class="ion ...."></i>
<div class="header-txt-left-icon-content">
<h5 class="heading">....</h5>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</div>
Note: You can see the complete list of font icons here!
Header Layout 4:
<div class="header-content section-wrap">
<!-- .container -->
<div class="container">
<div class="header-txt-center">
<h1>....</h1>
<p>....</p>
<!-- .row -->
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
<form action="#" method="post" class="affa-form-subscribe">
....
</form>
</div>
</div>
<!-- .row end -->
</div>
<figure class="header-img">
<div class="img-left">
<img src="images/content/landing/phone-small.png" alt="header phone image" class="animation" data-animation="fadeInLeft" data-delay="200">
</div>
<div class="img-center">
<img src="images/content/landing/phone-big.png" alt="header phone image" class="animation" data-animation="fadeInUp" data-delay="800">
</div>
<div class="img-right">
<img src="images/content/landing/phone-small.png" alt="header phone image" class="animation" data-animation="fadeInRight" data-delay="200">
</div>
</figure>
</div>
<!-- .container end -->
</div>
Header Layout 5:
<div class="header-content">
<!-- .container -->
<div class="container">
<div class="header-txt-center">
<h1>....</h1>
<p>....</p>
<!-- .row -->
<div class="row margin-top80 margin-top60-xs">
<div class="col-sm-6">
<div class="affa-progress">
<div class="progress-heading clearfix">
<h5 class="progress-heading-time-remaining">....</h5>
<p class="progress-heading-percentage"><span>....</span>%</p>
</div>
<div class="progress">
<div class="progress-bar in" style="width: 0%;">....%</div>
</div>
</div>
<div class="affa-txt-funding clearfix">
<div class="txt-funding">
<p class="funding-money">$<span>....</span></p>
<div class="funding-detail">....</div>
</div>
<div class="txt-funding">
<p class="funding-money">$<span>....</span></p>
<div class="funding-detail">....</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="affa-video-wrap margin-top60-xs">
<div class="video-btn-section">
<a href="...." title="Open Video" class="btn-play blue fancybox-media"><span class="ion ion-play"></span></a>
</div>
<img src="images/content/landing/header-bg-video.jpg" alt="header bg video">
</div>
</div>
</div>
<!-- .row end -->
</div>
</div>
<!-- .container end -->
</div>
Feature Product Elements
In this section you can change the features product title, description, feature list, and image product by your product.
<!-- #feature-product -->
<div id="feature-product" class="padding-top120">
<!-- .container -->
<div class="container">
<div class="post-heading-center">
<h2>....</h2>
<p>....</p>
</div>
<div class="feature-image-wrap padding-top20-sm">
<div class="feature-image">
<div tabindex="0" class="feature-image-pointer left top short position-1">
<div class="pointer-text">
<p>....</p>
</div>
<div class="pointer-elemen">
<div class="pointer-icon">
<span class="pointer-icon-img animation-visible" data-animation="pulse"></span>
</div>
</div>
</div>
....
<figure class="feature-image-mockup">
<img src="images/content/landing/feature-product.png" alt="product image">
</figure>
</div>
</div>
</div>
<!-- .container end -->
</div>
<!-- #feature-product end -->
Feature Elements
In this section you can change the features list offered by your product.
Feature Column Text:
<!-- .row -->
<div class="row padding-bottom60">
<div class="col-sm-10 col-md-7 col-lg-6 col-sm-offset-1 col-md-offset-0 text-center-sm text-center-xs">
<figure class="margin-bottom40 animation" data-animation="animation-fade-in-left">
<img src="images/content/landing/feature-1.png" alt="Image">
</figure>
</div>
<div class="col-sm-10 col-md-5 col-lg-6 col-sm-offset-1 col-md-offset-0">
<div class="text-wrap40 margin-bottom40 text-center-sm text-center-xs">
<div class="post-heading-left">
<h2>....</h2>
</div>
<p class="margin-bottom30">....</p>
<a href="page.html" class="btn-custom btn-border">....</a>
</div>
</div>
</div>
<!-- .row end -->
Feature Icon Text:
<!-- .row -->
<div class="row">
<div class="col-sm-4">
<div class="affa-feature-icon-center animation" data-animation="slideUp">
<div class="feature-icon-wrap line-connector-right big">
<div class="feature-icon-wrap-base animation-hover" data-animation-hover="pulse">
<div class="icon-base">
<i class="ion ion-ios-infinite"></i>
</div>
</div>
</div>
<h4>....</h4>
<p>....</p>
</div>
</div>
....
</div>
<!-- .row end -->
Note: You can see the complete list of font icons here!
Feature Icon Text Box Model:
<!-- .row -->
<div class="row">
<div class="col-sm-4">
<div class="affa-feature-icon-center box-model animation" data-animation="flipInY">
<div class="feature-icon-wrap medium no-hover white">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-ios-paperplane"></i>
</div>
</div>
</div>
<h4>....</h4>
<p>....</p>
<button type="button" class="btn-custom btn-border hvr-shutter-out-horizontal border">....</button>
</div>
</div>
....
</div>
<!-- .row end -->
Note: You can see the complete list of font icons here!
Feature Icon Text Left type 1
<!-- .row -->
<div class="row">
<div class="col-md-4 col-sm-6 col-md-offset-0 col-sm-offset-0 col-xs-10 col-xs-offset-1">
<div class="affa-feature-icon-left type-1 animation" data-animation="bigEntrance">
<div class="feature-icon-wrap small white">
<div class="feature-icon-wrap-base animation-hover" data-animation-hover="pulse">
<div class="icon-base">
<i class="ion ion-ios-folder-outline"></i>
</div>
</div>
</div>
<div class="feature-icon-left-text">
<h5>....</h5>
<p>....</p>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
Note: You can see the complete list of font icons here!
Feature Icon Text Left type 2 with list icon
<!-- .row -->
<div class="row">
<div class="col-md-5 col-md-offset-1 col-sm-6">
<div class="affa-feature-icon-left type-2 animation" data-animation="slideInLeft">
<div class="feature-icon-wrap medium">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-usb"></i>
</div>
</div>
</div>
<div class="feature-icon-left-text">
<h4>....</h4>
<ul class="feature-icon-left-list list-icon">
<li><i class="ion ion-checkmark"></i>....</li>
<li><i class="ion ion-checkmark"></i>....</li>
<li><i class="ion ion-checkmark"></i>....</li>
<li><i class="ion ion-checkmark"></i>....</li>
</ul>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
Note: You can see the complete list of font icons here!
Product List Element
In this section you can display you product star rating, title, description, price and image of your product.
product list element star rating(star-one, star-two, star-tree, star-four, star-five)
<!-- .row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="affa-product-list">
<div class="product-list-star-rating">
<div class="star-rating">
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<div class="star-rating-val star-four">
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
<span class="star-rating-icon"></span>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
product list element title and description
<!-- .row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="affa-product-list">
<div class="product-list-star-rating">
....
</div>
<div class="product-list-heading">
<h5>....</h5>
<p>....</p>
</div>
....
</div>
<!-- .row end -->
product list element price
<!-- .row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="affa-product-list">
<div class="product-list-star-rating">
....
</div>
<div class="product-list-heading">
....
</div>
<div class="product-list-item animation" data-animation="fadeInUp">
<div class="list-item-overlay">
<div class="item-overlay-middle">
<p class="item-overlay-price">$659</p>
<div class="item-overlay-btn">
<button type="button" class="btn-custom hvr-shutter-out-horizontal">Choose</button>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
product list element image
<!-- .row -->
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="affa-product-list">
<div class="product-list-star-rating">
....
</div>
<div class="product-list-heading">
....
</div>
<div class="product-list-item animation" data-animation="fadeInUp">
....
</div>
<figure class="product-list-base">
<img src="images/product-list-1.png" alt="product list">
</figure>
....
</div>
<!-- .row end -->
Video Element
In this section you can display your title, description, link, and image background video your product
<!-- #video -->
<div id="video" class="bg-overlay bg-overlay70 text-center container-padding120">
<!-- .container -->
<div class="container">
<div class="post-heading-center">
<h2>....</h2>
<p>....</p>
</div>
<!-- .row -->
<div class="row">
<div class="col-xs-10 col-xs-offset-1 affa-video-wrap">
<div class="video-btn-section">
<a href="...." title="Open Video" class="btn-play white fancybox-media"><span class="ion ion-play"></span></a>
</div>
<img src="images/content/bg/2.jpg" alt="background video">
</div>
</div>
<!-- .row end -->
</div>
<!-- .container end -->
</div>
<!-- #video end -->
Testimonial Element
In this section you can display your testimonial text, face/image, name, and description/employment
testimonial element text
<!-- .row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="carousel-slider affa-testimonial-slider">
<div class="affa-testimonial"><!-- 1 -->
<blockquote>
<p class="text-big-italic">....</p>
</blockquote>
....
</div>
....
</div>
<!-- .row end -->
testimonial element face or image
<!-- .row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="carousel-slider affa-testimonial-slider">
<div class="affa-testimonial"><!-- 1 -->
<blockquote>
<p class="text-big-italic">....</p>
</blockquote>
<div class="testimonial-face">
<img src="images/testimonial-face-1.jpg" alt="testimonial face">
</div>
....
</div>
....
</div>
<!-- .row end -->
testimonial element name and description or employment
<!-- .row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="carousel-slider affa-testimonial-slider">
<div class="affa-testimonial"><!-- 1 -->
<blockquote>
<p class="text-big-italic">....</p>
</blockquote>
<div class="testimonial-face">
<img src="images/testimonial-face-1.jpg" alt="testimonial face">
</div>
<p class="testimonial-name">....</p>
<p class="testimonial-employment">....</p>
</div>
....
</div>
<!-- .row end -->
Clients Element
In this section you can display your logo client company
<!-- .row -->
<div class="row">
<div class="clients-row">
<div class="carousel-slider affa-client-logo-slider">
<div class="clients-col">
<div class="affa-client-logo">
<div class="client-logo-wrap">
<div class="client-logo-overlay"></div>
<img src="images/patner/1.png" alt="patner">
</div>
</div>
</div>
....
</div>
<!-- .row end -->
Table Price Element
In this section you can display title, price, time period, features, and button
change table price title, price, and time period
<!-- .row -->
<div class="row">
<div class="no-padding col-sm-4">
<div class="affa-tbl-prc">
<div class="tbl-prc-base">
<div class="tbl-prc-heading">
<h5>Basic Edition</h5>
<p class="tbl-prc-number">....</p>
<p class="tbl-prc-month">....</p>
</div>
....
</div>
<!-- .row end -->
change table list features and you can make that's active or not
<!-- .row -->
<div class="row">
<div class="no-padding col-sm-4">
<div class="affa-tbl-prc">
<div class="tbl-prc-base">
<div class="tbl-prc-heading">
....
</div>
<ul class="tbl-prc-list-feature">
<li class="active">....</li>
<li class="active">....</li>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>
....
</div>
<!-- .row end -->
change button of table list features
<!-- .row -->
<div class="row">
<div class="no-padding col-sm-4">
<div class="affa-tbl-prc">
<div class="tbl-prc-base">
<div class="tbl-prc-heading">
....
</div>
<ul class="tbl-prc-list-feature">
....
</ul>
<div class="tbl-prc-btn">
<button type="button" class="btn-custom hvr-shutter-out-horizontal">....</button>
</div>
....
</div>
<!-- .row end -->
Gallery Element
In this section you can display image and title image, link href same with link image src
<!-- .row -->
<div class="row">
<div class="col-md-4 col-sm-6 no-padding">
<div class="affa-gallery-image">
<figure>
<img src="....." alt="gallery image">
</figure>
<div class="gallery-image-overlay">
<div class="gallery-image-overlay-container">
<div class="lightbox-icon">
<a class="fancybox" rel="gallery1" href="....." title="gallery image 1">
<i class="ion ion-ios-search-strong"></i>
</a>
</div>
<h5>Image One</h5>
</div>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
Timeline Element
In this section you can display your timeline, you can add title your timeline at timeline-head and your story at timeline-list
<div class="affa-timeline">
<div class="timeline-head">
<h4>....</h4>
</div>
<div class="timeline-list animation" data-animation="fadeInDown"><!-- 1 -->
<h4>....</h4>
<p>....</p>
</div>
....
</div>
Accordion Element or F.A.Q Element
In this section you can display F.A.Q title and text
<!-- .row -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="affa-accordion" data-accordion-group>
<div class="accordion-item animation" data-animation="slideInLeft" data-accordion>
<div data-control>
<h5>....</h5>
</div>
<div data-content>
<p>....</p>
</div>
</div>
....
</div>
<!-- .row end -->
Teams Element
In this section you can display image, name, and job your teams.
<!-- .row -->
<div class="row">
<div class="col-xs-6 col-sm-3 no-padding">
<div class="affa-teams">
<figure>
<div class="team-img-hover">
<img src="...." alt="team image">
</div>
</figure>
<div class="team-overlay">
<div class="team-overlay-description">
<div class="description-details">
<h5>....</h5>
<p>....</p>
</div>
</div>
</div>
</div>
</div>
....
</div>
<!-- .row end -->
Counter Text Element
In this section you can display icon, number, and title.
<!-- .row -->
<div class="row">
<div class="col-sm-3">
<div class="affa-counter">
<i class="ion ion-podium"></i>
<h4 class="counter-number"><span>....</span></h4>
<p class="counter-title">....</p>
</div>
</div>
....
</div>
<!-- .row end -->
Note: You can see the complete list of font icons here!
Call-to-Action Element
In this section you can show your call-to-action download button.
<!-- .row -->
<div class="col-md-6 col-sm-10 col-sm-offset-1 col-md-offset-0">
<div class="affa-download text-wrap60 text-center-xs margin-bottom60-xs margin-bottom60-md margin-bottom60-sm">
<div class="post-heading-left text-center-xs">
<h2>....</h2>
</div>
<p>....</p>
<div class="btn-section">
<a href="#" title="Download from app store" class="btn-app-store">App Store</a>
<a href="#" title="Download from play store" class="btn-play-store">Play Store</a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-10 col-sm-offset-1 col-md-offset-0">
<figure class="img-layers img-layer-left-front">
<div class="img-layer-left">
<img src="images/phone-big-description.png" class="animation" data-animation="slideInUp" data-delay="600" alt="description image">
</div>
<div class="img-layer-right">
<img src="images/phone-small-description.png" class="animation" data-animation="slideInUp" data-delay="300" alt="description image">
</div>
</figure>
</div>
<!-- .row end -->
Subscribe and Contact Element
In this section you can change sentence text invitation and details about your company contact informations.
<!-- #contact -->
<div id="contact" class="bg-image container-padding120">
<!-- .container -->
<div class="container">
<div class="post-heading-center">
<h2>....</h2>
<p>....</p>
</div>
<!-- .row -->
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="#" method="post" class="affa-form-subscribe">
<div class="form-group">
<label for="EmailFormSubscribe" class="sr-only">Email address</label>
<input type="email" class="form-control" id="EmailFormSubscribe" name="email" placeholder="Enter Your Email Address">
<button type="submit" class=""><i class="ion ion-ios-email-outline"></i></button>
</div>
</form>
</div>
</div>
<!-- .row end -->
<div class="affa-getintouch margin-top120">
<!-- .row -->
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="post-heading-center no-padding">
<h2>....</h2>
<p>....</p>
</div>
<div class="getintouch-number margin-top50">
<h3>(+123) 4567890</h3>
</div>
....
</div>
<!-- #contact end -->
Footer Elements
In this section you can change footer logo, social media links and copyright text with your own name or company:
<!-- #footer -->
<footer id="footer">
<div class="footer-top padding-top80">
<!-- .container -->
<div class="container">
<img src="images/logo-footer.png" class="footer-logo" alt="logo footer">
<ul class="affa-feature-icon-social">
<li>
<div class="feature-icon-wrap nano">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-social-facebook"></i>
</div>
</div>
</div>
</li>
<li>
<div class="feature-icon-wrap nano">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-social-twitter"></i>
</div>
</div>
</div>
</li>
<li>
<div class="feature-icon-wrap nano">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-social-instagram"></i>
</div>
</div>
</div>
</li>
<li>
<div class="feature-icon-wrap nano">
<div class="feature-icon-wrap-base">
<div class="icon-base">
<i class="ion ion-social-youtube"></i>
</div>
</div>
</div>
</li>
</ul>
....
<div class="footer-bottom">
<!-- .container -->
<div class="container">
<div>
<ul class="list-line vertical footer-bottom-nav">
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
<li><a href="#">....</a></li>
</ul>
</div>
<div class="footer-bottom-copyright">
<p>....</p>
</div>
....
</footer>
<!-- #footer end -->
Note: You can see the complete list of font icons here!
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.css - This stylesheet used for styling the images gallery popup.
- no-js.css - This stylesheet will be enabled if your browser don't support javascript.
- ie-older.css - This stylesheet will be enabled if you use Internet Explorer 7 and below.
- animate.min.css - This stylesheet use for styling the animation effects.
- animations.css - This stylesheet use for styling the animation effects.
- hover-min.css - This stylesheet use for styling the hover animation effects.
- jquery.accordion.css - This stylesheet use for styling all the web accordion elements.
- 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.
- slider-pro.min.css - This stylesheet use for styling the web slider elements.
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:
/* ========================= Site Styles ========================= */
General styles for all web elements
/* ========================= Header ========================= */
CSS styles for the header section
/* ========================= Elements ========================= */
CSS styles for specific web elements
/* ========================= Footer ========================= */
CSS styles for the bottom section
/* ========================= Media Queries ========================= */
CSS styles for support all kinds of different screen sizes
/* ========================= Keyframes ========================= */
CSS styles for rule specifies the animation code
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
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 process-contact.php and process-signup.php file.
$my_email = 'support@affapress.com'; // Change with your email address
This template also use the PHP engine for subscribe form 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:
- Open the /mailchimp/config.inc.php file.
- Change $apikey variable with your MailChimp API Key, you can see in http://admin.mailchimp.com/account/api
- 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.
Image Files
The following Photoshop files are included with download package file, all the files place in /psd/ folder.
- index.psd
In addition to several assets you can download it for free through the links below:
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!