<!DOCTYPE html>
<html lang="en">
  <head>
	   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	   <!--[if gt IE 8]><!-->
	   <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
	   <!--<![endif]-->
       <title>S.H.O.P Students Helping Organization for Poor</title>
       <link rel="stylesheet" href="css/style.css"/>
	   <link rel="stylesheet" href="css/vex-theme-flat-attack.css" />
	   <link rel="stylesheet" href="css/jquery.bxslider.css" />
	  
	   <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	   <script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
	   
	   
       <link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>	
	   <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
	   <link href='http://fonts.googleapis.com/css?family=Goudy+Bookletter+1911' rel='stylesheet' type='text/css'>
	   <link rel="icon" type="image/png" href="img/favico.jpg">
	<script>
   
<!----- JQUERY FOR SLIDING NAVIGATION --->   
$(document).ready(function() {
  $('a[href*=#]').each(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
       if ($target) {
         var targetOffset = $target.offset().top;

<!----- JQUERY CLICK FUNCTION REMOVE AND ADD CLASS "ACTIVE" + SCROLL TO THE #DIV--->   
         $(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
           $('html, body').animate({scrollTop: targetOffset}, 1000);
           return false;
         });
      }
    }
  });

});


</script>

<!-- Custom Defined scripts -->


<!-- Style sheets to be attached via link styles -->

<link rel="stylesheet" href="css/vex.css" />
<link rel="stylesheet" href="css/vex-theme-os.css" />
<link rel="stylesheet" href="css/pure-min.css"/>
<script src="js/vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<script src="js/app.js"></script>
 </head> 
	
<body onload="fourthBday()">
<!----- LINK BACK TO THE TUTORIAL---> 
<!-- 
<div id="demo_back">
<a href="#" class="lpanel"> << BACK TO THE 1STWEBDESIGN ARTICLE </a>
<a href="#" class="rpanel"> NEXT DEMO >> </a>
</div>
-->

<!----- HEADER START--->   
<header id="header">
<div class="content">
<div id="logo"><a href=""> S.H.O.P Students Helping Organization for Poor </a></div>

<nav id="nav">
	<ul>
		<li><a href="#slide1" class="active" title="Next Section" >About</a></li>
		<li><a href="#slide2" title="Next Section">Organization</a></li>
		<li><a href="#slide3" title="Next Section">Events</a></li>
		<li><a  href="#slide4" title="Next Section">Photos</a></li>
		<li><a href="#slide5" title="Next Section">Contact us </a></li>
		<li><a href="#slide6" title="Next Section">UpComing Events </a></li>
	</ul>
</nav>
</div>
</header>	
<!----- HEADER END--->   
<script src="js/jquery.slides.min.js"></script>
<!----- SLIDES START --->   	
	<div id="slide1">
		<div class="content">
			<div id="christmas_tree"> </div>
			<div id="snowflakes1"></div>
			<div id="snowflakes2"></div>
            <h2>Hello</h2>
		    <h1>What do we do ... </h1>
		    <div id="divider1"> </div><!--divider changed to divider one-->
		     <h3>We are a group of individuals who help poor and needy.</h3>
          
	       <!--<div id="new_year"> </div> -->
		</div> 
		<div id="ribbon"></div>
    </div> 

	<div id="slide2">
		<div class="content" >
            <div class="quotes_container">
				<h3 class="quotes">“The man behind the idea of SHOP . We follow the lead of this guy. Organizing, co-ordinating, Planning , Execution are his traits ”</h3>
				<img src="img/dharma_1.jpg" align="left"/> <h4 class="author_name_gray">Dharma Teja </h4>
			</div> 
		</div> 
    </div> 
	
	
   <div id="slide3">
		<div class="content">
			   <div class="quotes_container">
		       <h3 class="quotes">“COMING SOON.”  </h3>
		      <!--<img src="img/norman.png" align="left"/> <h4 class="author_name_white">Norman Vincent Peale </h4>-->
		    </div> 
		</div> 
    </div> 
	
	
	<div id="slide4">
		<div class="content">
              <div class="quotes_container">
				<!--<h3 class="quotes"><font color="white">“COMING SOON”</font></h3>
				<img src="img/dr-seuss.png" align="left"/> <h4 class="author_name_gray">Dr. Seuss </h4>-->
				<h3 class="quotes"><a href= "pics.html">“CLICK HERE to See our Work”</a> </h3>
			</div> 
		</div>		
    </div> 
	
	
	<div id="slide5">
		<div class="content">
           <div class="quotes_container">
		    <h3 class="quotes"><a href="https://www.facebook.com/studenthelping.organisationpoor?fref=ts">“OUR FACEBOOK Page ! Visit us to Know about out work”</a> </h3>
		    <!--<img src="img/bob.png" align="left"/> <h4 class="author_name_white">Bob Hope </h4>-->
		  </div> 
		
		</div> 

    </div> 
	<div id="slide6">
		<div class="content">
           <div class="quotes_container">
		    <h3 class="quotes">“ Future events will be notified.” </h3>
		    <!--<img src="img/bob.png" align="left"/> <h4 class="author_name_white">Bob Hope </h4>-->
		  </div> 
		</div> 
		<div id="copyright">&copy; copyrights preserved by Bharadwaj Turlapati 2015!</div>  
    </div> 
	
<!----- SLIDES END --->

</body>

</html>
