69Studio HTML5 Responsive Agency Template

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.

Overview

69Studio is a corporate web solution for individual's or business agencies. This multifunctional responsive template provides several layout options to take care of any possible screen resolution.

Be sure that it will fit any viewing device. This is a flexible template uses fresh and clean design. For it"s unique design, portfolios and other features it will distinguish your business among all.

Let's have a quick look on features that 69Studio possesses:

  1. Modern, Clean & Elegant Design,
  2. Built With HTML5 and CSS3,
  3. Bootstrap 3 in core,
  4. Fully responsive,
  5. Fresh and Clean Code,
  6. Working PHP Contact Form with a Simple Email Template,
  7. Includes Entire Font Awesome,
  8. Includes Amazing Flat Icons,
  9. Cross browser support,
  10. Responsive toggle menu for small devices, sticky menu when scrolling down,
  11. CSS3 animations,
  12. Google Fonts Used,
  13. Google Map integrated,
  14. Six diffrent homepage virson,
  15. Awesome single page for single product view, 
  16. Excellent Customer Support – We care about your site as much as you and will help in anyway possible.

File & Code Structure

Folders

-assets (all assets/required file of this template)
--bootstrap (bootstrap core files)
--css (all css files)
--flexSlider (all flex slider files)
--fonts (flaticon and font-awesome font icon set )
--images (all images)
--js (all javascript files)
--magnific-popup (all files for image popup)
--owl-carousel (owl-carousel core files)
--rs-plugin (revoulation slider plugin)
--simple-text-rotator (text rotator plugin)
--videos (html5 video formats)
--YTPlayer (youtube video player plugin)
- email-templates (a basic email template functional with contact form)
-and all other html files

 

HTML Structure

Being based on Twitter Bootstrap, 69Studio 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 href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300' rel='stylesheet' type='text/css'>
<!-- animate CSS -->
<link href="assets/css/animate.css" rel="stylesheet">
<!-- FontAwesome CSS -->
<link href="assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- Flat Icon CSS -->
<link href="assets/fonts/flaticon/flaticon.css" rel="stylesheet">
<!-- owl.carousel -->
<link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="assets/owl-carousel/owl.theme.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Style CSS -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Responsive CSS -->
<link href="assets/css/responsive.css" rel="stylesheet">

 

JavaScripts Files

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<!-- easing js -->
<script src="assets/js/jquery.easing.min.js"></script>
<!-- sticky js -->
<script src="assets/js/jquery.sticky.js"></script>
<!-- smoothscroll js -->
<script src="assets/js/smoothscroll.js"></script>
<!-- inview js -->
<script src="assets/js/jquery.inview.min.js"></script>
<!-- countTo js -->
<script src="assets/js/jquery.countTo.js"></script>
<!-- shuffle js -->
<script src="assets/js/jquery.shuffle.min.js"></script>
<!-- BlackAndWhite js -->
<script src="assets/js/jquery.BlackAndWhite.min.js"></script>
<!-- owl.carousel js -->
<script src="assets/owl-carousel/owl.carousel.min.js"></script>
<!-- GOGLE MAP -->
<script src="https://maps.googleapis.com/maps/api/js"></script>
<!-- script JS -->
<script src="assets/js/scripts.js"></script>
 

Icons

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Flaticon

Font Awesome is a @font-face iconset 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 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

 

Flaticon is also a @font-face iconset 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 'flaticon-[icon name]', for example:

<i class="flaticon-cup7"></i>
<span class="flaticon-light110"></span>

Hero Units

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.

        <!-- Intro Section -->
        <section id="home" class="video-slider">
            <div class="overlay">
                <video class="text-center" muted="" autoplay="" loop="" poster='assets/videos/Explore-HD.png' >
                    <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
                    <source type="video/webm" src="assets/videos/Explore-HD.webm">
                    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
                    <source type="video/mp4" src="assets/videos/Explore-HD.mp4">
                    Your browser does not support the video tag.
                </video>

                <div class="slider-caption">
                    <h1>We are <span>Creative Studio</span></h1>
                    <p>A digital creative design and development agency </p>
                    <a class="btn page-scroll" href="#">Learn More</a>
                </div>
            </div>
        </section> <!-- /#home -->

Important: Dont forget to add required CSS files and Javascript files at header and footer.

Shortcodes

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:

<!-- hero-block-v3 -->
<section class="hero-block-v3">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <img src="assets/images/focus-mocup.png" class="img-responsive " alt="Image">
      </div>

      <div class="col-md-6">
        <h2 class="section-title">Our Focus on</h2>
        <p>Continually underwhelm visionary models with cross-unit synergy. Uniquely leverage other's premium convergence before progressive data. Proactively monetize visionary models.</p>
       <ul class="check-circle-list">
        <li><i class="fa fa-check-circle"></i> Uniquely disseminate economically sound bandwidth</li>
       <li><i class="fa fa-check-circle"></i> Quickly reinvent cross functional infrastructures</li>
       <li><i class="fa fa-check-circle"></i> High standards in niche markets capital istinctively</li>
       <li><i class="fa fa-check-circle"></i> Intellectual capital fluorcently foster business</li>
     </ul>
    </div>
   </div><!-- /.row -->
  </div><!-- /.container -->
</section>
<!-- hero-block-v3 end-->

Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template. 

HTML5 Video

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:

  <video class="text-center" muted="" autoplay="" loop="" poster='assets/videos/Explore-HD.png' >
       <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
       <source type="video/webm" src="assets/videos/Explore-HD.webm">
       <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
       <source type="video/mp4" src="assets/videos/Explore-HD.mp4">
   </video>

Youtube Video

jquery.mb.YTPlayer - use a custom youtube player for a video as background on jQuery framework.
 
This is a jQuery component that let you play a Youtube® movie in a chromeless player.
You can even use a movie as background of your HTML page.
 
Important notice!
The plug in works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
 
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows,LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost.
 
HTML Markup:
<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>

 

data-property:
*data-property is an attribute of the TAG where you can pass the settings of the player.
 

 

js markup:

 $(function(){
    $(".player").YTPlayer();
  });

 

For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki" 

Google Map

Go to Google Map and search your location. Click on left top hamburger menu and navigate to Share or embed map. There will popup a embed code, copy that code with iframe and past it on desigred section.

 

Contact Form

In 69Studio 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.

Sources & Credits

HTML/CSS

Twitter Bootstrap: http://getbootstrap.com/

animate.css: http://daneden.github.io/animate.css/

 

Fonts

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

Flaticons: http://www.flaticon.com/

 

JavaScripts

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

sticky: https://github.com/garand/sticky

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

BlackAndWhite: http://gianlucaguarini.github.io/jQuery.BlackAndWhite/

owl.carousel: http://owlgraphic.com/owlcarousel/

YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer

 

Photos and Videos

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.
 
Slider Images: http://picjumbo.com/some-office-things/ ,  http://www.imcreator.com/free/business/macbook-computer ,  http://www.freepik.com/free-photo/woman-working-at-her-office-desk_766243.htm , http://www.pexels.com/photo/5168/

Portfolio Images:  https://dribbble.com/creativemints

Team Images:  http://www.imcreator.com/free/youmacon-people

HTML5 Videos:  1.  http://mazwai.com/#168 , 2. http://mazwai.com/#83

Youtube Video: http://Youtube source: https://www.youtube.com/channel/UCXlGJ1GZMn7g03vDuA3yTpA

 

Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Trendy Theme Team :)