Charts.js -> Display / Load chart only when visible on the screen - chart.js

This is my first question, I was searching for the answer here and on Google but to no avail.
I am preparing a website for accountancy company, they have requested a demo to be created with some data visualisations. I have opted to use 'charts.js'.
My problem is this, I want the chart to load only when visible on the screen. At the moment they all load at the same time therefore you miss the quite nice animation.
Extending on my question, I would like text next to the chart to 'ease-in' too, also only when visible on screen.
Would someone be kind enough to point me to the right material on the 'net, or maybe show me an easy way to achieve this?
Kindest regards and thank you in advance!
As requested, I am adding simple code that displays two charts below the screen. To make this work you will need Chart.js from here: Chart.js Website
index.html:
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Graphs</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/Chart.js"></script>
</head>
<body>
<div class="graphs">
<div class="separator1"></div>
<div class="graph1">
<canvas id="myCanvas" width="475" height="400">Graph 1</canvas>
<script>
//Get the context of the canvas element we want to select
context = document.getElementById('myCanvas').getContext('2d');
var Line = {};
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(151,57,56,0.5)",
strokeColor : "rgba(151,57,56,1)",
pointColor : "rgba(151,57,56,1)",
pointStrokeColor : "#fff",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(59,97,150,0.5)",
strokeColor : "rgba(59,97,150,1)",
pointColor : "rgba(59,97,150,1)",
pointStrokeColor : "#fff",
data : [28,48,40,19,96,27,100]
}
]
};
var options = { scaleOverlay : false, scaleOverride : false, scaleLineWidth : 1, pointDotRadius : 3, pointDotStrokeWidth : 1, animationSteps : 150 };
new Chart(context).Line(data, options);
</script>
</div>
<div class="text1">
<div class="innertext">
<h3>Praesent viverra</h3>
<hr/>
<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 nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="graph2">
<canvas id="myCanvas2" width="475" height="400">Graph 2</canvas>
<script>
//Get the context of the canvas element we want to select
context = document.getElementById('myCanvas2').getContext('2d');
var Pie = {};
var data = [
{
value: 30,
color:"#973938"
},
{
value : 50,
color : "#78963E"
},
{
value : 40,
color : "#3B6196"
},
{
value : 25,
color: "#F49D20"
},
{
value : 35,
color: "#FBDD13"
}
];
var options = { animationSteps : 150 };
new Chart(context).Pie(data, options);
</script>
</div>
<div class="text2">
<div class="innertext">
<h3>Praesent viverra</h3>
<hr/>
<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 nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>
main.css:
.graph1 {
margin-left: 15%;
width: 33%;
float: left;
height: 450px;
display: block;
}
.graph1 canvas {
padding: 25px 25px 25px 25px;
}
.graph2 {
margin-right: 15%;
width: 33%;
float: right;
height: 450px;
display: block;
}
.graph2 canvas {
padding: 25px 25px 25px 25px;
}
.innertext {
padding-top: 25%;
}
.text1 {
margin-right: 15%;
width: 33%;
float: right;
height: 450px;
}
.text1 p {
text-align: center;
}
.text1 hr {
margin: 0 auto;
width: 40%;
text-align: center;
}
.text1 h3 {
text-align: center;
color: #636363;
}
.text2 {
margin-left: 15%;
width: 33%;
float: left;
height: 450px;
}
.text2 p {
text-align: center;
}
.text2 hr {
margin: 0 auto;
width: 40%;
text-align: center;
}
.text2 h3 {
text-align: center;
color: #636363;
}
.separator1 {
display: block;
margin: 0 auto;
width: 100%;
height: 1000px;
}
Thanks again to anyone willing to help!

Related

How do I add paginator to thid django code?

I have a system where users can view complaints they have registered on one page. But the problem is that only four complaints can be viewed at a time on the page. How can I add pageinator to the code so that the next four complaints can be viewed on the other page in the correct format and template:
views.py:
def History(request):
complaint_data = Complaint.objects.filter(user=request.user)
context = { 'complaint':complaint_data }
return render(request, 'myHistory.html', context)
template:
<!-- Middle Container -->
<div class="col-lg middle middle-complaint-con">
<i class="fas fa-folder-open fa-4x comp-folder-icon"></i>
<h1 class="all-comp">My Complaints</h1>
<p class="all-comp-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
{%for c in complaint %}
<a href="{% url 'Complaint' c.pk %}" style="color:black;">
<div class="container comp-con-{{forloop.counter0}}">
<p style="color: #D37A19; margin-left: -130px; margin-top: -5px;">Report number:</p>
<p class="history-level-1">{{c.reportnumber}}</p>
<p class="comp-title-1">{{c.event_type}}</p>
<p class="comp-sub-1">{{c.event_text|truncatechars:85}}</p>
</div>
</a> {%endfor%}
</div>
css:
enter code h.comp-con-0 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 11px 8px;
position: absolute;
width: 300px;
height: 140px;
left: 160px;
top: 190px;
background: #FFEEDB;
box-shadow: 1px 1px 2px rgb(0 0 0 / 25%);
border-radius: 10px;
}
.comp-con-1 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10px;
position: absolute;
width: 300px;
height: 140px;
left: 160px;
top: 400px;
background: #FFEEDB;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.comp-con-2 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 8px;
position: absolute;
width: 300px;
height: 140px;
left: 610px;
top: 190px;
background: #FFEEDB;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.comp-con-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10px 9px;
position: absolute;
width: 300px;
height: 140px;
left: 610px;
top: 400px;
background: #FFEEDB;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
I basically four css cards for four complaints and have a for.loopcounter to count the complaints in the html. How can I set the forloopcounter back to zero when the page changes to a new one. More importantly how do I add pagination to this?

For Pagination You Should Consider Django Documentation https://docs.djangoproject.com/en/3.2/topics/pagination/
from django.core.paginator import Paginator
def pagination_complaint(request, page_no):
complaint_data_paginator = Paginator(complaint_data, 4)
paginator_obj = complaint_data_paginator.get_page(page_no)
context = {'complaint':paginator_obj}
return render(request, "<your-app-name>/ajax_complaint.html", context)
Create a new template in your app as ajax_complaint.html
{%for c in complaint %}
<a href="{% url 'Complaint' c.pk %}" style="color:black;">
<div class="container comp-con-{{forloop.counter0}}">
<p style="color: #D37A19; margin-left: -130px; margin-top: -5px;">Report number:</p>
<p class="history-level-1">{{c.reportnumber}}</p>
<p class="comp-title-1">{{c.event_type}}</p>
<p class="comp-sub-1">{{c.event_text|truncatechars:85}}</p>
</div>
</a> {%endfor%}
create a new URL in urls.py for getting pagination!
path('<int:page_no>/', pagination_complaint)
now in your first template you have to add the ajax!
For adding data in the template add a new div with id="items" (it can be anything but I am using it)
Now I am going to use jQuery here! so make sure to import it in the template!
items = document.getElementsById("items");
$.ajax(
{
type: "GET",
URL: "<your pagination URL>/<page_no>/",
success: function (response) {
items.innerHTML = items.innerHTML + response
}
})

TextEditor sticking to minHeight inSwiftUI

I am trying to build a view with the newly introduced TextEditor. The idea is that I have some content at the top (blue frame), then a ScrollView with a TextEditor and a variable number of Text below it (red frame).
The TextEditor(yellow frame) view is supposed to have a minimum height, but should take up all the available space if there aren't to many Text views following – which it currently does not do...
import SwiftUI
struct ScrollViewWithTextEditor: View {
var comments = ["Foo", "Bar", "Buzz"]
var loremIpsum = """
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"""
var body: some View {
VStack {
Group {
Text("Some Content above")
}
.frame(maxWidth: .infinity)
.border(Color.blue, width: 3.0)
.padding(.all, 10)
ScrollView {
ScrollView {
TextEditor(text: .constant(loremIpsum))
.frame(minHeight: 200.0)
}
.frame(minHeight: 200.0)
.border(Color.yellow, width: 3.0)
.cornerRadius(3.0)
.padding(.all, 10.0)
VStack {
ForEach(comments, id: \.self) { comment in
Text(comment)
}
.padding(.all, 10)
.frame(maxWidth: .infinity, alignment: .leading)
.border(Color.gray, width: 1)
.cornerRadius(3.0)
.padding(.all, 10)
}
}
.frame(minHeight: 200.0)
.border(Color.red, width: 3)
.padding(.all, 3)
}
}
}
struct ScrollViewWithTextEditor_Previews: PreviewProvider {
static var previews: some View {
ScrollViewWithTextEditor()
}
}
Any suggestions on how to solve this?

Here is possible solution. Tested with Xcode 12 / iOS 14.
ScrollView {
// make clear static text in background to define size and
// have TextEditor in front with same text fit
Text(loremIpsum).foregroundColor(.clear).padding(8)
.frame(maxWidth: .infinity)
.overlay(
TextEditor(text: .constant(loremIpsum))
)
}
.frame(minHeight: 200.0)
.border(Color.yellow, width: 3.0)

Loading gif while backend script is executed

So I've got a form and when I submit it, a backend script.py is executed in Django.
It makes some statistical analysis which takes about 8 secs and when it finishes I get redirected to a next page.
So I've been trying to find a way to implement a loading gif while the script is executed but I failed in every one of my efforts.
I was thinking about using AJAX and javascript onclick method (or even onsubmit),
but they didn't work.
Thank you all in advance.

I found this article in StackOverflow linked to a js code. Basically in this code, he is checking for if the body has something loaded in it. If it doesn't then he shows a loading page, maybe this will help.
Here is the links
Show loading image after click button and page load
function onReady(callback) {
var intervalID = window.setInterval(checkReady, 1000);
function checkReady() {
if (document.getElementsByTagName('body')[0] !== undefined) {
console.log(document.getElementsByTagName('body')[0]);
window.clearInterval(intervalID);
callback.call(this);
}
}
}
function show(id, value) {
document.getElementById(id).style.display = value ? 'block' : 'none';
}
onReady(function () {
show('page', true);
show('loading', false);
});
body {
background: #FFF url("http://i.imgur.com/KheAuef.png") top left repeat-x;
font-family:"Brush Script MT", cursive;
}
h1 {
font-size: 2em;
margin-bottom: 0.2em;
padding-bottom: 0;
}
p {
font-size: 1.5em;
margin-top: 0;
padding-top: 0;
}
#page {
display: none;
}
#loading {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 100;
width: 100vw;
height: 100vh;
background-color: rgba(192, 192, 192, 0.5);
background-image: url("http://i.stack.imgur.com/MnyxU.gif");
background-repeat: no-repeat;
background-position: center;
}
<div id="page">
<h1>The standard Lorem Ipsum passage</h1>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="loading"></div>

bootstrap-modal transparent background opaque text

I am having a problem setting a bootstrap-modal as transparent with background opaque text. I tried setting the background color as RGBA, however, it still affects the text making it the same transparency now. I tried defining the background in: .modal-open, .modal-dialog, .modal-content, .modal.in and .modal-dialog — none of those worked.
HTML:
<!-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-title" id="myModalLabel"><h1>ZU</h1></div>
<div class="modal-body">
<p>Do Zore World Tour 2017</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde nihil enim aperiam illum nisi tenetur facere quidem possimus libero dolorum, vitae natus cumque? Dolor sapiente fugiat culpa repudiandae, earum quisquam.</p>
</div>
<!-- email sign up form w/ button -->
<div class="container">
<div class="row">
<div class="col-md-6">
<p><form class="form-inline">
<div class="form-group">
<label for="email"></label>
<input type="email" class="form-control" id="email" placeholder="Email address*"><button type="submit" class="btn btn-default">Sign Up</button>
</div>
<div>
</div>
</form></p>
</form>
</div>
</div>
</div>
<!-- email sign up form w/ button -->
</div>
</div>
CSS:
/* modal pop up */
.modal-content {
position: relative;
background-color: rgba(250, 179, 0, 0,6;)!important;
border: 1px solid #999;
border: 1px solid rgba(0,0,0,.2);
border-radius: 0px;
outline: 0;
-webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
box-shadow: 0 3px 9px rgba(0,0,0,.5);
}
.modal.body{
background-color: none;
}
.modal-title h1{
font-family:;
font-size: 20.854em;
text-align: center;
color:#fab300;
}
/* modal pop up */

I have updated the CSS file. Please check at the codepen link here:
https://codepen.io/sushantb/pen/mwvzdR?editors=0100
The CSS file now looks like this:
* {
border-radius: 0 !important;
}
body {
background-color: #000;
}
/* LINKS */
a:hover {
color: #ffcc4d !important;
text-decoration: none;
}
a:visited {
color: #fab300 !important;
text-decoration: none;
}
/* LINKS */
/* nav bar custom*/
.navbar-inverse {
background-color: #000;
padding-top: 0px;
padding-bottom: 0px;
border: none;
padding: 0px;
margin: 0px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on navbar*/
}
.navbar-inverse .navbar-nav > .active > a, .navbar-default .navbar-nav > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active*/
}
.navbar-toggle{
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid #fab300 !important;
border-radius: 4px;
}
.navbar-inverse .navbar-toggle .sr-only .icon-bar{
color: #fab300 !important;
}
/*.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: silver; /*Change rollover cell color here
}*/
.navbar-inverse .navbar-nav > li > a {
color: #fab300; /*Change active text color here*/
}
.navbar-inverse .navbar-brand > li > a:hover, .navbar-inverse .navbar-brand > li > a:focus {
color: #ffcc4d !important; /*Sets the text hover color on brand TO FIGURE OUT!!!*/
}
.navbar-inverse .navbar-brand > .active > a, .navbar-inverse .navbar-brand > .active >
a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fab300 !important; /*BACKGROUND color for active brand TO FIGUER OUT!!!*/
}
/* nav bar custom*/
/* type */
body {
background-color: white;
font-family: Scope One;
font-weight: 400;
line-height: 1.45;
color: #333;
}
p {margin-bottom: 1.3em;}
p span {
color: white;
font-weight: 900;
}
h1, h2, h3, h4 {
margin: 1.414em 0 0.5em;
font-family: Scope One;
font-weight: inherit;
line-height: 1.2;
}
h1 {
margin-top: 0;
font-size: 6.854em;
}
h2 {font-size: 4.236em;}
h3 {font-size: 2.618em;}
h4 {font-size: 1.618em;}
small, .font_small {font-size: 0.618em;}
/* type */
/* modal pop up rgba(250, 179, 0, 0,6;) */
.modal-content {
background-color: rgba(0,0,0,0.6)!important;
position: relative;
opacity: 1.0;
border: 1px solid #999;
border-radius: 50px;
outline: 0;
}
.modal.body{
background-color: green;
}
.modal-dialog {
background-color: white;
}
.modal.in .modal-dialog {
background-color: transparent;
}
.modal-title h1{
font-family:calibri;
font-size: 20.854em;
text-align: center;
color:#fab300;
opacity: 1;
padding-bottom:5px;
}
.modal-title h3{
font-family:inherit;
font-size: inherit;
text-align: center;
color:#fab300;
padding-bottom:5px;
}
.modal-body h3, p{
color: #fab300;
}
.modal-backdrop {
background-color: transparent !important; /* I kept this to show the kind of transparent effect I would like to acheive on tge modal background */
}
/* email sign up form */
.input .placeholder-shown{
color:#fab300 !important;
}
.input .placeholder{
color: #fab300;
}
.form-control{
border-top: none;
border-bottom: 1px solid #fab300;
border-left: none;
border-right: none;
box-shadow: none !important;
width: 65%;
}
.button, .input, .select, .textarea{
color:#fab300 !important
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
.form-inline .btn .btn-default{
border-top: 1px solid #fab300 !important;
border-bottom: 1px solid #fab300!important;
border-left: 1px solid #fab300 !important;
border-right: 1px solid #fab300 !important;
box-shadow: none !important;
}
/* email sign up form */
/* modal pop up rgba(250, 179, 0, 0,6;) */
/* overlay */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
transition: .5s ease;
background-color: rgba(250, 179, 0,.2;)!important;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: #fab300;
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
/* .overlay .btn .btn-primary .btn-lg{
}*/
/* CTA button color override */
.btn-primary, .btn-primary:active, .btn-primary:visited, .btn-primary:focus {
background-color: #fab300 !important;
/* background-color: rgba(250, 179, 0,.6;)!important -- I WOULD LIKE TO HAVE IT TRANSPARENT*/
border-color: #fab300 !important;
font-family: 'Scope One', serif;
font-color:#fff !important;
font-size: 16px;
font-style: bold;
text-transform: none;
color: white;
vertical-align: center;
text-align: center;
}
.btn-primary:hover{
background-color: #ffcc4d !important;
border-color: #ffcc4d !important;
}
/* overlay */
/* Tour - Table */
.table .table-inverse{
border-spacing: 0;
background-color: rgba(250, 179, 0,.6;);
}
.table .table-inverse .td {
padding: 0;
}
/* Tour - Table */
Please review and revert.
Regards,
Sushant

Foundation email template - Gmail does not display any template style

I am sending an email with Codeigniter 3 configurations'm doing for the mailings in HTML format, here the configuration code.
Mail settings:
$config = Array (
'priority' => 1,
'protocol' => 'mail',
'smtp_host' => 'ssl://smtp.gmail.com',
'smtp_port' => 465,
'smtp_user' => 'email#gmail.com',
'smtp_pass' => 'password',
'mailtype' => 'html',
'charset' => 'utf-8', // iso-8859-1
'wordwrap' => TRUE,
'newline' => "\r\n"
);
Controller:
public function email()
{
$this->load->library('email');
$this->email->from('email#email.com', 'Names');
$this->email->to('email#email.com');
$this->email->subject('Email Test');
$data['nombre'] = 'Example';
$body = $this->load->view('email/test.php',$data,TRUE);
//$this->email->attach("/assets/images/logo.png", "inline");
$this->email->message($body);
if ($this->email->send()) {
return true;
} else {
return false;
}
$this->email->clear(TRUE);
}
View - Default email template Foundation:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width"/>
<style>
#outlook a {
padding: 0;
}
body {
width: 100%!important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;
}
#backgroundTable {
margin: 0;
padding: 0;
width: 100%!important;
line-height: 100%!important;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: left;
clear: both;
display: block;
}
center {
width: 100%;
min-width: 580px;
}
a img {
border: none;
}
p {
margin: 0 0 0 10px;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
td {
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
border-collapse: collapse!important;
}
table, tr, td {
padding: 0;
vertical-align: top;
text-align: left;
}
hr {
color: #d9d9d9;
background-color: #d9d9d9;
height: 1px;
border: none;
}
table.body {
height: 100%;
width: 100%;
}
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
table.row {
padding: 0px;
width: 100%;
position: relative;
}
table.container table.row {
display: block;
}
td.wrapper {
padding: 10px 20px 0px 0px;
position: relative;
}
table.columns, table.column {
margin: 0 auto;
}
table.columns td, table.column td {
padding: 0px 0px 10px;
}
table.columns td.sub-columns, table.column td.sub-columns, table.columns td.sub-column, table.column td.sub-column {
padding-right: 10px;
}
td.sub-column, td.sub-columns {
min-width: 0px;
}
table.row td.last, table.container td.last {
padding-right: 0px;
}
table.one {
width: 30px;
}
table.two {
width: 80px;
}
table.three {
width: 130px;
}
table.four {
width: 180px;
}
table.five {
width: 230px;
}
table.six {
width: 280px;
}
table.seven {
width: 330px;
}
table.eight {
width: 380px;
}
table.nine {
width: 430px;
}
table.ten {
width: 480px;
}
table.eleven {
width: 530px;
}
table.twelve {
width: 580px;
}
table.one center {
min-width: 30px;
}
table.two center {
min-width: 80px;
}
table.three center {
min-width: 130px;
}
table.four center {
min-width: 180px;
}
table.five center {
min-width: 230px;
}
table.six center {
min-width: 280px;
}
table.seven center {
min-width: 330px;
}
table.eight center {
min-width: 380px;
}
table.nine center {
min-width: 430px;
}
table.ten center {
min-width: 480px;
}
table.eleven center {
min-width: 530px;
}
table.twelve center {
min-width: 580px;
}
table.one .panel center {
min-width: 10px;
}
table.two .panel center {
min-width: 60px;
}
table.three .panel center {
min-width: 110px;
}
table.four .panel center {
min-width: 160px;
}
table.five .panel center {
min-width: 210px;
}
table.six .panel center {
min-width: 260px;
}
table.seven .panel center {
min-width: 310px;
}
table.eight .panel center {
min-width: 360px;
}
table.nine .panel center {
min-width: 410px;
}
table.ten .panel center {
min-width: 460px;
}
table.eleven .panel center {
min-width: 510px;
}
table.twelve .panel center {
min-width: 560px;
}
.body .columns td.one, .body .column td.one {
width: 8.333333%;
}
.body .columns td.two, .body .column td.two {
width: 16.666666%;
}
.body .columns td.three, .body .column td.three {
width: 25%;
}
.body .columns td.four, .body .column td.four {
width: 33.333333%;
}
.body .columns td.five, .body .column td.five {
width: 41.666666%;
}
.body .columns td.six, .body .column td.six {
width: 50%;
}
.body .columns td.seven, .body .column td.seven {
width: 58.333333%;
}
.body .columns td.eight, .body .column td.eight {
width: 66.666666%;
}
.body .columns td.nine, .body .column td.nine {
width: 75%;
}
.body .columns td.ten, .body .column td.ten {
width: 83.333333%;
}
.body .columns td.eleven, .body .column td.eleven {
width: 91.666666%;
}
.body .columns td.twelve, .body .column td.twelve {
width: 100%;
}
td.offset-by-one {
padding-left: 50px;
}
td.offset-by-two {
padding-left: 100px;
}
td.offset-by-three {
padding-left: 150px;
}
td.offset-by-four {
padding-left: 200px;
}
td.offset-by-five {
padding-left: 250px;
}
td.offset-by-six {
padding-left: 300px;
}
td.offset-by-seven {
padding-left: 350px;
}
td.offset-by-eight {
padding-left: 400px;
}
td.offset-by-nine {
padding-left: 450px;
}
td.offset-by-ten {
padding-left: 500px;
}
td.offset-by-eleven {
padding-left: 550px;
}
td.expander {
visibility: hidden;
width: 0px;
padding: 0!important;
}
table.columns .text-pad, table.column .text-pad {
padding-left: 10px;
padding-right: 10px;
}
table.columns .left-text-pad, table.columns .text-pad-left, table.column .left-text-pad, table.column .text-pad-left {
padding-left: 10px;
}
table.columns .right-text-pad, table.columns .text-pad-right, table.column .right-text-pad, table.column .text-pad-right {
padding-right: 10px;
}
.block-grid {
width: 100%;
max-width: 580px;
}
.block-grid td {
display: inline-block;
padding: 10px;
}
.two-up td {
width: 270px;
}
.three-up td {
width: 173px;
}
.four-up td {
width: 125px;
}
.five-up td {
width: 96px;
}
.six-up td {
width: 76px;
}
.seven-up td {
width: 62px;
}
.eight-up td {
width: 52px;
}
table.center, td.center {
text-align: center;
}
h1.center, h2.center, h3.center, h4.center, h5.center, h6.center {
text-align: center;
}
span.center {
display: block;
width: 100%;
text-align: center;
}
img.center {
margin: 0 auto;
float: none;
}
.show-for-small, .hide-for-desktop {
display: none;
}
body, table.body, h1, h2, h3, h4, h5, h6, p, td {
color: #222222;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: normal;
padding: 0;
margin: 0;
text-align: left;
line-height: 1.3;
}
h1, h2, h3, h4, h5, h6 {
word-break: normal;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 36px;
}
h3 {
font-size: 32px;
}
h4 {
font-size: 28px;
}
h5 {
font-size: 24px;
}
h6 {
font-size: 20px;
}
body, table.body, p, td {
font-size: 14px;
line-height: 19px;
}
p.lead, p.lede, p.leed {
font-size: 18px;
line-height: 21px;
}
p {
margin-bottom: 10px;
}
small {
font-size: 10px;
}
a {
color: #2ba6cb;
text-decoration: none;
}
a:hover {
color: #2795b6!important;
}
a:active {
color: #2795b6!important;
}
a:visited {
color: #2ba6cb!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
color: #2ba6cb;
}
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
color: #2ba6cb!important;
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
color: #2ba6cb!important;
}
.panel {
background: #f2f2f2;
border: 1px solid #d9d9d9;
padding: 10px!important;
}
.sub-grid table {
width: 100%;
}
.sub-grid td.sub-columns {
padding-bottom: 0;
}
table.button, table.tiny-button, table.small-button, table.medium-button, table.large-button {
width: 100%;
overflow: hidden;
}
table.button td, table.tiny-button td, table.small-button td, table.medium-button td, table.large-button td {
display: block;
width: auto!important;
text-align: center;
background: #2ba6cb;
border: 1px solid #2284a1;
color: #ffffff;
padding: 8px 0;
}
table.tiny-button td {
padding: 5px 0 4px;
}
table.small-button td {
padding: 8px 0 7px;
}
table.medium-button td {
padding: 12px 0 10px;
}
table.large-button td {
padding: 21px 0 18px;
}
table.button td a, table.tiny-button td a, table.small-button td a, table.medium-button td a, table.large-button td a {
font-weight: bold;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
font-size: 16px;
}
table.tiny-button td a {
font-size: 12px;
font-weight: normal;
}
table.small-button td a {
font-size: 16px;
}
table.medium-button td a {
font-size: 20px;
}
table.large-button td a {
font-size: 24px;
}
table.button:hover td, table.button:visited td, table.button:active td {
background: #2795b6!important;
}
table.button:hover td a, table.button:visited td a, table.button:active td a {
color: #fff!important;
}
table.button:hover td, table.tiny-button:hover td, table.small-button:hover td, table.medium-button:hover td, table.large-button:hover td {
background: #2795b6!important;
}
table.button:hover td a, table.button:active td a, table.button td a:visited, table.tiny-button:hover td a, table.tiny-button:active td a, table.tiny-button td a:visited, table.small-button:hover td a, table.small-button:active td a, table.small-button td a:visited, table.medium-button:hover td a, table.medium-button:active td a, table.medium-button td a:visited, table.large-button:hover td a, table.large-button:active td a, table.large-button td a:visited {
color: #ffffff!important;
}
table.secondary td {
background: #e9e9e9;
border-color: #d0d0d0;
color: #555;
}
table.secondary td a {
color: #555;
}
table.secondary:hover td {
background: #d0d0d0!important;
color: #555;
}
table.secondary:hover td a, table.secondary td a:visited, table.secondary:active td a {
color: #555!important;
}
table.success td {
background: #5da423;
border-color: #457a1a;
}
table.success:hover td {
background: #457a1a!important;
}
table.alert td {
background: #c60f13;
border-color: #970b0e;
}
table.alert:hover td {
background: #970b0e!important;
}
table.radius td {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table.round td {
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
border-radius: 500px;
}
body.outlook p {
display: inline!important;
}
#media only screen and (max-width: 600px) {
table[class="body"] img {
width: auto!important;
height: auto!important;
}
table[class="body"] center {
min-width: 0!important;
}
table[class="body"] .container {
width: 95%!important;
}
table[class="body"] .row {
width: 100%!important;
display: block!important;
}
table[class="body"] .wrapper {
display: block!important;
padding-right: 0!important;
}
table[class="body"] .columns, table[class="body"] .column {
table-layout: fixed!important;
float: none!important;
width: 100%!important;
padding-right: 0px!important;
padding-left: 0px!important;
display: block!important;
}
table[class="body"] .wrapper.first .columns, table[class="body"] .wrapper.first .column {
display: table!important;
}
table[class="body"] table.columns td, table[class="body"] table.column td {
width: 100%!important;
}
table[class="body"] .columns td.one, table[class="body"] .column td.one {
width: 8.333333%!important;
}
table[class="body"] .columns td.two, table[class="body"] .column td.two {
width: 16.666666%!important;
}
table[class="body"] .columns td.three, table[class="body"] .column td.three {
width: 25%!important;
}
table[class="body"] .columns td.four, table[class="body"] .column td.four {
width: 33.333333%!important;
}
table[class="body"] .columns td.five, table[class="body"] .column td.five {
width: 41.666666%!important;
}
table[class="body"] .columns td.six, table[class="body"] .column td.six {
width: 50%!important;
}
table[class="body"] .columns td.seven, table[class="body"] .column td.seven {
width: 58.333333%!important;
}
table[class="body"] .columns td.eight, table[class="body"] .column td.eight {
width: 66.666666%!important;
}
table[class="body"] .columns td.nine, table[class="body"] .column td.nine {
width: 75%!important;
}
table[class="body"] .columns td.ten, table[class="body"] .column td.ten {
width: 83.333333%!important;
}
table[class="body"] .columns td.eleven, table[class="body"] .column td.eleven {
width: 91.666666%!important;
}
table[class="body"] .columns td.twelve, table[class="body"] .column td.twelve {
width: 100%!important;
}
table[class="body"] td.offset-by-one, table[class="body"] td.offset-by-two, table[class="body"] td.offset-by-three, table[class="body"] td.offset-by-four, table[class="body"] td.offset-by-five, table[class="body"] td.offset-by-six, table[class="body"] td.offset-by-seven, table[class="body"] td.offset-by-eight, table[class="body"] td.offset-by-nine, table[class="body"] td.offset-by-ten, table[class="body"] td.offset-by-eleven {
padding-left: 0!important;
}
table[class="body"] table.columns td.expander {
width: 1px!important;
}
table[class="body"] .right-text-pad, table[class="body"] .text-pad-right {
padding-left: 10px!important;
}
table[class="body"] .left-text-pad, table[class="body"] .text-pad-left {
padding-right: 10px!important;
}
table[class="body"] .hide-for-small, table[class="body"] .show-for-desktop {
display: none!important;
}
table[class="body"] .show-for-small, table[class="body"] .hide-for-desktop {
display: inherit!important;
}
}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
<style>
table.facebook td{background:#3b5998;border-color:#2d4473;}table.facebook:hover td{background:#2d4473!important;}table.twitter td{background:#00acee;border-color:#0087bb;}table.twitter:hover td{background:#0087bb!important;}table.google-plus td{background-color:#DB4A39;border-color:#CC0000;}table.google-plus:hover td{background:#CC0000!important;}.template-label{color:#ffffff;font-weight:bold;font-size:11px;}.callout .panel{background:#ECF8FF;border-color:#b9e5ff;}.header{background:#999999;}.footer .wrapper{background:#ebebeb;}.footer h5{padding-bottom:10px;}table.columns .text-pad{padding-left:10px;padding-right:10px;}table.columns .left-text-pad{padding-left:10px;}table.columns .right-text-pad{padding-right:10px;}#media only screen and (max-width: 600px) {table[class="body"] .right-text-pad{padding-left:10px!important;}table[class="body"] .left-text-pad{padding-right:10px!important;}}
</style>
</head>
<body>
<script type="text/javascript">ANCHORFREE_VERSION="413161526"</script><script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(/^(.*,)?(11C)(,.*)?$/g.exec(_AF2$.CT)!=null){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/par.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}document.write("<style type='text/css' title='AFc_css"+_AF2$.RN+"' >.AFc_body"+_AF2$.RN+"{} .AFc_all"+_AF2$.RN+",a.AFc_all"+_AF2$.RN+":hover,a.AFc_all"+_AF2$.RN+":visited{outline:none;background:transparent;border:none;margin:0;padding:0;top:0;left:0;text-decoration:none;overflow:hidden;display:block;z-index:666999;}</style>");})();</script>
<style type='text/css'>
.AFhss_dpnone{display:none;width:0;height:0}
</style>
<img src="about:blank"id="AFhss_trk"name="AFhss_trk"style="display:none"/>
<div id="AFhss_dfs"class="AFhss_dpnone">
<div id="AFhss_adrp0"class="AFhss_dpnone"></div>
<div id="AFhss_adrp1"class="AFhss_dpnone"></div>
<div id="AFhss_adrp2"class="AFhss_dpnone"></div>
<div id="AFhss_adrp3"class="AFhss_dpnone"></div>
<div id="AFhss_adrp4"class="AFhss_dpnone"></div>
<div id="AFhss_adrp5"class="AFhss_dpnone"></div>
<div id="AFhss_adrp6"class="AFhss_dpnone"></div>
<div id="AFhss_adrp7"class="AFhss_dpnone"></div>
<div id="AFhss_adrp8"class="AFhss_dpnone"></div>
<div id="AFhss_adrp9"class="AFhss_dpnone"></div>
</div>
<script type='text/javascript'>(function(){if(typeof(_AF2$runned)!='undefined'&&_AF2$runned==true){return}_AF2$={'SN':'HSSHIELD00ZZ','IP':'85.237.197.240','CH':'HSSCNL100680','CT':'oxm,z234','HST':'&isUpdated=0','AFH':'hss439','RN':Math.floor(Math.random()*999),'TOP':(parent.location!=document.location||top.location!=document.location)?0:1,'AFVER':'5.2.1','FBW':'','FBWCNT':0};if(_AF2$.TOP==1){document.write("<scr"+"ipt src='http://box.anchorfree.net/insert/41.js?v="+ANCHORFREE_VERSION+"' type='text/javascript'></scr"+"ipt>")}})()</script>
<table class="body">
<tr>
<td class="center" align="center" valign="top"><center>
<table class="row header">
<tr>
<td class="center" align="center"><center>
<table class="container">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="six sub-columns"><img src="http://placehold.it/200x50"></td>
<td class="six sub-columns last" align="right" style="text-align:right; vertical-align:middle;"><span class="template-label">HERO</span></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
<br>
<table class="container">
<tr>
<td><table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h1>Hi, Elijah Baily</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
<img width="580" height="300" src="http://placehold.it/580x300"></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row callout">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td class="panel"><p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. Click it! »</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td><h3>Title Ipsum <small>This is a note.</small></h3>
<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 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="three columns">
<tr>
<td><table class="button">
<tr>
<td>Click Me!</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row footer">
<tr>
<td class="wrapper"><table class="six columns">
<tr>
<td class="left-text-pad"><h5>Connect With Us:</h5>
<table class="tiny-button facebook">
<tr>
<td>Facebook</td>
</tr>
</table>
<br>
<table class="tiny-button twitter">
<tr>
<td>Twitter</td>
</tr>
</table>
<br>
<table class="tiny-button google-plus">
<tr>
<td>Google +</td>
</tr>
</table></td>
<td class="expander"></td>
</tr>
</table></td>
<td class="wrapper last"><table class="six columns">
<tr>
<td class="last right-text-pad"><h5>Contact Info:</h5>
<p>Phone: 408.341.0600</p>
<p>Email: hseldon#trantor.com</p></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table>
<table class="row">
<tr>
<td class="wrapper last"><table class="twelve columns">
<tr>
<td align="center"><center>
<p style="text-align:center;">Terms | Privacy | Unsubscribe</p>
</center></td>
<td class="expander"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</center></td>
</tr>
</table>
</body>
</html>
The mail is displayed without style:
Would greatly appreciate your support, thank you very much.

After searching and reading many forums, I found the solution thanks to the community email Foundation among others, I explain here the details for those who can be useful.
Most companies like emails, Gmail, AOL, Hotmail etc ... They clean the tags <style> that they are located within the <head>, this is done to avoid conflicts of CSS, so the solution is to place all inline styles within each label correspodan, example:
<h1 style="font-size: 14px; font-weight: 500;">My title</h1>
Do this for a line is very easy, but when we want a sleek, well crafted template with a very high level of detail, it would be counterintuitive to do this once, for this there is a conversion technique called Emogrifier, which greatly facilitates work, which debmos do is design and layout our base template, with organized and separated styles, to have a well structured and organized page, but same not can send by email, so I mentioned, we have to Emogrifier the sketch prepared by pasting all the HTML and CSS code, and for this there are many tools, here I leave 3 highly recommended, but there are many.
Recommended pages:
http://foundation.zurb.com/emails/inliner.html
http://templates.mailchimp.com/resources/inline-css/
https://www.myintervals.com/emogrifier.php
The email template that you perform should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 100%;
font-family: 'Avenir Next', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
line-height: 1.65;
}
img {
max-width: 100%;
margin: 0 auto;
display: block;
}
body, .body-wrap {
width: 100% !important;
height: 100%;
background: #efefef;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
}
a {
color: #71bc37;
text-decoration: none;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.text-left {
text-align: left;
}
.button {
display: inline-block;
color: white;
background: #71bc37;
border: solid #71bc37;
border-width: 10px 20px 8px;
font-weight: bold;
border-radius: 4px;
}
h1, h2, h3, h4, h5, h6 {
margin-bottom: 20px;
line-height: 1.25;
}
h1 {
font-size: 32px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 20px;
}
h5 {
font-size: 16px;
}
p, ul, ol {
font-size: 16px;
font-weight: normal;
margin-bottom: 20px;
}
.container {
display: block !important;
clear: both !important;
margin: 0 auto !important;
max-width: 580px !important;
}
.container table {
width: 100% !important;
border-collapse: collapse;
}
.container .masthead {
padding: 80px 0;
background: #71bc37;
color: white;
}
.container .masthead h1 {
margin: 0 auto !important;
max-width: 90%;
text-transform: uppercase;
}
.container .content {
background: white;
padding: 30px 35px;
}
.container .content.footer {
background: none;
}
.container .content.footer p {
margin-bottom: 0;
color: #888;
text-align: center;
font-size: 14px;
}
.container .content.footer a {
color: #888;
text-decoration: none;
font-weight: bold;
}
</style>
</head>
<body>
<table class="body-wrap">
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td align="center" class="masthead"><h1>Something Big...</h1></td>
</tr>
<tr>
<td class="content"><h2>Hi Stranger,</h2>
<p>Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table>
<tr>
<td align="center"><p> Share the Awesomeness </p></td>
</tr>
</table>
<p>By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p><em>– Mr. Pen</em></p></td>
</tr>
</table></td>
</tr>
<tr>
<td class="container"><!-- Message start -->
<table>
<tr>
<td class="content footer" align="center"><p>Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p>hello#company.com | Unsubscribe</p></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
When processing or make the Emogrifier, you should be as follows:
<!-- Inliner Build Version 4380b7741bb759d6cb997545f3add21ad48f010b -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef">
<table class="body-wrap" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; height: 100%; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none; background: #efefef; margin: 0; padding: 0;" bgcolor="#efefef"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" class="masthead" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; color: white; background: #71bc37; margin: 0; padding: 80px 0;" bgcolor="#71bc37"><h1 style="font-size: 32px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; max-width: 90%; text-transform: uppercase; margin: 0 auto; padding: 0;">Something Big...</h1></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white; margin: 0; padding: 30px 35px;" bgcolor="white"><h2 style="font-size: 28px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.25; margin: 0 0 20px; padding: 0;">Hi Stranger,</h2>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">Kielbasa venison ball tip shankle. Boudin prosciutto landjaeger, pancetta jowl turkey tri-tip porchetta beef pork loin drumstick. Frankfurter short ribs kevin pig ribeye drumstick bacon kielbasa. Pork loin brisket biltong, pork belly filet mignon ribeye pig ground round porchetta turducken turkey. Pork belly beef ribs sausage ham hock, ham doner frankfurter pork chop tail meatball beef pig meatloaf short ribs shoulder. Filet mignon ham hock kielbasa beef ribs shank. Venison swine beef ribs sausage pastrami shoulder.</p>
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"> Share the Awesomeness </p></td>
</tr></table><p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;">By the way, if you're wondering where you can find more of this fine meaty filler, visit Bacon Ipsum.</p>
<p style="font-size: 16px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; margin: 0 0 20px; padding: 0;"><em style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;">– Mr. Pen</em></p></td>
</tr></table></td>
</tr><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="container" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; display: block !important; clear: both !important; max-width: 580px !important; margin: 0 auto; padding: 0;"><!-- Message start -->
<table style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; width: 100% !important; border-collapse: collapse; margin: 0; padding: 0;"><tr style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; margin: 0; padding: 0;"><td class="content footer" align="center" style="font-size: 100%; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; background: white none; margin: 0; padding: 30px 35px;" bgcolor="white"><p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">Sent by Company Name, 1234 Yellow Brick Road, OZ, 99999</p>
<p style="font-size: 14px; font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; line-height: 1.65; font-weight: normal; color: #888; text-align: center; margin: 0; padding: 0;" align="center">hello#company.com | Unsubscribe</p></td>
</tr></table></td>
</tr></table></body>
</html>
I recommend if they make many changes Emogrifier not save the template, to make them easier to apply changes and then make the process Emogrifier.
I hope you find it useful.
Thank you very much!