Created
August 31, 2016 08:32
-
-
Save czj/fc398df684d5acb7570c1960abbfcc5c to your computer and use it in GitHub Desktop.
Templates Inky pour Foundation for Emails 2.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/200x50/663399"> | |
| </columns> | |
| <columns small="6"> | |
| <p class="text-right">BASIC</p> | |
| </columns> | |
| </row> | |
| </container> | |
| </wrapper> | |
| <container> | |
| <spacer size="16"></spacer> | |
| <row> | |
| <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> | |
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> | |
| <spacer size="16"></spacer> | |
| <center> | |
| <img src="http://placehold.it/120/663399" alt=""> | |
| </center> | |
| <spacer size="16"></spacer> | |
| <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="#" class="success">Get smarter now ↣</button> | |
| </center> | |
| </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/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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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/200x50/663399"> | |
| </columns> | |
| <columns small="6"> | |
| <p class="text-right">HERO</p> | |
| </columns> | |
| </row> | |
| </container> | |
| </wrapper> | |
| <container> | |
| <spacer size="16"></spacer> | |
| <row> | |
| <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 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 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| body, | |
| html, | |
| .body { | |
| background: #f3f3f3 !important; | |
| } | |
| </style> | |
| <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> | |
| <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. 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> | |
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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"> | |
| <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> | |
| <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> | |
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
| <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> | |
| <spacer size="16"></spacer> | |
| </container> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> | |
| <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> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment