OnePagers Gradient Website Template

View the demo (and project website): https://haydenryan.github.io/OnePagers-gradient/

"Gradient" is part of the OnePagers 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

Table of contents

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

Whats Inside

Installation

Download the latest release as a .zip archive To 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 can easily 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)

Changing Content

The template is broken up into 4 sections, by default. To add more, read the documentation on adding 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

Changing Section Names and Links

By default, the sections are named section1, section2 etc. This results in the links for each section being labelled http://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 class="col-md-12 section deep-space" id="section2">

Changing the Gradient

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 its last class (this is where we place the gradient class, by default). For example to change Section 2 from deep-space to aubergine, change <div class="col-md-12 section deep-space" id="section2"> to <div class="col-md-12 section aubergine" id="section2">

Want to get fancy and show the inverted version of aubergine? Just change the class name to <div class="col-md-12 section aubergine-inverted" id="section2">

Adding Extra Sections

To add an extra section, copy and paste the code below into index.html AFTER the tag <!-- END SECTION 4 -->, making sure to change INSERT_GRADIENT_NAME and INSERT_SECTION_ID:

<!-- START EXTRA SECTION -->
<div class="row">
<div class="col-md-12 section innershadow INSERT_GRADIENT_NAME" id="INSERT_SECTION_ID">
<div class="col-md-1">
</div>
<div class="col-md-10">
<!-- START EXTRA SECTION CONTENT -->
<h1>Heading</h1><br>
<p class="lead">Lead Paragraph</p>
<p>Next Paragraph</p>
<!-- END EXTRA SECTION CONTENT -->
</div>
<div class="col-md-1">
</div></div></div>
<!-- END EXTRA SECTION -->

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

<li><a >Section Name</a></li>

Change navbar transparency

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

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

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

Changing 0.95 to a different value. If you want it to be completely opaque, change this to 1. If you want to make it more transparent, change it to something like 0.5. Have a play around!

License

GNU GPLv3