Duos - Multipurpose HTML5 Landing Page
Documentation v1.0

Installing

Files structure

Uploading

After you chose an example suitable you, it is necessary upload all contents of the folder (index.html and the css, scripts, fonts, images folders) on your server. For this purpose you can use online FTP the manager of yours a hosting or use the desktop version (FileZilla for example).

  1. Enter on the server by means of the manager and choose the necessary folder for downloading.
  2. Upload the chosen files (index.html and the css, js, fonts and images folders).
  3. Once the files are done uploading, you can try access your website via browser.

Performance of this operation means that you have the server space and the domain.

HTML Structure

Page is based on latest version of the Bootstrap framework (3.1.1) and is fully compatible with it. HTML marking of the page consists from 2 the main parts, <Head> and <Body>.


In <Head> we connect all external files which we are necessary for our work of this page (css and by javascript), an also we determine specifications.

To <Body> be in the main content of the page (our blocks with functionality). Each block is marked by special comments at the beginning and at the end (this applies to both html and css files). The general structure <Body>:

                        
                        slider and slogan
                         
                        
                        page content

CSS Structure

Files containing in the css folder and their short description:


The main CSS file (style.css) contains all of the specific stylings for the page. The file is separated into sections using:

                        /*--------------------- FONT (OPEN SANS) IMPORT FROM GOOGLE FONTS ----------------------*/
                        

                        /*----------------------------------------------------------------------------------------
														COMMON STYLES
						-----------------------------------------------------------------------------------------*/
                        Common styles

                       	...
                        
                        /*----------------------------------------------------------------------------------------
																RETINA STYLES
						----------------------------------------------------------------------------------------*/
						Styles for Retina displays

If you would like to edit a specific section of the site, simply find the appropriate label in the css file, and then scroll down until you find the appropriate style that needs to be edited.

Scripts

Files containing in the scripts folder and their short description:

Customization

Logotype.

To add your logo, open code of the index.html and find code that you can see below.

Or you can simply replace the image of a logo (logo.png) in the images folder.

<!-- INTRO BEGIN -->
	<div id="intro" class="col-lg-6"> <a href="#" class="logo"> <img src="./images/logo.png" alt="Duos - Multipurpose HTML5 Landing Page" height="64" width="56"/> </a> 

don't forget to replace also the image copy intended for retina display (logo2x.png).

Intro slider images.

Simply replace the images in the images folder.

Or find image in html code (index.html) and paste your path (src).

				<div id="slides">
					<ul class="slides-container" >
						<li class="pink-bg">
							<h2 class="slogan"> Responsive <small>Your project looks great on any device. Content can be easily read and a user understands freely what you wanted to say him or her.</small> </h2>
							<img src="images/1.jpg" alt=""> </li>
						<li class="blue-bg">
							<h2 class="slogan"> Simple &amp; Pure <small>No fluff. Nothing should lead the visitor away from the main essence of website. There must be just important information.</small> </h2>
							<img src="images/2.jpg" alt=""> </li>
						<li class="purple-bg">
							<h2 class="slogan"> Innovations <small>In our work we try to use only the most modern, convenient and interesting solutions.
								We want the template you downloaded look unique and new for such a long time as it is possible.</small> </h2>
							<img src="images/3.jpg" alt=""> </li>
					</ul>
				</div>

Intro slider settings.

To change slider settings, you need open custom.js file and find code of your desired slider.

//------------------------------------------------------------------------
//						INTRO SUPERSLIDER SETTINGS
//------------------------------------------------------------------------
	$("#slides").superslides({
		play: 8000, //Milliseconds before progressing to next slide automatically. Use a falsey value to disable.
		animation: "fade", //slide or fade. This matches animations defined by fx engine.
		pagination: false, //Generate pagination. Add an id to your slide to use custom pagination on that slide.
		inherit_height_from:"#intro" // Accepts window or element selector. Use to constrain slider to an element's height.
		
		// more options: https://github.com/nicinabox/superslides
	});

Contact form customization.

Paste your email address.
Open contact script code (scripts/contact.php) and paste your email in highlighted line (see below).

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(!empty($_POST['contactname']) && !empty($_POST['contactemail']) && !empty($_POST['contactmessage'])) {
	$to = 'your@email.com'; // Your e-mail address here.
	$body = "\nName: {$_POST['contactname']}\nEmail: {$_POST['contactemail']}\n\n\n{$_POST['contactmessage']}\n\n";
	mail($to, "Message from yoursite.com", $body, "From: {$_POST['contactemail']}"); // E-Mail subject here.
    }
}
?>

Add field.
1. Add code of new field in html file (see below).

<form action="scripts/contact.php" role="form"  id="contact_form">
	<div class="form-group">
		<input type="text" class="form-control" id="contact_name" placeholder="Full name" name="name">
	</div>
	<div class="form-group">
		<input type="text" class="form-control" id="contact_new_field" placeholder="Your new field" name="new_field">
	</div>
	<div class="form-group">
		<input type="email" class="form-control" id="contact_email" placeholder="Email Address" name="email">
	</div>

2. Update validation script (scripts/custom.js) for new field (see below).

//------------------------------------------------------------------------------------
//						CONTACT FORM VALIDATION'S SETTINGS
//------------------------------------------------------------------------------------		  
    $('#contact_form').validate({
        onfocusout: false,
        onkeyup: false,
        rules: {
            name: "required",
            message: "required",
			new_field:"required",
            email: {
                required: true,
                email: true
            }
        },
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        },
        messages: {
            name: "What's your name?",
            message: "Type your message",
			new_field:"New field error message",
            email: {
                required: "What's your email?",
                email: "Please, enter a valid email"
            }
        },

3. Update sending script (scripts/custom.js) for new field (see below).

    $('#contact_form').submit(function() {
        // submit the form
        if($(this).valid()){
            $('#contact_submit').button('loading'); 
            var action = $(this).attr('action');
            $.ajax({
                url: action,
                type: 'POST',
                data: {
                    contactname: $('#contact_name').val(),
                    contactemail: $('#contact_email').val(),
					contactnewfield: $('#contact_new_field').val(), //ID from html page
                    contactmessage: $('#contact_message').val()
                },

4. Update contact.php script (see below).

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if(!empty($_POST['contactname']) && !empty($_POST['contactemail']) && !empty($_POST['contactmessage']) && !empty($_POST['contactnewfield'])) {
	$to = 'your@email.com'; // Your e-mail address here.
	$body = "\nName: {$_POST['contactname']}\nEmail: {$_POST['contactemail']}\n\n\n{$_POST['contactmessage']}\n\n{$_POST['contactnewfield']}\n\n";
	mail($to, "Message from yoursite.com", $body, "From: {$_POST['contactemail']}"); // E-Mail subject here.
    }
}
?>

Subscribe form customization.

To insert your MailChimp API Key and ID, open the subscribe.php file (is in the js folder) and paste your Key and ID in first two lines.

<?php
$apiKey = ''; // your mailchimp API KEY here
$listId = ''; // your mailchimp LIST ID here
$double_optin=false;
$send_welcome=false;
$email_type = 'html';
$email = $_POST['newsletter_email'];

Choose message type.

Open custom.js and find "SUBSCRIBE FORM MAILCHIMP INTEGRATIONS SCRIPT" or "CONTACT FORM SCRIPT". Then comment out unneeded method (see code below). You have 3 methods to choose from: label method, redirect and popup. 
success: function(data) {
	$('#subscribe_submit').button('reset');
					
	//Use labels to display messages
	//$('.error').html('Well done! You are subscribed!');
					
	//Redirect to other site
	//window.location.href = "http://yoursite.com";
					
	//Use modal popups to display messages
	$('#modalSubscribe .modal-title').html('<i class="color2 icon-newspaper"></i>' + data);
	$('#modalSubscribe').modal('show');
},

Replacement of icons.

All 300+ simple line icons are now embedded in a webfont for more convenient use on the web or in a native application.

To change an icon - simply change a class of this icon, for a class of an icon which you want.

Example: lower you can see the contact block with "icon-pointer". To replace it - you'll need choose the class necessary to you from the Icon list and insert it instead of "icon-pointer".

				<ul class="contact-list">
					<li><i class="icon icon-pointer"></i>City Address, State and Postcode, Country</li>
					<li><i class="icon icon-call-in"></i>your@email.com</li>
				</ul>

PSD files

Files containing in the PSD folder and their short description:

Credits

For creation template the following files were used: