Lana Documentation

v1.3.0 - April 30, 2019

Live Preview Other products

Overview

Lana is a creative and fully responsive HTML/CSS template based on Bootstrap 4 framework, suitable for any creative people, business, agency, portfolio etc...

Installation

Follow the steps below to get started with your Site Template:

  1. Open the html folder to find all the Templates Files.
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • html/assets/css - Extra Stylesheets Folder
    • html/demo - Demo Images Folder
    • html/assets/fonts - Fonts Folder
    • html/assets/images - Images Folder
    • html/include - Required PHP Functions Folder
    • html/assets/js - Javacripts Folder
    • html/assets/css/style.css - Main Stylesheet File
    • html/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Lana follows a simple coding structure. here is the sample:


										<!DOCTYPE html>
										<html lang="en">
											<head>
											
												<!-- Your Stylesheets, Scripts & Title -->
												
											</head>
											<body>

												<div id="preloader" class="preloader preloader-dark">
												
													[...]
													
												</div>

												<div class="site-container">

													<!-- Site header -->
													<header class="site-header header-mobile-light header-content-light header-content-mobile-dark">
													
														[...]
													
													</header>
													
													<!-- Back To Top Button -->
													<a href="#top" class="backtotop scrollto">

														[...]

													</a>

													<!-- Global overlay -->
													<div class="global-overlay">

														[...]

													</div>

													<!-- Scroll progress -->
													<div class="scroll-progress">

														[...]

													</div>
													
													<!-- Page content -->
													<div class="ln-fullpage">

														<section class="ln-section">

															[...]

														</section>

													</div>

													<!-- Site footer -->
													<footer class="site-footer footer-content-light footer-mobile-content-light">

														[...]

													</footer>

												</div>

												<!-- Your Scripts -->

											</body>
										</html>

Grid System

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Favicons & Apple Touch Icons

You can add a Favicon to your Website using the following code:


										<link rel="icon" href="assets/images/favicon.png" type="image/png" sizes="16x16">

You can add Apple Touch Icons to your Website using the following code:


										<link rel="apple-touch-icon" href="assets/images/apple-touch-icon.png">
										<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
										<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">

Content

Typography

Classic heading style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

												<h1>h1. Heading 1</h1>
												<h2>h2. Heading 2</h2>
												<h3>h3. Heading 3</h3>
												<h4>h4. Heading 4</h4>
												<h5>h5. Heading 5</h5>
												<h6>h6. Heading 6</h6>
Uppercase heading style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

												<h1 class="heading-uppercase">h1. Heading 1</h1>
												<h2 class="heading-uppercase">h2. Heading 2</h2>
												<h3 class="heading-uppercase">h3. Heading 3</h3>
												<h4 class="heading-uppercase">h4. Heading 4</h4>
												<h5 class="heading-uppercase">h5. Heading 5</h5>
												<h6 class="heading-uppercase">h6. Heading 6</h6>
Standard paragraph

Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.


												<p>Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.</p>
Lead paragraph

Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.


												<p class="lead">Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.</p>

Images


												<img src="http://via.placeholder.com/150x150" alt="" class="rounded">
											

												<img src="http://via.placeholder.com/150x150" alt="" class="img-thumbnail">

Progress bar

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Tables

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Media

Lightbox Single Image

Please add mfp-image to the a tag.


									<a href="http://via.placeholder.com/1500x1500" class="mfp-image">
										<img alt="" src="http://via.placeholder.com/150x150">
									</a>

Lightbox Gallery

Please add mfp-gallery class above images.


									<div class="row mfp-gallery">
						
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-2.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-2.jpg">
											</a>
										</div>
										
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-4.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-4.jpg">
											</a>
										</div>
										
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-6.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-6.jpg">
											</a>
										</div>
										
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-7.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-7.jpg">
											</a>
										</div>
										
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-8.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-8.jpg">
											</a>
										</div>
										
										<div class="col-md-4 mb-15">
											<a href="demo/images/portfolio/project-9.jpg">
												<img class="img-responsive" alt="" src="demo/images/portfolio/project-9.jpg">
											</a>
										</div>
										
									</div>

Lightbox Video

Please add mfp-iframe to the a tag.


									<a href="https://www.youtube.com/watch?v=L9szn1QQfas" class="mfp-iframe btn">
										Youtube Video
									</a>
									<a href="https://vimeo.com/71071717" class="mfp-iframe btn">
										Vimeo Video
									</a>

Lightbox Map

Please add mfp-iframe to the a tag.


									<a href="https://www.google.com/maps/embed/v1/place?q=London,+Wielka+Brytania&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU" class="mfp-iframe btn">
										Google Map Embed
									</a>

Components

Buttons


										<!-- Primary --->
										<a href="#" class="btn btn-primary">Default btn</a>
										
										<!-- Secondary --->
										<a href="#" class="btn btn-secondary">Default btn</a>

										<!-- White --->
										<a href="#" class="btn btn-white">Default btn</a>
										
										<!-- Dark --->
										<a href="#" class="btn btn-dark">Default btn</a>
										
										<!-- Outline primary --->
										<a href="#" class="btn btn-outline-primary">Default btn</a>
										
										<!-- Outline secondary --->
										<a href="#" class="btn btn-outline-secondary">Default btn</a>
										
										<!-- Outline white --->
										<a href="#" class="btn btn-outline-white">Default btn</a>
										
										<!-- Outline dark --->
										<a href="#" class="btn btn-outline-dark">Default btn</a>

Countdown

You can set the countdown in data-countdown, as you can see on example::


										<div class="countdown" data-countdown="2018/12/25 12:00:00"></div>

Feature Blocks


										<div class="row">

											<div class="col-md-6 col-sm-6">
												<div class="feature-block mb-5 animated" data-animation="fadeInUp">
													<div class="feature-icon mb-4 text-white">
														<div>
															<i class="ti-timer"></i>
														</div>
													</div>
													<h3 class="h4 text-white">Launch Quickly</h3>
												</div>
											</div>
											
											[...]

Forms

This template is based on Bootstrap 4. Go to Bootrstrap's documentation and check how does it work.

Utilities

Helper Classes

We have created some really useful helper classes for you.

Background color

  • .bg-primary
  • .bg-secondary
  • .bg-light
  • .bg-dark
  • .bg-navy
  • .bg-blue
  • .bg-aqua
  • .bg-teal
  • .bg-olive
  • .bg-green
  • .bg-lime
  • .bg-yellow
  • .bg-orange
  • .bg-red
  • .bg-marron
  • .bg-fuchsia
  • .bg-purple
  • .bg-black
  • .bg-white
  • .bg-transparent

Background size

  • .bg-cover - background-size:cover
  • .bg-contain - background-size:contain

Background position

  • .bg-top-left - background-position:top left
  • .bg-top-center - background-position:top center
  • .bg-top-right - background-position:top right
  • .bg-center-left - background-position:center left
  • .bg-center - background-position:center
  • .bg-center-right - background-position:center right
  • .bg-bottom-left - background-position:bottom left
  • .bg-bottom-center - background-position:bottom center
  • .bg-bottom-right - background-position:bottom right

Background repeat

  • .bg-repeat - background-repeat:repeat
  • .bg-repeat-x - background-repeat:repeat-x
  • .bg-repeat-y - background-repeat:repeat-y
  • .bg-norepeat - background-repeat:no-repeat

Width

  • .w--1 - width:1px
  • .w--2 - width:2px
  • .w--3 - width:3px
  • .w--4 - width:4px
  • .w--5 - width:5px
  • .w--6 - width:6px
  • .w--7 - width:7px
  • .w--8 - width:8px
  • .w--9 - width:9px
  • .w--10 - width:10px
  • .w--50 - width:50px
  • .w--100 - width:100px
  • .w--150 - width:150px
  • .w--200 - width:200px
  • .w--250 - width:250px
  • .w--300 - width:300px
  • .w--350 - width:350px
  • .w--400 - width:400px
  • .w--450 - width:450px
  • .w--500 - width:500px
  • .w--550 - width:550px
  • .w--600 - width:600px
  • .w--650 - width:650px
  • .w--700 - width:700px
  • .w--auto - width:auto
  • .maxw--100 - max-width:100%
  • .minw--100 - min-width:100px
  • .minw--200 - min-width:200px
  • .minw--300 - min-width:300px
  • .minw--400 - min-width:400px
  • .minw--500 - min-width:500px
  • .minw--600 - min-width:600px
  • .minw--700 - min-width:700px

Height

  • .h--1 - height:1px
  • .h--2 - height:2px
  • .h--3 - height:3px
  • .h--4 - height:4px
  • .h--5 - height:5px
  • .h--6 - height:6px
  • .h--7 - height:7px
  • .h--8 - height:8px
  • .h--9 - height:9px
  • .h--10 - height:10px
  • .h--50 - height:50px
  • .h--100 - height:100px
  • .h--150 - height:150px
  • .h--200 - height:200px
  • .h--250 - height:250px
  • .h--300 - height:300px
  • .h--350 - height:350px
  • .h--400 - height:400px
  • .h--450 - height:450px
  • .h--500 - height:500px
  • .h--550 - height:550px
  • .h--600 - height:600px
  • .h--650 - height:650px
  • .h--700 - height:700px
  • .h--auto - height:auto
  • .maxh--100 - max-height:100%
  • .minh--100 - min-height:100px
  • .minh--200 - min-height:200px
  • .minh--300 - min-height:300px
  • .minh--400 - min-height:400px
  • .minh--500 - min-height:500px
  • .minh--600 - min-height:600px
  • .minh--700 - min-height:700px
  • .minh--800 - min-height:800px
  • .fullscreen - min-height:100vh
  • .fullscreen-{breakpoint} - for sm, md, lg, and xl

Text decoration

  • .text-underline - text-decoration:underline

Font family

  • .main-font - font-family: 'Open Sans', sans-serif
  • .alt-font - font-family: 'Montserrat', sans-serif

Font weight

  • .fw-100 - font-weight:100
  • .fw-200 - font-weight:200
  • .fw-300 - font-weight:300
  • .fw-400 - font-weight:400
  • .fw-500 - font-weight:500
  • .fw-600 - font-weight:600
  • .fw-700 - font-weight:700
  • .fw-800 - font-weight:800
  • .fw-900 - font-weight:900

Text color

  • .text-primary
  • .text-secondary
  • .text-light
  • .text-dark
  • .text-navy
  • .text-blue
  • .text-aqua
  • .text-teal
  • .text-olive
  • .text-green
  • .text-lime
  • .text-yellow
  • .text-orange
  • .text-red
  • .text-marron
  • .text-fuchsia
  • .text-purple
  • .text-black
  • .text-white

Opacity

  • .opacity-100 - opacity:1
  • .opacity-95 - opacity:.95
  • .opacity-90 - opacity:.9
  • .opacity-85 - opacity:.85
  • .opacity-80 - opacity:.8
  • .opacity-75 - opacity:.75
  • .opacity-70 - opacity:.70
  • .opacity-65 - opacity:.65
  • .opacity-60 - opacity:.60
  • .opacity-55 - opacity:.55
  • .opacity-50 - opacity:.5
  • .opacity-45 - opacity:.45
  • .opacity-40 - opacity:.4
  • .opacity-35 - opacity:.35
  • .opacity-30 - opacity:.3
  • .opacity-25 - opacity:.25
  • .opacity-20 - opacity:.2
  • .opacity-15 - opacity:.15
  • .opacity-10 - opacity:.1
  • .opacity-5 - opacity:.05
  • .opacity-0 - opacity:0

Overflow

  • .overflow-hidden - overflow:hidden

z-index

  • .zindex-0 - z-index:0
  • .zindex-1 - z-index:1
  • .zindex-2 - z-index:2
  • .zindex-3 - z-index:3
  • .zindex-4 - z-index:4
  • .zindex-5 - z-index:5
  • .zindex-555 - z-index:555
  • .zindex-5555 - z-index:5555
  • .zindex-n1 - z-index:-1

Box shadow

  • .shadow-1
  • .shadow-2
  • .shadow-3
  • .shadow-4

Spacing

Property

  • m - for classes that set margin
  • p - for classes that set padding

Sides

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-right
  • x - for classes that set both *-left and *-right
  • y - for classes that set both *-top and *-bottom
  • blank - for classes that set a margin or padding on all 4 sides of the element

Size

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 10 - 10px
  • 20 - 20px
  • 30 - 30px
  • 40 - 40px
  • 50 - 50px
  • 60 - 60px
  • 70 - 70px
  • 80 - 80px
  • 90 - 90px
  • 100 - 100px
  • 110 - 110px
  • 120 - 120px
  • auto - for classes that set the margin to auto

Spacing (margin and padding) classes work from min-width: 0.

If you need to use spacing utilities that apply to custom breakpoint please using the format {property}{sides}-{breakpoint}--{size} for sm, md, lg, xl.

  • sm - min-width: 576px
  • md - min-width: 768px
  • lg - min-width: 992px
  • xl - min-width: 1200px

Example


										.pt--0 { padding-top:0 }
										.pt-sm--0 { padding-top: 0 }
										.mb--0 { margin-bottom:0 }
										.mb-sm--0 { margin-bottom: 0 }

Configuration

Animations

You can animate each single element of the template, simply adding the animated class and the data-animation attribute, as you can see on example:


										<p class="lead animated" data-animation="fadeInUp">Creative Solutions For You</p>

Take a look here for a complete list of the animations available.

You can animate each single element of the template when the page is loaded, simply adding the onstart class.Example


										<p class="lead animated" data-animation="fadeInUp" data-animation-delay="800">Creative Solutions For You</p>

Backgrounds

Global Image Background

										<!-- Global overlay -->
										<div class="global-overlay">
											<div class="overlay-inner bg-image-holder bg-cover">
												<img src="demo/images/image-4.jpg" alt="background">
											</div>
											<div class="overlay-inner bg-dark opacity-55"></div>
										</div>
Global Animated Gradient Background

Add colors in hex format to the data-gradient-bg attribute.


										<!-- Global overlay -->
										<div class="global-overlay">
											<div class="overlay-inner" data-gradient-bg="[['#AA076B','#61045F'],['#02AAB0','#00CDAC'],['#DA22FF','#9733EE']]"></div>
										</div>
Global Slideshow Background

Please add class slideshow-background to the body tag.

Open main.js file and find this code:


										// Slideshow
										if ($body.hasClass('slideshow-background')) {
											$body.vegas({
												preload: true,
												timer: false,
												delay: 5000,
												transition: 'fade',
												transitionDuration: 1000,
												slides: [
													{ src: 'demo/images/image-15.jpg' },
													{ src: 'demo/images/image-16.jpg' },
													{ src: 'demo/images/image-17.jpg' },
													{ src: 'demo/images/image-4.jpg' }
												]
											});
										}
Global Slideshow with Video Background

Please add class slideshow-video-background to the body tag.

Open main.js file and find this code:


										// Slideshow with Video
										if ($body.hasClass('slideshow-video-background')) {
											$body.vegas({
												preload: true,
												timer: false,
												delay: 5000,
												transition: 'fade',
												transitionDuration: 1000,
												slides: [
													{ src: 'demo/images/image-15.jpg' },
													{ src: 'demo/video/marine.jpg',
														video: {
															src: [
																'demo/video/marine.mp4',
																'demo/video/marine.webm',
																'demo/video/marine.ogv'
															],
															loop: false,
															mute: true
														}
													},
													{ src: 'demo/images/image-16.jpg' },
													{ src: 'demo/images/image-17.jpg' }
												]
											});
										}
Global Slideshow with Zoom Effect Background

Please add class slideshow-zoom-background to the body tag.

Open main.js file and find this code:


										// Slideshow - ZoomOut
										if ($body.hasClass('slideshow-zoom-background')) {
											$body.vegas({
												preload: true,
												timer: false,
												delay: 7000,
												transition: 'zoomOut',
												transitionDuration: 4000,
												slides: [
													{ src: 'demo/images/image-4.jpg' },
													{ src: 'demo/images/image-16.jpg' },
													{ src: 'demo/images/image-17.jpg' },
													{ src: 'demo/images/image-15.jpg' }
												]
											});
										}
Global Kenburns Background

Please add class kenburns-background to the body tag.

Open main.js file and find this code:


										// Kenburns
										if ($body.hasClass('kenburns-background')) {

											var kenburnsDisplayBackdrops = false;
											var kenburnsBackgrounds = [
												{ src: 'demo/images/image-15.jpg', valign: 'top' },
												{ src: 'demo/images/image-14.jpg', valign: 'top' },
												{ src: 'demo/images/image-17.jpg', valign: 'top' }
											];

											$body.vegas({
												preload: true,
												transition: 'swirlLeft2',
												transitionDuration: 4000,
												timer: false,
												delay: 10000,
												slides: kenburnsBackgrounds,
												walk: function (nb) {
													if (kenburnsDisplayBackdrops === true) {
														var backdrop;

														backdrop = backdrops[nb];
														backdrop.animation = 'kenburns';
														backdrop.animationDuration = 20000;
														backdrop.transition = 'fade';
														backdrop.transitionDuration = 1000;

														$body
															.vegas('options', 'slides', [ backdrop ])
															.vegas('next');
													}
												}
											});
										}
Global Video Background

										<!-- Global overlay -->
										<div class="global-overlay">
											<div class="overlay-inner bg-image-holder bg-cover">
												<img src="demo/images/image-4.jpg" alt="background">
											</div>
											<div class="overlay-inner overlay-video">
												<div class="video-wrapper">
													<video autoplay muted loop data-keepplaying>
														<source src="demo/video/work.webm" type="video/webm">
														<source src="demo/video/work.mp4" type="video/mp4">
														<source src="demo/video/work.ogv" type="video/ogg">
													</video>
												</div>
											</div>
											<div class="overlay-inner bg-dark opacity-50"></div>
										</div>
Global Youtube Video Background

Open main.js file and find this code:


										// Youtube Video
										if ($('#youtube-background').length > 0) {
											var videos = [
												{videoURL: "iXkJmJa4NvE", showControls:false, containment:'.overlay-video',autoPlay:true, mute:true, startAt:0,opacity:1, loop:true, showYTLogo:false, realfullscreen: true, addRaster:true}
											];

											$('.player').YTPlaylist(videos, true);
										}
Global Youtube Multiple Videos Background

Open main.js file and find this code:


										// Youtube Multiple Videos
										if ($('#youtube-multiple-background').length > 0) {

											var videos = [
												{videoURL: "CG20eBusRg0", showControls:false, containment:'.overlay-video',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, showYTLogo:false, realfullscreen: true, addRaster:true},
												{videoURL: "iXkJmJa4NvE", showControls:false, containment:'.overlay-video',autoPlay:true, mute:true, startAt:0,opacity:1, loop:false, showYTLogo:false, realfullscreen: true, addRaster:true}
											];

											$('.player').YTPlaylist(videos, true);

										}
Global Solid Color Background

										<!-- Global overlay -->
										<div class="global-overlay">
											<div class="overlay-inner bg-primary"></div>
										</div>
Global Background - Animated Solid Color on Scroll

										<!-- Global overlay -->
										<div class="global-overlay">
											<div class="overlay-inner bg-image-holder bg-cover">
												<img src="demo/images/image-4.jpg" alt="background">
											</div>
											<div class="overlay-inner global-overlay-color"></div>
										</div>

Add color in hex format to the data-overlay-color attribute and opacity (from 0 to 100) in the data-overlay-opacity attribute.


										<section class="ln-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home" data-overlay-color="#00050e" data-overlay-opacity="50">
											<div class="overlay has-mobile-overlay">
												<div class="overlay-inner"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>
Section Image Background

										<section class="ln-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-image-holder bg-cover">
													<img src="demo/images/image-4.jpg" alt="background">
												</div>
												<div class="overlay-inner bg-dark opacity-55"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>
Section Video Background

										<section class="ln-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-image-holder bg-cover">
													<img src="demo/images/image-4.jpg" alt="background">
												</div>
												<div class="overlay-inner overlay-video">
													<div class="video-wrapper">
														<video autoplay muted loop data-keepplaying>
															<source src="demo/video/work.webm" type="video/webm">
															<source src="demo/video/work.mp4" type="video/mp4">
															<source src="demo/video/work.ogv" type="video/ogg">
														</video>
													</div>
												</div>
												<div class="overlay-inner bg-dark opacity-50"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>
Section Animated Gradient Background

Add colors in hex format to the data-gradient-bg attribute.


										<section class="ln-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner" data-gradient-bg="[['#AA076B','#61045F'],['#02AAB0','#00CDAC'],['#DA22FF','#9733EE']]"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>
Section Solid Color Background

										<section class="ln-section d-lg-flex fullscreen-lg" data-anchor="home" data-tooltip="Home">
											<div class="overlay">
												<div class="overlay-inner bg-primary"></div>
											</div>
											<div class="container align-self-lg-center">
											
												[...]
												[...]
												[...]
												
											</div>
										</section>

Contact

You can setup Contact Forms anywhere on your Website by simply Copy/Pasting the Sample Code present in the HTML Files.

Just change your Email Address in the include/sendemail.php file to start receiving Form Responses.


										$toemails[] = array(
											'email' => 'your@email.com', // Your Email Address
											'name' => 'Your Name' // Your Name
										);

Not receiving Form Emails?

If you are not receiving Emails from your Forms then chances are that your Server Configuration doesn't support PHP mail() function. But you can use SMTP Authentication. Just find the following line of code:


										$mail = new PHPMailer();

Add this after the above line:


										$mail->IsSMTP();
										$mail->Host = "mail.yourdomain.com";
										$mail->SMTPDebug = 2;
										$mail->SMTPAuth = true;
										$mail->Port = 26;
										$mail->Username = "yourname@yourdomain.com";
										$mail->Password = "yourpassword";

Subscription

You can setup Mailchimp Subscriptions.

Just add your API Key and List ID in the include/subscribe.php file.


										$MC_apiKey = ''; // Your MailChimp API Key
										$MC_listId = ''; // Your MailChimp List ID
About API Keys
Find Your List ID

Local Scroll

You can use this functionality by adding scrollto class to a Link.


										<a href="#about" class="btn scrollto">Learn more</a>

Changing Fonts

By default, Lana uses 2 Fonts namely: Open Sans and Montserrat from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.


										<!-- FONTS -->
										<link href='https://fonts.googleapis.com/css?family=Open+Sans:200,300,300i,400,400i,700,700i%7CMontserrat:100,200,300,400,500,700' rel='stylesheet' type='text/css'>

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Website Optimization Tips

A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:

  1. gZip Compression & Browser Caching
  2. Image Compression & Optimization
  3. CSS & jQuery Minifications
  4. Fast Web Hosting Servers

Changelog

Let's check what has changed since the first version...

v 1.3.0 - 30 April 2019
Improvement

  • Updated Animate.css to the latest version 3.7.0

  • Updated layout/grid on some sections

  • Changed .bg-dark background color to #131517 - for better readability

Fixed

  • Form inputs height - .form-control

  • Fixed columns padding in the forms - replace class from .row to .form-row

  • Layout boxed - container width


											Files affected:
											---------------------------------------------------------------
											UPDATE - all .html files - Changed layout/grid on some sections 'col-xl-6' to 'col-xl-8'
											UPDATE - style.css - Added height to .form-control
											UPDATE - style.css - Added .form-row style
											UPDATE - utilities.css - Changed .bg-dark { background-color: #131517 }
v 1.2.0 - 16 April 2019
Improvement

  • Updated jQuery to the latest version 3.4.0

  • Updated Bootstrap to the latest version 4.3.1

  • Updated PHPMailer to the latest version 6.0.7

  • Updated Granim.js to the latest version 2.0.0

  • Updated ImagesLoaded to the latest version 4.1.4

  • Updated jQuery.easing to the latest version 1.4.1

  • Updated Vegas to the latest version 2.4.4

  • Updated jquery.mb.YTPlayer to the latest version 3.2.9

  • Updated jQuery Form Plugin to the latest version 4.2.2

  • Updated jQuery Validation Plugin to the latest version 1.19.0

  • Updated FontAwesome to the latest version 5.8.1


											Files affected:
											---------------------------------------------------------------
											UPDATE - all .html files - Changed FontAwesome URL - from 'assets/css/fontawesome-all.min.css' to 'assets/css/fontawesome/all.min.css'
v 1.1.2 - 6 April 2018
Fixed

  • Contact form - Sending emails if you don't use SMTP

  • Back to top button - Removed 'scrollto' class


											Files affected:
											---------------------------------------------------------------
											UPDATE - include/sendemail.php - https://gist.github.com/MichaelRise/9b0fa5c6ff7d2797d885413c900ab866
											UPDATE - all .html files
											
											* NOTES ON UPDATING *
											Please remove 'scrollto' class from 'backtotop' button in your .html files
v 1.1.1 - 13 March 2018
Fixed

  • Mobile buttons smooth scroll


											Files affected:
											---------------------------------------------------------------
											UPDATE - assets/js/main.js - https://gist.github.com/MichaelRise/55861c97bedf63bdd439a1bfb9e52bcc/revisions#diff-7a9076d6d94e62c13d641aa71f19ae8e
v 1.1.0 - 12 March 2018
Feature

  • Added pages with boxed layouts

  • Added Bubble Background Style 1

  • Added Bubble Background Style 2

  • Added Edge Background

  • Added Polygon Background

  • Added Constellation Background

  • Added sticky header for smaller screens

Fixed

  • Fixed and optimized smooth scroll

  • Buttons box-shadow, color, border-color and background-color for some selectors

  • UI color scheme change when you use classic scroll. You can use this feature only on the large desktops: 1200px width and up, 768px height and up

  • Fullpage - scrolloverflow

Improvement

  • Updated PhpMailer to newest version 6.0.3

  • Updated scrolloverflow.min.js to newest version


											Files affected:
											---------------------------------------------------------------
											UPDATE - assets/css/style.css
											UPDATE - assets/css/utilities.css
											UPDATE - assets/js/main.js
											UPDATE - assets/js/scrolloverflow.min.js
											UPDATE - include/sendemail.php - https://gist.github.com/MichaelRise/21c1636d043b184f910f6f7f9b128e0d
											UPDATE - include/phpmailer/
											
											* NOTES ON UPDATING *
											- Please remove all files from include/phpmailer/ and add new files to - include/phpmailer/src/
v 1.0.2 - 7 March 2018
Fixed

  • Now "Back to top" button is visible from min-width: 576px


											Files affected:
											---------------------------------------------------------------
											UPDATE - assets/js/main.js - https://gist.github.com/MichaelRise/ed459a9abf64ce6723edaf4f1426929e
v 1.0.1 - 7 March 2018
Improvement

  • Updated documentation

v 1.0.1 - 6 March 2018
Fixed

  • Mobile navigation smooth scroll


											Files affected:
											---------------------------------------------------------------
											UPDATE - assets/js/main.js
v 1.0.0 - 6 March 2018
Release

  • Initial Release

Support

PSD File is not included with this template.

Thank you for purchasing Lana - Creative Coming Soon Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my profile page contact form or add new ticket on support forum. Thanks so much!