Thank you for purchasing theme. If you have any questions that are beyond the scope of this help file, please feel free to emai. Thanks so much!
We love to hear your feedback - if you find any bugs or have suggestions for improvements please get in touch. Nearly all of the time we follow your advice and issue a rapid update to Finely.
If you like this template, please remember to rate it on Themeforest - it really helps us to know what people think of our templates. To rate this item, go to your Downloads page on Themeforest, then next to this template click on a star rating you'd like to give us.
Thank you so much.
ThemeZaa Team
As Sturlly is an HTML template, it uses a number of .html pages in conjunction with css stylesheets and a number of javascript plugins. The following is a brief overview of the files and a look at some prominent features.
Note that index.html will be the file your browser defaults to when you navigate to the directory in your web browser.
3 Design styles. Pick the right combination for you.
index.htmlIf you choose "Only Image" then you can use this page.
index-slider.htmlIf you choose "Slider" then you can use this page.
index-video.htmlIf you choose "Video Background" then you can use this page.
8 Pre-made layouts. For Different Businesses.
index-agency.htmlThis template/page is suitable for Web Development Company, Branding Agency, Graphic Designing, Gaming Studio, Packaging Solutions etc...
index-architecture.htmlThis template/page is suitable for Architecture Design Studio, Interior Design, Real Estate, Product Design, Structure Design etc...
index-fashion.htmlThis template/page is suitable for Fashion Industry, Modeling, Bibliography, Clothing, Photography, Painting, Event Management, Fashion Designing etc...
index-interior.htmlThis template/page is suitable for Interior Design, Products Showcase, Home Decor, Handicrafts, Kitchen and Dining etc...
index-restaurant.htmlThis template/page is suitable for Restaurant, Food Street, Pub, Culinary Art, Chef, Hospitality Industry, Cafes, Nightclubs, Catering Services etc...
index-resume.htmlThis template/page is suitable for Resume, Curriculum Vitae, Biography, Self Promotion etc...
index-spa.htmlThis template/page is suitable for Spa, Hair Salon, Ayurvedic Treatment, Fitness, Beauty Salon, Medical, Resort, Wellness etc...
index-travel.htmlThis template/page is suitable for Travel Agency, Tourism, Airlines, Transport, Hotel Booking, Car Rental etc...
Sturlly comes with a number of CSS files, many of which you will likely never touch. There are two however, that you will likely edit if you are changing the style of the site in anyway.
style.cssThis is the main stylesheet for the template and includes all styles relating to the appearance of the elements you see inside each page. This stylesheets has been commented.
bootstrap.cssBootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
responsive.cssLayout your website and then adjust it to target desktops, tablets, phones, ipads and iphones without writing any html or css. It's the easiest, fastest way to get started developing a new responsive site.
animation.cssanimate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
custom-scrollbar.cssCustom Scrollbar is a plugin that lets you add fully customizable scrollbars to your sites instead of browser's default scrollbars. When using the plugin you can apply any css styles you want to your scrollbars.
font-awesome.min.cssGives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Check the cheatsheet.
pretty-photo.cssprettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes and ajax. It's a full blown media lightbox.
colors/blue.css, colors/gold.css, colors/green.css, colors/purple.css, colors/red.css, colors/violet.css, colors/yellow.cssThis CSS file contains the general classes for different elements used additional to general structure for different businesses layout.
colors/blue-responsive.css, colors/gold-responsive.css, colors/green-responsive.css, colors/purple-responsive.css, colors/red-responsive.css, colors/violet-responsive.css, colors/yellow-responsive.cssThis CSS file contains the classes for different elements used additional to general structure for different businesses layout and specifically for responsive theme design.
All Javascript files for the template that includes all functions specific to the theme such as control of the navigation and slider declarations among other things.
bootstrap-custom.jsBootstrap comes equipped with JavaScript libraries that go above and beyond basic structural and styling. JavaScript often becomes an integral part of a web design and developers have to pull in all elements together to see the final form flourish. With Bootstrap, a developer can easily manipulate modal windows alerts, tooltips, Scrollspy, Popover, Button, Typehead, etc. The best part, however, is that Bootstrap enables you to skip writing the script altogether.
custom.jsThis is the main scripts file for the template that includes all functions specific to the theme such as control of the Countdown, Subscription Form Validation, Contact Us Form Validation, Window Resize, Full Page Effect, Photo Gallery, Slider, Popup, Counter, PieChart, Loading declarations among other things.
jquery.fullPage.js, jquery.js, jquery.nav.js, jquery-ui.min.jsThese files are fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
hover.min.jsA collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration.
parallel.min.jsParallel.js is a tiny library for multi-core processing in Javascript.
modernizr.custom.jsModernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser.
smooth-scroll.jsA simple JS script to animate scrolling to anchor links.
conter.jsThis is lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.
portfolio.jsportfolio.js can hide and show item elements via the filter option. Items that match that filter will be shown. Items that do not match will be hidden.
loader.min.jsloader.min.js is a lightweight jQuery plugin to create a preloader for page.
imagesloaded.pkgd.min.js, cbpGridGallery.js, classie.js, load-gridgallery.jsThese files are used for portfolio section.
map.jsThese files are used for google map hide/show part.
modernizr-2.6.2-respond-1.1.0.min.js, plugins.js, jquery.prettyPhoto.jsPretty Photo is a powerful jQuery Lightbox Plugin.
coming-soon.jsThese files are used for coming soon page.
counter.jscounter.js is a lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
custom-scrollbar.min.jsHighly customizable custom scrollbar jQuery plugin.
This file is used for contact us of mail sent prosess and email body design.
notifyme.phpThis file is used for email subscription of mail sent prosess email body design.
This is the HTML part for the Page.
<!DOCTYPE html>
<html class="csstransforms csstransforms3d csstransitions no-js skrollr skrollr-desktop" lang="en">
<head>
<title>Sturlly - Responsive one page theme</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png" />
<!-- google font -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" />
<!-- font awesome-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<!-- Animation -->
<link rel="stylesheet" type="text/css" href="css/animation.css" />
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- custom style -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- custom scrollbar -->
<link rel="stylesheet" type="text/css" href="css/custom-scrollbar.css">
<!-- responsive -->
<link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>
<!-- main page -->
<div class="main">
<!-- header-->
<header id="home" data-stellar-background-ratio="0.5" class="header animated">
<nav class="navbar navbar-default navbar-fixed-top nav-transparent overlay-nav sticky-nav" role="navigation">
<div class="container main-navigation">
<div class="col-md-3 float-left"> <a class="logo-dark" href="#home"><img alt="logo-dark" src="images/logo-dark.png" class="logo-dark" /></a> <a class="logo-light" href="#home"><img alt="logo-white" src="images/logo-white.png" class="logo-white" /></a> </div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
</div>
<div class="col-md-9 text-left float-right collapse-navation">
<div class="navbar-collapse collapse navbar-inverse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#expertise">Expertise</a></li>
<li><a href="#team">Team</a></li>
<li><a href="#blog">Blog</a></li>
<li class="last"><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div class="color-overlay full-screen">
<!-- header text -->
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="intro-section os-animation" data-os-animation="fadeIn">
<h1 class="intro"><span class="highlight">Where Good Ideas</span><br>
are born, Raised and Nurtured.</h1>
<a class="highlight-button inner-link" href="#about">Digital Marketing</a> </div>
</div>
</div>
</div>
<div class="scrollDownWrap">
<div class="scrollDown"> <a href="#about" class="inner-link"><i class="fa fa-angle-down"></i> </a> </div>
</div>
</div>
</header>
<!-- header end -->
<!-- about -->
<section id="about" class="gray-bg">
<div class="container">
<div class="row border-bottom os-animation text-center" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 title-text border-right">
<h2 class="title">About</h2>
</div>
<div class="col-md-6 col-sm-6 simple-text">
<p class="description text-left">We are relentless in moving boundaries and carry out this spirited attitude into digital solutions. Solutions that engage, inspire and make you think.</p>
</div>
</div>
<div class="row border-bottom os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 col-sm-3 service-box border-right text-center">
<div class="service-icon"> <i class="fa fa-pencil-square-o"></i> </div>
<h6>Innovate</h6>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
</div>
<div class="col-md-3 col-sm-3 service-box border-right text-center">
<div class="service-icon"> <i class="fa fa-comment-o"></i> </div>
<h6>Qualities</h6>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
</div>
<div class="col-md-3 col-sm-3 service-box border-right text-center">
<div class="service-icon"> <i class="fa fa-cut"></i> </div>
<h6>Analytics</h6>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
</div>
<div class="col-md-3 col-sm-3 service-box text-center">
<div class="service-icon"> <i class="fa fa-bell-o"></i> </div>
<h6>strategy</h6>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
</div>
</div>
<div class="row os-animation text-center" data-os-animation="fadeInUp">
<p class="lead width">We grow brands by making decisions that are rooted in business strategy.</p>
<br>
<a id="href-about" class="highlight-button-black inner-link" href="#contact">Let's work together</a> </div>
</div>
</section>
<!-- about end -->
<!-- work -->
<section id="grid-gallery" class="grid-gallery no-padding-top no-padding-bottom">
<div id="work" class="work grid-wrap">
<!-- portfolio tab -->
<ul class="isotope-filters text-center os-animation" data-os-animation="fadeInUp">
<li class="active"><a class="active" data-filter="*" href="#">all</a></li>
<li><a data-filter=".design" href="#">design</a></li>
<li><a data-filter=".fashion" href="#">fashion</a></li>
<li><a data-filter=".illustration" href="#">illustraion</a></li>
<li><a data-filter=".product" href="#">product</a></li>
<li><a data-filter=".style" href="#">style</a></li>
</ul>
<ul class="grid portfolio isotope no-transition portfolio-hex portfolio-shadows row demo-3 os-animation" data-os-animation="fadeInUp">
<li class="portfolio-item col-md-3 col-sm-3 fashion style grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-01.jpg" alt="work-01" />
<figcaption>
<h4 class="title">Pixflow</h4>
<span>Fashion, style</span> <a class="text-right" href="javascript:;"><i class="fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 fashion product style grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-02.jpg" alt="work-02" />
<figcaption>
<h4 class="title">Apple New Design</h4>
<span>product, style</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 fashion style product grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-03.jpg" alt="work-03" />
<figcaption>
<h4 class="title">Dreams</h4>
<span>design, Fashion, product</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 illustration fashion style grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-04.jpg" alt="work-04" />
<figcaption>
<h4 class="title">Dreams of glory</h4>
<span>Fashion, style</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 design illustration product grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-05.jpg" alt="work-05" />
<figcaption>
<h4 class="title">satra jean brand</h4>
<span>design, product</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 design grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-06.jpg" alt="work-06" />
<figcaption>
<h4 class="title">flat screen wall</h4>
<span>design, product</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 design illustration grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-07.jpg" alt="work-07" />
<figcaption>
<h4 class="title">parament action</h4>
<span>design, Illustraion</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
<li class="portfolio-item col-md-3 col-sm-3 design illustration product grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-08.jpg" alt="work-08" />
<figcaption>
<h4 class="title">visual art exibition</h4>
<span>design, Illustraion</span> <a class="text-right" href="javascript:;"><i class="fa fa fa-angle-right"></i></a> </figcaption>
</figure>
</li>
</ul>
</div>
<!-- work popup -->
<div class="slideshow">
<ul class="popup-slide">
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel1" data-slide-to="0" class="active"></li>
<li data-target="#carousel1" data-slide-to="1"></li>
<li data-target="#carousel1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> <img src="images/work-01.jpg" alt="work-01"/> </div>
<div class="item"> <img src="images/work-02.jpg" alt="work-02"/> </div>
<div class="item"> <img src="images/work-03.jpg" alt="work-03"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title text-left">Pixflow</h4>
<span class="text-left category">Fashion Industry • United Kingdom</span>
<div class="popup-line"></div>
<span class="work-details">Magento Development + Mobile Website + WordPress Development</span>
<div class="popup-line"></div>
<p class="text-left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jacskon Smith • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-01" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-02.jpg" alt="work-02"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">Apple New Design</h4>
<span class="category">product Industry • United States of America</span>
<div class="popup-line"></div>
<span class="work-details">Magento Development + Mobile Website + eNewsletter</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Stella Kromstain • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-02" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-03.jpg" alt="work-g03"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">Dreams</h4>
<span class="category">design Industry • australia</span>
<div class="popup-line"></div>
<span class="work-details">Magento Development + WordPress Development + Mobile Website</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jerry Gordinter • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel2" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel2" data-slide-to="0" class="active"></li>
<li data-target="#carousel2" data-slide-to="1"></li>
<li data-target="#carousel2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> <img src="images/work-04.jpg" alt="work-01"/> </div>
<div class="item"> <img src="images/work-02.jpg" alt="work-02"/> </div>
<div class="item"> <img src="images/work-03.jpg" alt="work-03"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">Dreams of glory</h4>
<span class="text-left category">Illustraion Industry • United States of America</span>
<div class="popup-line"></div>
<span class="work-details">WordPress Development + Blog + Branding + eNewsletter</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jone Doe • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-04" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-05.jpg" alt="work-05"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">satra jean brand</h4>
<span class="text-left category">design Industry • australia</span>
<div class="popup-line"></div>
<span class="work-details">WordPress Development + Blog + Branding + eNewsletter</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jacskon Smith • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-05" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-06.jpg" alt="work-06"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">flat screen wall</h4>
<span class="text-left category">Fashion Industry • United Kingdom</span>
<div class="popup-line"></div>
<span class="work-details">Magento Development + WordPress Development + Mobile Website</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Stella Kromstain • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-06" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-07.jpg" alt="work-07"/> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">parament action</h4>
<span class="text-left category">product Industry • United States of America</span>
<div class="popup-line"></div>
<span class="work-details">Custom Website Development + Facebook Pages Design + eNewsletter</span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jerry Gordinter • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-07" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-08.jpg" alt="work-08" /> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">visual art exibition</h4>
<span class="text-left category">Fashion Industry • australia</span>
<div class="popup-line"></div>
<span class="work-details">Custom Website Development + Branding + Campaign </span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jone Doe • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
</ul>
<nav class="popup-navigation"> <span class="icon nav-prev"></span> <span class="icon nav-next"></span> <span class="icon nav-close"></span> </nav>
</div>
</section>
<!-- work end -->
<!-- skills -->
<section class="orange-bg work-count">
<div class="container">
<div class="row">
<div class="work-count-box col-md-4 col-sm-4 os-animation" data-os-animation="bounceIn"> <span class="title-top">01.</span> <span class="title">logo design</span>
<div class="black-line-top"></div>
<div class="black-line-bottom"></div>
<p class="content-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#expertise" class="small-button inner-link">Read More</a> </div>
<div class="work-count-box col-md-4 col-sm-4 os-animation" data-os-animation="bounceIn"> <span class="title-top">02.</span> <span class="title">print design</span>
<div class="black-line-top"></div>
<div class="black-line-bottom"></div>
<p class="content-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#expertise" class="small-button inner-link">Read More</a> </div>
<div class="work-count-box col-md-4 col-sm-4 os-animation" data-os-animation="bounceIn"> <span class="title-top">03.</span> <span class="title">web design</span>
<div class="black-line-top"></div>
<div class="black-line-bottom"></div>
<p class="content-white">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#expertise" class="small-button inner-link">Read More</a> </div>
</div>
</div>
</section>
<!-- skills end -->
<!-- testimonial -->
<section id="testimonial" class="testimonial">
<div class="color-overlay">
<div class="container">
<div class="row text-center os-animation" data-os-animation="fadeInUp">
<h1 class="title">Testimonial</h1>
</div>
<div class="row text-center os-animation" data-os-animation="fadeInUp">
<div data-ride="carousel" class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel" class="active"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
<li data-slide-to="4" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>jerry gordinter</span> </div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>Jone Doe</span> </div>
</div>
</div>
<div class="item active">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>Tom Anthony</span> </div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>Stella Kromstain</span> </div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>Jone Doe</span> </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- testimonial end -->
<!-- expertise -->
<section id="expertise" class="expertise">
<div class="container">
<div class="row border-bottom os-animation text-center" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 title-text border-right">
<h2 class="title">expertise</h2>
</div>
<div class="col-md-6 col-sm-6 simple-text">
<p class="description text-left">We consult on digital strategy & craft meaningful connections with your customers across web, social, mobile & ecommerce.</p>
</div>
</div>
<div class="row feature-content os-animation" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6">
<div class="feature">
<div class="icon-container"> <i class="fa fa-paper-plane-o"></i> </div>
<div class="fetaure-details">
<h4 class="title">Discover. <span>Understand the situation.</span></h4>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6">
<div class="feature">
<div class="icon-container"> <i class="fa fa-bullhorn"></i> </div>
<div class="fetaure-details">
<h4 class="title">Strategise. <span>Chart the course.</span></h4>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 os-animation" data-os-animation="fadeInUp">
<div class="expertise-img"><img src="images/expertise-img.jpg" class="animated fadeIn" alt="expertise-img" /></div>
</div>
</div>
</section>
<!-- expertise end -->
<!-- Piechart -->
<section id="count" class="count orange-bg">
<div class="container">
<div class="row os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart easyPieChart" data-line-width="8" data-percent="70" data-size="200"><span>70%</span></div>
<h3 class="title margin-top">logo design</h3>
<p>A first impression</p>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart easyPieChart" data-line-width="8" data-percent="50" data-size="200"><span>50%</span></div>
<h3 class="title margin-top">Motion Design</h3>
<p>Clearly defined </p>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart easyPieChart" data-line-width="8" data-percent="92" data-size="200"><span>92%</span></div>
<h3 class="title margin-top">Graphic Design</h3>
<p>Marketing and branding</p>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart easyPieChart" data-line-width="8" data-percent="100" data-size="200"><span>100%</span></div>
<h3 class="title margin-top">Web Interactive</h3>
<p>Interlace our creative</p>
</div>
</div>
</div>
</section>
<!-- Piechart end -->
<!-- team -->
<section id="team" class="team gray-bg">
<div class="container">
<div class="row border-bottom os-animation text-center" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 title-text border-right">
<h2 class="title">our team</h2>
</div>
<div class="col-md-6 col-sm-6 simple-text">
<p class="description text-left">We are a fun mix of designers and strategists with a great passion for all things creative. We love what we do, it's a way of life.</p>
</div>
</div>
<div class="row os-animation" data-os-animation="fadeInUp">
<p class="lead width">We grow brands by making decisions that are rooted in business strategy.</p>
</div>
<div class="row os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 team-details os-animation text-center" data-os-animation="bounceIn">
<figure class="team-profile"><!-- 800 X 966 --><img src="images/team-01.jpg" alt="team-01" />
<figcaption class="text-center our-team">
<p class="content-white text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="orange-line"></div>
<div class="social"> <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a> <a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></div>
</figcaption>
</figure>
<div class="namerol"> <span>Sara smith</span>
<div class="orange-line text-center"></div>
<p class="content">Founder and ceo</p>
</div>
</div>
<div class="col-md-3 team-details os-animation text-center" data-os-animation="bounceIn">
<figure class="team-profile"><img src="images/team-02.jpg" alt="team-02" />
<figcaption class="text-center our-team">
<p class="content-white text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="orange-line"></div>
<div class="social"> <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a> <a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></div>
</figcaption>
</figure>
<div class="namerol"> <span>sommer Christian</span>
<div class="orange-line text-center"></div>
<p class="content">creative studio head</p>
</div>
</div>
<div class="col-md-3 team-details os-animation text-center" data-os-animation="bounceIn">
<figure class="team-profile"><img src="images/team-03.jpg" alt="team-03" />
<figcaption class="text-center our-team">
<p class="content-white text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="orange-line"></div>
<div class="social"> <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a> <a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></div>
</figcaption>
</figure>
<div class="namerol"> <span>Jane lupkin</span>
<div class="orange-line text-center"></div>
<p class="content">magento developer</p>
</div>
</div>
<div class="col-md-3 team-details os-animation text-center" data-os-animation="bounceIn">
<figure class="team-profile"><img src="images/team-04.jpg" alt="team-04" />
<figcaption class="text-center our-team">
<p class="content-white text-center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<div class="orange-line"></div>
<div class="social"> <a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a> <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a> <a href="http://plus.google.com/" target="_blank"><i class="fa fa-google-plus"></i></a></div>
</figcaption>
</figure>
<div class="namerol"> <span>Sebastian roll</span>
<div class="orange-line text-center"></div>
<p class="content">Logo / branding designer</p>
</div>
</div>
</div>
<div class="text-center row os-animation" data-os-animation="fadeInUp">
<p class="light">Creative thinkers, clever developer and marketing</p>
<p class="lead big">superheroes apply here.</p>
<p class="label">we're hiring</p>
</div>
</div>
</section>
<!-- team end -->
<!-- counter -->
<section id="conter-box" class="conter-box">
<div class="color-overlay">
<div class="container">
<div class="row os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-01" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="312"> <span class="counterBoxNumber">312</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Pizzas Ordered</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-02" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="980"> <span class="counterBoxNumber">980</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Happy Clients</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-03" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="810"> <span class="counterBoxNumber">810</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Projects Completed</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 last text-center">
<div id="conterbox-04" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="600"> <span class="counterBoxNumber">600</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Comments</h6>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- counter -->
<!-- blog -->
<section id="blog" class="blog gray-bg">
<div class="container">
<div class="row border-bottom os-animation text-center" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 title-text border-right">
<h2 class="title">our blog</h2>
</div>
<div class="col-md-6 col-sm-6 simple-text">
<p class="description text-left">We are a fun mix of designers and strategists with a great passion for all things creative. We love what we do, it's a way of life.</p>
</div>
</div>
<div id="group-01" class="row blog-content os-animation group show active" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-01.jpg" class="fadeIn blog-img" alt="blog-img-01" />
<div class="col-md-1 blog-day text-center"> <span>15</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with preview picture</h5>
<span class="month">June 15, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button text-left">more details</a> </div>
</div>
</div>
</div>
<div id="group-02" class="row blog-content os-animation group show" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-02.jpg" class="fadeIn blog-img" alt="blog-img-02" />
<div class="col-md-1 blog-day text-center"> <span>20</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with gallery</h5>
<span class="month">June 20, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button text-left">more details</a></div>
</div>
</div>
</div>
<div id="group-03" class="row blog-content os-animation group show" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-03.jpg" class="fadeIn blog-img" alt="blog-img-03" />
<div class="col-md-1 blog-day text-center"> <span>25</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">simple post with preview video</h5>
<span class="month">June 25, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button text-left">more details</a></div>
</div>
</div>
</div>
<div id="group-04" class="row blog-content os-animation group show" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-04.jpg" class="fadeIn blog-img" alt="blog-img-04" />
<div class="col-md-1 blog-day text-center"> <span>27</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with preview picture</h5>
<span class="month">June 27, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button">more details</a></div>
</div>
</div>
</div>
<div class="group">
<div id="group-05" class="row blog-content os-animation" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-01.jpg" class="fadeIn blog-img" alt="blog-img-01" />
<div class="col-md-1 blog-day text-center"> <span>29</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with preview picture</h5>
<span class="month">June 29, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button">more details</a></div>
</div>
</div>
</div>
<div id="group-05" class="row blog-content os-animation" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-02.jpg" class="fadeIn blog-img" alt="blog-img-02" />
<div class="col-md-1 blog-day text-center"> <span>30</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with preview picture</h5>
<span class="month">June 30, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button">more details</a></div>
</div>
</div>
</div>
<div id="group-05" class="row blog-content os-animation" data-os-animation="fadeInUp">
<div class="col-md-12 blog-image"> <img src="images/blog-img-03.jpg" class="fadeIn blog-img" alt="blog-img-03" />
<div class="col-md-1 blog-day text-center"> <span>31</span> </div>
</div>
<div class="col-md-12 frameOverlay">
<div class="col-md-10 col-md-offset-2">
<div class="blog-title">
<h5 class="title">standard post with preview picture</h5>
<span class="month">June 31, 2013 / By Admin in Creative, Design</span> </div>
<div class="blog-content-out">
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<a href="blog-list.html" class="small-button">more details</a></div>
</div>
</div>
</div>
</div>
<div class="row buttons border-top os-animation text-center" data-os-animation="fadeInUp"> <a id="load-more" class="small-button text-center">Load More Blog</a> <a href="blog-list.html" class="small-button text-center">View All Blog</a> </div>
</div>
</section>
<!-- blog end -->
<!-- client logos -->
<section class="client-logos">
<div class="color-overlay">
<div class="container">
<div class="row os-animation" data-os-animation="bounceIn">
<div class="clients-slider text-center">
<ul class="slides">
<li><img alt="Client Logo" src="images/client1.png" /></li>
<li><img alt="Client Logo" src="images/client2.png" /></li>
<li><img alt="Client Logo" src="images/client3.png" /></li>
<li><img alt="Client Logo" src="images/client4.png" /></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- client logos end -->
<!-- contact -->
<section id="contact" class="contact gray-bg">
<div class="container">
<div class="row border-bottom os-animation text-center" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 title-text border-right">
<h2 class="title">Contact</h2>
</div>
<div class="col-md-6 col-sm-6 simple-text">
<p class="description text-left">How we can help you. We like to talk and on the strength of that you are invited for a coffee at our head office.</p>
</div>
</div>
<div class="row contact-info os-animation" data-os-animation="fadeInUp">
<div class="col-md-6 col-sm-6 left-part">
<div class="head"> <span class="contact-title">how to reach us</span>
<p class="content contact-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="head"> <span class="contact-title">our address</span>
<p class="content contact-text address">Sturlly Technologies<br>
PO Box 16122, Collins Street West,<br>
Victoria 8007, United States.</p>
</div>
<ul class="icon-list">
<li><i class="fa fa-phone"></i>+61 123 456 7890</li>
<li class="divider"></li>
<li><i class="fa fa-envelope-o"></i><a href="mailto:no-reply@domain.com">no-reply@domain.com</a></li>
<li class="divider"></li>
<li><i class="fa fa-globe"></i><a href="javascript:;">www.domain.com</a></li>
</ul>
</div>
<div class="col-md-6 col-sm-6 right-part">
<div class="form-group">
<form action="javascript:void(0)" method="post">
<input class="form-control" name="name" placeholder="Your Name" type="text">
<input class="form-control" name="email" placeholder="Your Email" type="text">
<input class="form-control" name="website" placeholder="Your Website" type="text">
<textarea class="form-control" placeholder="Your Comment" name="comment"></textarea>
<button class="small-button text-left">Send message</button>
</form>
</div>
<div id="success"></div>
</div>
</div>
</div>
</section>
<!-- contact end -->
<!-- map -->
<section class="map">
<div class="map-overlay">
<button class="map-button" value="Show map">Locate Us on Map</button>
</div>
<div id="googlemap">
<div id="map"></div>
</div>
</section>
<!-- map end -->
<!-- footer -->
<footer id="footer" class="footer">
<div class="color-overlay">
<div class="container">
<div class="row os-animation" data-os-animation="bounceIn">
<ul class="social footer-social text-center">
<li><a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="http://www.dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
<div class="row os-animation" data-os-animation="bounceIn">
<div class="transparent-line"></div>
</div>
<div class="row os-animation" data-os-animation="bounceIn">
<p class="text-center content-white copy">© 2014 Sturlly is proudly powered by ThemeZaa.</p>
</div>
</div>
</div>
</footer>
<!-- footer end -->
<!-- scroll to top -->
<a href="javascript:;" class="scrollToTop"><i class="fa fa-angle-up"></i></a>
<!-- scroll to top End... -->
</div>
<!-- main page end -->
<!-- javascript -->
<!-- Placed at the End of the document so the pages load faster -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- smoth hover -->
<script src="js/hover.min.js"></script>
<!-- parallax background -->
<script src="js/parallel.min.js"></script>
<!-- jQuery UI -->
<script src="js/jquery-ui.min.js"></script>
<!-- modernizr -->
<script src="js/modernizr.custom.js"></script>
<!-- smooth page scrolling -->
<script src="js/smooth-scroll.js"></script>
<!-- custom javascript -->
<script src="js/custom.js"></script>
<!-- counter -->
<script src="js/conter.js"></script>
<!-- bootstrap -->
<script src="js/bootstrap-custom.js"></script>
<!-- portfolio -->
<script src="js/portfolio.js"></script>
<script src="js/jquery.nav.js"></script>
<!-- page loading -->
<!--<script src="js/loader.min.js"></script>-->
<!-- portfolio -->
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/cbpGridGallery.js"></script>
<script src="js/classie.js"></script>
<!-- custom scrollbar -->
<script src="js/custom-scrollbar.min.js"></script>
<!-- google map API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc&sensor=false"></script>
<script src="js/map.js"></script>
<script src="js/load-gridgallery.js"></script>
</body>
</html>
More to come in next updates.
A single CSS file, style.css is used for this template which contains all the CSS for the design of the site.
In order to help organise the CSS code (in style.css), the file is separated into sections using:
/* ---------------------------------- Name:style.css Version:1.0.0 ---------------------------------- Table of Contents 1. Reset 2. Typography 3. Background Color 4. Custom Button 5. Floats, Display and Margins 6. Divider and width 7. Loader 8. Sections 9. Header 10. Work 11. Work Popup 12. Blog 13. Blog Listing 14. Blog Details 15. Counter 16. Scroll To Top 17. Filter Tab 18. Team 19. Client Logos 20. Contact 21. Footer 22. Design Elements 23. Homepage Slider 24. Homepage Video 25. Coming Soon */ /* ========================================================================== 1. Reset ========================================================================== */ some code /* ========================================================================== 2. Typography ========================================================================== */ some code /* ========================================================================== 3. Background Color ========================================================================== */ some code /* ========================================================================== 4. Custom Button ========================================================================== */ some code /* ========================================================================== 5. Floats, Display and Margins ========================================================================== */ some code /* ========================================================================== 6. Divider and width ========================================================================== */ some code /* ========================================================================== 7. Loader ========================================================================== */ some code /* ========================================================================== 8. Sections ========================================================================== */ some code /* ========================================================================== 9. Header ========================================================================== */ some code /* ========================================================================== 10. Work ========================================================================== */ some code /* ========================================================================== 11. Work Popup ========================================================================== */ some code /* ========================================================================== 12. Blog ========================================================================== */ some code /* ========================================================================== 13. Blog Listing ========================================================================== */ some code /* ========================================================================== 14. Blog Details ========================================================================== */ some code /* ========================================================================== 15. Counter ========================================================================== */ some code /* ========================================================================== 16. Scroll To Top ========================================================================== */ some code /* ========================================================================== 17. Filter Tab ========================================================================== */ some code /* ========================================================================== 18. Team ========================================================================== */ some code /* ========================================================================== 19. Client Logos ========================================================================== */ some code /* ========================================================================== 20. Contact ========================================================================== */ some code /* ========================================================================== 21. Footer ========================================================================== */ some code /* ========================================================================== 22. Design Elements ========================================================================== */ some code /* ========================================================================== 23. Homepage Slider ========================================================================== */ some code /* ========================================================================== 24. Homepage Video ========================================================================== */ some code /* ========================================================================== 25. Coming Soon ========================================================================== */ some 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.
To use your own image for the logo at the top of the main section.
This is the HTML part for the logo
<a class="logo-dark" href="#home"><img alt="logo-dark" src="images/logo-dark.png" class="logo-dark" /></a> <a class="logo-light" href="#home"><img alt="logo-white" src="images/logo-white.png" class="logo-white" /></a>>
To change your logo, simply edit the URL 'images/logo-dark.png' and 'images/logo-white.png' to point to the file location where your logo is. If you want to remove the logo completely, just delete the above line of code.
This is the HTML part for the Slider Background.
<div id="carousel3" class="carousel slide " data-ride="carousel3" data-interval='false'>
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel3"></li>
<li data-slide-to="1" data-target="#carousel3" class=""></li>
<li data-slide-to="2" data-target="#carousel3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="slider-gradient-overlay"></div>
<div style="background-image:url('images/slider-img1.jpg');" class="fill"></div>
<div class="slider-text">
<div class="col-md-6">
<h1>Modern Portfolio</h1>
<span>Useful features and a distinctive minimal design.</span>
<a href="#about" class="highlight-button inner-link" id="hrefabout">Digital Marketing</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-gradient-overlay"></div>
<div style="background-image:url('images/slider-img2.jpg');" class="fill"></div>
<div class="slider-text">
<div class="col-md-6">
<h1>Powerful Slider</h1>
<span>You will define what you want to use on your website.</span>
<a href="#about" class="highlight-button inner-link" id="hrefabout">Digital Marketing</a>
</div>
</div>
</div>
<div class="item">
<div class="slider-gradient-overlay"></div>
<div style="background-image:url('images/slider-img3.jpg');" class="fill"></div>
<div class="slider-text">
<div class="col-md-6">
<h1>Responsive Theme</h1>
<span>It’s fully responsive, has moduled structure.</span>
<a href="#about" class="highlight-button inner-link" id="hrefabout">Digital Marketing</a>
</div>
</div>
</div>
</div>
</div>
Add below HTML code in <ol> section.
<li> data-slide-to="3" data-target="#carousel3" class=""</li>
Step 2
Add below HTML code in <div class="carousel-inner"> section.
<div class="item">
<div class="slider-gradient-overlay"></div>
<div style="background-image:url('images/slider-img2.jpg');" class="fill"></div>
<div class="slider-text">
<div class="col-md-6">
<h1>Powerful Slider</h1>
<span>You will define what you want to use on your website.</span>
<a href="#about" class="highlight-button inner-link" id="hrefabout">Digital Marketing</a>
</div>
</div>
</div>
To change the images, edit the URL paths to your image files.
This is the HTML part for the Countdown Timer.
<div id="counter"></div>
Open up the coming-soon.js file and set date and time. Please change "2014/12/15 12:00:00" only.
/* ------------------------------------------------------------------------ */
/* COUNTDOWN
/* ------------------------------------------------------------------------ */
$('#counter').countdown('2014/12/15 12:00:00').on('update.countdown', function(event) {
var $this = $(this).html(event.strftime('' + '<div class="counter-container"><div class="counter-box first"><div class="number">%-D</div><span>Day%!d<span></div>' + '<div class="counter-box"><div class="number">%H</div><span>Hours</span></div>' + '<div class="counter-box"><div class="number">%M</div><span>Minutes</span></div>' + '<div class="counter-box last"><div class="number">%S</div><span>Seconds</span></div></div>'));
});
To change the social icons seen at the bottom of the main section. You'll see lines of HTML that look like this:
<div class="row os-animation" data-os-animation="bounceIn">
<ul class="social footer-social text-center">
<li><a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook"></i></a></li>
<li><a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://www.youtube.com/" target="_blank"><i class="fa fa-youtube"></i></a></li>
<li><a href="http://www.dribbble.com/" target="_blank"><i class="fa fa-dribbble"></i></a></li>
<li><a href="javascript:;"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
This is the HTML part for the Progress Bar.
<div class="progress-bar-main margin-top-50">
<div class="progress-bar-sub">
<div class="progress-name light-gray"><strong>Jquery</strong> - 4 years Experience</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div></div>
<div class="progress-bar-sub">
<div class="progress-name light-gray"><strong>Wordpress</strong> - 6 years Experience</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div></div>
<div class="progress-bar-sub">
<div class="progress-name light-gray"><strong>HTML5</strong> - 5 years Experience</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
</div></div>
<div class="progress-bar-sub">
<div class="progress-name light-gray"><strong>CSS</strong> - 5.5 years Experience</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;"></div>
</div></div>
</div>
Add below HTML code in <div class="progress-bar" > section.
<div class="progress-bar-sub">
<div class="progress-name light-gray"><strong>Wordpress</strong> - 6 years Experience</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
</div></div>
This is the HTML part for the Pie Chart.
<div class="row os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart8 easyPieChart" data-line-width="8" data-percent="70" data-size="200"><span>70%</span></div>
<h3 class="title gray-text">English</h3>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart8 easyPieChart" data-line-width="8" data-percent="50" data-size="200"><span>50%</span></div>
<h3 class="title gray-text">French</h3>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart8 easyPieChart" data-line-width="8" data-percent="92" data-size="200"><span>92%</span></div>
<h3 class="title gray-text">German</h3>
</div>
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart8 easyPieChart" data-line-width="8" data-percent="100" data-size="200"><span>100%</span></div>
<h3 class="title gray-text">Portuguese</h3>
</div>
</div>
Add below HTML code in <div class="row" > section.
<div class="col-md-3 col-sm-5 text-center count-box">
<div class="chart8 easyPieChart" data-line-width="8" data-percent="92" data-size="200"><span>92%</span></div>
<h3 class="title gray-text">German</h3>
</div>
This is the HTML part for the Thumb With Details Popup.
<div id="grid-gallery" class="grid-gallery">
<div id="work" class="work grid-wrap">
<!-- portfolio tab -->
<ul class="grid portfolio">
<li class="portfolio-item col-md-3 col-sm-3 fashion style grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-01.jpg" alt="work-01" />
<figcaption>
<h4 class="title">Pixflow</h4>
<span>Fashion, style</span> <a class="text-right" href="javascript:;"><i class="fa fa-plus"></i></a> </figcaption>
</figure>
</li>
</ul>
</div>
<!-- portfolio popup -->
<div class="slideshow">
<ul class="popup-slide">
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-07" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-01.jpg" alt="work-08" /> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">visual art exibition</h4>
<span class="text-left category">Fashion Industry • australia</span>
<div class="popup-line"></div>
<span class="work-details">Custom Website Development + Branding + Campaign </span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jone Doe • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
</ul>
<nav class="popup-navigation"> <span class="icon nav-prev"></span> <span class="icon nav-next"></span> <span class="icon nav-close"></span> </nav>
</div>
</div>
Add below HTML code in <ul class="grid portfolio" > section.
<li class="portfolio-item col-md-3 col-sm-3 fashion style grid cs-style-3">
<figure class="portfolio-figure"> <img src="images/work-01.jpg" alt="work-01" />
<figcaption>
<h4 class="title">Pixflow</h4>
<span>Fashion, style</span> <a class="text-right" href="javascript:;"><i class="fa fa-plus"></i></a> </figcaption>
</figure>
</li>
Step 2
Add below HTML code in <ul class="popup-slide" > section.
<li class="popup-slideshow content-scroll">
<figure>
<figcaption>
<div class="popup-slider">
<div id="carousel-example-generic-07" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"> <img src="images/work-01.jpg" alt="work-08" /> </div>
</div>
</div>
</div>
<div class="right-part">
<h4 class="title">visual art exibition</h4>
<span class="text-left category">Fashion Industry • australia</span>
<div class="popup-line"></div>
<span class="work-details">Custom Website Development + Branding + Campaign </span>
<div class="popup-line"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<div class="popup-line"></div>
<span class="work-details">Client Speak</span>
<p class="client-speak">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.<span>Jone Doe • Google Inc</span></p>
</div>
</figcaption>
</figure>
</li>
This is the HTML part for the Text Slider.
<div data-ride="carousel" class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>jerry gordinter</span> </div>
</div>
</div>
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>Jone Doe</span> </div>
</div>
</div>
</div>
</div>
Add below HTML code in <ol class="carousel-indicators"> section.
<li data-slide-to="3" data-target="#myCarousel"></li>
Step 2
Add below HTML code in <div class="carousel-inner"> section.
<div class="item">
<div class="container">
<div class="carousel-caption">
<p>We build pretty complex tools and this allows us to take designs and turn them into functional prototypes quickly and easily.</p>
<div class="white-line"></div>
<span>jerry gordinter</span> </div>
</div>
</div>
This is the HTML part for the Number Counter.
<div class="container">
<div class="row os-animation" data-os-animation="fadeInUp">
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-01" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="312"> <span class="counterBoxNumber">312</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Pizzas Ordered</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-02" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="980"> <span class="counterBoxNumber">980</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Happy Clients</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-03" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="810"> <span class="counterBoxNumber">810</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Projects Completed</h6>
</div>
</div>
<div class="col-md-3 col-sm-5 last text-center">
<div id="conterbox-04" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="600"> <span class="counterBoxNumber">600</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Comments</h6>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-5 text-center">
<div id="conterbox-02" class="counterBox counterWithAnimation" data-delay="400" data-animation="fade-in-left" data-countNmber="980"> <span class="counterBoxNumber">980</span>
<div class="orange-line"></div>
<h6 class="counterBoxDetails">Happy Clients</h6>
</div>
</div>
This is the HTML part for the Lightbox Gallery.
<div class="photoshots-gallery">
<div class="gallery">
<ul class="thumbnails">
<li class="span3">
<a rel="lightbox[group]" href="images/models6.jpg" title="Description here..."><img class="group1" src="images/models6.jpg"/></a>
</li> <!--end thumb -->
<li class="span3">
<a rel="lightbox[group]" href="images/models7.jpg" title="Description here..."><img class="group1" src="images/models7.jpg" /></a>
</li> <!--end thumb -->
<li class="span3">
<a rel="lightbox[group]" href="images/models8.jpg" title="Description here..."><img class="group1" src="images/models8.jpg" /></a>
</li> <!--end thumb -->
<!--end thumb -->
</ul><!--end thumbnails -->
</div>
</div>
Add below HTML code in <ul class="thumbnails"> section.
<li>
<a rel="lightbox[group]" href="images/models7.jpg" title="Description here..."><img class="group1" src="images/models7.jpg" /></a>
</li>
This is the HTML part for the map location section.
<div id="map" data-address="121 King St Melbourne VIC 3000 Australia" data-text="<p><strong>Envato Headquarters.</strong><br>121 King Street, Melbourne<br>Victoria 3000 Australia.<br>Phone: +61 3 8376 6284</p>">/div>
Step 1
Please change "data-address" to pin your address location on the map.
Step 2Please change "data-text" to display your address or content in bubble.
Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open notifyme.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Newsletter Subscription". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo.png).
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
Your email subscription form will not work unless you have your files running on a hosting server with PHP / JS. When you have your files ready on your hosting server, you need to edit the settings to make the email function work.
Open contact.php and change your from email address (Receiver Email Address) at the top with info@yourdomain.com to your real email address, same way you can change subject line with replace of text "Contact us form details". Also replace yourdomain.com with your real domain name in logo image url in the email body template (http://www.yourdomain.com/images/logo.png).
Please feel free to contact us in case if your email feature does not work because some server settings do not allow normal PHP email function.
Near the top of the index.html file, you'll see this line of HTML code:
<!-- favicon -->
<link rel="shortcut icon" href="images/favicon.png" />
To set your Favicon, simple change the URL of the link to the location of your image file. You can create easily your own FAVICON icon free of charge using website: http://favicon-generator.org
We are using google web font, OpenSans and Oswald.
It's included here
<!-- google font -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" />
If you need some other fonts then you can choose Google Fonts here.
We are using font awesome icons.
Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Check the cheatsheet.
It's included here
<!-- font awesome-->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
Thank you so much.
ThemeZaa Team