Repository files navigation

"Gradient" is part of theOnePagers collection of sleek single-page website templates by@HaydenRyan.

• Fully responsive, based on Bootstrap
• Valid HTML, clean coding, easy to customise
• 74 gradients included
• FontAwesome 4.7.0 included

1. What's Inside
2. Installation
3. Changing Content
   1. Changing Section Names and Links
4. Changing the Gradient
5. Adding Extra Sections
6. Change navbar transparency

Download the latest release as a .zip archiveTo install, simply upload the following files to your host:

• css/
  • gradients.min.css
  • onepagers-gradient.css
  • bootstrap-theme.min.css
  • bootstrap.min.css
• font-awesome/
  • upload this whole directory (if you're using Font Awesome icons)
• js/
  • bootstrap.min.js
• index.html

No other files are required for the template to work.

In index.html, you caneasily delete the demo content. Start with deleting the Demo Gradients - lines 99-511. Alternatively, search the code for the string DELETE THIS (there is also a Javascript function you can delete at the bottom of the page)

The template is broken up into 4 sections, by default. To add more, read the documentation onadding extra sections.

Each section's content is marked at the beginning with the tag<-- START SECTION x --> and at the end with<-- END SECTION x -->.

For exmple, to replace the content in Section 2, change the content between<!-- START SECTION 2 --> and<-- END SECTION 2 --> in the main index.html file

By default, the sections are namedsection1,section2 etc. This results in the links for each section being labelledhttp://youraddresshere/#section1 This is pretty bland and you should change this.

To change the name of a section:

1. Change the bold section link in the navbar (~line 50)<li><a href="#section2">The Gradients</a></li>

2. Change the ID of the corresponding div, for example<div>

To choose a gradient,visit the demo and scroll to the "Gradients" section. Each gradient is listed with its class name. Mouse over any gradient to flip it in the inverse direction.

To change a section's gradient, change itslast class (this is where we place the gradient class, by default). For example to change Section 2 from deep-space to aubergine, change<div> to<div>

Want to get fancy and show the inverted version of aubergine? Just change the class name to<div>

To add an extra section, copy and paste the code below intoindex.html AFTER the tag<!-- END SECTION 4 -->, making sure to changeINSERT_GRADIENT_NAME andINSERT_SECTION_ID:

<!-- START EXTRA SECTION --><div><div><div></div><div><!-- START EXTRA SECTION CONTENT --><h1>Heading</h1><br><p>Lead Paragraph</p><p>Next Paragraph</p><!-- END EXTRA SECTION CONTENT --></div><div></div></div></div><!-- END EXTRA SECTION -->

Don't forget to add the section to the navbar, for example:

<li><a href="#INSERT_SECTION_ID">Section Name</a></li>

Want to change the transparency of the navbar? It's easy! By default, it's set to 95% opaque.

Simply go to line 108 ofcss/onepagers-gradient.css and edit the following code:

background-color: rgba(34, 34, 34, 0.95) !important;

Changing0.95 to a different value. If you want it to be completely opaque, change this to1. If you want to make it more transparent, change it to something like0.5. Have a play around!

GNU GPLv3