Skip to content

Instantly share code, notes, and snippets.

@romulostorel

romulostorel/gist:03529551cf4c059162a3

Created February 3, 2015 14:18
Show Gist options
  • Save romulostorel/03529551cf4c059162a3 to your computer and use it in GitHub Desktop.
Save romulostorel/03529551cf4c059162a3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Virtue is Charity Fundraising HTML5 Template. Welcome to Child Charity Fundraising HTML5 Template for Charity organization and NGO companies.">
<title>Virtue | Charity Fundraising HTML5 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/helper.css" rel="stylesheet">
<link href="css/pe-icon-line.css" rel="stylesheet">
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="css/owl.theme.css">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<!-- Include js plugin -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--[if IE 9]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 10]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
<!--[if IE 11]>
<link href="css/ie.css" rel="stylesheet">
<![endif]-->
</head>
<body>
<!-- header section -->
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="logo"></a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html" class="active">HOME</a></li>
<li class="dropdown"> <a href="program.html" class="dropdown-toggle" data-toggle="dropdown">Programs <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="program.html">Program </a></li>
<li><a href="program-detail.html">Program Details</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Causes <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="index_causes.html">Causes Home </a></li>
<li><a href="causes-detail.html">Causes Details</a></li>
</ul>
</li>
<li class="dropdown"> <a href="event.html" class="dropdown-toggle" data-toggle="dropdown">Event<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="event-list-style.html">Event list style</a></li>
<li><a href="events-grid-style.html">Event grid style</a></li>
<li><a href="event-detail.html">Event Details</a></li>
</ul>
</li>
<li class="dropdown"> <a href="blog.html" class="dropdown-toggle" data-toggle="dropdown">Blog<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog.html">Blog </a></li>
<li><a href="blog-detail.html">Blog Details</a></li>
</ul>
</li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="about-us.html">About us</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="team-detail.html">Team Detail</a></li>
<li><a href="volunteer.html">Become Volunteer</a></li>
<li><a href="donate.html">Donate</a></li>
<li><a href="faq.html">FAQ's</a></li>
<li><a href="our-sponser.html">Our Sponsor</a></li>
<li><a href="shortcode-alerts.html">Shortcode Alerts</a></li>
<li><a href="shortcode-columns.html">Shortcode Columns</a></li>
<li><a href="shortcode-tab.html">Shortcode Tab</a></li>
<li><a href="shortcode-typography.html">Shortcode Typography</a></li>
<li><a href="shortcode-list.html">Shortcode List</a></li>
<li><a href="404error.html">404</a></li>
</ul>
</li>
<li><a href="contact-us.html">Contact us </a></li>
<li class="search">
<input type="text" class="" id="top-search" placeholder="Search here">
<a href="#"><i class="fa fa-search fa-1x"> </i> </a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
</div>
<!-- header section end -->
<!-- banner start -->
<div class="banner">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"> <img src="images/bnr3.jpg" alt="Charity banner template">
<div class="carousel-caption form-box col-md-3">
<div class="sidebar-blk bnr-donate-box">
<div class="you-help ">
<h1>Give a Donate</h1>
<p>Invest in future cures for some of life's most devasrating diseases.</p>
<div>
<label>
<input type="radio" name="name" id="radio-0" value="1">
$10 a month</label>
</div>
<div>
<label>
<input type="radio" name="name" id="radio-1" value="2">
One time donation</label>
</div>
</div>
<form class="" role="form">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="How much you want donate">
<button type="submit" class="btn btn-default btn-block btn-yellow">Donate now</button>
</div>
</form>
</div>
</div>
</div>
<div class="item"> <img src="images/bnr-4.jpg" alt="Charity">
<div class="carousel-caption col-md-3">
<h1>GIVE YOUR <br>
HELPING HAND <br>
TO THOSE <br>
WHO NEED IT! </h1>
<p>Many desktop publishing packages <br>
and web page editors now <br>
use Lorem Ipsum as uncover . </p>
<a href="#" class="btn btn-default btn-yellow">Donate vie paypal</a> <a href="#" class="btn btn-default btn-yellow">Learn more</a> </div>
</div>
<div class="item"> <img src="images/bnr-2.jpg" alt="Charity template">
<div class="carousel-caption col-md-3"><!--banner caption start-->
<h1>Save the <br>
Children<br>
invests in <br>
childhood </h1>
<p>Many desktop publishing packages <br>
and web page editors now <br>
use Lorem Ipsum as uncover . </p>
<a href="#" class="btn btn-default btn-yellow">Donate vie paypal</a> <a href="#" class="btn btn-default btn-yellow">Learn more</a> </div>
<!-- banner cpation close-->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div>
</div>
<!-- banner close -->
<!-- about start -->
<div class="about">
<div class="container">
<div class="donate-info">
<div class="row">
<div class="col-md-4">
<div class="donate-box"><!-- donate box start-->
<h2>SERVED OVER </h2>
<strong>760,000</strong>
<h2>CHILDREN</h2>
<h2>IN 23 COUNTRIES.</h2>
<a href="#" class="btn btn-default btn-donate">View Our Programs</a> </div>
<!-- donate box close-->
</div>
<div class="col-md-offset-1 col-md-7"><!-- about info-->
<h1>Who we are ? <br>
Organization You Can Trust</h1>
<p class="lead-font">Nullam velit metus tristique id purus eget consequat congue loreml orem ipsum dolor sit amet consectetur adipiscing elit. Praesent vestibulum aenean noummy endrerit mauris. </p>
<p>Nullam velit metus tristique id purus eget consequat congue loreml orem ipsum dolor sit amet consectetur adipiscing elit. Praesent vesti Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus. </p>
<a href="about-us.html" class="btn btn-default btn-yellow">Learn more</a> </div>
<!--about info close-->
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="blk"> <i class="fa fa-bell icon-size"></i>
<h2 class="item-title">Our Mission</h2>
<p> Donec vel sollicitudin nisl, quis dignissim elit. Nunc laoreet nisi non odio tempus, at .</p>
</div>
</div>
<div class="col-md-3">
<div class="blk"><i class="fa fa-file-text icon-size"></i>
<h2 class="item-title">Education</h2>
<p>Sed mattis dui ut ultrices sodales. Integer lacinia lectus quis nnon accumsan dui molestie</p>
</div>
</div>
<div class="col-md-3">
<div class="blk"><i class="fa fa-life-ring icon-size"></i>
<h2 class="item-title">Help &amp; support</h2>
<p>The arrangement of type involves the selection of typefaces point size line length leading. </p>
</div>
</div>
<div class="col-md-3">
<div class="blk"><i class="fa fa-money icon-size"></i>
<h2 class="item-title">Make Donations</h2>
<p>Typography is the art and technique of arranging type in order to make language visible.</p>
</div>
</div>
</div>
</div>
</div>
<!-- about close -->
<!-- Service start -->
<div class="service">
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>Helps children around the world</h1>
<p class="lead-font">Nullam velit metus tristique id purus eget consequat congue loreml orem ipsum dolor sit amet consectetur adipiscing elit. Praesent vestibulum aenean noummy endrerit mauris. </p>
</div>
</div>
<div class=" service-blk">
<div class="row">
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Adopt a Child</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla orci, laoreet id condimentum vitae.</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Children in Care</a></h2>
<p>Donec ac adipiscing lorem. Praesent sit amet ipsum quam suspendisse consectetur euismod lacus.</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Disabled Children</a></h2>
<p> Integer accumsan fermentum leo, ac vehicula magna imperdiet vel. Vestibulum adipiscing aliquet imperdiet.</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Young People</a></h2>
<p>Donec mollis sem massa, nec posuere nisl convallis sed. Vestibulum ornare massa id diam imperdiet dapibus</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Family Support</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla orci, laoreet id condimentum vitae.</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
<div class="col-md-4">
<div class="blk">
<h2><a href="#">Our Schools</a></h2>
<p>Donec ac adipiscing lorem. Praesent sit amet ipsum quam suspendisse consectetur euismod lacus.</p>
<a href="#" class="btn btn-default btn-yellow">read more</a></div>
</div>
</div>
</div>
</div>
</div>
<!-- Service close -->
<!-- things section start -->
<div class="things">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="blk">
<h1>Things thats
make us
different.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nulla ndimentum vitae. </p>
</div>
</div>
<div class="col-md-3">
<div class="blk text-center">
<div class="yellow-blk">
<h2 class="heading">We are <br>
the charity <br>
World.</h2>
<i class="pe pe-li-web pe-4x pe-icon"></i></div>
</div>
</div>
<div class="col-md-3">
<div class="blk text-center">
<div class="yellow-blk">
<h2 class="heading">97% Our <br>
Promise <br>
complete</h2>
<i class="pe pe-li-graph pe-4x pe-icon"></i></div>
</div>
</div>
<div class="col-md-3">
<div class="blk text-center">
<div class="yellow-blk">
<h2 class="heading">129 Million <br>
Children <br>
saves life</h2>
<i class="pe pe-li-user pe-4x pe-icon"></i> <i class="pe pe-li-user pe-4x pe-icon"></i> <i class="pe pe-li-user pe-4x pe-icon"></i></div>
</div>
</div>
</div>
</div>
</div>
<!-- things section cose -->
<!-- news section -->
<div class="news">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Latest charity news </h1>
</div>
</div>
<div class="row ">
<div class="col-md-3">
<div class="blk">
<div class="pic"><a href="#"><img src="images/new-pic1.jpg" class="img-responsive" alt=""></a></div>
<h2><a href="#">Lorem ipsum dolor </a> </h2>
<div class="meta"> <span class="post-date"><i class="fa fa-calendar"></i> June 27, 2014</span> <span class="category"><i class="fa fa-tag"></i> POSTED IN <a href="#">charity</a></span> </div>
<p>Donec mollis sem massa, nec posuere nisl convallis sed diam imperdiet dapibus.</p>
</div>
</div>
<div class="col-md-3">
<div class="blk">
<div class="pic"><a href="#"><img src="images/new-pic2.jpg" class="img-responsive" alt=""></a></div>
<h2><a href="#">Integer consequat </a> </h2>
<div class="meta"> <span class="post-date"><i class="fa fa-calendar"></i> June 27, 2014</span> <span class="category"><i class="fa fa-tag"></i> POSTED IN <a href="#">charity</a></span> </div>
<p>Nulla facilisv ivamus acempus sit amet enim uspendisse at semper ipsum. </p>
</div>
</div>
<div class="col-md-3">
<div class="blk">
<div class="pic"><a href="/"><img src="images/new-pic3.jpg" class="img-responsive" alt=""></a></div>
<h2><a href="#">Maecenas luctus nunc </a> </h2>
<div class="meta"> <span class="post-date"><i class="fa fa-calendar"></i> June 27, 2014</span> <span class="category"><i class="fa fa-tag"></i> POSTED IN <a href="#">charity</a></span> </div>
<p>Suspendisse at semper ipsuuspendisse sagittis diam a massa viverra .</p>
</div>
</div>
<div class="col-md-3">
<div class="blk">
<div class="pic"><a href="/"><img src="images/new-pic4.jpg" class="img-responsive" alt=""></a></div>
<h2><a href="#">Donec velurna mollicitudin </a> </h2>
<div class="meta"> <span class="post-date"><i class="fa fa-calendar"></i> June 27, 2014</span> <span class="category"><i class="fa fa-tag"></i> POSTED IN <a href="#">charity</a></span> </div>
<p>Vivamus fermentum lorem varius ipsum at pulvinar iaculis elit lacus conva vulputate .</p>
</div>
</div>
</div>
</div>
</div>
<!-- news section coose -->
<!-- testimonials section -->
<div class="testimonials">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<h1>Success Story</h1>
<div id="owl-demo-testimonial" class="testimonials-ct">
<div class="item">
<p><strong>“</strong>Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus.<strong>”</strong></p>
<span class="name">- jhone N. smith ( CEO - Charity Mission )</span> </div>
<div class="item">
<p><strong>"</strong>Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus.<strong>"</strong></p>
<span class="name">- jhone N. smith ( CEO - Charity Mission )</span> </div>
<div class="item">
<p><strong>"</strong>Cum sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus sociis natoque penatibus et magnis dis parturient montes ascetur ridiculus mus.<strong>"</strong></p>
<span class="name">- jhone N. smith ( CEO - Charity Mission )</span> </div>
</div>
</div>
</div>
</div>
</div>
<!-- testimonials section close -->
<!-- footer section -->
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-4 ">
<h2>Virtue Charity Template</h2>
<p> Nulla facilisi. Vivamus lacus libero, ultrices non ullamcorper ac, tempus sit amet enim. Suspendisse at semper ipsum. </p>
<ul class="list-style">
<li>169 Nguyen Building, Ngoc Vu Street, <br>
Hanoi, Vietnam .</li>
<li><i class="fa fa-phone-square"></i> +84-123 456 789</li>
<li><i class="fa fa-envelope"></i> [email protected]</li>
<li>Registered charity number 123456.</li>
</ul>
</div>
<div class="col-md-4 help"> <!-- help start -->
<h2> How you can help ? </h2>
<ul class="list-style">
<li><a href="#">Donate</a></li>
<li><a href="#">Become a Volunteer</a></li>
<li><a href="#">Join our programm</a></li>
<li><a href="#">Contact us</a></li>
<li><a href="#">Gift for child</a></li>
</ul>
</div>
<!-- help close -->
<div class="col-md-4 news-letter"> <!-- news-letter start -->
<h2> Newsletter</h2>
<p> Nulla facilisi. Vivamus lacus libero, ultrices non ullamcorper ac, tempus sit amet enim. Suspendisse at semper ipsum. </p>
<div class="input-group">
<input type="text" class="form-control" placeholder="enter email addess">
<span class="input-group-btn">
<button class="btn btn-default btn-yellow" type="button">Go!</button>
</span> </div>
<!-- /input-group -->
</div>
<!-- news-letter close -->
</div>
</div>
</div>
<!-- footer section ending -->
<!-- sub-footer -->
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-md-10">
<p>© 2014 virtue. All rights reserved. | Terms and conditions </p>
</div>
<div class="col-md-2"> <a href="#"><i class="fa fa-facebook-square"></i></a> <a href="#"><i class="fa fa-twitter-square"></i></a> <a href="#"><i class="fa fa-flickr"></i></a> <a href="#"><i class="fa fa-youtube-square"></i></a> </div>
</div>
</div>
</div>
<!-- sub-footer ending -->
<!-- section -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.9.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/script.js"></script>
<script src="js/owl.carousel.js"></script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment