Graduate Assignment 5 jQuery Tabs

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 wrapped in an aside with a class of 'tabs' and a div with an id of 'categories'.</p>
		
<aside class="tabs">
    <div  id="categories">
        <h3>Tabs</h3>
            <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>
</aside>

CSS

/* styles for tabs */
.tabs { 
	width: 300px;
	float: right;
}
#categories {
	padding: 50px 20px;
}
#categories h3 {
	padding-top: 4px;
}
#categories ul {
	list-style-type: none;
	padding: 4px 8px;
}
#categories li {
	cursor: pointer; /* ahem fake links */
	margin-bottom: 4px;
}
#categories ul > li:before {
	content: "»";
	margin-right: 4px;
}




/*header styles*/
.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;
}