Documentation by “Jonathan Bird” v1.0


“Lead - Responsive HTML5 Landing Page” - shared on weidea.net

Created: 30/10/2013
By: Jonathan Bird
Email: hello@jonathanbird.com.au

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. Sources and Credits
  5. PHP Code Explanation

A) HTML Structure - top

This is a fully responsive template that utilises the new Bootstrap 3 framework. It is mostly self explanatory and there's a section in the code itself that shows all of the layouts available. For more information, see the official bootstrap documentation.

If you want to use the bootstrap javascript, please include it in the HTML file, it's included in /js/bootstrap/***.js. Everything else should be straight forward and normal HTML.

HTML Structure

B) CSS Files and Structure - top

I'm using two CSS files in this theme. The first one is the css file for the site and it's design. The second is the css file for the output of the countdown clock.

Everything is super well labeled so everything should be easily understandable.


C) JavaScript - top

This theme imports four Javascript files.

  1. jQuery
  2. My custom-built countdown script
  3. Functions File
  4. Bootstrap 3 JS (not included in HTML)
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. The countdown script provides the code behind the countdown ticker. You generally shouldn't need to change that unless you want to change the output such as not showing seconds or something. The date can be changed at the bottom of the HTML file (remember to edit both index and send.php). Note: months are 0-based ---- numbers are: year, month, day, hour, minute, second, milliseconds.
    	var ts = (new Date(2018,3,4,19,0,0,0));
    
  3. This is where the smooth scroll happens for the page. It does it to all anchor links on the page.

    This is where the form validation happens and is all done on the client side. First is setting of variables, then having all of the errors personalised so the user knows what they've done wrong. Next is the the posting of the stuff to the form so it has the submit.php file, which has all of the server side processing of the form. The only other stuff in this file is the div that the error and success are posted in to.

  4. Not included in HTML but can be included if you want

D) PHP - top


Again, pretty straight forward and PHP knowledge is assumed for this. If you add a new field or remove one, create/remove a variable for the name of the field specified.

Another thing is the site owner email and name, change that to whatever you want to receive emails to.

Same with the email body, add or remove the variables of the body of the email.

Quite simple and you can build upon the template with PHPMailer variables if you want.

  • The text file called 'email-addresses.txt' MUST have 770 file permissions (allows writing to file/folder but no public access.

  • E) PSD Files - top

    I've included the laptop as a PSD which is needed if you want to add your portfolio work in to replace it. Layered nicely for ease of use.


    F) Sources and Credits - top

    I've used the following frameworks:


    Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

    Jonathan Bird

    Go To Table of Contents