index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Coding Club-Let us rock!</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/handlebars-v4.0.5.js"></script>
<script type="text/javascript" src="js/data_home.js"></script>
<script type="text/javascript" src="js/data_teams.js"></script>
<script type="text/javascript" src="js/toRun.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/style.css" type="text/css" rel="stylesheet"> 

</head>

<body>
<header>
	<nav class="navbar navbar-inverse navbar-fixed-top">
          <div class="container-fluid">
                    <div class="navbar-header">
                          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                          </button>
                          <a class="navbar-brand home" href="" id="home">Coding Club</a>
                    </div>
                    <div class="collapse navbar-collapse" id="myNavbar">
                          <ul class="nav navbar-nav">
                            <li class="active home"><a href="">Home</a></li>
                            <li class="dropdown"  id="teams_id">
                                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Teams
                                  <span class="caret"></span>
                                  </a>
                                  <ul class="dropdown-menu">
                                    <li><a class="teams" data-id="0" href="#">Web Dev</a></li>
                                    <li><a class="teams" data-id="1" href="#">Competitive Coding</a></li>
                                    <li><a class="teams" data-id="2" href="#">Open Source</a></li>
                                    <li><a class="teams" data-id="3" href="#">Data Science</a></li>
        						  </ul>
       						 </li>
                            
                            <li id="database" class=""><a  href="#">DataBase</a></li>
                          </ul>
                          
                    </div>
          </div>
	</nav>
</header>
<ul id="myTeams" class="nav nav-tabs nav-justified">
        <li  class="teams" data-id="0"  href="#"><a  data-toggle="tab">Web Development</a>
        </li>
        <li  class="teams" data-id="1"  href="#"><a data-toggle="tab" >Competitive Coding</a>
        </li>
        <li class="teams" data-id="2"  href="#"><a  data-toggle="tab">Open Source</a>
        </li>
        <li class="teams" data-id="3"  href="#"><a data-toggle="tab" >Data Science</a>
        </li>
</ul>

<section>

</section>

<hr>
<footer>
<div class="container">
	
        <a target="_blank" href="https://web.facebook.com/codingclubnits"><div class="facebook-hover social-slide"></div></a>
        <a target="_blank" href="https://github.com/CCNITSilchar"><div><img class="github" src="img/github.png"></div></a>
    	<br>
        <div class="copy"> &copy; Coding Club,NITS</div>
</div>
</footer>






<!--home Content-->
<script type="text/x-handlebars-template" id="home_template">
<div class="container">
   <div class="row">  
       <div id="myCarousel" class="carousel slide" data-ride="carousel">
              <!-- Indicators -->
              <ol class="carousel-indicators">
              	{{#each main_img}}
                <li data-target="#myCarousel" data-slide-to="{{@index}}" class="{{#if @first}}active{{/if}}">
				</li>
               	{{/each}}
               
              </ol>
            
              <!-- Wrapper for slides -->
         	<div class="carousel-inner" role="listbox">
            {{#each main_img}}
                <div class="item {{#if @first}}active{{/if}}">
                  <img src="{{src}}" alt="{{caption}}" width="100%">
                  <div class="carousel-caption">
                    <h3>{{caption}}</h3>
                    <p>{{description}}</p>
                  </div>
                </div>
            {{/each}}
            </div>
          
        
          <!-- Left and right controls -->
          <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
       </div>
	</div>
</div> 
  
    <!--CCNITS logo-->
    <div class="row">   
	   <img src="img/ccnits.jpg">
	</div>
   
	<!--teams description-->
	   <div class="container">
	   
        <div class="row">
        {{#each team}}
		<div class="col-md-3">	
         <div class="thumbnail" ><img src="{{team_src}}" >
			<h3>{{team_caption}}</h3>
            {{team_description}}
            <a class="btn btn-primary btn-block teams" data-id="{{@index}}">MORE</a>
         </div>
		</div> 
        {{/each}}    
        </div>    
       </div>
	

</script>
    
 
 
 <!--Teams content-->   
<script type="text/x-handlebars-template" id="teams_template">	
<h1>{{team_caption}}</h1>



<!--Hall of Fame-hof-->
	<div class="visible-lg">
    <div class="well">
    {{#each hof}}
		<div class="col-md-4">
        	<div class="panel panel-default">
                  <div class="panel-body"><img class="img img-circle img-responsive" src="{{hof_src}}"></div>
                  <div class="panel-footer">{{name}}</div>
			 </div>
        </div>
    {{/each}}  
        <h2>Hall Of Fame</h2>
    </div>    
    </div>


<a type="button" 
        data-toggle="collapse" 
        data-target="#filters" 
        class="visible-xs visible-sm visible-md well collapsed">
        <h2>Hall of Fame</h2>
</a>

<div id="filters" class="collapse">
	<div class="row visible-xs visible-sm visible-md">
    <div class="well">
		{{#each hof}}
		<div class="col-md-4">
        	<div class="panel panel-default">
                  <div class="panel-body"><img class="img img-circle img-responsive" src="{{hof_src}}"></div>
                  <div class="panel-footer">{{name}}</div>
			 </div>
        </div>
       {{/each}}  
        
       
    </div>    
    </div>
</div>

<!--Upcoming Events-->
<h2>Upcoming {{item}}</h2>

<div class="list-group">
{{#each u_array}}
  <a  class="list-group-item" href="#">{{u_item}}</a>
{{/each}}
</div>
<!--Onging Events-->
<h2>Ongoing {{item}}</h2>
{{#each o_array}}
  <a  class="list-group-item" href="#">{{o_item}}</a>
{{/each}}  
</script>



<!--database content-->
<script type="text/x-handlebars-template" id="database_template">
<div class="container">
  <div class="jumbotron">
    <h1>DataBase</h1>
    <p>Want to go to coding competition but have no teams?<br>
	   Want to sharp up your skills but you do not have time to manage entire project?<br>
	   Want to start a project but need a data scientist or web developer?<br>
	   
        <h4>Features of DataBase</h4>
        <ul>
        	<li>You can choose who can see your project =.</li>
            <li>We show whether the student is free or not to help you.</li>
			<li>Offer projects to students anonomously</li>
            <li>Invite them to form teams</li> 
            <li>Students can search from students by skills,language,certificates,competition they want to attend etc</li>
        </ul>
        
    </p>
  </div>
  <a  class="btn btn-primary btn-block teams">Register your Project</a>
  <a  class="btn btn-info btn-block teams">Login as your Project</a>
  <hr>
  <a  class="btn btn-primary btn-block teams">Register as student</a>
  <a  class="btn btn-info btn-block teams">Login as student</a>
  
</div>



</script>
    
</body>
</html>