Overview

Cany is a simple and fully responsive coming soon/under construction template based on Bootstrap 4 framework, suitable for any creative business agency.

Installation

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

Open the html folder to find all the Templates Files.
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
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.
You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Cany 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="global-overlay">
													[...]
												</div>

												<div class="site-container">

													<!-- Site header -->
													<header class="site-header header-mobile-light">
													
														[...]
													
													</header>
													
													<nav class="tooltip-nav">

														[...]

													</nav>
													
													<!-- Page content -->
													<div class="page-content">

														<!-- Home -->
														<div class="page-slide" id="home">
															<section class="fullscreen-lg d-lg-flex align-items-lg-center text-white">
																	[...]
															</section>
														</div>

													</div>

													<!-- Site footer -->
													<footer class="site-footer">

														[...]

													</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.

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>

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: 'Raleway', 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

Font size

.fs--10 - font-size:10px
.fs--14 - font-size:14px
.fs--16 - font-size:16px
.fs--18 - font-size:18px
.fs--24 - font-size:24px
.fs--36 - font-size:36px
.fs--42 - font-size:42px
.fs--48 - font-size:48px
.fs--54 - font-size:54px
.fs--64 - font-size:64px
.fs--72 - font-size:72px

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

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

Example


										.fs-lg--54 { font-size:54px }

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>

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

Changing Fonts

By default, Cany uses 2 Fonts namely: Open Sans and Raleway 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:300,400,700|Raleway: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:

gZip Compression & Browser Caching
Image Compression & Optimization
CSS & jQuery Minifications
Fast Web Hosting Servers

Files & Credits

CSS & Fonts

Bootstrap
Animate.css
Font-Awesome (Font Icons)
Google Fonts
Open Sans Font
Raleway Font

JS

PHP

PHP Mailer

Images

Unsplash

Changelog

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


										===============================================================
										v 3.0.1 - 26.02.2019
										===============================================================
										Updates
										Updated jQuery Validate to 1.19.0
										
										
										===============================================================
										v 3.0 - 25.02.2019
										===============================================================
										This site template has been completely rewritten.

										Updates
										Updated Bootstrap to 4.3.1
										Updated Modernizr
										Updated animate.css to 3.7.0
										Updated Font Awesome to 5.7.2
										Updated Flexslider to 2.7.0
										Updated Vegas to 2.4.0
										Updated PHPMailer to 6.0.7
										Contact form and subscribe form
										Google Fonts URL

										Deleted
										jquery.fitvids.js
										respond.min.js
										jquery.ajaxchimp.js
										jquery.appear.js
										HTML5 Placeholder jQuery Plugin
										AjaxChimp
										Nivo Lightbox

										Added
										Magnific-PopUp
										New background styles


										===============================================================
										v 2.1.0 - 14.01.2017
										===============================================================
										Fixed Contact Form
										Added jQuery Validate to the Contact Form
										
										
										===============================================================
										v 2.0.0 - 10.12.2016
										===============================================================
										Optimized style.css file
										Optimized main.js file
										Optimized all HTML files
										Fixed W3C Validate
										Updated jQuery to the newest version 1.12.4
										Updated Bootstrap to the newest version 3.3.7
										Updated Final Countdown to the newest version 2.2.0
										Updated FlexSlider to the newest version 2.6.3
										Updated Vegas to the newest version 2.3.1
										Updated Animate.css to the newest version 3.5.1
										Updated Font Awesome to the newest version 4.7.0
										Updated Ionicons to the newest version 2.0.1
										Updated Nivo Lightbox to the newest version 1.3.1
										Remved Backstretch - Now you can use Vegas
										Remved retina.js
										Remved jquery-migrate-1.2.1.min.js
										
										
										===============================================================
										v 1.0.2 - 25.07.2015
										===============================================================
										iPhone Bug Fixed
										
										
										===============================================================
										v 1.0.1 - 25.07.2015
										===============================================================
										IE Bug Fixed
										
										
										===============================================================
										v 1.0 - 17.07.2015
										===============================================================
										Initial Release

Support

PSD File is not included with this template.

Thank you for purchasing Cany - 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!