Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="resume">

<header>
  <h1>John <span>C.</span> Lueders</h1>
  <div class="job-titles">
    Software Architect<br/>
    Web Developer
  </div>
  <div class="contact-info">
    <a href="mailto:john@elmsoftware.com?subject=Saw your resume online...">john@elmsoftware.com</a><br/>
    <a href="tel:4843418486">484.341.8486</a>
  </div>
</header>
  
<div class="info">
  
  <section role="main"> 

    <article class="work">
      <h1>Work Experience</h1>
      <div class="block">
        <h2>2004-Present: Elm Software LLC | Chester Springs, PA</h2>
        <p>Elm Software specializes in software products for the wedding industry, including bridal couples and wedding and event professionals.</p>
        <p><em>Roles:</em> Founder and Owner</p>
        <p><em>Responsibilities:</em> Independently started and managed every aspect of Elm Software, including but not limited to software development (UI and backend), web design, marketing, sales, and accounting.</p>
        <p><em>Highlights:</em></p>
        <ul>
          <li>Awarded 5 star rating from CNET Download.com for iDo Wedding Couple Edition</li>
          <li>Awarded top rated wedding software on Top10Reviews.com</li>
          <li>Elm Software products have been downloaded over 250,000 times and
sold in 95 countries with $800,000 in sales since 2004</li>
          <li>Secured national distribution deal with SummitSoft that placed iDo
Wedding Couple Edition, Tabula Rasa Couple Edition, and PrintJobs in
Target, Marriott, Barnes & Noble and other national chains</li>
          <li>Software sold by Bucks County Community College, Carlson Crafts,
Weston Distance Learning, Lovegevity, and other 400+ affiliates</li>
          <li>Software recommended by the Association of Bridal Consultants (ABC)</li>
          <li>Bucks County Community College designed its wedding planning
curriculum around iDo Wedding and Event Professional Edition</li>
          <li>Released cloud based version of iDo (<a href="https://idohq.com">idohq.com</a>). Uses the following technology: .Net 4.0, VB.Net WinForms, SQL Azure, Amazon S3, Stripe in-app purchasing, Markdown to create websites through software, Integrated outgoing email using Sendgrid</li>
        </ul>
      </div>
      <div class="block">
        <h2>2002-2004: Centocor, Inc. | Malvern, PA</h2>
        <p><em>Role:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Collaborated with the Head Statistician to create an application to organize clinical trial data through SAS data sets and prepare tables for submission to the Food and Drug Administration. The end product was implemented successfully and used by 50 statisticians at Centocor. Centocor continues to use this software today.</p>
      </div>
      <div class="block">
        <h2>2002: Lincoln Financial Group | Philadelphia, PA</h2>
        <p><em>Role:</em> Database Administrator and Reporter, Consultant</p>
        <p><em>Responsibilities:</em> Wrote SQL queries against the data warehouse to provide regional sales reports to upper management.</p>
      </div>
      <div class="block">
        <h2>2001-2002: The Vanguard Group, Inc. | Malvern, PA</h2>
        <p><em>Role:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Designed a Visual Basic application that served as a backend management tool enabling managers of Vanguard’s Operational Excellence Initiative to use the existing Microsoft Project add-in.</p>
      </div>
      <div class="block">
        <h2>2000-2001: Montgomery County Community College | Blue Bell, PA</h2>
        <p><em>Role:</em> Adjunct Professor</p>
        <p><em>Responsibilities:</em> Taught two semesters of coursework introducing students to Visual Basic and database design.</p>
      </div>
      <div class="block">
        <h2>1998-2001: Merck & Co. | West Point, PA</h2>
        <p><em>Roles:</em> Lead Application Developer, Consultant</p>
        <p><em>Responsibilities:</em> Created a front-end program to keep track of the compounds and all studies in the pre-clinical division of Merck; created a frontend tool allowing pathologists and toxicologists to select and query a database and thereby track pre-clinical testing and study progress.</p>
      </div>
      <div class="block">
        <h2>1997-1998: Cahners Publications | Radnor, PA</h2>
        <p><em>Role:</em> Database Migrator, Consultant</p>
        <p><em>Responsibilities:</em> Wrote Access programs that pulled data from Access databases and push them into the Master SQL Server Database.</p>
      </div>
      <div class="block">
        <h2>1995-1997: FXpress | Bala Cynwyd, PA</h2>
        <p><em>Role:</em> Application Developer and Salesman</p>
        <p><em>Responsibilities:</em> Helped develop a frontend Visual Basic interface for derivatives accounting firm sold to Fortune 500 companies.</p>
      </div>
      <div class="block">
        <h2>1992-1995: D.C. Lueders Co. | Strafford, PA</h2>
        <p><em>Role:</em> Confectionery Broker</p>
        <p><em>Responsibilities:</em> Gave sales presentations to grocery chains and bulk distributors to secure orders for 15 confectionery companies including Just Born, Old Dominion Peanut Company, Claeys Candies, to name a few.</p>
      </div>
    </article>
    <article>
      <h1>Professional Presentations</h1>
      <ul>
        <li>Bucks County Community College, 2006-2011</li>
        <li>ABC National Conference, 2007, 2009, 2011</li>
        <li>ABC North Carolina Chapter Wedding Professionals Conference, 2008</li>
        <li>ABC Pennsylvania Chapter Wedding Professionals Conference, 2007</li>
        <li>Product Launch at Centocor, 2003</li>
        <li>Product Launch at Merck, 2001</li>
      </ul>
    </article>
    <article>
      <h1>Professional Development</h1>
      <ul>
        <li>One-on-one workshop with Chris Coyier of <a href="https://css-tricks.com">css-tricks.com</a>, 2012</li>
        <li>Windows 8 Launch, Philadelphia, PA, 2012</li>
        <li>Windows Azure Workshop, New York, NY, 2012</li>
        <li>Visual Studio 2010 Launch, Philadelphia, PA, 2010</li>
        <li>Windows 7 Launch, Philadelphia, PA, 2009</li>
        <li>Visual Studio 2008 Launch, Harrisburg, PA, 2008</li>
      </ul>
    </article>
    <article class="education">
      <h1>Education</h1>
      <div class="block">
        <h2>Bachelor of Arts <span>in</span> Management of Information Technology</h2>
        <p>Eastern University | St. David's, PA<br/>2003</p>
      </div>
      <div class="block">
        <h2>Certificate <span>in</span> Business Programming</h2>
        <p>CHUBB Institute | Springfield, PA<br/>1995</p>
      </div>
    </article>
  </section>
  
  <aside>
    <article>
      <h1>Technologies</h1>
      <p>Amazon Web Services (S3)</p>
      <p>ASP.Net / MVC</p>
      <p>C#</p>
      <p>CSS3</p>
      <p>Final Cut Pro X</p>
      <p>Fireworks</p>
      <p>GDI+</p>
      <p>HTML5</p>
      <p>Javascript / jQuery</p>
      <p>MySQL</p>
      <p>Office</p>
      <p>Oracle</p>
      <p>Photoshop</p>
      <p>PHP</p>
      <p>Responsive Web Design</p>
      <p>SASS + Compass</p>
      <p>SQL Server</p>
      <p>Stripe API</p>
      <p>T-SQL</p>
      <p>VB.Net</p>
      <p>Windows Azure</p>
      <p>Wordpress</p>
    </article>
    <article>
      <h1>Elm Software Products</h1>
      <p><a href="https://idohq.com">iDo in the Cloud</a></p>
      <p><a href="http://elmsoftware.com/ido/">iDo Wedding Couple Edition</a></p>
      <p><a href="http://elmsoftware.com/idowpe/">iDo Wedding and Event Professional Edition</a></p>
      <p><a href="http://elmsoftware.com/tabularasace/">Tabula Rasa Couple Edition</a></p>
      <p><a href="http://elmsoftware.com/tabularasa/">Tabula Rasa Professional Edition</a></p>
      <p><a href="http://elmsoftware.com/printjobs/">PrintJobs</a></p>
      <p><a href="http://elmsoftware.com/passworddock/">PasswordDock</a></p>
    </article>
    <article>
      <h1>Hobbies</h1>
      <p>Family time</p>
      <p>Playing the piano</p>
      <p>Home improvement projects</p>
      <p>Movie making with Final Cut Pro X</p>
      <p>Graphic Design with Photoshop / Fireworks</p>
      <p>Developing Wordpress sites for church</p>
    </article>
  </aside>
   
  </div><!-- CV -->
  
</div><!-- That's a wrap -->
              
            
!

CSS

              
                @import "compass/css3";

/* Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400);
@import url(https://fonts.googleapis.com/css?family=Bitter:400,700);

/* Colors */
$body: #CAE5E7;
$level1: #28627d;
$level2: #2e779c;
$level3: #3b8fb8;
$link: #db4747;

/* Sizes */
$arrow-width: 20px;
$pad: 30px;
$header-height: 90px;

/* Media Query Breakpoint */
@mixin breakpoint($point) {
  @if $point == header-2rows {
    @media (max-width : 75em) {@content;}
  }
  @if $point == header-3rows {
    @media (max-width : 36em) {@content;}
  } 
  @if $point == thin {
    @media (max-width : 58em) {@content;}
  } 
}

/* Header Arrow Effect */
@mixin arrow($color) {
  position: absolute;
  content: '';
  height: 100%;
  border-top: $header-height / 2 solid transparent;
  border-bottom: 45px solid transparent;
  border-left: $arrow-width solid $color;
  right: -$arrow-width;
  top: 0;
}

/* Typography */
h1, h2, h3 {
  font-family: Bitter, serif; 
}
h1 {
  color: #333;
  font-size: 190%;
}
h2 {
  color: #707070; 
}
ul {
  list-style: none;
  margin-left: -1.1em;
}
li {
  margin-bottom: 10px; 
  position: relative;
  &:before {
    content: '✓';
    position: absolute;
    left: -20px;
  }
}
a {
  color: $link;
  @include transition(all .2s ease);
  &:hover, &:focus {
    color: darken($link, 10%);    
  }
}
.clearfix {
  display: table;
  content: '';
  clear: both;
}

/* Box Model */
*, *:after, *:before {
  @include box-sizing(border-box);
}
body {
  background: $body;
  color: #333; 
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
.resume {
  position: relative;
  background: white;
  width: 80%;
  max-width: 1200px;
  margin: 0 auto 50px;
  box-shadow: 
    0 0 3px rgba(0, 0, 0, 0.2), 
    inset 0 0 10px rgba(0, 0, 0, 0.1);
  @include breakpoint(thin) {
    width: 96%;  
  }
}
header {
  @extend .clearfix;
  position: relative;
  background: $level3;
  width: 100%;
  overflow: hidden;
  height: $header-height;
  text-shadow: 1px 2px 3px darken(#517EA8, 20%);
  h1 {
    position: relative;
    font-family: 'Bitter', serif;
    font-size: 250%;
    background: $level1;
    color: white;
    margin: 0;
    height: $header-height;
    padding-top: 15px;
    padding-left: $pad + 5px;
    padding-right: $pad;
    float: left;
    z-index: 2;  
    @include breakpoint(header-2rows) {
      width: 100%;
      padding-right: 5px;
    }
    @include breakpoint(header-3rows) {
      span {
        display: none; 
      }      
    }
    &:after {
      @include arrow($level1);
    }
  }
  div {
    position: relative;
    color: white;
    float: left;
    padding-top: 24px;
    padding-left: $pad * 2;
    padding-right: $pad * 1.6;
    height: $header-height; 
    @include breakpoint(header-2rows) {
      width: 50%;
    }
    @include breakpoint(header-3rows) {
      width: 100%;
      padding-left: $pad;
    }
    &:first-of-type {
      background: $level2;
      z-index: 1;
      &:after {
        @include arrow($level2);
      }
      @include breakpoint(header-2rows) {
        padding-left: $pad;  
      }
    }
  }
  a {
    color: white;
    padding: 0 3px;
    border-radius: 2px;
    text-decoration: none;
    &:hover, &:focus {
      color: white;
      background: #00baa6;
    }
  }
}

.info {
  @extend .clearfix;
  width: 100%;
}
section {
  float: left;
  width: 70%;
  padding: 0 $pad;
  article {
    margin-bottom: $pad; 
  }
  h2 {
    font-size: 100%;
    text-transform: uppercase;
    margin-bottom: 0;
    span {
      text-transform: none;
    }
  }
  p {
    line-height: 1.5;
  }
  .education p {
    margin-top: 3px; 
  }
  @include breakpoint(thin) {
    width: 100%;  
  }
}
.work .block {
  margin-bottom: 30px; 
}

aside {
  float: left;
  background: whitesmoke;
  border-left: 1px solid #ccc;
  width: 30%;
  padding-left: $pad;
  padding-right: $pad;
  article {
    margin-bottom: 50px;
  }
  h1 {
    font-size: 150%;
    margin-top: 29px;
  }
  a {
    color: #333;
    text-decoration: none;
    border-bottom: 1px dashed gainsboro;
    &:hover, &:focus {
      background: darken(whitesmoke, 5%);
    }
  }
  @include breakpoint(thin) {
    width: 100%; 
    border-left: none;
    border-top: 1px solid #ccc;
  }
}
              
            
!

JS

              
                
$(window).resize(function() { 
  
  if ($(window).width() > 928) {
    $('aside').height($('section').height())
  } else {
    $('aside').height('auto')
  }
   
});
              
            
!
999px

Console