Thank you very much for purchasing our theme! If you have any questions that aren't covered in this documentation, please feel free to email us.
Grandy is Professional and Great template with 15 unique home page designs for creative business, startup business, digital agency, photography, architecture, resume, fashion, fitness, app landing and minimal concept. With 16 ready-made UI Elements and a lot of Portfolio layout like grid, masonry, grid space, masonry space, portfolio single page. Buy and enjoy.
It will be fit any mobile or tablet devices. This is a flexible template uses fresh and clean design.
-assets (all assets/required file of this template) --bootstrap (bootstrap core files) --css (all css files) --Slick Slider (all slick slider files) --fonts (et icons and ion-icons font icon set ) --images (all images) --js (all javascript files) --magnific-popup (all files for image popup) --typeit-text (typeit-text plugin) --videos (html5 video formats) - email-templates (a basic email template functional with contact form) -and all other html files
Being based on Twitter Bootstrap, Arcon Studio inherits its awesome grid system. It's a responsive, mobile first grid that appropriately scales up to 12 columns as the device or view port size increases.
Example markup:
<div class="row">
<div class="col-md-12">
Level 1 column
<div class="row">
<div class="col-md-6">Level 2</div>
<div class="col-md-6">Level 2</div>
</div>
</div>
</div>
CSS Files
<link rel="stylesheet" href="assets/css/master.css'>
<link rel="stylesheet" href="assets/css/responsive.css'>
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script|Playfair+Display|Poppins:400,500,600,700|Source+Sans+Pro:200,300,400,700');
@import url("../css/bootstrap.min.css");
@import url("../css/ionicons.min.css");
@import url("../css/custom-icons.min.css");
@import url("../css/cubeportfolio.css");
@import url("../css/bootsnav.css");
@import url("../css/slick.css");
@import url("../css/animate.css");
JavaScripts Files
<!--=== Javascript Plugins ===--> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/smoothscroll.js"></script> <script src="assets/js/plugins.js"></script> <script src="assets/js/master.js"></script> <!--=== Javascript Plugins End ===-->
There are two kinds of font icons used in this template.
ET Icons is a ET Icon that allows you to change size and color of the icons just using CSS.
To add an icon, simply create an empty element with class 'icon-heart', for example:
<i class="icon-heart"></i> <i class="icon-laptop"></i> <i class="icon-phone"></i>
Ion Icons The premium icon font for Ionic Framework. 100% free and open source. MIT Licensed.
To add an icon, simply create an empty element with class 'ion-model-s', for example:
<i class="ion-model-s"></i> <i class="ion-ios-heart"></i>
You can use all hero units (slider sections) at any pages. Just copy the Intro Section or Video Section or Slider section and past it in any pages. You can create new pages with this bolcks.
Example:
If you wish to make your homepage with html video slider just copy this code and past it on your new page.
<!--=== Hero Slider Start ===-->
<section class="pt-0 pb-0 bg-video parallax-effect">
<div class="hero-text-wrap gradient-overlay">
<div class="hero-text white-color">
<div class="container">
<div class="white-color text-center">
<h1 class="white-color font-700 text-uppercase mb-0">A Web</h1>
<h1 class="white-color font-700 text-uppercase mt-0">Creative Agency</h1>
<h5 class="white-color">We’re interested in projects and people changing the world.</h5>
<p class="text-center mt-30"><a class="btn btn-outline-white btn-md btn-default btn-animate"><span>Work with us <i class="ion-android-favorite"></i></span></a> </p>
</div>
</div>
</div>
</div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="assets/images/video/office-day.mp4" type="video/mp4" />
<source src="assets/images/video/office-day.webm" type="video/webm" />
</video>
<div class="poster hidden"> <img src="assets/images/video/office-day.jpg" alt="video-img"> </div>
</div>
</div>
</section>
<!--=== Hero Slider End ===-->
Important: Dont forget to add required CSS files and Javascript files at header and footer.
You will get lots of shortcodes with this template. We made all shortcodes clean and re useable.
You can use all shortcodes at anywhere and in any pages of this template. Just copy any block you like and past it any where you wish.
Example:
<!--=== Who We Are Start ===-->
<section>
<div class="container">
<div class="row">
<div class="col-sm-8 section-heading">
<h2>We are digital specialists. It's all we do</h2>
</div>
</div>
<div class="row mt-50">
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-beaker font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Flexible Design</h4>
<p class="font-400">Designing a good website that accommodates a lot of content is a tricky balancing act to pull off.</p>
</div>
</div>
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-laptop font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Startup Mentality</h4>
<p class="font-400">We build mobile apps for the conference, integrating unique content and branding to create.</p>
</div>
</div>
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-layers font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Organic Growth</h4>
<p class="font-400">Google has made this important since 1998 when it launched. Content became, and still is king since websites.</p>
</div>
</div>
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-linegraph font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Proactive Strategies</h4>
<p class="font-400">Designing a good website that accommodates a lot of content is a tricky balancing act to pull off.</p>
</div>
</div>
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-gears font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Easy Customization</h4>
<p class="font-400">We build mobile apps for the conference, integrating unique content and branding to create.</p>
</div>
</div>
<div class="col-md-4 feature-box text-left mb-50 col-sm-6">
<div class="pull-left"><i class="icon-trophy font-40px indigo-icon"></i></div>
<div class="pull-right">
<h4 class="mt-0 font-600">Innovative Interface</h4>
<p class="font-400">Google has made this important since 1998 when it launched. Content became, and still is king since websites.</p>
</div>
</div>
</div>
</div>
</section>
<!--=== Who We Are End ===-->
Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template.
The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section. You can host video form root server or can add link form other server.
For browser support you have to provide two format video(.webm/.ogg and .mp4)
The markup:
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="assets/images/video/video.mp4" type="video/mp4" />
<source src="assets/images/video/video.webm" type="video/webm" />
</video>
<div class="poster hidden"> <img src="assets/images/video/video.jpg" alt="video-img"> </div>
</div>
</div>
/* ==================================================================
GOOGLE MAPS
================================================================== */
if ($('#myMap').length > 0) {
//set your google maps parameters
var $latitude = 40.716304, //If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/convert-address-to-lat-long.html you can easily generate.
$longitude = -73.995763,
$map_zoom = 16 /* ZOOM SETTING */
//google map custom marker icon
var $marker_url = 'assets/images/pin.png';
//we define here the style of the map
var style =
[
{
"elementType": "geometry",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"elementType": "labels.text.stroke",
"stylers": [
{
"color": "#f5f5f5"
}
]
},
{
"featureType": "administrative.country",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#1ec0ff"
}
]
},
{
"featureType": "administrative.land_parcel",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#bdbdbd"
}
]
},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "poi",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "poi.park",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{
"color": "#ffffff"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#757575"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry",
"stylers": [
{
"color": "#dadada"
}
]
},
{
"featureType": "road.highway",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#616161"
}
]
},
{
"featureType": "road.local",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"color": "#e5e5e5"
}
]
},
{
"featureType": "transit.station",
"elementType": "geometry",
"stylers": [
{
"color": "#eeeeee"
}
]
},
{
"featureType": "water",
"elementType": "geometry",
"stylers": [
{
"color": "#c9c9c9"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#9e9e9e"
}
]
}
];
//set google map options
var map_options = {
center: new google.maps.LatLng($latitude, $longitude),
zoom: $map_zoom,
panControl: true,
zoomControl: true,
mapTypeControl: true,
streetViewControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false,
styles: style
}
//inizialize the map
var map = new google.maps.Map(document.getElementById('myMap'), map_options);
//add a custom marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng($latitude, $longitude),
map: map,
visible: true,
icon: $marker_url
});
var contentString = '<div id="mapcontent">' + '<p>Arcon Studio</p></div>';
var infowindow = new google.maps.InfoWindow({
maxWidth: 320,
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
});
HTML Markup:
<!------ Google Maps Start ------> <section class="pt-0 pb-0 map-section"> <div id="myMap" class="wide"></div> </section> <!------ Google Maps End ------>
In Arcon Studio HTML5 template there is full functional working contact form. We have also added a simple email template with this contact form.
To customize/change the email address please open "sendemail.php" file from root folder in any code editor .
Go to the line number 9. There is a line:
$to = 'youremail@gmail.com'; //put your email here
Replace the existing email address with your own mailing address.
Thats it! your template is ready now for receive message from others via mail.
Twitter Bootstrap: http://getbootstrap.com/
animate.css: http://daneden.github.io/animate.css/
Google Fonts: http://www.google.com/webfonts
ET Icons: http://rhythm.nikadevs.com/content/icons-et-line
Ion Icons: http://ionicons.com/cheatsheet.html
jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/
megamenu: http://bootsnav.danurstrap.com/
smoothscroll: http://cferdinandi.github.io/smooth-scroll/
countTo: https://github.com/mhuggins/jquery-countTo
stellar: http://markdalgleish.com/projects/stellar.js/
Shuffle: http://vestride.github.io/Shuffle/
inview: https://github.com/protonet/jquery.inview
Photos and Videos
Important!