a responsive site template.

Thank you for downloading Proximet Site Template.

A) General

SOME GENERAL INFORMATIONS

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)

File List

Proximet folder contains:

B) HTML Structure

Index Page HTML Structure

All content is within div named container /*div class="container"/*. With this your layout stayed centered on site.

Navigation Structure

Template contains "Main Menu" and "Responsive Menu" - for mobile and tablet's

nav

nav

Tooltip Help

This part in the html "head" is responsible for Tooltip: HTML Structure

To assign tooltip to work for some other element on the site or just to delete it, you need to add or remove this:

HTML Structure

Here is one example:

HTML Structure

Inside title part you need to write text that u want to appear inside tooltip box.

prettyPhoto (lightbox) Help

This part in the html "head" is responsible for prettyPhoto : HTML Structure

Here is one example, open portfolio.html file and find this lines:

HTML Structure

Inside href you need to put link to your bigger image that u want to show inside lightbox.

How to change a logo!? Here you can find codes for it

logostructure

You just need to save your logo as a .png file in your images folder and to put it inside img src="images/logo.png" part of the code.

C) CSS Structure

CSS File List

CSS Folder contains 4 CSS files:

Please note

The styles mentioned above are essential files, don`t remove them from your html files:

HTML Structure

In screen.css 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:

HTML:

HTML Structure

CSS:

HTML Structure

If you need some help with css part or if you don`t know how to use and change it you can visit w3School: http://www.w3schools.com where you will find great tutorials and examples for CSS and also for the HTML, JAVA, PHP...

D) JS Structure

JS File List

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.

Like this :

HTML Structure

E) PHP Structure

PHP Files

"process.php" file is important for the Contact Page / contact form

HTML Structure

inside $toemail = 'test@youremail.com' you need to put your email adress so that people can contact you

Contact form is activated inside of the screen.js file as:

HTML Structure

F) Credits

Credits to Different Script Files

Credits for different Assets - audio and images

Icons that i used are from premiumpixels.com

Photos that i used for live preview are from peopleimages.com