Simply copy and paste the following files to your server!
There is only one php file in the pack. Opening it will reveal a email address. Simply replace it with yours!
To change the logo, replace:
<div class="page-header"> <p class="logo"> <img src="images/misc/logo.png" width="78"> </p> <a href="#" class="deploy-sidebar"></a> <a href="#" class="deploy-contact"></a> </div>
Replace the logo image, located in misc, with your image, and also replace the width with the image widht. After doing so, open the style.css and locate the .logo class and replace the width there with your logo's width
<div class="all-elements"> <div class="page-header"> <p class="logo"> <img src="images/misc/logo.png" width="78"> </p> <a href="#" class="deploy-sidebar"></a> <a href="#" class="deploy-contact"></a> </div> <div id="sidebar" class="page-sidebar"> <div class="page-sidebar-scroll"> <div class="nav-item"> <a href="index.html" class="nav-icon home-icon">HOMEPAGE</a> </div> <div class="nav-item"> <a href="#" class="nav-icon close-icon">CLOSE</a> </div> <div class="sidebar-ending"></div> </div> </div> <div id="content" class="page-content"> <div class="page-content-wrapper"> <!--Containers Go Here --> <div class="decoration"></div> <div class="footer-shortcuts"> <a href="#"><span class="icon icon-facebook"></span></a> <a href="#"><span class="icon icon-twitter2"></span></a> <a href="#" class="go-up"><span class="icon icon-arrow-up"></span></a> </div> <div class="clear"></div> <p class="center-text copyright no-bottom">COPYRIGHT 2013. ALL RIGHTS RESERVED</p> </div> <div class="page-ending"></div> </div>
Copying the following code, will generate a page. Once you've done this, simply add containers ( found in the second documentation ) in the page-content-wrapper.
<div class="page-coach"> <div class="portrait-coach"> <span style="top:40px; left:28px;" class="coach-arrow arrow1"> <h3 style="padding-top:35px; padding-left:100px">TOGGLE</h3> <p style="padding-top:0px; padding-left:100px;">TOGGLES THE NAVIGATION!</p> </span> </div> <div class="landscape-coach"> <span style="left:47%; top:15%;" class="coach-arrow arrow12"> <p style="text-align:center; padding-top:100px; margin-left:-160px;"> This page has a lot of responsive features!<br> That means they expand when the device is in landscape!<br> Flip your device back in portrait mode to continue the tutorial!<br> </p> </span> </div> </div>
The coach arrows are added using inline CSS. Creating classes for this would be impossible, as each can have endless combinations.
To create a new coach arrow, simply copy and paste the fist class in portrait-coach, replace arrow1 with whichever arrow you wish to use ( open images/coach, the arrows use the same names as classes )
Giving the main span style, will move the arrow about the screen. Giving the H3 and P classes, paddings will move the text around!
It's best you only use coach arrows for portrait mode, as each device has a taller or shorter screen and the page being responsive, they can be added wrong in landscape.
Nope!
You can add containers, as mentioned in the page structure, with elements within them, these can be found in the second documentation from the pack! Check it out!