border: none;
border-left: 5px solid $primary-color;
}
+
+.marketing-topbar,
+.title-bar {
+ background: #2c3840;
+}
\ No newline at end of file
If you haven't yet, download the starter files for Foundation for Emails. They include the boilerplate HTML needed for an email, and all of the CSS for Foundation.
-<a href="http://foundation.zurb.com/downloads/foundation-emails.zip" class="large button">Download Foundation for Emails</a>
+<a href="https://s3.amazonaws.com/zurb-foundation/foundation-emails.zip" class="large button">Download Foundation for Emails</a>
Unzip the folder and open it in your text editor of choice.
<div class="support-links">
<h4 class="hide-for-small">Talk to us</h4>
<p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
- <p><a href="http://foundation.zurb.com/business/business-support.html">Business Support</a></p>
- <p>Or check our <a href="http://foundation.zurb.com/support/support.html">support page</a></p>
+ <p><a href="http://foundation.zurb.com/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
</div>
</div>
<div class="medium-4 columns">
<li><a href="http://zurb.com/contact">Contact</a></li>
<li><a href="http://zurb.com/sitemap">Sitemap</a></li>
</ul>
- <p class="copyright">© 1998‐2015 ZURB, Inc. All rights reserved.</p>
+ <p class="copyright">© 1998‐2016 ZURB, Inc. All rights reserved.</p>
</div>
</div>
</div>
<style type="text/css">
- .header {
- background: #8a8a8a;
- }
- .header .columns {
- padding-bottom: 0;
- }
+.header {
+ background: #8a8a8a;
+}
- .header p {
- color: #fff;
- padding-top: 15px;
- }
+.header .columns {
+ padding-bottom: 0;
+}
- .header .wrapper-inner {
- padding: 20px;
- }
+.header p {
+ color: #fff;
+ margin-bottom: 0;
+}
- .header .container {
- background: transparent;
- }
+.header .wrapper-inner {
+ padding: 20px; /*controls the height of the header*/
+}
- table.button.facebook table td {
- background: #3B5998 !important;
- border-color: #3B5998;
- }
+.header .container {
+ background: #8a8a8a;
+}
- table.button.twitter table td {
- background: #1daced !important;
- border-color: #1daced;
- }
+.wrapper.secondary {
+ background: #f3f3f3;
+}
- table.button.google table td {
- background: #DB4A39 !important;
- border-color: #DB4A39;
- }
-
- .wrapper.secondary {
- background: #f3f3f3;
- }
</style>
+<!-- move the above styles into your custom stylesheet -->
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
<container>
<row class="collapse">
- <columns small="6">
+ <columns small="6" valign="middle">
<img src="http://placehold.it/200x50/663399">
</columns>
- <columns small="6">
+ <columns small="6" valign="middle">
<p class="text-right">BASIC</p>
</columns>
</row>
<spacer size="16"></spacer>
<row>
- <columns small="12">
+ <columns>
<h1>Hi, Susan Calvin</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</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>
+
</columns>
</row>
+
<wrapper class="secondary">
-
<spacer size="16"></spacer>
-
<row>
- <columns large="6">
+ <columns small="12" 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>
+ <menu class="vertical">
+ <item style="text-align: left;" href="#">Twitter</item>
+ <item style="text-align: left;" href="#">Facebook</item>
+ <item style="text-align: left;" href="#">Google +</item>
+ </menu>
</columns>
- <columns large="6">
+ <columns small="12" 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>
\ No newline at end of file
border-top: 8px solid #663399;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
+<spacer size="16"></spacer>
+
<container class="header">
<row class="collapse">
<columns>
<style type="text/css">
- .header {
- background: #8a8a8a;
- }
- .header .columns {
- padding-bottom: 0;
- }
+.header {
+ background: #8a8a8a;
+}
- .header p {
- color: #fff;
- padding-top: 15px;
- }
+.header .columns {
+ padding-bottom: 0;
+}
- .header .wrapper-inner {
- padding: 20px;
- }
+.header p {
+ color: #fff;
+ margin-bottom: 0;
+}
- .header .container {
- background: transparent;
- }
+.header .wrapper-inner {
+ padding: 20px; /*controls the height of the header*/
+}
- table.button.facebook table td {
- background: #3B5998 !important;
- border-color: #3B5998;
- }
+.header .container {
+ background: #8a8a8a;
+}
- table.button.twitter table td {
- background: #1daced !important;
- border-color: #1daced;
- }
+.wrapper.secondary {
+ background: #f3f3f3;
+}
- table.button.google table td {
- background: #DB4A39 !important;
- border-color: #DB4A39;
- }
-
- .wrapper.secondary {
- background: #f3f3f3;
- }
</style>
+<!-- move the above styles into your custom stylesheet -->
<wrapper class="header">
<container>
</row>
<wrapper class="secondary">
-
<spacer size="16"></spacer>
-
<row>
- <columns large="6">
+ <columns small="12" 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>
+ <menu class="vertical" align="left">
+ <item style="text-align: left;" href="#">Twitter</item>
+ <item style="text-align: left;" href="#">Facebook</item>
+ <item style="text-align: left;" href="#">Google +</item>
+ </menu>
</columns>
- <columns large="6">
+ <columns small="12" 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>
background: #f3f3f3 !important;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
+<spacer size="16"></spacer>
+
<container>
<row>
<columns large="4">
background: #f3f3f3 !important;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
-
+<spacer size="16"></spacer>
<container>
<p><a href="#">Learn more</a></p>
</columns>
<columns large="4">
- <img class="small-float-center" src="http://placehold.it/170x129" alt="">
+ <img class="small-float-center" src="http://placehold.it/170x129" width="170" alt="">
</columns>
</row>
<row>
background: #f3f3f3 !important;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
<container>
background: #f3f3f3 !important;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
<container>
background: #f3f3f3;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
<container>
<style type="text/css">
- .header {
- background: #8a8a8a;
- }
- .header .columns {
- padding-bottom: 0;
- }
+.header {
+ background: #8a8a8a;
+}
- .header p {
- color: #fff;
- padding-top: 15px;
- }
+.header .columns {
+ padding-bottom: 0;
+}
- .header .wrapper-inner {
- padding: 20px;
- }
+.header p {
+ color: #fff;
+ margin-bottom: 0;
+}
- .header .container {
- background: transparent;
- }
+.header .wrapper-inner {
+ padding: 20px; /*controls the height of the header*/
+}
- table.button.facebook table td {
- background: #3B5998 !important;
- border-color: #3B5998;
- }
+.header .container {
+ background: #8a8a8a;
+}
- table.button.twitter table td {
- background: #1daced !important;
- border-color: #1daced;
- }
+.wrapper.secondary {
+ background: #f3f3f3;
+}
- 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>
+<!-- move the above styles into your custom stylesheet -->
+<spacer size="16"></spacer>
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
<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">SIDEBAR HERO</p>
+ <columns small="6" valign="middle">
+ <p class="text-right">Sidebar Hero</p>
</columns>
</row>
</container>
<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>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
</callout>
<callout class="secondary">
<h6>CONNECT WITH US:</h6>
<style type="text/css">
- .header {
- background: #8a8a8a;
- }
- .header .columns {
- padding-bottom: 0;
- }
+.header {
+ background: #8a8a8a;
+}
- .header p {
- color: #fff;
- padding-top: 15px;
- }
+.header .columns {
+ padding-bottom: 0;
+}
- .header .wrapper-inner {
- padding: 20px;
- }
+.header p {
+ color: #fff;
+ margin-bottom: 0;
+}
- .header .container {
- background: transparent;
- }
+.header .wrapper-inner {
+ padding: 20px; /*controls the height of the header*/
+}
- table.button.facebook table td {
- background: #3B5998 !important;
- border-color: #3B5998;
- }
+.header .container {
+ background: #8a8a8a;
+}
- table.button.twitter table td {
- background: #1daced !important;
- border-color: #1daced;
- }
+.wrapper.secondary {
+ background: #f3f3f3;
+}
- 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>
+<!-- move the above styles into your custom stylesheet -->
+<spacer size="16"></spacer>
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
<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">SIDEBAR</p>
+ <columns small="6" valign="middle">
+ <p class="text-right">Sidebar</p>
</columns>
</row>
</container>
<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>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
+ <p><a href="#">Just a Plain Link »</a></p>
</callout>
<callout class="secondary">
<h6>CONNECT WITH US:</h6>
border-top: 8px solid #663399;
}
</style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
<container class="header">
<row>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
