Fundraising - Ultimate Charity/Donations HTML Template


Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the HTML folder.

Our item comes with Contact Form PHP which requires a server in order to run and send mails. Make sure the item is added on online server, or on a local server such as WAMP, MAMP or XAMP.

How to install WAMP (Windows local server), MAMP (MacOS local server), XAMP (MacOS, Windows, Linux local server),

This is an HTML theme and doesn't require instalation in the traditional meaning of the word. You only need to place the content (HTML files and the four folders) in your prefered web directory

Keep in mind that the folder structure and file/folder names are important for the correct theme work

Element name: Typography elements

Output

Code


<p>This is <b>bold text</b> and this is <strong>strong</strong>. This is <i>italic style</i> and this is <em>emphasized</em>.This is <sup>superscript</sup> text and this is <sub>subscript</sub> text. This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>

Element name: Headings

Output

Code


<h2>Level 2 heading <small>Secondary text</small></h2>
<h3>Level 3 heading <small>Secondary text</small></h3>
<h4>Level 4 heading <small>Secondary text</small></h4>
<h5>Level 5 heading <small>Secondary text</small></h5>
<h6>Level 6 heading <small>Secondary text</small></h6>

Element name: Preformatted code

Output

Code


<pre><code>
*, 
*:after, 
*:before { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
.clearfix:after { 
    clear: both; 
}
html{
    width: 100%;
    height: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
</code></pre>

Element name: Blockquotes

Output

Code


<blockquote>Seamlessly evisculate future-proof leadership and out-of-the-box expertise. Completely mesh ethical platforms via best-of-breed materials. Conveniently conceptualize end-to-end results vis-a-vis user friendly models. Globally build maintainable e-business via interactive imperatives. Interactively drive progressive methods of empowerment without low-risk high-yield technologies.</blockquote>

Element name: Lists - Unordered

Output

Code


<ul>
    <li>Duis sollicitudin lobortis sem</li>
    <li>Et dignissim ligula sem</li>
    <li>Rhoncus imperdiet justo</li>
    <li>Vivamus placerat est a facilisis</li>
    <li>Pellentesque interdum efficitur</li>
</ul>

Element name: Lists - Ordered

Output

Code


<ol>
    <li>Duis sollicitudin lobortis sem</li>
    <li>Et dignissim ligula sem</li>
    <li>Rhoncus imperdiet justo</li>
    <li>Vivamus placerat est a facilisis</li>
    <li>Pellentesque interdum efficitur</li>
</ol>

Element name: Retina ready icons

Output

Code


<div class="share-via">
    <div class="social">
        <a href="">
            <i class="fa fa-facebook"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-twitter"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-google-plus"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-linkedin"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-reddit"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-tumblr"></i>
        </a>
    </div>
</div>

<!-- Bordered icons -->
<div class="share-via bordered-icons">
    <div class="social">
        <a href="">
            <i class="fa fa-facebook"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-twitter"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-google-plus"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-linkedin"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-reddit"></i>
        </a>
    </div>
    <div class="social">
        <a href="">
            <i class="fa fa-tumblr"></i>
        </a>
    </div>
</div>

Element name: Buttons Style v1 - Colored

Element name: Buttons - Big/Colored

Output

Code


<button type="button" class="btn btn-danger btn-lg">I'm a big button</button>
<button type="button" class="btn btn-success btn-lg">I'm a big button</button>
<button type="button" class="btn btn-info btn-lg">I'm a big button</button>
<button type="button" class="btn btn-warning btn-lg">I'm a big button</button>

Element name: Buttons - Normal/Colored

Output

Code


<button type="button" class="btn btn-danger">I'm a normal button</button>
<button type="button" class="btn btn-success">I'm a normal button</button>
<button type="button" class="btn btn-info">I'm a normal button</button>
<button type="button" class="btn btn-warning">I'm a normal button</button>

Element name: Buttons - Small/Colored

Output

Code


<button type="button" class="btn btn-danger btn-sm">I'm a small button</button>
<button type="button" class="btn btn-success btn-sm">I'm a small button</button>
<button type="button" class="btn btn-info btn-sm">I'm a small button</button>
<button type="button" class="btn btn-warning btn-sm">I'm a small button</button>

Element name: Buttons - Extra Small/Colored

Output

Code


<button type="button" class="btn btn-danger btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-success btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-info btn-xm">I'm a x-small button</button>
<button type="button" class="btn btn-warning btn-xm">I'm a x-small button</button>

Element name: Buttons Style v2 - Bordered

Element name: Buttons - Big/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-success btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-info btn-lg">I'm a big button</button>
<button type="button" class="btn bordered btn-warning btn-lg">I'm a big button</button>

Element name: Buttons - Normal/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger">I'm a normal button</button>
<button type="button" class="btn bordered btn-success">I'm a normal button</button>
<button type="button" class="btn bordered btn-info">I'm a normal button</button>
<button type="button" class="btn bordered btn-warning">I'm a normal button</button>

Element name: Buttons - Small/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-success btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-info btn-sm">I'm a small button</button>
<button type="button" class="btn bordered btn-warning btn-sm">I'm a small button</button>

Element name: Buttons - Extra Small/Bordered

Output

Code


<button type="button" class="btn bordered btn-danger btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-success btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-info btn-xm">I'm a x-small button</button>
<button type="button" class="btn bordered btn-warning btn-xm">I'm a x-small button</button>

Element name: Label badges

Output

Code


<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Element name: Badges

Output

Code


<button class="btn btn-default" type="button">
  Badge message <span class="badge">6</span>
</button>
<button class="btn btn-primary" type="button">
  Badge message <span class="badge">33</span>
</button>
<button class="btn btn-success" type="button">
  Badge message <span class="badge">3</span>
</button>
<button class="btn btn-info" type="button">
  Badge message <span class="badge">4</span>
</button>
<button class="btn btn-warning" type="button">
  Badge message <span class="badge">14</span>
</button>
<button class="btn btn-danger" type="button">
  Badge message <span class="badge">44</span>
</button>

Element name: Alerts

Output

Code


<h3>Simple alerts</h3>
<div class="row">
    <div class="col-md-3">
        <div role="alert" class="alert alert-success">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-info">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-warning">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-danger">
            <strong>Well done!</strong> You successfully read this important alert message.
        </div>
    </div>
</div>

<h3>Dismissible alerts</h3>
<div class="row">
    <div class="col-md-3">
        <div role="alert" class="alert alert-success">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.  
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-info">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.  
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-warning">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.                                    
        </div>
    </div>
    <div class="col-md-3">
        <div role="alert" class="alert alert-danger">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <strong>Nice!</strong> You successfully read <a class="alert-link" href="#">this important alert message</a>.
        </div>
    </div>
</div>

Element name: Progress bars

Element name: Progress bars - Without label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

Element name: Progress bars - With label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        20% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        30% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        50% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        70% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        80% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        90% Complete
    </div>
</div>

Element name: Progress bars - Striped - without label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

Element name: Progress bars - Striped - with label

Output

Code


<div class="progress">
    <div class="progress-bar progress-bar-default progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%;">
        20% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        30% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;">
        50% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
        70% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        80% Complete
    </div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">
        90% Complete
    </div>
</div>

Element name: Grid image blocks

Output

Code


<div class="row">
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
    <div class="col-md-3"><img class="grid-img img-rounded" src="img/blog-posts/600x440/25.jpg" alt=""></div>
</div>

Element name: Text alignment

Output

Code


<div class="row">
    <div class="col-md-3">
        <h3>Text left</h3>
        <p class="text-left">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text center</h3>
        <p class="text-center">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text right</h3>
        <p class="text-right">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
    <div class="col-md-3">
        <h3>Text justify</h3>
        <p class="text-justify">Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</p>
    </div>
</div>

Element name: Table - simple

Output

Code


<h3>Simple table</h3>
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

Element name: Table - simple

Output

Code


<h3>Bordered table</h3>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            </tr>
        <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
        </tr>
    </tbody>
</table>

Element name: Responsive Videos

Output

Code


<div class="embed-responsive embed-responsive-16by9">
    <iframe allowfullscreen="" src="//www.youtube.com/embed/JGXi_9A__Vc" class="embed-responsive-item"></iframe>
</div> 

Element name: Sidebar: Tags

Output

Code


<!-- Widget: Tag Cloud -->
<aside class="widget widget_tag_cloud">
    <h3 class="widget-title">Tag cloud</h3>
    <div class="tagcloud">
        <a title="1 topic" href="#">blog</a>
        <a title="1 topic" href="#">post</a>
        <a title="1 topic" href="#">multi purpose</a>
        <a title="1 topic" href="#">web design</a>
        <a title="1 topic" href="#">creative</a>
        <a title="1 topic" href="#">isotope</a>
        <a title="1 topic" href="#">masonry</a>
        <a title="1 topic" href="#">infinite</a>
        <a title="1 topic" href="#">scroll</a>
        <a title="1 topic" href="#">retina</a>
        <a title="1 topic" href="#">themeforest</a>
    </div>
</aside>

Element name: Sidebar: Categories

Output

Code


<!-- Widget: Categories -->
<aside class="widget widget_categories">
    <h3 class="widget-title">Categories</h3>
    <ul class="">
        <li class="cat-item">
            <a href="category.html">Sky diving</a>
        </li>
        <li class="cat-item">
            <a href="category.html">Category2</a>
        </li>
        <li class="cat-item">
            <a href="category.html">Category3</a>
        </li>
    </ul>
</aside>

Element name: Sidebar: Social icons

Output

Code


<!-- Widget: Social Media Widget -->
<aside class="widget widget_social_links">
    <h3 class="widget-title">Follow me on:</h3>
    <div class="social_links">
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Facebook">
            <i class="fa fa-facebook"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Dribbble">
            <i class="fa fa-dribbble"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Stumbleupon">
            <i class="fa fa-stumbleupon"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="LinkedIn">
            <i class="fa fa-linkedin"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Instagram">
            <i class="fa fa-instagram"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Google+">
            <i class="fa fa-google-plus"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Twitter">
            <i class="fa fa-twitter"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="RSS">
            <i class="fa fa-rss"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Tumblr">
            <i class="fa fa-tumblr"></i>
        </a>
        <a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Lastfm">
            <i class="fa fa-lastfm"></i>
        </a>
    </div>
</aside>

Element name: Sidebar: Flickr feed

Output

Code


<!-- Widget: Flickr feed -->
<aside class="widget widget_flickr">
    <h3 class="widget-title">Flickr feed</h3>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_1.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_2.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_3.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="">
            <img width="70" height="70" src="img/flickr/flickr_4.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_5.png" alt="A photo on Flickr" title="">
        </a>
    </div>
    <div class="flickr_badge_image">
        <a href="#">
            <img width="70" height="70" src="img/flickr/flickr_6.png" alt="A photo on Flickr" title="">
        </a>
    </div>
</aside>

Element name: Sidebar: Search for posts widget

Output

Code


<!-- Widget: Search for posts -->
<aside class="widget widget_search">
    <h3 class="widget-title">Search for posts</h3>
    <form role="search" method="get" class="search-form">
        <label>
            <input type="search" class="search-field form-control" placeholder="Search …" value="" name="s" title="Search for:">
        </label>
    </form>
</aside>

Element name: Sidebar: text widget

Output

Code


<!-- Widget: Text widget -->
<aside class="widget widget_text">
    <h3 class="widget-title">Text widget</h3>
    <div class="textwidget">Our greatest weakness lies in giving up. The most certain way to succeed is always to try just one more time.</div>
</aside>

Element name: Dropcaps

Output

Code


<p><span class="dropcap rose">S</span>Expedite maximize quality e-services after cutting-edge e-markets. Dramatically expedite viral systems without ethical platforms. Competently innovate goal-oriented action items for standardized internal or "organic" sources. Distinctively empower cross functional partnerships and open-source meta-services. Globally expedite unique experiences without magnetic paradigms.</p>

Element name: Text highlight

Output

Code


<p>Continually mesh scalable ideas rather than innovative niche markets. Efficiently matrix worldwide initiatives via proactive results. Authoritatively parallel task cooperative infomediaries vis-a-vis prospective convergence. Completely <span class="highlighting-text rose">this text is highlighted</span> and multifunctional e-business. Intrinsicly parallel task intermandated internal or "organic" sources rather than front-end infomediaries.</p>

Element name: Paragraphs with right aligned image

Output

Code


<h4>Paragraphs with right aligned image</h4>
<img class="pull-right" src="img/blog-posts/post-400px.jpg" alt=""><p>Synergistically customize economically sound human capital via inexpensive infrastructures. Professionally grow long-term high-impact synergy vis-a-vis cross-unit niche markets. Professionally simplify fully researched networks after fully tested process improvements. Progressively pursue plug-and-play alignments after fully tested paradigms. Assertively leverage existing standards compliant solutions rather than maintainable core competencies.</p>


Element name: Paragraphs with left aligned image

Output

Code


<h4>Paragraphs with left aligned image</h4>
<img class="pull-left" src="img/blog-posts/post-400px.jpg" alt=""><p>Synergistically customize economically sound human capital via inexpensive infrastructures. Professionally grow long-term high-impact synergy vis-a-vis cross-unit niche markets. Professionally simplify fully researched networks after fully tested process improvements. Progressively pursue plug-and-play alignments after fully tested paradigms. Assertively leverage existing standards compliant solutions rather than maintainable core competencies.</p>

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

  1. animate.css - Animate CSS file - contains animations;
  2. styles.css - Main CSS file;
  3. bootstrap.min.css - Boostrap Minified CSS;
  4. responsive.css - Responsive stylesheet layout CSS;
  5. owl.carousel.css - OWL Carousel main CSS;
  6. owl.transitions.css - OWL Transitions;
  7. swipebox.css - Popup Gallery CSS;
  8. YTPlayer.css - HTML YouTube player CSS;
  9. font-awesome.min.css - Font-awesome CSS;
  10. simple-line-icons.css - Simple line icons CSS;

Fundraising Template comes with Google Maps integrated in footer area of homepage.

As of June 2016, Google has issued a new update to the Google Maps APIs Standard Plan. In the new update, Google no longer supports keyless access (any request that doesn’t include an API Key) and has made all future product updates only available for requests made with an API Key. Also included in this update are functionality and performance enhancements. To read Google’s official statement, please read this article.

To use this feature generate a Google Maps API KEY and set it on contact.html:

To change the receiver email address of the site follow these steps:

This template is heavili loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

  1. bootstrap.min.js - Bootstrap JS
  2. bootstrap-transition.js - Bootstrap transition JS
  3. classie.js - Classie JS
  4. custom.js - AMAEZI's custom scripts
  5. fakeLoader.min.js - Fake page loader
  6. gmaps-v3.js - Google Maps V3
  7. jquery.custom-scrollbar.min.js - Custom scroll bar JS
  8. jquery.form.js - jQuery FORM
  9. jquery.ketchup.all.min.js - jQuery form validation
  10. jquery.infinitescroll.js - jQuery infinite scroll
  11. jquery.validate.min.js - jQuery form validation
  12. jquery.min.js - jQuery
  13. jquery.sticky.js - jQuery Sticky
  14. jquery.validate.min.js - jQuery Validate
  15. masonry.pkgd.min.js - Masonry JS
  16. modernizr.custom.js - Modernizr custom JS
  17. owl.carousel.min.js - OWL carousel
  18. scrollIt.min.js - scrollIt
  19. search-form.js - Search form JS
All JS functions related to the theme content management are placed in custom.js or inline in the HTML files if required. The custom.js file is responsible for every custom script running on the template.

 

 

 

We've used the following images, icons or other files as listed.

All credits for our fonts goes to

All credits for our images goes to