Studio theme.

Version 1.0
Cross Browser, High Quality and Responsive Portfolio HTML Template. Thank you very much for purchasing our template.
It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions.

Installation

Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.

File scheme

Files without template HTML pages

  • css ▾
    • robo.css
    • icons.css
    • skin-[x].css
    • style.css
    • animation.css
    • responsive.css
    • fonts ▾
      • robo.ttf
      • robo.woff
      • robo.otf
      • robo.svg
      • robo.eot
  • js ▾
    • jquery.js
    • robo.js
    • scripts.js
    • isotope.pkgd.min.js
    • jquery.nicescroll.min.js
    • jquery.nicescroll.plus.js

robo.css file contents roboframework

icon.css file contents roboframework include vector font icons

skin-[1 or 2].css By using this file you can choose the default colors of your site.

animation.css All animations theme in this file.

responsive.css Styling for other devices.

robo.js All functons of the roboframework

scripts.js All functons of the theme

isotope.pkgd.min.js Masonry grid for porfolio

jquery.nicescroll.min.js & jquery.nicescroll.plus.js Scroll styling

Robo framework

This themplate was prepared with Robo Framework Version: 1.
Getting started with RobotoFramework very easy. RobotFramework is perfect to create of every difficulty site. Robocoto Framework is a front-end framework. This page will help you make your site more accessible. Roboto framework is supports modern web browsers

Robo Framework

Headers

Our template has 5 types of headers.

Default is dark color of navigation bar and header background will be body color and position will be raltive.
For change header design add the chosen class to body.
You can change the color, size, position and other styles of headers.

Position Fix - remains at the top as fix.

For creating position fix add the class .menu-fix to body , You can add to position fix the background color, for this add the class .menu-bg to body
If remove position fix header will be static.
For example

<body class="menu-fix menu-bg">
    <header>
        <section class="container">
            <div class="logo">
                <a href="#">
                    <img alt="Studio"  src="logo.png">
                </a>
            </div>
            <a class="compact-menu-icon"><figure></figure></a>
            <div class="search">
                <input type="text" name="search" placeholder="Search">
                <button></button>
            </div>
            <ul class="menu main centered">
                <li><a href="#">Servers</a></li>
                <li><a href="#">Mail Server</a></li>
                <li><a href="#">Pricing</a></li>
                <li ><a href="#">Support</a></li>
            </ul>
        </section>
    </header>
</body>
Position autofix - after the end of height of screen position will be fix.

For creating position auto fix add the class .menu-auto-bg to body
You must use one of these styles.
For example

<body class="menu-auto-bg">
    <header>
        <section class="container">
            <div class="logo">
                <a href="#">
                    <img alt="Studio"  src="logo.png">
                </a>
            </div>
            <a class="compact-menu-icon"><figure></figure></a>
            <div class="search">
                <input type="text" name="search" placeholder="Search">
                <button></button>
            </div>
            <ul class="menu main centered">
                <li><a href="#">Servers</a></li>
                <li><a href="#">Mail Server</a></li>
                <li><a href="#">Pricing</a></li>
                <li ><a href="#">Support</a></li>
            </ul>
        </section>
    </header>
</body>
Position absolute - remains on top as static.

For creating position absolute add the class .menu-absolute to body
You can choose the size of headers.
For example

<body class="menu-absolute">
    <header>
        <section class="container">
            <div class="logo">
                <a href="#">
                    <img alt="Studio"  src="logo.png">
                </a>
            </div>
            <a class="compact-menu-icon"><figure></figure></a>
            <div class="search">
                <input type="text" name="search" placeholder="Search">
                <button></button>
            </div>
            <ul class="menu centered">
                <li><a href="#">Servers</a></li>
                <li><a href="#">Mail Server</a></li>
                <li><a href="#">Pricing</a></li>
                <li ><a href="#">Support</a></li>
            </ul>
        </section>
    </header>
</body>
Header navigation bar.

Navigation bar has 2 types Navigation has unlimited subcategories
For example

<ul class="menu centered">
    <li><a href="#">Servers</a></li>
    <li><a href="#">Mail Server</a></li>
    <li><a href="#">Pricing</a></li>
    <li ><a href="#">Support</a></li>
</ul>


Header navigation Navigation bar has 2 types Navigation has unlimited subcategories For example Navigation has a types below: Default position is opening. Compact is a hide type. For that to same "ul" add the class .compact Compact menu is on the right and has unlimited submenu. You can also add to menu the icons and change style.
For more see the link


Staff section

Staff section has 3 versions.

1. List version - information, social icons on image when on mouse For example:

<section class="staff-1">
	<div class="row grid-items">
	  <div class="column width-4 ">
		<img src="../img/staff1.jpg">
		<div class="about">
		<h4>Georginia Nitshe</h4>
		<h6>Art Director</h6>
		<p>Lorem ipsum dolor sit amet, volutpat dui nisi,
		purus assumenda justo condimentum aliquam nulla, odio parturient est.
		</p>
		<div class="social">
		   <a href="#"><i class="icon-gplus1"></i></a>
		   <a href="#"><i class="icon-vimeo"></i></a>
		   <a href="#"><i class="icon-instagram"></i></a>
		</div>
				
	   </div>
	  </div>
	 
	 <div class="column width-4 ">
		<img src="../img/staff1.jpg">
		<div class="about">
		<h4>Georginia Nitshe</h4>
		<h6>Art Director</h6>
		<p>Lorem ipsum dolor sit amet, volutpat dui nisi,
		purus assumenda justo condimentum aliquam nulla, odio parturient est.
		</p>
		<div class="social">
		   <a href="#"><i class="icon-gplus1"></i></a>
		   <a href="#"><i class="icon-vimeo"></i></a>
		   <a href="#"><i class="icon-instagram"></i></a>
		</div>
				
	   </div>
	  </div>
	  
	  <div class="column width-4 ">
		<img src="../img/staff1.jpg">
		<div class="about">
		<h4>Georginia Nitshe</h4>
		<h6>Art Director</h6>
		<p>Lorem ipsum dolor sit amet, volutpat dui nisi,
		purus assumenda justo condimentum aliquam nulla, odio parturient est.
		</p>
		<div class="social">
		   <a href="#"><i class="icon-gplus1"></i></a>
		   <a href="#"><i class="icon-vimeo"></i></a>
		   <a href="#"><i class="icon-instagram"></i></a>
		</div>
				
	   </div>
	  </div>
</div>
</section>
2. Staff slider

2. Staff slider - work same with page slider. The informations and icons under photo. For example:

<div class="carousel pageslider no-nav" id="staff-3"> 
   <div class="sliders" >
      <div class="slid" > 
         <div class="middle align-center"> 	
            <div class="staff-img">	
                  <span class="last"></span>
                  <span class="next"></span>
                  <div class="img">
                     <img src="../img.jpg">
                  </div>
            </div>
				
            <h4>...</h4>
            <p>...</p>
				
         <div class="social">
            <a href="#"><i class="icon-gplus1"></i></a>
            <a href="#"><i class="icon-vimeo"></i></a>
            <a href="#"><i class="icon-instagram"></i></a>
         </div>
        
       </div>
      </div>
   </div>

</div>
3. Staff slider

3. Staff slider - work same with page slider. The informations and icons on both sides of photo.. For example:

<div class="carousel pageslider no-nav staff-2" id="staff-1">
   <div class="sliders">
      <div class="slid active">
         <div class="left column width-4 auto-hide">
            <p>... </p>
            <button>MORE</button>
         </div>		
         <div class="column width-4 align-center auto-width">
            <div class="staff-img">
               <span class="last"></span>
               <span class="next"></span>
               <div class="img">
                  <img src="../img.jpg">
               </div>
            </div>
         </div>
         <div class="right column width-4 auto-width">
            <h1>Leonard Cohen</h1>
            <h2>Robocont TM</h2>
            <span>Senior Art Director</span>
         </div>
      </div>
   </div>
</div>



Pageslider

How create page slider ?

To creating page slider add the class .page slider
You must necessarily add the unique ID, this for removing of conflicts of same sliders.
If you want to add the navigation for changing slides to left on right add the elements with classes .last, .next to the div page slider.
If you want auto loop then add the class .auto-loop to page slider.
If background is dark color but you want the light text and another elements add the class .light to page slider.
If you want without navigation add the class .no-nav
For fullscreen version add the class .full-screen
If you want carousel effect for sliders add class .carousel
For more information see the link
For example:

<div class="pageslider carousel no-nav parallax" id="slid-1">
   <div class="sliders">
      <div class="slid">
         ...
      </div>
      <div class="slid">
         ...
      </div>
   </div>
   <span class="last"></span>
   <span class="next"></span>
</div>



Sign in/ up

Sign up section has the sign up and sign in.

These you can connect with ajax to display and call the function ajax login.
It included: sign in, sign up, forget passwrd.
login.html

To create new Ajax popup page
1. Create your page in ./ folder
2. And give the link class .ajax-link
3. Enjoy :)




Portfolio section

Portfolio version #1.

Create with masonry When mouse on item info about this item will appear below. For example:

<ul class="portfolio-1" >
   <li class="big pageslider carousel auto-loop " id="Portfolioslid-1">
      <div class="sliders colorbg">
         <div class="slid"> ... </div>
      </div>
      <ul class="nav"></ul>
   </li>
   <li>
      <img alt="work"  src="../img.jpg">
      <div class="work_desc">
         <div>
            <a class="type" href="work.html">Branding</a>
            <h3><a href="work.html">RedDog Group</a></h3>
         </div>
      </div>
   </li>
</ul>
Portfolio version #2.

When mouse on item will zoom of this item. For example:

<ul class="portfolio-4" >
   <li class="big pageslider carousel auto-loop " id="Portfolioslid-1">
      <div class="sliders colorbg">
         <div class="slid"> ... </div>
      </div>
   </li>
   <li>
      <img alt="work"  src="../img.jpg">
      </div>
   </li>
</ul>
Portfolio version #3.

When mouse on item info about this item will appear below and item move around with 3D effects. For example:

<ul class="portfolio-4" >
   <li class="big pageslider carousel auto-loop " id="Portfolioslid-1">
      <div class="sliders colorbg">
         <div class="slid"> ... </div>
      </div>
      <ul class="nav"></ul>
   </li>
   <li>
      <div class="workimg">
         <img alt="work"  src="../img.jpg">
         <div class="work_desc">
            <div>
            <a class="type" href="#">Branding</a>
            <h3><a href="#">RedDog Group</a></h3>
            </div>
         </div>
      </div>
   </li>
</ul>
Portfolio version #4.

Portfolio 4 can create with help from roboframework. For example:

<ul class="portfolio-2">
   <li class="big">
      <img alt="work" src="../imgx2.jpg">
      <a href="#go" class="work-desc">
         <h6>Website</h6>
         <h3>Goody Comapny</h3>
      lt;/a>
   </li>
   <li>
      <img alt="work" src="../img.jpg">
         <a href="#go" class="work-desc">
            <h6>Website</h6>
            <h3>Goody Comapny</h3>
         </a>
   </li>
</ul>



Pagenation section

Pagenation version #1.

Compact version of last next, For boxed vertion theme. For example:


<div class="pagenation-1">
   <div class="prew">
      <a href="#" class="icon-leftx">
         <h2>LAST WORK</h2>
         <span>... </span>
      </a>
   </div>
   <div class="next">
      <a href="#" class="icon-rightx">
         <h2>LAST WORK</h2>
         <span>... </span>
      </a>
   </div>
</div>
Pagenation version #2.

Compact vertion, with one link load more. For example:

<a href="#" class="portfolio-load icon-layout">Load More..</a>



Features section

Features version #1.

Feature Section included of 3 versions and every version with icons. For example:

<ul class="features-1">
   <li>
      <i class="icon-design size1"></i>
      <h2>[title]</h2>
      <p>... </p>
   </li>	
</ul>	
Features version #2.

This version you can create with help from roboframework. For example:

<div class="row features-2 small grid-items ">
   <div class="column width-4 ">
      <div class="column width-4 ">
         <i class="icon-speed xlarge"></i>
      </div>
      <div class="column width-7 ">
         <h2>[title]</h2>
         <p>...</p>	
      </div>
   </div>
</div>
Features version #3.

This version you can create with help from roboframework. For example:


<div class="row features-3 grid-items ">
  <section class="container">	
    <div class="column width-4 ">
      <div class="column width-3 ">
        <i class="icon-speed"></i>
      </div>
      <div class="column width-8 ">
        <h2>[title]</h2>
        <p>...</p>	
      </div>
    </div>
  </section>	
</div>



Social section

Version #1.

If you want add social sections see below. For example:

<ul class="social-1">
	<li><a href="#" class="icon-vimeo">230<span>Vimeo</span></a></li>
	<li><a href="#" class="icon-instagram">25<span>Instagram</span></a></li>
	<li><a href="#" class="icon-twitter1">85<span>Twitter</span></a></li>
	<li><a href="#" class="icon-gplus1">669<span>Google plus</span></a></li>
</ul>
Icons witch roboframework.

If you want create your special social section you can use robot framework.
For more information see the link. For example:

<a href="#" class="icon-twitter"></a>



Other sections

Map section

For creating google map section add the id #map and map coordinates given on the data attributes in map div.
If you can add marker on the map then add data attribute data-marker="1" else data-marker="0" For example:

<div id="map" data-lat="00.0000"  data-lng="00.0000" data-marker="1"></div>
Full screen

For full screen add the class .fullscreento div. Video, image and image slides can use in fullscreen also.

Other elements & Function

For add others functions and elements write documentation framework

  • Grid System
  • Grid Position
  • Grid Responsive
  • Grid Responsive
  • Tabs
  • Accordions
  • Tables
  • Buttons
  • Form elements
  • Icons
  • Navigations
  • Boxes
  • Audio Player
  • Video Player
  • Loading
  • Blockquote
  • Restina ready
  • Helper Classes

Robo Framework

Thanks for purchasing this template