<p>This callout will only appear on large screens.</p>
</callout>
```
+
+*note - `.hide-for-large` is not supported on Gmail and Yahoo email clients.*
\ No newline at end of file
// expanded buttons anchor width
-@for $i from 1 through $grid-column-count {
- td.large-#{$i} table.expand table a,
- th.large-#{$i} table.expand table a,
- td.large-#{$i} table.expanded table a,
- th.large-#{$i} table.expanded table a {
- width: -zf-grid-calc-px($i, $grid-column-count, $global-width) !important;
- }
-}
+// @for $i from 1 through $grid-column-count {
+// td.large-#{$i} table.expand table a,
+// th.large-#{$i} table.expand table a,
+// td.large-#{$i} table.expanded table a,
+// th.large-#{$i} table.expanded table a {
+// width: -zf-grid-calc-px($i, $grid-column-count, $global-width) !important;
+// }
+// }
// 5. Button
// 6. Callout
// 7. Menu
-// 8. Thumbnial
+// 8. Thumbnail
// 1. Global
$menu-item-gutter: 10px;
$menu-item-color: $primary-color;
-// 8. Thumbnial
+// 8. Thumbnail
// ------------
-$thumbnail-border: 4px solid $white;
+$thumbnail-border: solid 4px $white;
$thumbnail-margin-bottom: $global-margin;
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
-<div class="header">
+<style type="text/css">
+ .header {
+ background: #8a8a8a;
+ }
+
+ .header .columns {
+ padding-bottom: 0;
+ }
+
+ .header p {
+ color: #fff;
+ padding-top: 15px;
+ }
+
+ .header .wrapper-inner {
+ padding: 20px;
+ }
+
+ .header .container {
+ background: transparent;
+ }
+
+ table.button.facebook table td {
+ background: #3B5998 !important;
+ border-color: #3B5998;
+ }
+
+ table.button.twitter table td {
+ background: #1daced !important;
+ border-color: #1daced;
+ }
+
+ table.button.google table td {
+ background: #DB4A39 !important;
+ border-color: #DB4A39;
+ }
+
+ .wrapper.secondary {
+ background: #f3f3f3;
+ }
+</style>
+
+
+
+<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
- <img src="http://placehold.it/150x30/663399">
+ <img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
<p class="text-right">BASIC</p>
</columns>
</row>
</container>
-</div>
+</wrapper>
<container>
+
+ <spacer size="16"></spacer>
+
<row>
- <columns>
- <br>
- <center>
- <img src="http://placehold.it/200x50">
- </center>
- <br>
+ <columns small="12">
+
<h1>Hi, Susan Calvin</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio nulla et, fugiat. Maiores accusantium nostrum asperiores provident, quam modi ex inventore dolores id aspernatur architecto odio minima perferendis, explicabo. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quos quasi itaque beatae natus fugit provident delectus, magnam laudantium odio corrupti sit quam. Optio aut ut repudiandae velit distinctio asperiores?</p>
<callout class="primary">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
</callout>
- <callout class="secondary">
- <row>
- <columns large="6">
- <h5>Connect With Us:</h5>
- <button class="facebook expand" href="http://zurb.com">Facebook</button>
- <button class="twitter expand" href="http://zurb.com">Twitter</button>
- <button class="google expand" href="http://zurb.com">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>
</columns>
</row>
+ <wrapper class="secondary">
+
+ <spacer size="16"></spacer>
+
+ <row>
+ <columns large="6">
+ <h5>Connect With Us:</h5>
+ <button class="facebook expand" href="http://zurb.com">Facebook</button>
+ <button class="twitter expand" href="http://zurb.com">Twitter</button>
+ <button class="google expand" href="http://zurb.com">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>
+ </wrapper>
</container>
-<container class="header">
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+
+ .container.header {
+ background: #f3f3f3;
+ }
+
+ .body-drip {
+ border-top: 8px solid #663399;
+ }
+</style>
+
+<container class="header">
<row class="collapse">
<columns>
<img src="http://placehold.it/150x30/663399" alt="">
</columns>
</row>
-
</container>
<container class="body-drip">
- <br>
+ <spacer size="16"></spacer>
<center>
<img src="http://placehold.it/120/663399" alt="">
</center>
- <br>
+ <spacer size="16"></spacer>
<row>
<columns>
<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>
+ <button href="#" class="success">Get smarter now ↣</button>
</center>
</columns>
</row>
<row class="collapsed footer">
<columns>
- <br>
+ <spacer size="16"></spacer>
<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>
-<div class="header">
+<style type="text/css">
+ .header {
+ background: #8a8a8a;
+ }
+
+ .header .columns {
+ padding-bottom: 0;
+ }
+
+ .header p {
+ color: #fff;
+ padding-top: 15px;
+ }
+
+ .header .wrapper-inner {
+ padding: 20px;
+ }
+
+ .header .container {
+ background: transparent;
+ }
+
+ table.button.facebook table td {
+ background: #3B5998 !important;
+ border-color: #3B5998;
+ }
+
+ table.button.twitter table td {
+ background: #1daced !important;
+ border-color: #1daced;
+ }
+
+ table.button.google table td {
+ background: #DB4A39 !important;
+ border-color: #DB4A39;
+ }
+
+ .wrapper.secondary {
+ background: #f3f3f3;
+ }
+</style>
+
+<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
- <img src="http://placehold.it/150x30/663399">
+ <img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
- <p class="text-right">BASIC</p>
+ <p class="text-right">HERO</p>
</columns>
</row>
</container>
-</div>
+</wrapper>
<container>
+
+ <spacer size="16"></spacer>
+
<row>
- <columns>
- <center>
- <img src="http://placehold.it/200x50/663399">
- </center>
+ <columns small="12">
<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="">
</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>
- <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>
- <menu>
- <item href="#">Terms</item>
- <item href="#">Privacy</item>
- <item href="#">Unsubscribe</item>
- </menu>
+
+ <button class="large secondary" href="#">Click Me!</button>
+
</columns>
</row>
+
+ <wrapper class="secondary">
+
+ <spacer size="16"></spacer>
+
+ <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>
+ </wrapper>
+
+ <center>
+ <menu>
+ <item href="#">Terms</item>
+ <item href="#">Privacy</item>
+ <item href="#">Unsubscribe</item>
+ </menu>
+ </center>
+
</container>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+</style>
+
+
<container>
<row>
<columns large="4">
<button class="large" href="#">Sign Up</button>
</columns>
</row>
+
+ <spacer size="16"></spacer>
+
<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. Rerum, quod quam unde earum.</p>
</columns>
</row>
+
+ <spacer size="16"></spacer>
+
<row>
<columns>
<h3 class="text-center">What Are You Waiting For? Get Started Today.</h3>
+
+ <spacer size="16"></spacer>
+
<button class="large expand" href="#">Sign Up</button>
</columns>
</row>
+
+ <row class="collapsed footer">
+ <columns>
+ <spacer size="16"></spacer>
+ <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" alt=""></item>
+ <item><img src="http://placehold.it/25" alt=""></item>
+ <item><img src="http://placehold.it/25" alt=""></item>
+ <item><img src="http://placehold.it/25" alt=""></item>
+ <item><img src="http://placehold.it/25" alt=""></item>
+ </menu>
+ </center>
+ </columns>
+ </row>
+
+ <spacer size="16"></spacer>
+
</container>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+</style>
+
+
+
<container>
+
+ <spacer size="16"></spacer>
+
<row>
<columns>
<center>
<p><a href="#">Learn more</a></p>
</columns>
<columns large="4">
- <img src="http://placehold.it/170x129" alt="">
+ <img class="small-float-center" src="http://placehold.it/170x129" alt="">
</columns>
</row>
<row>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+</style>
+
<container>
+
+ <spacer size="16"></spacer>
+
<row>
<columns>
<h1 class="text-center">The Insider</h1>
<center>
<img src="http://placehold.it/500x200">
</center>
+
+ <spacer size="16"></spacer>
+
<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>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+</style>
+
<container>
+
+ <spacer size="16"></spacer>
+
<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>
+ <spacer size="16"></spacer>
+
<callout class="secondary">
<row>
<columns large="6">
</tr>
</table>
+ <hr>
+
<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>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+
+ .header {
+ background: #f3f3f3;
+ }
+</style>
+
<container>
+
<row class="header">
<columns>
+
+ <spacer size="16"></spacer>
+
<h4 class="text-center">Pirate Retirement Services</h4>
</columns>
</row>
<row>
<columns>
+
+ <spacer size="32"></spacer>
+
<center>
<img src="http://placehold.it/250x250">
</center>
+
+ <spacer size="16"></spacer>
+
<h1 class="text-center">Forgot Your Password?</h1>
+
+ <spacer size="16"></spacer>
+
<p class="text-center">It happens. Click the link below to reset your password.</p>
<button class="large expand" href="#">Reset Password</button>
<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>
+
+ <spacer size="16"></spacer>
</container>
-<div class="header">
+<style type="text/css">
+ .header {
+ background: #8a8a8a;
+ }
+
+ .header .columns {
+ padding-bottom: 0;
+ }
+
+ .header p {
+ color: #fff;
+ padding-top: 15px;
+ }
+
+ .header .wrapper-inner {
+ padding: 20px;
+ }
+
+ .header .container {
+ background: transparent;
+ }
+
+ table.button.facebook table td {
+ background: #3B5998 !important;
+ border-color: #3B5998;
+ }
+
+ table.button.twitter table td {
+ background: #1daced !important;
+ border-color: #1daced;
+ }
+
+ table.button.google table td {
+ background: #DB4A39 !important;
+ border-color: #DB4A39;
+ }
+
+ .wrapper.secondary {
+ background: #f3f3f3;
+ }
+
+ .sidebar .menu .menu-item {
+ border-top: 1px solid #777777;
+ }
+</style>
+
+
+
+<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
- <img src="http://placehold.it/150x30/663399">
+ <img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
- <p class="text-right">BASIC</p>
+ <p class="text-right">SIDEBAR HERO</p>
</columns>
</row>
</container>
-</div>
+</wrapper>
<container>
- <row>
- <columns>
- <center>
- <img src="http://placehold.it/200x50">
- </center>
- </columns>
- </row>
+
+ <spacer size="16"></spacer>
+
<row>
<columns>
<h1>Hi, Elijah Baily</h1>
<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>
+ </columns>
+ </row>
+ <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" class="sidebar">
+ <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>
- </center>
+ </callout>
+ <callout class="secondary">
+ <h6>CONNECT WITH US:</h6>
+ <button class="facebook expand" href="#">Facebook</button>
+ <button class="twitter expand" href="#">Twitter</button>
+ <button class="google expand" href="#">Google+</button>
+ <p>CONTACT INFO:</p>
+ <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>
+
</container>
-<div class="header">
+<style type="text/css">
+ .header {
+ background: #8a8a8a;
+ }
+
+ .header .columns {
+ padding-bottom: 0;
+ }
+
+ .header p {
+ color: #fff;
+ padding-top: 15px;
+ }
+
+ .header .wrapper-inner {
+ padding: 20px;
+ }
+
+ .header .container {
+ background: transparent;
+ }
+
+ table.button.facebook table td {
+ background: #3B5998 !important;
+ border-color: #3B5998;
+ }
+
+ table.button.twitter table td {
+ background: #1daced !important;
+ border-color: #1daced;
+ }
+
+ table.button.google table td {
+ background: #DB4A39 !important;
+ border-color: #DB4A39;
+ }
+
+ .wrapper.secondary {
+ background: #f3f3f3;
+ }
+
+ .sidebar .menu .menu-item {
+ border-top: 1px solid #777777;
+ }
+</style>
+
+
+
+<wrapper class="header">
<container>
<row class="collapse">
<columns small="6">
- <img src="http://placehold.it/150x30/663399">
+ <img src="http://placehold.it/200x50/663399">
</columns>
<columns small="6">
- <p class="text-right">BASIC</p>
+ <p class="text-right">SIDEBAR</p>
</columns>
</row>
</container>
-</div>
+</wrapper>
<container>
- <row>
- <columns>
- <center>
- <img src="http://placehold.it/200x50">
- </center>
- </columns>
- </row>
+
+ <spacer size="16"></spacer>
+
<row>
<columns large="7">
<h2>Hello, Han Fastolfe</h2>
<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">
+ <columns large="5" class="sidebar">
<callout class="secondary">
<h5>Header</h5>
<p class="lead">Sub-header</p>
</menu>
</callout>
<callout class="secondary">
- <h5>Contact Info:</h5>
+ <h6>CONNECT WITH US:</h6>
<button class="facebook expand" href="#">Facebook</button>
<button class="twitter expand" href="#">Twitter</button>
<button class="google expand" href="#">Google+</button>
+ <p>CONTACT INFO:</p>
<p>Phone: 408-341-0600</p>
<p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
</callout>
</row>
<row>
<columns>
- <menu>
- <item href="#">Terms</item>
- <item href="#">Privacy</item>
- <item href="#">Unsubscribe</item>
- </menu>
+ <center>
+ <menu>
+ <item href="#">Terms</item>
+ <item href="#">Privacy</item>
+ <item href="#">Unsubscribe</item>
+ </menu>
+ </center>
</columns>
</row>
</container>
-<container>
+<style type="text/css">
+ body,
+ html,
+ .body {
+ background: #f3f3f3 !important;
+ }
+
+ .container.header {
+ background: #f3f3f3;
+ }
+
+ .body-border {
+ border-top: 8px solid #663399;
+ }
+</style>
+
+<container class="header">
<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>
+ <menu class="text-center">
+ <item href="#">About</item>
+ <item href="#">Course List</item>
+ <item href="#">Campus Map</item>
+ <item href="#">Contact</item>
+ </menu>
+ </center>
+
+ </columns>
+ </row>
+</container>
+
+<container class="body-border">
+ <row>
+ <columns>
+
+ <spacer size="32"></spacer>
+
<center>
<img src="http://placehold.it/200x200">
</center>
+
+ <spacer size="16"></spacer>
+
<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>
+
+ <center>
+ <menu>
+ <item href="#">krakenacademy.com</item>
+ <item href="#">Facebook</item>
+ <item href="#">Twitter</item>
+ <item href="#">(408)-555-0123</item>
+ </menu>
+ </center>
+
</columns>
</row>
+
+ <spacer size="16"></spacer>
</container>
<container>
+ <p>Text should be centered</p>
+ <p>hover on buttons should change pointer full width of button</p>
+ <p>on small, should work the same</p>
<row>
<columns small="12" large="6">
<button href="#" class="expand">button</button>
<button href="#" class="small expand">example text 2</button>
</columns>
</row>
-</container>
\ No newline at end of file
+
+ <callout class="secondary">
+ <row>
+ <columns large="6">
+ <h5>Connect With Us:</h5>
+ <button class="facebook expand" href="http://zurb.com">Facebook</button>
+ <button class="twitter expand" href="http://zurb.com">Twitter</button>
+ <button class="google expand" href="http://zurb.com">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>
+ <em>Make sure the above container is not greater than 600px or looks awkwardly too wide.</em>
+</container>
+
projects / thirdparty / foundation / foundation-emails.git / commitdiff
