cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html lang="en" itemscope itemtype="http://schema.org/Person">
<head>
  <meta charset="utf-8">
  <!-- Site Meta Data -->
  <title>Tabbed Portfolio</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Suzanne Hillman">
  <meta name="javascripts" content="js/jquery-2.1.1.js, js/main.js">

  <!-- schema.org -->
  <meta itemprop="name" content="Suzanne Hillman">

  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
  <!-- Style Meta Data -->

</head>

<body>
  <!-- Sidebar -->
  <aside>
    <!--<center><a href="https://suzannehillman.com"><img id="avatar" src=""></a></center>-->
    <h1>Suzanne Hillman</h1>
    <br>



    <nav class="nav">
      <ul class="list-bare">

          <li><a class="nav__link" href="https://suzannehillman.com">Home</a></li>

          <li><a class="nav__link" href="https://suzannehillman.com/portfolio.html">Portfolio</a></li>

      </ul>
    </nav>

    <p class="social">
        <a href="http://medium.com/@suzannehillman" target="_blank" ><img alt="link to Suzanne Hillman's Medium account" src="{filename}/images/icons/medium.png"></a>
        <a href="http://twitter.com/suzanne_hillman" target="_blank" ><img alt="link to Suzanne Hillman's Twitter account" src="{filename}/images/icons/twitter.png"></a>
        <a href="http://www.linkedin.com/in/hillmansuzanne" target="_blank" ><img alt="link to Suzanne Hillman's LinkedIn account" src="{filename}/images/icons/linkedin.png"></a>
        <a href="https://github.com/suzannehillman" target="_blank" ><img alt="link to Suzanne Hillman's Github account" src="{filename}/images/icons/github.png"></a>
    </p>

  </aside>

  <!-- Content -->
<article>
    <section id="content" class="body">

    <div class="section" id="portfolio-of-suzanne-hillman">
        <h2>Portfolio of Suzanne Hillman</h2>
        <div id="cd-tabs">
            <nav>
              <ul id="cd-tabs-navigation">
                <li><a data-content="project" class="selected" href="#project">Completed Projects</a></li>
                <li><a data-content="artifact" href="#artifact">Design Artifacts</a></li>
                <li><a data-content="current" href="#current">Current Projects</a></li>
              </ul> <!-- cd-tabs-navigation -->
            </nav>
            <ul id="cd-tabs-content">
                <li data-content="project" class="selected" id="project">
                  <div class="section" id="regional-fedora-hubs-october-2016-march-2017">
                    <h3><a class="reference external" href="{filename}/pages/regional-hubs.rst">Regional Fedora Hubs - (October 2016-March 2017)</a></h3>
                     <div class="figure align-center" style="width: 600px; max-width: 100%;">
                       <a class="reference external image-reference" href="{filename}/pages/regional-hubs.rst"><img alt="whiteboard from design thinking session" src="{filename}/images/people-active.jpg" style="width: 600px;"/></a>
                       <p class="caption">A whiteboard from the early design thinking session for Regional Hubs</p>
                     </div>
                     <p><a class="reference external" href="https://pagure.io/fedora-hubs/issue/47">Regional Hubs</a> is an  offshoot of the existing <a class="reference external" href="https://pagure.io/fedora-hubs/">Fedora Hubs</a> project. The overarching goal is to encourage and support the Fedora community, by helping with user onboarding, encouraging in-person social interaction, and helping people find each other and events.</p>
                     <p><a class="reference external" href="https://suzannehillman.com/pages/fedora-regional-hubs.html">Details on the Regional Fedora Hubs project</a></p>
                  </div>
                  <div class="line-block">
                    <div class="line"><br/></div>
                  </div>
                  <hr class="docutils"/>
                  <div class="line-block">
                    <div class="line"><br/></div>
                  </div>  
        
                  <div class="section" id="cambio-buddies-march-june-2016">
                     <h3><a class="reference external" href="{filename}/pages/cambio_buddies.rst">Cambio Buddies (March-June 2016)</a></h3>
                     <div class="figure align-center" style="width: 600px; max-width: 100%;">
                        <a class="reference external image-reference" href="{filename}/pages/cambio_buddies.rst"><img alt="Mockup of the home screen including a map and an activity tracker" src="{filename}/images/cambio-buddies/home_screen.png" style="width: 600px;"/></a>
                        <p class="caption">Mockup of the home screen including a map and an activity tracker</p>
                     </div>
                     <p>There are few ways to exchange foreign currency that don't have high fees or other costs. As a result, people often have foreign currency which was not cost-effective to exchange to their own currency. Cambio Buddies offers a way to connect those who have this currency with people who need it, allowing them to bypass normal exchanges.</p>
                     <p><a class="reference external" href="https://suzannehillman.com/pages/cambio-buddies.html">Details on Cambio Buddies project</a></p>
                  </div>
                  <div class="line-block">
                     <div class="line"><br/></div>
                  </div>
                  <hr class="docutils"/>
                  <div class="line-block">
                    <div class="line"><br/></div>
                  </div>

                  <div class="section" id="hack-va-ptsd-forms-may-7-2016">
                     <h3><a class="reference external" href="{filename}/pages/hackathon.rst">Hack VA PTSD forms (May 7, 2016)</a></h3>
                     <div class="figure align-center" style="width: 600px; max-width: 100%;">
                       <a class="reference external image-reference" href="{filename}/pages/hackathon.rst"><img alt="Hackathon whiteboard" src="{filename}/images/hacktheforms/teamA-whiteboarding.jpg" style="width: 600px;"/></a>
                       <p class="caption">Outlining our plans on the whiteboard</p>
                     </div>
                     <p>The forms for veterans to get mental health care for PTSD were unfortunately not designed with the user in mind. They are neither easy to understand nor to fill out, and fail to empathize with the veterans who need to use them. I was part of a small group of designers who met at Mad*Pow Boston in early May to attempt to address these issues.</p>
                     <p><a class="reference external" href="https://suzannehillman.com/pages/veteran-ptsd-forms-hackathon.html">Details on the hackathon</a></p>
                  </div>
                </li>
                <li data-content="artifact" id="artifact">
                </li>
                <li data-content="current" id="current">
                </li>
            </ul> <!-- cd-tabs-content -->
        </div> <!-- cd-tabs -->
    </div>
    </section>
</article>

  <!-- Footer -->
</body>
</html>
            
          
!
            
              /* add some default values so I don't need to find all the places a particular color is used */
:root {
        --sidebar-bg-color: #4444aa;
        --sidebar-text-color: #f0f0f6;
        --main-bg-color: #f0f0f6;
        --main-link-color: #3333ff;
        --visited-link-color: #6600cc;
        --main-text-color: #36303a;
        --sidebar-nav-color: #4444cc;
        --caption-color: #6b5f73;
        --selected-tab-color: #dedef2;
        --unselected-tab-text-color: #36303a50;
}

html {
  font-family: 'Open Sans', 'helvetica', sans-serif;
  background: var(--main-bg-color);
  font-size: 22px;
}

/* Titles */
h1 { text-transform: uppercase }
h1, h2 {
        font-weight: normal;
  margin-top: 0px;
  margin-bottom: 0px;
}


.title
{
  font-size: 2.5em;
  text-align: center;
  margin-bottom: 50px;
  text-transform: none;
  color: var(--sidebar-bg-color);
  font-weight: 600;
}

/* Body */
body {
  margin: 0;
  color: var(--main-text-color);
}
body > article {
  display: block;
  max-width: 900px;
  margin: 40px auto auto 240px;
  padding: 0px 10px 10px;
}

/* Links */;
a  { color:var(--main-link-color); text-decoration:none; }
a:visited { color:var(--visited-link-color); text-decoration:none; }
a:link { color:var(--main-link-color); text-decoration:none; }
a:active { color:var(--main-link-color); text-decoration:none; }
a:hover { text-decoration: underline; }

/* Code */
.highlight pre {
  font-size: 18px;
  overflow: auto;
  padding: 8px;
}

/* Sidebar */
aside {
  display:inline-block;
  font-size: 18px;
  width: 220px; height: 100%;
  position: fixed;
  top: 0; left: 0;
  padding: 0px;
  background-color: var(--sidebar-bg-color);
  color: var(--sidebar-text-color);
  box-shadow: 0 0 3px var(--main-text-color);
  text-align: center;
  padding-top: 4%;
  background-size: cover;
  letter-spacing: 0.5px
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

aside > ul {
  list-style-type: none;
  padding: 0px 10px;
  margin-top: 0px;
}
aside > h2 {
  text-transform: uppercase;
  font-size: 18px;
  margin-bottom: 0px;
}

.social
{
  display: inline-block;
  margin-top: 40px;
}

.nav
{
  display: block;
  margin-left: 0px;
  margin-right: 0px;
  border: 0.5px solid var(--sidebar-nav-color);
}

.nav a
{
    color: var(--sidebar-text-color);
    text-decoration: none;
    transition: all .3s ease-in-out;
}

.nav a:hover
{
    background-color: var(--sidebar-nav-color);
}

.list-bare
{
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__link
{
  display: block;
  padding: 0.77273rem 0;
  border-bottom: 0.5px solid var(--sidebar-nav-color);
}


/*--------Responsive------------*/
@media (max-width: 767px) {
  aside {
    left: 0;
    max-width: none;
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0;
    padding-top: 1px;
    box-shadow: 0px 0px 10px 4px rgba(0,0,0,0.5);
  }

  .nav
  {
    margin-left: 0;
    margin-right: 0;
  }

  }
  body > article {
    margin: 0 auto;
    padding-top: 5px;
    padding: 1em;
  }
}

img {
  max-width: 100%;
}

/* Responsive Tabbed Navigation as per https://codyhouse.co/gem/responsive-tabbed-navigation/ */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* this makes sure that any float settings are cleared */
*::after, *::before {
  content: '';
}


#cd-tabs {
  position: relative; /* to everything else on the page */
  width: 100%;
  margin: auto;
}

/* make everything inside of cd-tabs a table that is always below the floating element preceeding it - aka 'clearfix'*/
#cd-tabs:after {
  content: "";
  display: table;
  clear: both;
}

#cd-tabs nav {
  /* add scroll if content clipped. But why? Maybe for when small screen? */
  overflow: auto;
  background: var(--main-bg-color);
  box-shadow: inset 0 -2px 3px var(--sidebar-bg-color);
}

#cd-tabs-navigation {
  list-style-type: none;
}
/* clearfix */
#cd-tabs-navigation:after {
  content: "";
  display: table;
  clear: both;
}
/* make them horizontal */
#cd-tabs-navigation li {
  float: left;
}

#cd-tabs-navigation a {
  position: relative;
  display: block;
  height: 40px;
  text-align: center;
  font-size: 12px;
  font-size: 0.75rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 600;
  color: var(--unselected-tab-text-color);
  padding-top: 34px;
}

/* the selected tab should have the selected tab color always. It should also have a box shadow above it, and be the main text color. */
#cd-tabs-navigation a.selected {
  background-color: var(--selected-tab-color) !important;
  box-shadow: inset 0 2px 0 var(--sidebar-bg-color);
  color: var(--main-text-color);
}

/*smallest screens need special things */
@media only screen and (max-width: 575px) {
  #cd-tabs-navigation a {
  padding: 0 2em 0 2em;
 }
#cd-tabs nav {
    position: relative;
  }
}
/* for largest screen sizes, minor changes over the bits below. */
@media only screen and (min-width: 960px) {
  #cd-tabs nav {
    float: none;
  }
  #cd-tabs-navigation a {
    padding: 0 2em 0 2em;
  }
}

/* default settings */
#cd-tabs nav {
    position: relative;
    background: transparent;
    box-shadow: none;
}
#cd-tabs-navigation {
    /* tabbed on top on all but medium devices */
    width: auto;
    box-shadow: inset 0 -2px 3px var(--main-bg-color);
}
#cd-tabs-navigation a {
    height: 60px;
    width: auto;
    text-align: left;
    font-size: 14px;
    font-size: 0.875rem;
}
#cd-tabs-navigation a.selected {
    box-shadow: inset 0 2px 0 var(--sidebar-bg-color);
}
#cd-tabs-navigation a::before {
    top: 50%;
    margin-top: -10px;
    margin-left: 0;
    left: 38px;
}
/* make sure we are on the same indent level as the nav */
#cd-tabs-content li {
  padding: 0em;
}

/* for screens between 768px and 960px */
@media only screen and (min-width: 768px) and (max-width: 960px) {
  #cd-tabs nav {
    position: absolute;
    height: 100%;
  }
  #cd-tabs-navigation {
    /* move the nav to the left on medium sized devices */
    width: 130px;
  }
  #cd-tabs-navigation a {
    height: 120px;
    padding-top: 60px;
  }
  #cd-tabs-navigation a.selected {
    box-shadow: inset 0 2px 0 var(--sidebar-bg-color);
    height: 180px;
  }
  #cd-tabs-navigation a::before {
    top: 24px;
  }
/* for medium sized screens, make sure there's space for the nav to not cover the content */
  #cd-tabs-content li {
    padding: 0em 0em 0em 6em;
  }
}

#cd-tabs-content {
  background: var(--main-bg-color);
}
/* don't display the content that isn't selected */
#cd-tabs-content li {
  display: none;
}
#cd-tabs-content li.selected {
  display: block;
  -webkit-animation: cd-fade-in 0.5s;
  -moz-animation: cd-fade-in 0.5s;
  animation: cd-fade-in 0.5s;
}

@-webkit-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cd-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* figures */
.figure {
    border: 1px solid #bbb;
    border-radius: 3px;
    padding: 4px;
    box-shadow: 0.5px 0.5px 0px 0.5px rgba(54, 48, 58, 0.5);
}
.figure.center{
    margin: 0 auto;
}
.figure.float {
    float: left;
    margin: 0 1em 1em 0;
}
.figure.float-right {
    float: right;
    margin: 0 0 1em 1em;
}

.figure img {
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
}

.figure p.caption {
    margin: 0;
    font-family: small;
    padding: 4px;
    text-align: center;
    color: var(--caption-color);
}

/* buttons */
p.button {
        -moz-box-shadow:inset 0px 1px 0px 0px #d1d0e0;
        -webkit-box-shadow:inset 0px 1px 0px 0px #d1d0e0;
        box-shadow:inset 0px 1px 0px 0px #d1d0e0;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f0f0f6), color-stop(1, #8b91c4) );
        background:-moz-linear-gradient( center top, #f0f0f6 5%, #8b91c4 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f0f6', endColorstr='#8b91c4');
        background-color:#f0f0f6;
        -webkit-border-top-left-radius:20px;
        -moz-border-radius-topleft:20px;
        border-top-left-radius:20px;
        -webkit-border-top-right-radius:20px;
        -moz-border-radius-topright:20px;
        border-top-right-radius:20px;
        -webkit-border-bottom-right-radius:20px;
        -moz-border-radius-bottomright:20px;
        border-bottom-right-radius:20px;
        -webkit-border-bottom-left-radius:20px;
        -moz-border-radius-bottomleft:20px;
        border-bottom-left-radius:20px;
        text-indent:0px;
        border:1px solid #abaae3;
        display:inline-block;
        color:#3333ff;
        font-size:15px;
        font-weight:bold;
        font-style:normal;
        height:40px;
        line-height:40px;
        text-decoration:none;
        text-align:center;
        text-shadow:1px 1px 0px #c9cdf2;
        padding-left: 4px;
        padding-right: 4px;
}
p.button:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8b91c4), color-stop(1, #f0f0f6) );
        background:-moz-linear-gradient( center top, #8b91c4 5%, #f0f0f6 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8b91c4', endColorstr='#f0f0f6');
        background-color:#8b91c4;
}.button:active {
        position:relative;
        top:1px;
/* This button was generated using CSSButtonGenerator.com */
            
          
!
            
              jQuery(document).ready(function($){
        var tabs = $('.cd-tabs');

        tabs.each(function(){
                var tab = $(this),
                        tabItems = tab.find('ul.cd-tabs-navigation'),
                        tabContentWrapper = tab.children('ul.cd-tabs-content'),
                        tabNavigation = tab.find('nav');

                tabItems.on('click', 'a', function(event){
                        event.preventDefault();
                        var selectedItem = $(this);
                        if( !selectedItem.hasClass('selected') ) {
                                var selectedTab = selectedItem.data('content'),
                                        selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
                                        slectedContentHeight = selectedContent.innerHeight();

                                tabItems.find('a.selected').removeClass('selected');
                                selectedItem.addClass('selected');
                                selectedContent.addClass('selected').siblings('li').removeClass('selected');
                                //animate tabContentWrapper height when content changes
                                tabContentWrapper.animate({
                                        'height': slectedContentHeight
                                }, 200);
                        }
                });

                //hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
                checkScrolling(tabNavigation);
                tabNavigation.on('scroll', function(){
                        checkScrolling($(this));
                });
        });

        $(window).on('resize', function(){
                tabs.each(function(){
                        var tab = $(this);
                        checkScrolling(tab.find('nav'));
                        tab.find('.cd-tabs-content').css('height', 'auto');
                });
        });

        function checkScrolling(tabs){
                var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
                        tabsViewport = parseInt(tabs.width());
                if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
                        tabs.parent('.cd-tabs').addClass('is-ended');
                } else {
                        tabs.parent('.cd-tabs').removeClass('is-ended');
                }
        }
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console