Killer Product: Free Landing Page Template

Killer Product: Free Landing Page Template DemoKiller Product! landing Page Template

Killer Product! landing Page Template with Video

 

/*

Killer Product! V 1.0

Author: The Gorilla Ad Agency

Author URL:

email: gorillaadagency@gmail.com

If you need any help with the product please see our client area’s FAQ or

email us any question you may have.

*/

/*

Product Image

—————————————-

To replace the product image is easy.

The size can vary a bit but you dont want to go

too big as your data will fall below the cusp for most users.

1. Right click on your product image. Click on ‘Rename’

2. Rename your image to ‘t-shirt.png’

3. Simply add your image to the folder called ‘images’.

Overwrite? > “yes”

*/

/*

List Icons

——————————————-

In the Killer Product landing page you have several icons

you can use in your list areas. We have a couple of areas in the

template but you can also use this if you want to add more elsewhere.

To do any editing here you will need a text editor. I use context but

Notepad works too. Both you can find free downloads for.

All we have to do here is add a class to the ‘<li>’ tag.

<ul>

<li class=”check”>Your text here.</li>

<li class=”star”>Your text here.</li>

<li class=”bubble”>Your text here.</li>

<li class=”refresh”>Your text here.</li>

</ul>

Here are all the variables:

Stars = <li class=”star”>Your text here.</li>

Check = <li class=”check”>Your text here.</li>

Thought Bubble = <li class=”bubble”>Your text here.</li>

Refresh = <li class=”refresh”>Your text here.</li>

*/

/*

Phone Number

————————————–

Changing the phone number will require you

to change a bit of text in the code.

Below is the code… You can change the text ‘Call to order’

As well as the phone number itself. Change it below. Then copy and paste it inside the index.html file. Quick Tip: Its close to the <body> tag.

<div id=”phone-number”>

<p><img src=”images/call-now-icon.png” width=”37″ height=”39″ alt=”call now” /><span class=”call-order”>Call To Order</span><br />(888) 555-1212</p>

</div><!–end#phone-number–>

*/

/*

Contact Form

——————————————

The contact form will send an email. What we need to do here is edit

the email address it gets sent to.

1. Open the folder ‘scripts’

2. Open the file ‘contactform_processor.php’

3. At the top enter in your info replacing the current info.

Alright now we have the form itself and the text within it.

1. Open the file contact-form.php

2. Edit the current text and then save.

Note: Editing the fileds/options to the form is more

advanced and requires a bit of javascript/php knowledge.

We can help just send us an email.

email: gorillaadagency@gmail.com

*/

/*

Quotes Area

——————————————

Note: This is the area which will be updated first.

We are adding a slider funtion so multiple testimonials can

rotate.

To change the text in the blue quotes area is easy.

1. Replace the content below inside the HTML tags.

2. Then copy and paste inside the index.html file. The

quotes area is clearly marked within the code.

Between <!– end#quotes-image-wrap –> and <!– end#quotes-text-wrap –>

<div id=”quotes-text-wrap” class=”left”>

<h3>An exceptional product landing page. Sure to sell anything!</h3>

<span><em>Jon Q.</em></span>

</div><!– end#quotes-text-wrap –>

*/

/*

Buttons

——————————————

We have 18 variation of button colors for you to utilize.

Changin the button color is as easy as the list variables above.

We have already created the CSS.

All you have to do is add the proper class to and anchor tag (link).

Here is an example of the code:

<a class=”blue-button” href=”http://anysite.com” title=”this is the hover text” >Your Custom Text</a>

Here are all the variables:

1. blue = class=”blue-button”

2. aqua blue = class=”aqua-button”

3. charcoal = class=”charcoal-button”

4. dark blue = class=”dark-blue-button”

5. purple = class=”purple-button”

6. deep purple = class=”deep-purple-button”

7. gray = class=”gray-button”

8. green = class=”green-button”

9. pink = class=”pink-button”

10. hot pink = class=”hot-pink-button”

11. lime green = class=”lime-button”

12. khaki = class=”khaki-button”

13. maroon = class=”maroon-button”

14. lite gray = class=”lite-gray-button”

15. neon green = class=”neon-green-button”

16. yellow = class=”yellow-button”

17. neon yellow = class=”neon-yellow-button”

18. royal blue = class=”royal-button”

*/

/*

Content

—————————————

We have made it so you can add content in half sections, thirds, or variations there of.

Adding these classes below will create the size content containers as descirbed below.

fully: All the way accross the content area.

halfers: 2 halfs section of the content area.

one-thirds: these are the most versitile as you can add them to a two-thirds.

or you can have 3 one-thirds accross the content area.

two-thirds: must be used with a one-thirds div. This takes up 2/3 of the content area.

To change the text add content between <div> your content here.</div>.

example of code for content all the way across the page..

<div class=”fully”> your content here.</div>

Very important Stuff.

Important!: Once you finish a whole row of content.

Whether it be 1/3 and a 2/3, or 3 x’s 1/3 or a fully…

Make sure you end the row with… <div class=”clearfix”></div>

++Icons in Content++

These areas allow for indented icons to be added. We have several to choose from.

Adding the icons to the content is as easy as adding an image in html to any part of your content.

Take a look at the images folder for what we have provided. Add your own as well, they will indent all the same.

*/

/*

Video

——————

Well to add the video we used vimeo. They are not as ugly as youtube video player. your choice…

1. Copy the embed code and paste it into thge index.html file.

2. make sure to paste to replace the old code.

3. The video code is below edit it here first, then copy and paste.

In thie code notice the Video Text Area.

We have a list in the index.html file now you can add one if you want.

——————————————————————————————————

<div id=”video-wrap”>

<div id=”video-text”>

<h4 class=”text-shadow-white red”>Watch the Killer Product Video</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at augue erat. Suspendisse consequat rhoncus.</p>

</div>

<div id=”video”> (Replace this with embed code.)</div>

</div><!– end#video-wrap –>

——————————————————————————————————–

Important!

The video size is:

width=”440″

height=”250″

*/

/*

Global CSS stuff

—————————————————————————————

We used Killer CSS reset and Global CSS which provides some easy to use CSS classes.

There are some cool global elements you can use by

adding a class to different bits of code. Here are a few to get you interested.

This is more advanced but here is the code.

/*Global Stuff*/

Standard div Placement

.left{float:left;}

.right{float:right;}

.clear{clear:both;}

.clearfix{line-height:0; height:0; padding:0; margin:0; clear:both;}

A bit of spacing

.top-space{margin-top:10px;}

.bottom-space{margin-top:10px;}

Text Colors

.red{color:#e11d1d;}

.blue{color:#44a2d9;}

.green{color:#588e0f;}

.gray{color:#ccc;}

.text-center{text-align:center;}

.text-left{text-align:left;}

.text-right{text-align:right;}

.underline{text-decoration:underline;}

.bold{font-weight:bold;}

.text-shadow-white{text-shadow: 1px 1px 1px #FFF; }

.text-shadow-dark{text-shadow: 1px 1px 1px #232323; }

A horizontal line

.hr{line-height:1px; height:1px; background:#e1e1e1; margin-top:10px; margin-bottom:10px; }

*/

View the Demo

This entry was posted by Wednesday, 16 February, 2011