<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 ----------> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-inverse" role="navigation"> <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="#">Clark Hacks • School</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">Home Work</a> </li> <li> <a href="https://drive.google.com/" target="_blank">Drive</a> </li> <li> <a href="https://classroom.google.com/" target="_blank">Google Classroom</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="#">Notes</a> </li> <li> <a href="https://skyward.kahoks.org/scripts/wsisa.dll/WService=wsEAplus/seplog01.w" target="_blank">Skyward</a> </li> <li> <a href="https://calendar.google.com/calendar/render?cid=cusd.kahoks.org_6cku5jkonbiaaidi2h0hnbtmj8%40group.calendar.google.com#main_7%7Cmonth" target="_blank">School Calendar</a> </li> <li> <a href="http://chs.kahoks.org/bell-schedule" target="_blank">Bell Schedule</a> </li> <li class="divider"> </li> <li> <a href="http://chs.kahoks.org/clubs-and-activities" target="_blank">Club's Directory</a> </li> </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Counceling<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="http://goo.gl/forms/7OGxLMSZETpkJlmn2" target="_blank">Form</a> </li> <li> <a href="https://chscounselingdepartment.shutterfly.com/" target="_blank">Website</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Misc<strong class="caret"></strong></a> <ul class="dropdown-menu"> <li> <a href="https://collinsville.sodexomyway.com/menus/high.html" target="_blank">Cafeteria Menu</a> </li> <li> <a href="http://chs.kahoks.org/teacher-websites" target="_blank">Teacher Sites</a> </li> <li> <a href="http://chs.kahoks.org/morning-bulletins" target="_blank">Announcements</a> </li> <li> <a href="http://il.8to18.com/Collinsville" target="_blank">Athletic Agenda</a> </li> </ul> </li> </ul> </div> </nav> <div class="jumbotron" style="margin-left: 20%; margin-right: 20%;"> <center><h1>Welcome, <span id="name">name</span>!</h1></center> </div> </div> </div> <div class="row"> <div class="col-md-4"> <h3> h3. Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> </div> <div class="col-md-4"> <h3> h3. Lorem ipsum dolor sit amet. </h3> <div class="tabbable" id="tabs-270727"> <ul class="nav nav-tabs"> <li class="active"> <a href="#panel-1" data-toggle="tab">Section 1</a> </li> <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li> <li> <a href="#panel-3" data-toggle="tab">Section 3</a> </li> <li> <a href="#panel-4" data-toggle="tab">Section 4</a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id="panel-1"> <p> I'm in Section 1. </p> </div> <div class="tab-pane" id="panel-2"> <p> Howdy, I'm in Section 2. </p> </div> <div class="tab-pane" id="panel-3"> <p> Howdy, I'm in Section 3. </p> </div> <div class="tab-pane" id="panel-4"> <p> Howdy, I'm in Section 4. </p> </div> </div> </div> </div> <div class="col-md-4"> <h3> h3. Lorem ipsum dolor sit amet. </h3> <ul> <li> Lorem ipsum dolor sit amet </li> <li> Consectetur adipiscing elit </li> <li> Integer molestie lorem at massa </li> <li> Facilisis in pretium nisl aliquet </li> <li> Nulla volutpat aliquam velit </li> <li> Faucibus porta lacus fringilla vel </li> <li> Aenean sit amet erat nunc </li> <li> Eget porttitor lorem </li> </ul> </div> </div> <div class="row"> <div class="col-md-12"> </div> </div> <footer> <p> 2016 <a href="https://clarkhacks.github.io"> Clark Weckmann</a> Open source | License: | <a href="">Advertise</a> <span class="adbanner"> Sponsored by: <a href="ads.html"><span id="adverts">Ads</span></a></span></p> </footer> </div>

footer { margin-top: 10%; height: 20px; width: auto; } .adbanner { float: right; }

$(function () { var messages = [], index = 0; messages.push('Sheldon The Turtle'); messages.push('Clark Hacks'); messages.push('OBTAIN AD SPACE'); function cycle() { $('#adverts').html(messages[index]); index++; if (index === messages.length) { index = 0; } setTimeout(cycle, 7000); } cycle(); });