<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Guiding Stars SHG</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden; /* Prevent scroll on narrow devices */
}
body {
padding-top: 100px;
}
footer {
padding: 30px 0;
}
/*
* Custom styles
*/
.navbar-brand {
font-size: 24px;
}
.navbar-container {
padding: 20px 0 20px 0;
}
.navbar.navbar-fixed-top.fixed-theme {
background-color: #222;
border-color: #080808;
box-shadow: 0 0 5px rgba(0,0,0,.8);
}
.navbar-brand.fixed-theme {
font-size: 18px;
}
.navbar-container.fixed-theme {
padding: 0;
}
.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
transition: 0.8s;
-webkit-transition: 0.8s;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Fixed navbar -->
<nav id="header" class="navbar navbar-fixed-top">
<div id="header-container" class="container navbar-container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="brand" class="navbar-brand" href="https://www.facebook.com/Guidingstars.shg/?fref=ts">Guiding Stars SHG</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="https://www.facebook.com/Guidingstars.shg/?fref=ts">Our Facebook</a></li>
<li><a href="https://www.facebook.com/Guidingstars.shg/about/">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</nav><!-- /.navbar -->
<div class="container">
<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-12 col-sm-9">
<p class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
</p>
<div class="jumbotron">
<h1>Hello, Myanmar</h1>
<p>We warmly welcome to Guiding Stars SHG</p>
</div>
<div class="row">
<div class="col-xs-6 col-lg-4">
<h2>Goal</h2>
<p>MSM မ်ား၏ တန္းတူ အခြင့္အေရး ရရွိေအာင္ ေဆာင္ရြက္ေနတဲ့ CBO အဖြဲ႔အစည္း အျဖစ္ရပ္တည္လ်က္</p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Our Vision&Mission</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Future Plans</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Financial Reports</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risust. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Income Generation</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
<div class="col-xs-6 col-lg-4">
<h2>Member Collection</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
<p><a class="btn btn-default" href="#" role="button">Read More »</a></p>
</div><!--/.col-xs-6.col-lg-4-->
</div><!--/row-->
</div><!--/.col-xs-12.col-sm-9-->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
<div class="list-group">
<a href="#" class="list-group-item active">Partnership</a>
<a href="http://mbconaid.org/index.php/en/" class="list-group-item">MBCA</a>
<a href="https://www.burnet.edu.au/countries/2_myanmar_burma" class="list-group-item">Burnet Institute</a>
<a href="http://www.medecinsdumonde.org/fr/node/9260" class="list-group-item">MDM</a>
<a href="http://www.psi.org/country/myanmar/#about" class="list-group-item">PSI_Top Center</a>
<a href="http://www.lrcmyanmar.org/" class="list-group-item">Local Resource Center</a>
<a href="#" class="list-group-item active">Social Network</a>
<a href="https://www.facebook.com/" class="list-group-item">Facebook</a>
<a href="https://twitter.com/nickylay" class="list-group-item">Twitter</a>
<a href="https://account.microsoft.com/profile#/" class="list-group-item">Microsoft</a>
<a href="https://www.icloud.com/#" class="list-group-item">iCloud</a>
<a href="#" class="list-group-item active">Oppotunity in Yangon</a>
<a href="https://www.jobnet.com.mm/mm/jobs-in-myanmar" class="list-group-item">Job Net</a>
<a href="https://www.work.com.mm/?gclid=Cj0KEQjwg8i_BRCT9dHt5ZSGi90BEiQAItdjpLSuhzIm9TYWFGwBZo0eDVMn6IdehVq_yIJKGL1X1tYaAtXE8P8HAQ" class="list-group-item">Work.com.mm</a>
<a href="http://www.imyanmarhouse.com/login?m=7" class="list-group-item">iMyanmar House</a>
<a href="https://www.shweproperty.com/" class="list-group-item">Shweproperty</a>
</div>
</div><!--/.sidebar-offcanvas-->
</div><!--/row-->
<hr>
<footer>
<p>© Since 2011</p>
</footer>
</div><!--/.container-->
<script type="text/javascript">
$(document).ready(function(){
/**
* This object controls the nav bar. Implement the add and remove
* action over the elements of the nav bar that we want to change.
*
* @type {{flagAdd: boolean, elements: string[], add: Function, remove: Function}}
*/
var myNavBar = {
flagAdd: true,
elements: [],
init: function (elements) {
this.elements = elements;
},
add : function() {
if(this.flagAdd) {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className += " fixed-theme";
}
this.flagAdd = false;
}
},
remove: function() {
for(var i=0; i < this.elements.length; i++) {
document.getElementById(this.elements[i]).className =
document.getElementById(this.elements[i]).className.replace( /(?:^|\s)fixed-theme(?!\S)/g , '' );
}
this.flagAdd = true;
}
};
/**
* Init the object. Pass the object the array of elements
* that we want to change when the scroll goes down
*/
myNavBar.init( [
"header",
"header-container",
"brand"
]);
/**
* Function that manage the direction
* of the scroll
*/
function offSetManager(){
var yOffset = 0;
var currYOffSet = window.pageYOffset;
if(yOffset < currYOffSet) {
myNavBar.add();
}
else if(currYOffSet == yOffset){
myNavBar.remove();
}
}
/**
* bind to the document scroll detection
*/
window.onscroll = function(e) {
offSetManager();
}
/**
* We have to do a first detectation of offset because the page
* could be load with scroll down set.
*/
offSetManager();
});
</script>
</body>
</html>
