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.

            
              <!-- Put this in the head of your document if you want awesome Foundicons -->

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css" />
    
<!-- Start Navigation -->
<div class="sticky">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <li class="name">
        <h1>
          <ul class="inline-list">
            <li><a href="#"><i class="fi-social-facebook"></i></a></li>
            <li><a href="#"><i class="fi-social-dribbble"></i></a></li>
          </ul>
        </h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <section class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">

      </ul>

      <!-- Left Nav Section -->
      <ul class="left">
        <li><a href="#">Left Nav Button</a></li>
        <li><a href="#">Left Nav Button</a></li>
        <li><a href="#">Left Nav Button</a></li>
        <li><a href="#">Left Nav Button</a></li>
      </ul>
    </section>
  </nav>
</div>
<div class="row">
  <img src="http://placehold.it/1400x450">
</div>
<div class="row panel">
  <div class="large-4 columns text-center">
    <i class="fi-bitcoin-circle large"></i>
    <h2 style="text-align: center">Get Money!</h2>
    <p style="text-align: center">And jolly enough were the sights and the sounds that came bearing down before the wind, some few weeks after Ahab's harpoon had been welded.</p>
  </div>
  <div class="large-4 columns text-center">
    <i class="fi-trophy large"></i>
    <h2 class="text-center">Be A Winner!</h2>
    <p class="text-center">OK. Moss, what did you have for breakfast this morning? Smarties cereal. We don't need no education. Yes you do. You've just used a double negative. It's my term for my time of the month. Oh. What time of the month? The weekend? Yeah, you do know how a button works don't you?</p>
</p>
  </div>
  <div class="large-4 columns text-center">
    <i class="fi-eject large"></i>
    <h2 style="text-align: center">Eject! Eject!</h2>
    <p style="text-align: center">I'm a 32 year old IT-man who works in a basement. Yes, I do the whole Lonely Hearts thing! A story of a young man trying to find his sexuality in the uncaring Thatcher years. Warning: Contains scenes of graphic homoeroticism.</p>
  </div>
</div>
<div class="row">
  <div class="large-7 large-centered columns text-center">
    <h1 class="subheader">About Me</h1>
    <hr>
  </div>
</div>
<div class="row">
  <div class="large-6 columns">
    <p>Center your columns by adding a class of small-centered to your column. Large will inherit small centering by default, but you can also center solely on large by applying a large-centered class. To uncenter on large screens use large-uncentered.</p>
  </div>
  <div class="large-6 columns">
    <p>Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. medium-push-#, large-push-# is the syntax you'll use. Use large-reset-order to reset pushed or pulled columns to their original position on large screens.</p>
  </div>
</div>
<div class="row">
  <img src="http://placehold.it/1400x350">
</div>
<div class="row">
  <div class="large-7 large-centered columns text-center">
    <h1 class="subheader">Yeti > Sasquatch</h1>
    <hr>
  </div>
</div>
<div class="row">
  <div class="large-12 columns">
  <p>Interchange can now pull in HTML partials so you can load different sections of your page for particular media queries. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.</p>

  <p>We use the data-interchange attribute on a markup container (probably a div) to do this. Here's an example which loads up a small, static map on mobile, a larger static map for medium-sized devices, and a full interactive Google map on large display devices.</p>
  
  <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.
    </p>
  </div>
</div>
<div class="row">
  <div class="large-7 large-centered columns text-center">
    <h1 class="subheader">Portfolio</h1>
    <hr>
  </div>
</div>
<div class="row">
  <ul class="small-block-grid-1 large-block-grid-3 ">
    <li><img src="http://placehold.it/350x150"></li>
    <li><img src="http://placehold.it/350x150"></li>
    <li><img src="http://placehold.it/350x150"></li>
  </ul>
<div class="row">
  <div class="large-7 large-centered columns text-center">
    <h1 class="subheader">Get In Touch</h1>
    <hr>
  </div>
</div>
<div class="row">
  <div class="large-6 columns">
    <img src="http://placehold.it/300x200">
  </div>
  <div class="large-6 columns text-left">
    <p><a href="#"><i class="fi-mobile"></i>&nbsp; Call Me, Maybe</a></p>
      <p><a href="#"><i class="fi-mail"></i>&nbsp; Digital Mail</a></p>
      <p><a href="#"><i class="fi-social-facebook"></i>&nbsp; Facebook</a></p>
      <p><a href="#"><i class="fi-social-twitter"></i>&nbsp; Tweet at me</a></p>
  </div>
</div>
<hr>
  <p>© Copyright no one at all. Go to town.</p>
            
          
!
            
              .inline-list {
  padding-top: 10px;
}


/* Sizes */

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
.size-102 { font-size: 102px; }

i.medium { font-size: 48px;}
i.large { font-size: 72px;}
i.xlarge { font-size: 102px;}
            
          
!
            
              $(document).foundation();
            
          
!
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