JezK
Edit File: index.html
<!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <!-- Basic Page Needs ================================================== ================================================== --> <meta charset="utf-8"> <title>Proximet Responsive Site Template</title> <meta name="description" content="Help Files"> <meta name="author" content=""> <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Mobile Specific Metas ================================================== ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <!-- CSS ================================================== ================================================== --> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/screen.css"> <!-- Favicons ================================================== ================================================== --> <link rel="shortcut icon" href="images/favicon.png"> <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> <!-- Google Fonts ================================================== ================================================== --> <link href='http://fonts.googleapis.com/css?family=Philosopher' rel='stylesheet' type='text/css'> <!-- Scripts ================================================== ================================================== --> <script src="js/jquery-1.7.min.js" type="text/javascript"></script> <!-- Main js files --> <script src="js/screen.js" type="text/javascript"></script> </head> <body> <!-- Home - Content Part ================================================== ================================================== --> <div class="contentheader"> <div class="container"> <!-- Header | Logo, Menu ================================================== --> <div class="one_third"> <div class="logo"><a href="index.html"><img src="images/logo.png" alt="" /></a></div> <div class="logotext">a responsive site template.</div> </div> <div class="two_third lastcolumn"> <section class="titlepart"> <ul> <li>Created: 22/09/2012</li> <li>By: Anariel Design</li> <li>Email: <a href="mailto:info@anariel.com">info@anarieldesign.com</a></li> </ul> </section> </div> </div> <!--container header ends here--> </div> <!-- Home Content Part - Box One ================================================== ================================================== --> <div class="container homecontent"><img src="images/proximet.png" /> <!-- Home Content Part - Box Two ================================================== ================================================== --> <div class="sixteen columns"> <p class="thanks">Thank you for downloading Proximet Site Template.</p> <h2 class="header">A) General</h2> <h3>SOME GENERAL INFORMATIONS</h3> <p>This template is HTML5/CSS3 Responsive Template. It is compatible with all modern Browsers, Smartphones and Tablet's. It is based on 960 grid and elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait)</p> <h3>File List</h3> <p>Proximet folder contains:</p> <ul> <li>→ HTML folder</li> <li>→ Help folder</li> <li>→ License</li> </ul> <div class="blankSeparator"></div> <h2 class="header">B) HTML Structure</h2> <h3>Index Page HTML Structure</h3> <ul> <li>› Header - Logo & Menu Part</li> <li>› Home Content Part - Slider</li> <li>› Home Content Part - Box One</li> <li>› Home Content Part - Box Two</li> <li>› Home Content Part - Box Three</li> <li>› Home Content Part - Footer</li> <li>› Home Content Part - Copyright</li> </ul> <div class="blankSeparator"></div> <p>All content is within div named container <span class="color">/*div class="container"/*</span>. With this your layout stayed centered on site. <div class="boxsep"></div> <h3>Navigation Structure</h3> <p>Template contains <span class="color">"Main Menu"</span> and <span class="color">"Responsive Menu"</span> - for mobile and tablet's</p> <p><img src="images/mainnav.png" alt="nav" /></p> <p><img src="images/responsive.png" alt="nav" /></p> <div class="boxsep"></div> <h3>Tooltip Help</h3> <p>This part in the html "head" is responsible for Tooltip: <img src="images/tooltip.png" alt="HTML Structure" /></p> <p>To assign tooltip to work for some other element on the site or just to delete it, you need to add or remove this:</p> <img src="images/tooltip2.png" alt="HTML Structure" /> <p>Here is one example:</p> <img src="images/tooltip1.png" alt="HTML Structure" /> <p>Inside title part you need to write text that u want to appear inside tooltip box.</p> <div class="boxsep"></div> <h3>prettyPhoto (lightbox) Help</h3> <p>This part in the html "head" is responsible for prettyPhoto : <img src="images/prettyphoto.png" alt="HTML Structure" /></p> <p>Here is one example, open portfolio.html file and find this lines:</p> <img src="images/prettyphotoexample.png" alt="HTML Structure" /> <p>Inside href you need to put link to your bigger image that u want to show inside lightbox.</p> <div class="boxsep"></div> <h3>How to change a logo!? Here you can find codes for it</h3> <img src="images/logopart.png" alt="logostructure" /> <div class="blankSeparator"></div> <p>You just need to save your logo as a .png file in your <span class="color">images folder</span> and to put it inside <span class="color">img src="images/logo.png"</span> part of the code.</p> <div class="blankSeparator"></div> <h2 class="header">C) CSS Structure</h2> <h3>CSS File List</h3> <p>CSS Folder contains 4 CSS files:</p> <ul> <li>→ base.css - base template styles</li> <li>→ prettyPhoto.css</li> <li>→ screen.css - main template styles and media queries</li> <li>→ skeleton.css - 960 grid system</li> </ul> <div class="boxsep"></div> <h3>Please note</h3> <p>The styles mentioned above are essential files, don`t remove them from your html files:</p> <img src="images/css.png" alt="HTML Structure" /> <div class="blankSeparator"></div> <p>In <span class="color">screen.css</span> all codes are well sorted for each part of the html structure. All you need to do in order to customize your website is to find corresponding id or class in the markup and to fnd its style in CSS fle. For example:</p> <p>HTML:</p> <img src="images/logopart.png" alt="HTML Structure" /> <p>CSS:</p> <img src="images/logopartcss.png" alt="HTML Structure" /> <div class="blankSeparator"></div> <p>If you need some help with css part or if you don`t know how to use and change it you can visit <strong>w3School</strong>: <a href="http://www.w3schools.com/">http://www.w3schools.com</a> where you will find great tutorials and examples for CSS and also for the HTML, JAVA, PHP...</p> <div class="blankSeparator"></div> <h2 class="header">D) JS Structure</h2> <h3>JS File List</h3> <ul> <li>› jquery-1.8.0.min.js - this is crucial file, don't delete it.</li> <li>› screen.js - main file for including js scripts </li> <li>› poshytip-1.0/src/jquery.poshytip.min.js - tooltip </li> <li>› tabs.js - tabs</li> <li>› jquery.tweetable.js - latest tweets</li> <li>› jquery.prettyPhoto.js - prettyPhoto for images</li> <li>› jquery.flexslider-min.js - responsive slider</li> <li>› superfish.js - jquery menu</li> <li>› hoverIntent.js</li> </ul> <div class="boxsep"></div> <p><span class="color">Js scripts are placed at the very bottom of the page in order to allow a browser first to load content and afterwards – javascript elements.</span></p> <p> Like this :</p> <img src="images/jsfile.png" alt="HTML Structure" /> <div class="blankSeparator"></div> <h2 class="header">E) PHP Structure</h2> <h3>PHP Files</h3> <p>"process.php" file is important for the Contact Page / <strong>contact form</strong></p> <img src="images/php.png" alt="HTML Structure" /> <div class="blankSeparator"></div> <p> inside <strong> $toemail = 'test@youremail.com'</strong> you need to put your email adress so that people can contact you</p> <h4>Contact form is activated inside of the screen.js file as:</h4> <img src="images/contact.png" alt="HTML Structure" /> <div class="blankSeparator"></div> <h2 class="header">F) Credits</h2> <h3>Credits to Different Script Files</h3> <ul> <li>jQuery:<a href="http://jquery.com/">http://jquery.com/</a></li> <li>PrettyPhoto:<a href="http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/"> http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/</a></li> <li>Google Fonts: <a href="http://www.google.com/webfonts#ChoosePlace:select/">http://www.google.com/webfonts#ChoosePlace:select</a></li> <li>Tweetable: <a href="http://theodin.co.uk/blog/jquery/tweetable-1-6-launched.html">http://theodin.co.uk/blog/jquery/tweetable-1-6-launched.html</a></li> <li>Superfish Menu: <a href="http://users.tpg.com.au/j_birch/plugins/superfish/">http://users.tpg.com.au/j_birch/plugins/superfish/</a></li> <li>Flexslider: <a href="http://www.woothemes.com/flexslider/">http://www.woothemes.com/flexslider/</a></li> </ul> <h3>Credits for different Assets - audio and images</h3> <p>Icons that i used are from <strong><a href="http://www.premiumpixels.com/">premiumpixels.com</a></strong></p> <p>Photos that i used for live preview are from <strong><a href="http://peopleimages.com/">peopleimages.com</a></strong></p> </div> </div> <!-- container ends here --> <div class="blankSeparator"><!-- --></div> <!-- End Document ================================================== --> </body> </html>