Graduate Assignment 5 Tabs Unordered List

by Lucille Kenney

HTML

<header>
    <div class="logo">
        <img src="img/lucillekenneyLogo.png" alt="Lucille Kenney logo" class="img-responsive">
    </div>
    <div class="tagline">Tabs By Lucille Kenney</div>
</header>   
    <div class="blue-box"></div>
          
<p>We'll start with an unordered list.</p>

<h3>Tabs</h3>
<div>
    <ul>
        <li class="active"><a href="#one">Tab One</a></li>
        <li><a href="#two">Tab Two</a></li>
        <li><a href="#three">Tab Three</a></li>
    </ul>
    
<div class="tab-content">
    <div id="one">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lobortis iaculis vulputate. Suspendisse ac sodales lectus, eu varius lectus. Vivamus eget tristique libero. Sed in consectetur eros.  </p>
        <p><a href="#">... >></a></p>
    </div>
    <div id="two">
        <p>Ut congue sodales sodales. Phasellus ac faucibus eros. Nulla vitae vulputate leo, vitae tincidunt urna.</p>
        <p><a href="#"... >></a></p>
    </div>
    <div id="three">
        <p>Praesent vulputate commodo varius. Aliquam libero risus, auctor condimentum hendrerit cursus, pulvinar id quam. </p>
        <p><a href="#">... >></a></p>
    </div>
</div>

CSS

.logo {
	padding-top: 5px;
	text-align: center;
}
.tagline {
	color: @brand-info;
	font-family: Georgia, serif;
	font-style: italic;
	font-size: 1em;
	text-align: center;
	padding-top: .6em;
}
.blue-box {
    background-color: blue;
    height: 10px;
    width: 400px;
}

JavaScript

/*$(document).ready(function(){
    $('header').slideUp(2000).slideDown(1000);
  });//end ready*/