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.

            
              <div style="width: 710px; margin: 0 auto;">
  <div class="bacon-blog-post bacon-shadow">
    <img src="http://i2.wp.com/garybacon.com/wp-content/uploads/2016/06/finding_what_challenges.png" class="wp-post-image">
    <div class="bacon-blog-post-inner">
      <h2><a href="http://garybacon.com/post/finding-what-challenges-you/" rel="bookmark" title="Permanent link to Finding What Challenges You" class="title-row">Finding What Challenges You</a></h2>
      <p>In an <a href="https://www.youtube.com/watch?v=eaVBDPAy-SI" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://www.youtube.com/watch?v=eaVBDPAy-SI', 'interview']);" target="_blank">interview</a>, Neil deGrasse Tyson talks about science
        boosting the economy. He goes on to say, most companies and politicians don’t have the tolerance for the long term view.</p>
      <p>You don’t motivate a group of kids, saying “Who wants to be a mechanical engineer and help improve flight efficiency by 15% compared to the airplane your father flew?”</p>
      <p>But instead, ask “Who wants to be an engineer and help develop airfoils to help fly in the atmosphere of Mars?” With the latter, you get the best students in the class.</p>
      <blockquote>
        <p>Flow is the intersection of what you are good at and what challenges you— where difficulty and competency meet.</p>
        <p>When your competency exceeds the difficulty of a task, you are bored. And when the difficulty exceeds your competency, you are anxious. That was my problem: I was bored.</p>
        <p>— Jeff Goins, <a href="http://amzn.to/28INctw" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://amzn.to/28INctw', 'The Art of Work']);" target="_blank">The Art of Work</a></p>
      </blockquote>
      <p>There are times where the day job requires me to do the mundane. That’s fine. We can’t always have constant excitement. It’s called work for a reason.</p>
      <p><h3>Inspiration</h3>
      <p>For inspiration, this is one of the reasons that I have side projects. To keep pushing my limits. It allows me to play. To find out how to make user interfaces for VR, tinker with implementing the <a href="https://www.ampproject.org/" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'https://www.ampproject.org/', 'Acelerated Mobile Pages Project']);" target="_blank">Acelerated Mobile Pages Project</a> on content, create a <a href="http://garybacon.com/snapchat/" target="_blank">landing page for Snapchat</a>, write books, and so much more.</p>
    </div>
  </div>
</div>
            
          
!
            
              /* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body {
  background: #E5E5E5;
  margin: 60px;
}

.bacon-blog-post {
  position: relative;
  width: 100%;
  background: #fff;
  font-weight: 400;
  line-height: 1.45;
}

.bacon-blog-post-inner { padding: 42px; }

.bacon-blog-post .wp-post-image {
  width: 100%;
  height: auto;
}

.bacon-blog-post h1, .bacon-blog-post h2, .bacon-blog-post h3, .bacon-blog-post h4 {
  margin: 1.414em 0 0.5em;
  font-weight: 700;
  line-height: 1.2;
  font-family: Open Sans, sans-serif;
}

.bacon-blog-post h1 a, .bacon-blog-post h2 a, .bacon-blog-post h3 a, .bacon-blog-post h4 a {
  display: inline-block;
  color: #000;
  text-decoration: none;
}

.bacon-blog-post h1 {
  margin-top: 0;
  font-size: 3.157em;
}

.bacon-blog-post h2 { margin-top: 0; font-size: 2.369em;}
.bacon-blog-post h3 {font-size: 1.777em;}
.bacon-blog-post h4 {font-size: 1.333em;}
.bacon-blog-post small, .bacon-blog-post .font_small {font-size: 0.75em;}

.bacon-blog-post p, .bacon-blog-post p a {
  font-family: Lora, Times New Roman, serif;
  font-size: 20px;
  line-height: 28px;
}

.bacon-blog-post p { margin-bottom: 1.3em; }
.bacon-blog-post p:last-child { margin-bottom: 0; }
.bacon-blog-post p a { color: #B21A13; }

.bacon-blog-post blockquote {
  margin: 1.3em;
  padding-left: 1.3em;
  border-left: rgb(224,40,43) solid 0.25em;
  font-style: italic;
}

.bacon-shadow:after {
  position: absolute;
  content: "";
  left: 20px;
  right: 20px;
  bottom: 0px;
  z-index: -1;
  box-shadow: 0 0 30px 4px rgba(0,0,0,0.60);
}
            
          
!
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