```inky_example
<style type="text/css">
- .header {
- background: #8a8a8a;
+ .wrapper.header {
+ background: #8a8a8a !important;
}
- .header .columns {
- padding-bottom: 0;
+ .wrapper.header .columns {
+ padding-bottom: 0 !important;
}
.header p {
- color: #fff;
- padding-top: 15px;
+ color: #fff !important;
+ font-weight: bold;
+ margin-bottom: 0 !important;
}
- .header .wrapper-inner {
- padding: 20px;
- }
-
- .header .container {
- background: transparent;
+ .wrapper.header .header-container {
+ background: #8a8a8a !important;
}
</style>
<wrapper class="header">
+ <spacer size="16"></spacer>
<center>
- <container>
+ <container class="header-container">
<row class="collapse">
- <columns small="6">
+ <columns small="6" valign="middle">
<img src="http://placehold.it/200x50/663399">
</columns>
- <columns small="6">
- <p class="text-right">HEADER</p>
+ <columns small="6" valign="middle">
+ <p class="text-right">BASIC</p>
</columns>
</row>
</container>
</center>
+ <spacer size="16"></spacer>
</wrapper>
```
/// @type Number
$column-padding-bottom: $global-padding !default;
-/// Default border radius for the container.
+/// Default border radius for the container. Use a px value
/// @type Number
-$container-radius: 50px !default;
+$container-radius: 0 !default;
//For viewing email in browser
@media only screen {
+++ /dev/null
-<container class="header">
- <img src="http://placehold.it/150x30" alt="">
-</container>
-<container>
- <center>
- <img src="http://placehold.it/120" alt="">
- </center>
- <row>
- <columns>
- <h4 class="text-center">Responsive Emails</h4>
- <p class="text-center">15 sections | 567 Min</p>
- </columns>
- </row>
-
- <hr/>
-
- <row>
- <columns>
- <p class="text-center">Hey you! It's you! Just a heads up, we just added this hot new class that will teach you how to NOT be a lame as a duck. Not the metaphorical lame duck, either, but a real duck that was actually lame, maybe from stepping on a land mine or something. Anyways, Foundation for Emails makes coding HTML emails like calling the Navy SEALS to invade a Pre-school, with pre-schoolers, armed with Crayolas.</p>
- <center>
- <button href="#">Get smarter now ↣</button>
- </center>
- </columns>
- </row>
-
- <row class="collapsed footer">
- <columns>
- <p class="text-center">@Funhouse Island Inc<br/>
- <a href="#">hello@Funhouse.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
- <center>
- <menu>
- <item><img class="float-center" src="http://placehold.it/25" alt=""></item>
- <item><img class="float-center" src="http://placehold.it/25" alt=""></item>
- <item><img class="float-center" src="http://placehold.it/25" alt=""></item>
- <item><img class="float-center" src="http://placehold.it/25" alt=""></item>
- <item><img class="float-center" src="http://placehold.it/25" alt=""></item>
- </menu>
- </center>
- </columns>
- </row>
-
-</container>
\ No newline at end of file
+++ /dev/null
-<container class="header-drip">
-
- <row class="collapse">
- <columns>
- <img src="http://placehold.it/150x30/663399" alt="">
- </columns>
- </row>
-
-</container>
-
-<container class="body-drip">
-
- <br/>
-
- <center>
- <img src="http://placehold.it/120/663399" alt="">
- </center>
-
- <br/>
-
- <row>
- <columns>
- <h4 class="text-center">Responsive Emails</h4>
- <p class="text-center">15 sections | 567 Min</p>
- </columns>
- </row>
-
- <hr/>
-
- <row>
- <columns>
- <p class="text-center">Hey you! It's you! Just a heads up, we just added this hot new class that will teach you how to NOT be a lame as a duck. Not the metaphorical lame duck, either, but a real duck that was actually lame, maybe from stepping on a land mine or something. Anyways, Foundation for Emails makes coding HTML emails like calling the Navy SEALS to invade a Pre-school, with pre-schoolers, armed with Crayolas.</p>
- <center>
- <button href="#">Get smarter now ↣</button>
- </center>
- </columns>
- </row>
-
- <row class="collapsed footer-drip">
- <columns>
- <br/>
- <p class="text-center">@copywrite nobody<br/>
- <a href="#">hello@nocopywrite.com</a> | <a href="#">Manage Email Notifications</a> | <a href="#">Unsubscribe</a></p>
- <center>
- <menu>
- <item><img src="http://placehold.it/25/663399" alt=""></item>
- <item><img src="http://placehold.it/25/663399" alt=""></item>
- <item><img src="http://placehold.it/25/663399" alt=""></item>
- <item><img src="http://placehold.it/25/663399" alt=""></item>
- <item><img src="http://placehold.it/25/663399" alt=""></item>
- </menu>
- </center>
- </columns>
- </row>
-
-</container>
\ No newline at end of file
-<style type="text/css">
- .wrapper.header {
- background: #8a8a8a !important;
- }
- .wrapper.header .columns {
- padding-bottom: 0 !important;
- }
- .header p {
- color: #fff !important;
- font-weight: bold;
- }
- .wrapper.header .header-container {
- background: #8a8a8a !important;
- }
-</style>
<center>
<container class="header-container">
<row class="collapse">
- <columns small="6">
+ <columns small="6" valign="middle">
<img src="http://placehold.it/200x50/663399">
</columns>
- <columns small="6">
- <spacer size="15"></spacer>
+ <columns small="6" valign="middle" style="table-layout: fixed;">
<p class="text-right">BASIC</p>
</columns>
</row>
+++ /dev/null
-<container>
- <row>
- <columns>
- <table class="button expand">
- <tr>
- <td>
- <table>
- <tr>
- <td>
- <center data-parsed=""><a href="http://zurb.com" align="center" class="text-center">Button</a></center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- <table class="button expand">
- <tr>
- <td>
- <table>
- <tr>
- <td>
- <center data-parsed=""><a href="http://zurb.com" align="center" class="text-center">Button</a></center>
- </td>
- <td class="expander"></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </columns>
- </row>
-</container>
<img src="http://placehold.it/300" alt="">
</columns>
</row>
-</container>
\ No newline at end of file
+ <row class="">
+ <columns small="12" large="12">
+ <h4>Not Collapsed</h4>
+ </columns>
+ </row>
+ <row class="">
+ <columns small="6" large="6">
+ <img src="http://placehold.it/300" alt="">
+ </columns>
+ <columns small="6" large="6">
+ <img src="http://placehold.it/300" alt="">
+ </columns>
+ </row>
+</container>
+
+++ /dev/null
-<table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <th class="small-12 large-12 columns first last">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
- </th>
- </tr>
- </table>
-
- <table class="row collapse">
- <tr>
- <th class="small-12 large-12 columns first last">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam aliquid tenetur dignissimos repellendus sapiente reprehenderit vero, possimus omnis necessitatibus ad, debitis, distinctio ea laudantium. Corrupti veniam harum sint, laboriosam aut.</p>
- </th>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <th class="small-12 large-6 columns first" style="background:yellow;">
- <p>One Word</p>
- </th>
- <th class="small-12 large-6 columns last" style="background:green;">
- <table class="row">
- <tr>
- <th class="small-6 large-6 columns first" style="background:blue;">
- <p class="text-right">1</p>
- </th>
-
- <th class="small-6 large-6 columns first" style="background:purple;">
- <p>2sdafkhasdfkjhas dkfjh askdjfh askjdhf aksjdhf aksjdhf kajshdf</p>
- </th>
- </tr>
- </table>
- </th>
- </tr>
- </table>
-
- </td>
- </tr>
-</table>
\ No newline at end of file
<container>
<row>
- <columns small="12" large="12">
- <callout>
- <p>Lorem ipsum</p>
- </callout>
+ <columns small="12" large="12">
+ <callout>
+ </callout>
</columns>
</row>
<row class="collapse">
+++ /dev/null
-<div class="header">
- <container>
- <row class="collapse">
- <columns small="6">
- <img src="http://placehold.it/150x30/663399">
- </columns>
- <columns small="6">
- <p class="text-right">BASIC</p>
- </columns>
- </row>
- </container>
-</div>
-
-<container>
- <row>
- <columns>
- <br/>
- <h1>Hi, Elijah Baily</h1>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
- <img src="http://placehold.it/580x300" alt="">
- <br/><br/>
- <callout class="primary">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
- </callout>
- <h2>Title Ipsum <small>This is a note.</small></h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repellat, harum. Quas nobis id aut, aspernatur, sequi tempora laborum corporis cum debitis, ullam, dolorem dolore quisquam aperiam! Accusantium, ullam, nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus consequuntur commodi, aut sed, quas quam optio accusantium recusandae nesciunt, architecto veritatis. Voluptatibus sunt esse dolor ipsum voluptates, assumenda quisquam.</p>
- <button class="large" href="#">Click Me!</button>
- <br/>
- <callout class="secondary">
- <row>
- <columns large="6">
- <h5>Connect With Us:</h5>
- <button class="facebook expand" href="#">Facebook</button>
- <button class="twitter expand" href="#">Twitter</button>
- <button class="google expand" href="#">Google+</button>
- </columns>
- <columns large="6">
- <h5>Contact Info:</h5>
- <p>Phone: 408-341-0600</p>
- <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
- </columns>
- </row>
- </callout>
- <center>
- <menu>
- <item href="#">Terms</item>
- <item href="#">Privacy</item>
- <item href="#">Unsubscribe</item>
- </menu>
- </center>
- </columns>
- </row>
-</container>
<img src="http://placehold.it/600" alt="">
</columns>
</row>
+ <row>
+ <columns small="12" large="6">
+ <img src="http://placehold.it/400" alt="">
+ </columns>
+ <columns small="12" large="6">
+ <img src="http://placehold.it/400" alt="">
+ </columns>
+ </row>
</container>
\ No newline at end of file
+++ /dev/null
-<container>
- <div class="header">
- <row>
- <columns small="12" large="12">
- <center>
- <img src="http://placehold.it/150x50" alt="">
- </center>
- </columns>
- </row>
-
- <row>
- <columns small="6" large="6">
- <p>Monthly Pawprint</p>
- </columns>
- <columns small="6" large="6">
- <p class="text-right">April 1, 2016</p>
- </columns>
- </row>
- </div>
-
- <row>
- <columns small="12" large="12">
- <center>
- <img src="http://placehold.it/450x250" alt="">
- </center>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="12">
- <h4 class="text-center">reader's choice award</h4>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
- <center>
- <button class="primary small" href="http://zurb.com">Find out more</button>
- </center>
- </columns>
- </row>
-
- <div class="feature-block">
- <row>
- <columns small="12" large="3" class="large-offset-1">
- <img class="small-float-center" src="http://placehold.it/120" alt="question mark image">
- </columns>
- <columns small="12" large="8">
- <h4>what type are you?</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris.</p>
- <button class="primary small" href="http://zurb.com">Check it out</button>
- </columns>
- </row>
- </div>
-
- <row>
- <columns small="12" large="12">
- <h4 class="text-center">furry friends</h4>
- </columns>
- </row>
-
- <row>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- </row>
-
- <row>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- </row>
-
- <row>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- <columns small="6" large="4">
- <img align="center" class="float-center" src="http://placehold.it/120" alt="image of a cute kitty">
- <p class="text-center">name</p>
- <p class="text-center">age</p>
- </columns>
- </row>
-
- <row>
- <columns small="12" small="8" class="large-offset-4">
- <h4>grooming 101</h4>
- </columns>
- </row>
- <row>
- <columns small="12" large="4">
- <img align="right" class="float-right" src="http://placehold.it/120" alt="">
- </columns>
- <columns small="12" large="8">
- <h6>Learning to Brush like a Pro</h6>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <a href="http://zurb.com">Learn to Brush</a>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="12">
- <center>
- <button class="primary small" href="http://zurb.com">Read all tips</button>
- </center>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="8" class="large-offset-4">
- <h4>grooming 101</h4>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="3" class="large-offset-1">
- <img src="http://placehold.it/120" alt="">
- </columns>
- <columns small="12" large="8">
- <h6>Learning to Brush like a Pro</h6>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <a href="http://zurb.com">Learn to Brush</a>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="3" class="large-offset-1">
- <img src="http://placehold.it/120" alt="">
- </columns>
- <columns small="12" large="8">
- <h6>Learning to Brush like a Pro</h6>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <a href="http://zurb.com">Learn to Brush</a>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="3" class="large-offset-1">
- <img src="http://placehold.it/120" alt="">
- </columns>
- <columns small="12" large="8">
- <h6>Learning to Brush like a Pro</h6>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- <a href="http://zurb.com">Learn to Brush</a>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="8" class="large-offset-2">
- <img src="http://placehold.it/580x30" alt="">
- </columns>
- <columns small="12" large="2">
- </columns>
- </row>
-
- <row>
- <columns small="12" large="12" class="large-offset-3">
- <menu class="small-vertical text-center">
- <item href="one.html">Item One</item>
- <item href="one.html">Item Two</item>
- <item href="one.html">Item Three</item>
- </menu>
- </columns>
- </row>
-
- <row>
- <columns small="12" large="8" class="large-offset-2">
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud <unsubscribe>Unsubscribe</unsubscribe> ullamco laboris nisi ut aliquip.</p>
- </columns>
- <columns small="12" large="2">
- </columns>
- </row>
-
-</container>
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns>
- <menu>
- <item href="#">Item 1</item>
- <item href="#">Item 2</item>
- <item href="#">Item 3</item>
- </menu>
- </columns>
- </row>
-</container>
+++ /dev/null
-<container>
- <row>
- <columns large="4">
- <center>
- <img src="http://placehold.it/125x200">
- </center>
- </columns>
- <columns large="8">
- <h1>Do Something Radical With This App.</h1>
- <button class="large" href="#">Sign Up</button>
- </columns>
- </row>
- <row>
- <columns>
- <h3 class="text-center">It's Never Been Easier to Do Things.</h3>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur pariatur unde magni repudiandae totam, accusamus facere eligendi. Ad nobis eius porro saepe et ab, aliquid, sed mollitia cumque suscipit aperiam.</p>
- </columns>
- </row>
- <row>
- <columns large="4">
- <center>
- <img src="http://placehold.it/50x50">
- </center>
- <h5 class="text-center">Feature One</h5>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
- </columns>
- <columns large="4">
- <center>
- <img src="http://placehold.it/50x50">
- </center>
- <h5 class="text-center">Feature Two</h5>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
- </columns>
- <columns large="4">
- <center>
- <img src="http://placehold.it/50x50">
- </center>
- <h5 class="text-center">Feature Three</h5>
- <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, quod quam unde earum.</p>
- </columns>
- </row>
- <row>
- <columns>
- <h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
- <button class="large expand" href="#">Sign Up</button>
- </columns>
- </row>
-</container>
<container>
- <center>
- <menu>
- <item href="http://zurb.com">Item</item>
- <item href="http://zurb.com">Item</item>
- <item href="http://zurb.com">Item</item>
- </menu>
- </center>
+ centered menu
+ <row>
+ <columns>
+ <center>
+ <menu>
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ </menu>
+ </center>
+ </columns>
+ </row>
+ vertical centered menu
+ <row>
+ <columns>
+ <center>
+ <menu class="vertical">
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ <item href="http://zurb.com">Item</item>
+ </menu>
+ </center>
+ </columns>
+ </row>
+ vertical on small centered menu
+ <row>
+ <columns>
+ <center>
+ <menu class="small-vertical">
+ <item href="#">Item 1</item>
+ <item href="#">Item 2</item>
+ <item href="#">Item 3</item>
+ </menu>
+ </center>
+ </columns>
+ </row>
</container>
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns>
- <menu class="vertical">
- <item href="#">Item 1</item>
- <item href="#">Item 2</item>
- <item href="#">Item 3</item>
- </menu>
- </columns>
- </row>
-</container>
+++ /dev/null
- <table class="container">
- <tr>
- <td>
-
- <table class="menu vertical">
- <tr>
- <td>
- <table>
- <tr>
- <th class="menu-item">
- <a href="http://google.com">Nav 1</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 2</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 3</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 4</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 5</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 6</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 7</a>
- </th>
- <th class="menu-item">
- <a href="http://google.com">Nav 8</a>
- </th>
- </tr>
- </table>
- </td>
- </tr>
- </table>
-
- </td>
- </tr>
-</table>
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns>
- <center>
- <img src="http://placehold.it/548x200">
- </center>
- </columns>
- </row>
- <row>
- <columns large="8">
- <h2>This is a title</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam at, nihil quas harum mollitia dolores odio. Inventore delectus nihil soluta quos, magni doloribus, voluptas aspernatur explicabo atque perspiciatis possimus voluptates.</p>
- <p><a href="#">Learn more</a></p>
- </columns>
- <columns large="4">
- <img src="http://placehold.it/170x129" alt="">
- </columns>
- </row>
- <row>
- <columns large="6">
- <h4>Sub Section Title</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
- </columns>
- <columns large="6">
- <h4>Sub Section Title</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod eum eius numquam sint dolore voluptatibus beatae ab ad, dignissimos fugiat? Nisi odio commodi debitis eveniet tenetur provident aliquid tempora placeat.</p>
- </columns>
- </row>
- <row>
- <columns>
- <p>You received this email because you're signed up to receive updates from us. <a href="#">Click here to unsubscribe.</a></p>
- </columns>
- </row>
-</container>
+++ /dev/null
-<container>
- <row>
- <columns>
- <h1 class="text-center">The Insider</h1>
- <center>
- <img src="http://placehold.it/500x200">
- </center>
- <br/><br/><br/>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa itaque illo doloribus soluta expedita dolores commodi fuga odit.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto reiciendis eos magni deleniti accusamus tempore, consectetur! Maxime amet, exercitationem nihil fugit eius esse voluptatum ab incidunt minima, saepe reiciendis ipsum.</p>
-
- <row>
- <columns large="6">
- <h4>More Reading:</h4>
- <ul>
- <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
- <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
- <li><a href="#">Lorem Ipsum Dolor Sit Amet</a></li>
- </ul>
- </columns>
- <columns>
- <h4>Get Involved:</h4>
- <ul>
- <li><a href="#">Facebook</a></li>
- <li><a href="#">Twitter</a></li>
- <li><a href="#">Instagram</a></li>
- </ul>
- </columns>
- </row>
-
- <p><small>You received this email because you're signed up to get updates from us. <a href="#">Click here to unsubscribe.</a></small></p>
- </columns>
- </row>
-</container>
+++ /dev/null
-<table class="container">
- <tr>
- <td>
-
- <table class="row">
- <tr>
- <th class="small-8 large-8 columns first">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
- </th>
-
- <th class="small-4 large-4 columns last">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
- </th>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <th class="small-4 small-offset-8 large-4 large-offset-8 columns">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
- </th>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <th class="small-12 large-8 columns first">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ea eaque magni accusamus quisquam quod quia, molestiae, perferendis in debitis omnis, repellendus et fugiat rem obcaecati explicabo quasi deleniti ab.</p>
- </th>
-
- <th class="small-12 large-4 columns last">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, sequi! Velit laboriosam aliquam mollitia quas dignissimos possimus ipsa aspernatur quod fugiat maxime, veniam veritatis! Ipsa esse enim sunt voluptatum nostrum.</p>
- </th>
- </tr>
- </table>
-
- <table class="row">
- <tr>
- <th class="small-12 large-4 large-offset-8 columns">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure natus culpa optio, saepe expedita repellendus libero reiciendis, sit explicabo consectetur sint, repudiandae, vero iusto laboriosam eum voluptate quae officiis maxime!</p>
- </th>
- </tr>
- </table>
-
- </td>
- </tr>
-</table>
\ No newline at end of file
+++ /dev/null
-<container>
- <row>
- <columns>
- <h1>Thanks for your order.</h1>
- <p>Thanks for shopping with us! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad earum ducimus, non, eveniet neque dolores voluptas architecto sed, voluptatibus aut dolorem odio. Cupiditate a recusandae, illum cum voluptatum modi nostrum.</p>
-
- <callout class="secondary">
- <row>
- <columns large="6">
- <p>
- <strong>Payment Method</strong><br/>
- Dubloons
- </p>
- <p>
- <strong>Email Address</strong><br/>
- thecapn@pirates.org
- </p>
- <p>
- <strong>Order ID</strong><br/>
- 239235983749636
- </p>
- </columns>
- <columns large="6">
- <p>
- <strong>Shipping Method</strong><br/>
- Boat (1–2 weeks)<br/>
- <strong>Shipping Address</strong><br/>
- Captain Price<br/>
- 123 Maple Rd<br/>
- Campbell, CA 95112
- </p>
- </columns>
- </row>
- </callout>
-
- <h4>Order Details</h4>
-
- <table>
- <tr><th>Item</th><th>#</th><th>Price</th></tr>
- <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
- <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
- <tr><td>Ship's Cannon</td><td>2</td><td>$100</td></tr>
- <tr>
- <td colspan="2"><b>Subtotal:</b></td>
- <td>$600</td>
- </tr>
- </table>
-
- <h4>What's Next?</h4>
-
- <p>Our carrier raven will prepare your order for delivery. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi necessitatibus itaque debitis laudantium doloribus quasi nostrum distinctio suscipit, magni soluta eius animi voluptatem qui velit eligendi quam praesentium provident culpa?</p>
- </columns>
- </row>
- <row class="footer text-center">
- <columns large="3">
- <img src="http://placehold.it/170x30" alt="">
- </columns>
- <columns large="3">
- <p>
- Call us at 800.555.1923<br/>
- Email us at support@discount.boat
- </p>
- </columns>
- <columns large="3">
- <p>
- 123 Maple Rd<br/>
- Campbell, CA 95112
- </p>
- </columns>
- </row>
-</container>
+++ /dev/null
-<container>
- <row class="header">
- <columns>
- <h4 class="text-center">Pirate Retirement Services</h4>
- </columns>
- </row>
- <row>
- <columns>
- <center>
- <img src="http://placehold.it/250x250">
- </center>
- <h1 class="text-center">Forgot Your Password?</h1>
- <p class="text-center">It happens. Click the link below to reset your password.</p>
- <button class="large expand" href="#">Reset Password</button>
-
- <hr/>
-
- <p><small>You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, <a href="#">unsubscribe here</a>.</small></p>
- </columns>
- </row>
-</container>
+++ /dev/null
-<div class="header">
- <container>
- <row class="collapse">
- <columns small="6">
- <img src="http://placehold.it/150x30/663399">
- </columns>
- <columns small="6">
- <p class="text-right">BASIC</p>
- </columns>
- </row>
- </container>
-</div>
-
-<container>
- <br/>
- <row>
- <columns>
- <h1>Hi, Elijah Baily</h1>
- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi impedit sapiente delectus molestias quia.</p>
- <center>
- <img src="http://placehold.it/570x300" alt="">
- </center>
- <callout class="primary">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda, praesentium qui vitae voluptate dolores. <a href="#">Click it!</a></p>
- </callout>
- <row>
- <columns large="7">
- <h3>Hello, Han Fastolfe</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nobis velit, aliquid pariatur at fugit. Omnis at quae, libero iusto quisquam animi blanditiis neque, alias minima corporis, ab in explicabo?</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime dignissimos voluptas minus, cupiditate voluptatem, voluptatum iste molestiae consectetur temporibus quae dolore nam possimus reprehenderit blanditiis laborum iusto sit. Perspiciatis, dolor.</p>
- <callout class="secondary">
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quas optio totam quidem, placeat sunt, sit iusto fugit. Harum omnis deleniti enim nihil iure, quis laudantium veniam velit animi debitis. <a href="#">Click It!</a>
- </callout>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores minus eius amet alias odit accusantium, fugit perspiciatis nulla suscipit nisi. Laborum aliquid, voluptatum consectetur fugiat maxime architecto enim molestias aperiam!</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eveniet veritatis, magnam ipsam et vero necessitatibus. Deserunt facilis impedit, adipisci illo laboriosam assumenda fugiat dolorum nam odio aliquid, sit est.</p>
- <button class="expand" href="#">Click Me!</button>
- </columns>
- <columns large="5">
- <callout class="secondary">
- <h5>Header</h5>
- <p class="lead">Sub-header</p>
- <menu class="vertical">
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- <item href="#">Just a Plain Link »</item>
- </menu>
- </callout>
- <callout class="secondary">
- <h5>Contact Info:</h5>
- <button class="facebook expand" href="#">Facebook</button>
- <button class="twitter expand" href="#">Twitter</button>
- <button class="google expand" href="#">Google+</button>
- <p>Phone: 408-341-0600</p>
- <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
- </callout>
- </columns>
- </row>
- <center>
- <menu>
- <item href="#">Terms</item>
- <item href="#">Privacy</item>
- <item href="#">Unsubscribe</item>
- </menu>
- </center>
- </columns>
- </row>
-</container>
<callout>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, facere non quam quibusdam! Tenetur quo corporis, accusamus eum nulla amet deserunt consequuntur dolores inventore ratione modi voluptates nemo vero numquam.</p>
</callout>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam voluptas possimus reprehenderit aut fugit soluta eum nihil. Deserunt eaque, fuga qui laborum repellat rerum laudantium ad, et blanditiis perferendis ducimus?</p>
</columns>
</row>
</container>
+++ /dev/null
-<container>
- <row>
- <columns>
- <h1 class="text-center">Welcome to Kraken Academy</h1>
- <menu class="text-center">
- <item href="#">About</item>
- <item href="#">Course List</item>
- <item href="#">Campus Map</item>
- <item href="#">Contact</item>
- </menu>
- <center>
- <img src="http://placehold.it/200x200">
- </center>
- <h4>An exciting future of terrorizing sailors awaits you at Kraken Academy.</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque culpa vel architecto, perspiciatis eius cum autem quidem, sunt consequuntur, impedit dolor vitae illum nobis sint nihil aliquid? Assumenda, amet, officia.</p>
- <menu>
- <item href="#">krakenacademy.com</item>
- <item href="#">Facebook</item>
- <item href="#">Twitter</item>
- <item href="#">(408)-555-0123</item>
- </menu>
- </columns>
- </row>
-</container>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
