cssAudio - Activefile-genericCSS - 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.

            
              <main class="container clearfix">
    <header class="primary col-11" role="banner">
      <h1>Out with the old...</h1>
      <h2>Beginning the transition to HTML5</h2>
      <nav>
        <ul>
          <li><a href="#">LINK</a></li>
          <li><a href="#">LINK</a></li>
          <li><a href="#">LINK</a></li>
        </ul>
      </nav>
    </header>
    <section id="content" class="clearfix">
      <div class="primary">
        <article class="post">
          <header>
            <time datetime="2017-01-26" class="post-date">January 26, 2017</time>
            <h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
          </header>
          <div class="entry-content">
            <figure>
              <img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
              <figcaption>Storm Trooper Wheel of Fortune</figcaption>
            </figure>
            <p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
            <h2>The Sith Lords</h2>
            <p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
            <ul>
              <li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
              <li>Hey, Luke! May the Force be with you.</li>
              <li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
            </ul>
          </div>
          <!--.entry-content-->
          <footer class="post-meta"> Post Tags Go here.... </footer>
        </article>


        <article class="post">
          <header>
            <time datetime="2017-01-26" class="post-date">January 26, 2017</time>
            <h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
          </header>
          <div class="entry-content">
            <figure>
              <img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
              <figcaption>Storm Trooper Wheel of Fortune</figcaption>
            </figure>
            <p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
            <h2>The Sith Lords</h2>
            <p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
            <ul>
              <li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
              <li>Hey, Luke! May the Force be with you.</li>
              <li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
            </ul>
          </div>
          <!--.entry-content-->
          <footer class="post-meta"> Post Tags Go here.... </footer>
        </article>
        <article class="post">
          <header>
            <time datetime="2017-01-26" class="post-date">January 26, 2017</time>
            <h1> <a href="#" rel="bookmark" title="link to this post">The Rebel Force</a> </h1>
          </header>
          <div class="entry-content">
            <figure>
              <img src="http://thomaswallace.net/wp-content/uploads/rebel-scum.jpg" alt="Storm Trooper Wheel of Fortune" />
              <figcaption>Storm Trooper Wheel of Fortune</figcaption>
            </figure>
            <p>Hey, Luke! May the Force be with you. Alderaan? I'm not going to Alderaan. I've got to go home. It's late, I'm in for it as it is. Obi-Wan is here. The Force is with him. What?! You don't believe in the Force, do you?</p>
            <h2>The Sith Lords</h2>
            <p>You're all clear, kid. Let's blow this thing and go home! I care. So, what do you think of her, Han? You are a part of the Rebel Alliance and a traitor! Take her away! You don't believe in the Force, do you?</p>
            <ul>
              <li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
              <li>Hey, Luke! May the Force be with you.</li>
              <li>What good is a reward if you ain't around to use it? Besides, attacking that battle station ain't my idea of courage. It's more like&hellip;suicide.</li>
            </ul>
          </div>
          <!--.entry-content-->
          <footer class="post-meta"> Post Tags Go here.... </footer>
        </article>
      </div>
      <!--#primary -->

      <aside role="complementary">
        <div class="widget">
          <h1>Sample Sidebar Item </h1>
          <p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
            facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
        </div>
        <div class="widget">
          <h1>Sample Sidebar Item </h1>
          <p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
            facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
        </div>
        <div class="widget">
          <h1>Sample Sidebar Item </h1>
          <p>Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula. Phasellus et elit purus. Curabitur ipsum enim, scelerisque vitae condimentum ac, cursus eget quam. Nullam volutpat dui ut risus pulvinar at fringilla sem tristique. Nulla
            facilisi. Donec posuere euismod purus, eu scelerisque risus pellentesque eu. Vestibulum sed tincidunt metus. <a href="#">Read More</a>&raquo;</p>
        </div>
      </aside>
      <!--#secondary -->
    </section>
    <!--#content -->
    <footer class="primary" role="contentinfo">
      <p>&copy; 2017 <a href="#">Thomas Wallace</a></p>
    </footer>
  </main>
  <!--.container -->

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
        <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script>


            
          
!
            
              /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

.container{
width:960px;

margin: 30px auto;  
background-color:grey;    
}
/*
header.primary, footer.primary {
background: #ccc;
width:920px;
float:left;
margin-left:20px;    
}
*/
.col-12{
width:920px;
float:left;
margin-left:20px; 
}

.col-11{
width:826px;
float:left;
margin-left:20px; 
}

#content .primary{
width:638px;
background: #990000;
float:left;
margin-left:20px;    
}

#content aside {
width:262px;
margin-left:20px;
float:left;    
}














/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

            
          
!
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