<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/cchambers/pen/DEAgm?limit=all&page=5&q=nav+tabs" />
<style class="cp-pen-styles">/* Front-end Legos Workshop with Shay Howe
================================================== */
/* HTML5 display definitions
================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/* Base
================================================== */
html {
color: #555;
font: 14px/20px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body {
background: #eee;
margin: 0;
}
/* Simple grid
================================================== */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
/* Box offset */
.box-offset {
background: #fff;
border: 1px solid #d4d4d4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/* Container */
.container {
margin: 0 auto;
padding: 20px;
max-width: 980px;
}
/* Surgical classes */
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.col-gutters {
padding-left: 20px;
padding-right: 20px;
}
.col-baselines {
padding-bottom: 20px;
padding-top: 20px;
}
.col-box {
padding: 20px;
}
/* Margins and paddings */
.margin-bottom {
margin-bottom: 20px;
}
.margin-top {
margin-top: 20px;
}
.pad-bottom {
padding-bottom: 20px;
}
.pad-top {
padding-top: 20px;
}
/* Typography
================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0 0 20px 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
font-weight: 600;
}
/* Sizes */
h1,
.h-headline {
font-size: 36px;
}
h2,
.h-subheadline {
font-size: 21px;
}
h3,
.h-byline {
font-size: 18px;
}
h4,
.h-standfirst {
font-size: 16px;
}
h5,
.h-related {
font-size: 14px;
}
h6,
.h-promo {
font-size: 12px;
}
/* Colors */
h1,
h2,
h3,
h4 {
color: #29abe2;
}
h5,
h6 {
color: #333;
}
/* Offset */
.text-subtle {
color: #999;
font-weight: normal;
}
/* Media
================================================== */
img {
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
/* Lists
================================================== */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Media object
================================================== */
.media,
.media-body {
overflow: hidden;
}
.media-primary .media-object,
.media-secondary .media-object-alt {
float: right;
margin: 0 0 20px 20px;
}
.media-primary .media-object-alt,
.media-secondary .media-object {
float: left;
margin: 0 20px 20px 0;
}
.media-object img,
.media-object-alt img {
display: block;
}
.media-count {
color: #999;
float: right;
font-size: 10px;
line-height: 1;
padding: 3px 5px;
}
/* Primary */
.media-primary {
border-bottom: 1px solid #d4d4d4;
}
.media-primary .media {
border-top: 1px solid #d4d4d4;
}
/* Secondary */
.media-secondary .media-object img,
.media-secondary .media-object-alt img {
width: 40px;
}
/* Buttons
================================================== */
.btn {
border: 1px solid rgba(0, 0, 0, .17);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
display: inline-block;
font: 600 14px/20px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 8px 12px;
text-align: center;
text-decoration: none;
vertical-align: middle;
}
/* Types */
.btn-default,
.btn-success,
.btn-warning,
.btn-danger {
color: #fff;
}
.btn-default {
background-color: #08c;
}
.btn-success {
background-color: #62c462;
}
.btn-warning {
background-color: #fbb450;
}
.btn-danger {
background-color: #da4f49;
}
.btn-boring {
background-color: #fff;
color: #08c;
}
/* Sizes */
.btn-large {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
font-size: 18px;
padding: 11px 19px;
}
.btn-small {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
padding: 4px 10px;
}
.btn-mini {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
font-size: 10px;
padding: 1px 8px;
}
/* Navigation
================================================== */
.nav li {
float: left;
margin-right: 2px;
}
.nav a {
border: 1px solid transparent;
color: #08c;
display: block;
padding: 8px 12px;
text-decoration: none;
}
.nav a:hover,
.nav a:focus {
color: #62c462;
}
.nav-active a {
cursor: default;
font-weight: 600;
}
/* Tabs */
.nav-tabs li {
margin-bottom: -1px;
}
.nav-tabs a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.nav-tabs .nav-active a {
background-color: #fff;
border-color: #d4d4d4;
border-bottom-color: transparent;
color: #555;
}
/* Pills */
.nav-pills a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.nav-pills .nav-active a {
background-color: #08c;
border-color: rgba(0, 0, 0, .17);
color: #fff
}
/* Stacked */
.nav-tabs-stacked li,
.nav-pills-stacked li {
float: none;
margin-right: 0;
}
/* Stacked tabs */
.nav-tabs-stacked a {
border-color: #d4d4d4;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
}
.nav-tabs-stacked li:first-child a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-ms-border-radius: 5px 5px 0 0;
-o-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.nav-tabs-stacked li:last-child a {
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Stacked pills */
.nav-pills-stacked li + li {
margin-top: 3px;
}
/* Responsive
================================================== */
@media all and (min-width: 680px) {
/* Columns */
.col-1-3,
.col-2-3 {
float: left;
}
.col-1-3 {
width: 33.33%;
}
.col-2-3 {
width: 66.66%;
}
}</style></head><body>
<div class="container group">
<section class="box-offset col-2-3 pad-top">
<h2 class="col-gutters">Totally Awesome Corp.</h2>
<nav class="col-gutters">
<ul class="nav nav-tabs group">
<li class="nav-active"><a href="#">Discussions</a></li>
<li><a href="#">To-dos</a></li>
<li><a href="#">Files</a></li>
</ul>
</nav>
<ul class="media-primary">
<li class="media col-gutters pad-top">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/shay.jpg" alt="Shay">
</a>
<div class="media-body">
<strong class="media-count box-offset">2</strong>
<h5>Shay <span class="text-subtle h-promo">posted 22 hours ago</span></h5>
<p>Overly specific selectors break the cascade. The true key, and beauty, to CSS is keeping the specificity as low as possible.</p>
</div>
</li>
<li class="media col-gutters pad-top">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/carolyn.jpg" alt="Carolyn">
</a>
<div class="media-body">
<h5>Carolyn <span class="text-subtle h-promo">posted 1 day ago</span></h5>
<p>Trying to figure out accommodations for SXSW Interactive. Anyone have an extra spot where they’re staying?</p>
</div>
</li>
<li class="media col-gutters pad-top">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/jason.jpg" alt="Jason">
</a>
<div class="media-body">
<strong class="media-count box-offset">13</strong>
<h5>Jason <span class="text-subtle h-promo">posted 2 days ago</span></h5>
<p>Gotta address the anxiety forces. A stipend doesn’t address the root of the anxiety. The anxiety is coming from uncertainty, chores, “starting over”, etc.</p>
<div class="media pad-top">
<a class="media-object-alt" href="#">
<img src="https://s.cdpn.io/42746/darby.jpg" alt="Darby">
</a>
<div class="media-body">
<h5>Darby <span class="text-subtle h-promo">posted 1 day ago</span></h5>
<p>An out-of-country student worries about getting a phone to use, figuring out the public transit, getting from the airport to Chicago and finding a place to live.</p>
</div>
</div>
</div>
</li>
<li class="media col-gutters pad-top">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/erica.jpg" alt="Erica">
</a>
<div class="media-body">
<h5>Erica <span class="text-subtle h-promo">posted 2 days ago</span></h5>
<p>Shout out to Carolyn for her work on The Women Driving Chicago’s Digital Renaissance!</p>
</div>
</li>
<li class="media col-gutters pad-top">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/tracy.jpg" alt="Tracy">
</a>
<div class="media-body">
<strong class="media-count box-offset">8</strong>
<h5>Tracy <span class="text-subtle h-promo">posted 4 days ago</span></h5>
<p>Your first impulse should be to play, we learn faster through play.</p>
</div>
</li>
</ul>
<div class="col-box">
<a class="btn btn-boring" href="#">View more</a>
<a class="btn btn-default pull-right" href="#">Start a new discussion</a>
</div>
</section>
<aside class="col-1-3 col-gutters pad-top">
<h4>All Activity</h4>
<nav class="margin-bottom">
<ul class="nav nav-pills group">
<li class="nav-active"><a href="#">Today</a></li>
<li><a href="#">Yesterday</a></li>
<li><a href="#">This Week</a></li>
</ul>
</nav>
<ul class="media-secondary">
<li class="media">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/carolyn.jpg" alt="Carolyn">
</a>
<div class="media-body">
<h5>Carolyn <span class="text-subtle h-promo">posted 1 hour ago</span></h5>
<p>Sign up via Facebook is cool and all, but now it seems like every site wants you to do that before you can tell if it has enough value.</p>
</div>
</li>
<li class="media">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/jason.jpg" alt="Jason">
</a>
<div class="media-body">
<h5>Jason <span class="text-subtle h-promo">posted 2 hours ago</span></h5>
<p>There’s no reason to oversell here with large promises and fancy words. Overselling is a sign of insecurity, speak confidently.</p>
</div>
</li>
<li class="media box-offset col-box margin-bottom">
<a class="media-object-alt" href="#">
<img src="https://s.cdpn.io/42746/erica.jpg" alt="Erica">
</a>
<div class="media-body">
<h5>Erica <span class="text-subtle h-promo">posted 5 hours ago</span></h5>
<p>Your ability to be creative isn’t defined by your job title.</p>
<a class="btn btn-danger btn-small" href="#">Remove</a>
</div>
</li>
<li class="media">
<a class="media-object" href="#">
<img src="https://s.cdpn.io/42746/tracy.jpg" alt="Tracy">
</a>
<div class="media-body">
<h5>Tracy <span class="text-subtle h-promo">posted 9 hours ago</span></h5>
<p>Reading “HTML & CSS” by Jon Duckett, which is new gold standard for books to teach complete beginners.</p>
</div>
</li>
</ul>
<a class="btn btn-boring" href="#">View more</a>
</aside>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body></html>
