index.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="CNU UAS Team Website">
    <meta name="author" content="Jonah Lazar">

    <title>CNU UAS Team</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/landing-page.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- 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]-->

</head>

<body>

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
        <div class="container topnav">
            <!-- 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 topnav" href="#landing">CNU UAS Team</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" id="nav">
                    <li>
                        <a onclick="$('html,body').animate({scrollTop:$('#about').offset().top},2000);">About</a>
                    </li>
                    <li>
                        <a onclick="$('html,body').animate({scrollTop:$('#systems').offset().top},2000);">Systems</a>
                    </li>
                    <li>
                        <a onclick="$('html,body').animate({scrollTop:$('#sponsors').offset().top},2000);">Sponsors</a>
                    </li>
                    <li>
                        <a onclick="$('html,body').animate({scrollTop:$('#gallery').offset().top},2000);">Gallery</a>
                    </li>
                    <li>
                        <a onclick="$('html,body').animate({scrollTop:$('#contact').offset().top},2000);">Contact</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>


    <!-- Header -->
    <a name="landing"></a>
    <div class="intro-header" style="background-color: transparent">
        <div class="container" style="background-color: transparent">

            <div class="row">
                <div class="col-lg-12">
                    <div class="intro-message" style="opacity: 100%">
                        <h1>Unmanned Aerial Systems Team</h1>
                        <h5>of</h5>
                        <h3>Christopher Newport University</h3>
                        <hr class="intro-divider">
                        <ul class="list-inline intro-social-buttons">
                            <li>
                                <a href="https://twitter.com/CNUUAS" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                            </li>
                            <li>
                                <a href="https://github.com/CnuUasLab" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                            </li>
                            <li>
                                <a href="https://www.linkedin.com/groups?home=&gid=8274948&trk=anet_ug_hm" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.intro-header -->

    <!-- Page Content -->

    <a  name="about" id="about" style="height: 100px; display:block"></a>
    <div class="new-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" align="center">
                    <h1 class="page-heading">About Us</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="content-section-a">

        <div class="container">        
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Admin Team</h2>
                    <p class="lead">Meet Department #1. They do cool stuff that has to do with their department. Some of this stuff includes flying stuff, fixing stuff, and making stuff go boom.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Nigel.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Flight Operations Team</h2>
                    <p class="lead">Department #2 is even cooler than Department #1. They do some pretty awesome things that really help this team grow. The build things, fly things, and make things disappear. You go, Department #2!</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Austin.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Jeremy.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive bottom-prof-pic img-circle" src="/img/JuanNajera.JPG" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <div class="content-section-a">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Image Recognition Team</h2>
                    <p class="lead">Department #3 is the coolest of them all. They do the most awesome stuff, like design websites and write python servers that nobody needs. They also do some flying because, really, everyone does some flying.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/James.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Davis.JPG" alt="">
                        </div>
                        <div class="col-xs-12">
                            <img class="img-responsive bottom-prof-pic img-circle center-block" src="/img/Daniel.JPG" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Interface Team</h2>
                    <p class="lead">Department #2 is even cooler than Department #1. They do some pretty awesome things that really help this team grow. The build things, fly things, and make things disappear. You go, Department #2!</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Juan.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/David.JPG" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <div class="content-section-a">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Payload Team</h2>
                    <p class="lead">Department #3 is the coolest of them all. They do the most awesome stuff, like design websites and write python servers that nobody needs. They also do some flying because, really, everyone does some flying.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/AnhTuan.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Jake.JPG" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Team Advisors</h2>
                    <p class="lead">Department #2 is even cooler than Department #1. They do some pretty awesome things that really help this team grow. The build things, fly things, and make things disappear. You go, Department #2!</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <div class="row">
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/White.JPG" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive profile-pic img-circle" src="/img/Riedl.JPG" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <a  name="systems" id="systems"></a>
    <div class="new-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" align="center">
                    <h1 class="page-heading">Systems</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Quadcopters</h2>
                    <p class="lead">Flying is cool. Know what's cooler? Flying with quadcopters. Who doesn't love  four spinning plastic blades of death rotating at 10,000 rpm flying straight towards your face? I know I do. We have some awesome quadcopters.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <img class="img-responsive img-rounded" src="img/quadcopterfull.JPG" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Planes</h2>
                    <p class="lead">We don't just fly quadcopters; we fly actual planes too. They're unmanned, of course, but they're planes nonetheless. Actually the only thing we use in competitions are planes. Cool, right?</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/300.png/09f/fff" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <div class="content-section-a">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Radio Link</h2>
                    <p class="lead">I.... don't actually know what this is...</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/300.png/09f/fff" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Meshnets</h2>
                    <p class="lead">Something about making wifi networks over certain areas by flying up copters with WAPs on them. Controlled with Google maps. It's sick. Check it out, yo.</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <img class="img-responsive" src="http://placehold.it/300.png/09f/fff" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <a  name="sponsors" id="sponsors"></a>
    <div class="new-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" align="center">
                    <h1 class="page-heading">Sponsors</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Advanced Circuits</h2>
                    <p class="lead">This is a wonderful company that makes circuits. They don't make simple circuits, but they do make more complex circuits. Use them for all your complicated circuits needs.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">
                            <img class="img-responsive sponsor-pic" width="300" height="300" style="padding-top:50px" src="img/AdvCircuits.png" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">RK Auto</h2>
                    <p class="lead">I can only assume that RK Auto is an auto dealer. I don't actually know what the RK stands for, but for the purpose of this placeholder, I will assume it's for Ruth King. Go buy cars from Ruth King Auto.</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">
                            <img class="img-responsive center-block sponsor-pic" width="300" height="300" src="img/rkauto.png" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <div class="content-section-a">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Bosh Global Services</h2>
                    <p class="lead">They transform unmanned operations. I don't really know what that means, but if that's a service you're looking for, I guess Bosh would be the company to go with.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="col-sm-12">
                        <img class="img-responsive center-block sponsor-pic" width="300" height="300" src="img/bosh.png" alt="">
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <div class="content-section-b">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">AFCEA</h2>
                    <p class="lead">I'm gonna be honest. I have no clue what this stands for. But it looks cool so check it out.</p>
                </div>
                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
                    <div class="row">
                        <div class="col-sm-12">
                            <img class="img-responsive center-block sponsor-pic" width="200" height="200" src="img/afcea.gif" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-b -->

    <div class="content-section-a">

        <div class="container">

            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Air Force Association</h2>
                    <p class="lead">It turns out I do know what AFA stands for. They're the military. That's pretty great. You should go get recruited. It's fun. Trust me.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <div class="col-sm-12">
                        <img class="img-responsive center-block sponsor-pic" width="200" height="200" src="img/afa.gif" alt="">
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->

    <a  name="gallery" id="gallery"></a>
    <div class="new-page">
        <div class="container">
            <div class="row">
                <div class="col-lg-12" align="center">
                    <h1 class="page-heading">Gallery</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="content-section-a">

        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="row center-block">
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="row center-block">
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                        <div class="col-xs-6">
                            <img class="img-responsive gallery-pic" src="http://placehold.it/200.png/09f/fff" alt="">
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.content-section-a -->


    <a  name="contact" id="contact"></a>
    <div class="banner">

        <div class="container">

            <div class="row">
                <div class="col-xs-4">
                    <h2>Contact Us:</h2>
                </div>
                <div class="col-xs-8">
                    <div class="row" float="left">
                        <div class="col-xs-4">
                            <h4>1 Avenue of the Arts<br>Newport News, VA 23606 </h4>
                        </div>
                        <div class="col-xs-8">
                            <h4 style="padding-top:5px">uav-lab@lists.cnulug.org </h4>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.banner -->

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p class="copyright text-muted small">Copyright &copy; Jonah Lazar 2015. All Rights Reserved</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Setting active page -->
    <script>
        var navElement = document.getElementById("nav");
        var navCurrent = 'landing';
        for(var i = 0; i<navElement.children.length; i++){
            navElement.children[i].addEventListener('click', function(){
                if(navCurrent){
                    navCurrent.className='';
                }
                navCurrent = this;
                this.className='active';

            })
        }
    </script>
</body>

</html>