123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <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="https://twitter.com/suzanne_hillman" target="_blank" ><img alt="link to Suzanne Hillman's Twitter account" src="{filename}/images/icons/twitter.png"></a>
        <a href="https://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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console