A Pen by Captain Anonymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

<section id='business' class='large-3 medium-12 small-12 columns right panel' data-magellan-expedition="fixed">
  <header>
    <h1>Summary</h1>
    <p>Business Cards</p>
  </header>

  <article>
    <table class='debug'>
      <tbody>
        <tr><td>Digital</td></tr>   
        <tr><td>3.5 * 2</td></tr>     
        <tr><td>Qty: 50,000</td></tr>
        <tr><td>14 Point C2S</td></tr>
        <tr><td>Color Front, Empty Back</td></tr>      
        <tr><td>5 Business day turnaround</td></tr>    
        <tr><td>5 Business day turnaround</td></tr>  
        <tr><td>5 Business day turnaround </td></tr>
      </tbody>
    </table>

    <p class='price'>Your Price:      $64.5</p>
    <p class='price'> Unit Cost:      $0.323</p>
    <a href="#" class="small radius success button">Get Started</a>
  </article>
</section>

script.js

$(document).foundation();

style.css

.debug {border: 1px solid red;}

/* Bussines root modifiers */
#business { padding-top: 20px;}
#business table { width: 100%;}

/* Bussines #top */
#business > header {
  /* Target former #top */
}

#business > header > h1 {
  font-size: 2rem;
  margin: 0px;
  padding: 0px;
};

#business > header p {
  font-size: 2.5rem;
  margin: 0px;
  padding: 0px;
}

/* Bussines #summary */

#business > article {
  /* Target former summary */
}

/* Price specs */
.price {
  font-size: 1.4rem;
  font-weight: bold;
  margin: 0px; padding: 0px;
}
.price:last-of-type {
  margin-bottom: .5rem;
}