Responsive Email Template

Developer
Anthony Adamski
Size
3,373 Kb
Views
32,384
  1. Responsive Email Template Previews
  2. Responsive Email Template HTML Codes
  3. Responsive Email Template CSS Codes

How do I make an responsive email template?

What is a responsive email template? How do you make a responsive email template? This script and codes were developed by Anthony Adamski on 25 August 2022, Thursday.

Responsive Email Template Previews
IQ Test

Responsive Email Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Email Template</title> <link rel='stylesheet prefetch' href='https://raw.githubusercontent.com/InterNations/antwort/master/single-column/source/responsive.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en">
<head>	<meta content="text/html; charset=utf-8" http-equiv="Content-Type">	<meta content="width=device-width, initial-scale=1" name="viewport"><!-- So that mobile will display zoomed in -->	<meta content="IE=edge" http-equiv="X-UA-Compatible"><!-- enable media queries for windows phone 8 -->	<meta content="telephone=no" name="format-detection"><!-- disable auto telephone linking in iOS -->	<title>Single Column</title>	<style type="text/css">	body { margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;	}	table { border-spacing: 0;	}	table td { border-collapse: collapse;	}	.ExternalClass { width: 100%;	}	.ExternalClass,	.ExternalClass p,	.ExternalClass span,	.ExternalClass font,	.ExternalClass td,	.ExternalClass div { line-height: 100%;	}	.ReadMsgBody { width: 100%; background-color: #ebebeb;	}	table { mso-table-lspace: 0pt; mso-table-rspace: 0pt;	}	img { -ms-interpolation-mode: bicubic;	}	.yshortcuts a { border-bottom: none !important;	}	@media screen and (max-width: 599px) { .force-row, .container { width: 100% !important; max-width: 100% !important; }	}	@media screen and (max-width: 400px) { .container-padding { padding-left: 12px !important; padding-right: 12px !important; }	}	.ios-footer a { color: #aaaaaa !important; text-decoration: underline;	}	</style>
</head>
<body bgcolor="#F0F0F0" style="margin:0; padding:0;">	<!-- 100% background wrapper (grey background) -->	<table bgcolor="#F0F0F0" border="0" cellpadding="0" cellspacing="0" width="100%">	<tr>	<td align="center" bgcolor="#F0F0F0" style="background-color: #F0F0F0;" valign="top">	<br>	<!-- 600px container (white background) -->	<table border="0" cellpadding="0" cellspacing="0" class="container" style="width:600px;max-width:600px" width="600">	<tr>	<td align="center" class="container-padding header" style="font-family:Helvetica, Arial, sans-serif;font-size:24px;font-weight:bold;padding-bottom:12px;color:#13dfa3;padding-left:24px;padding-right:24px"> <img src='http://c3155192.r92.cf0.rackcdn.com/assets/uploads/setting/company_header_logo/1/ee45cd3b2ded700f22cc6050c313897e.png' width="200px"></td>	</tr>	<tr>	<td align="left" class="container-padding content" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">	<br>	<div class="body-text" style="font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;text-align:left;color:#333333">	Hello Mary, <br>	<br>	We have enclosed a list of updated properties for your vieiwing pleasure. Please keep reading this email and never ever leave. This is random text that makes this demo look good.<br>	<br>	Thank you, <br>	The Boston Logic Team	</div> <br>	<hr>	<br>	<div class="title" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550">	Daily Property Updates	</div><br>	</td>	</tr> <tr>	<td align="left" class="container-padding content" style="padding-left:24px;padding-right:24px;padding-top:12px;padding-bottom:12px;background-color:#ffffff">	<br> <br>	<div class="property" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550;max-width:475px;margin:0 auto;"> <img width="100%" src="http://www3.dmagazine.com/media/events/4518_Lakeside.png">	</div> <div class="property-details" style="font-family:Helvetica, Arial, sans-serif;font-size:18px;font-weight:600;color:#374550;max-width:475px;margin:0 auto;"> Hello	</div> <br>	</td>	</tr>	<tr>	<td align="left" class="container-padding footer-text" style="font-family:Helvetica, Arial, sans-serif;font-size:12px;line-height:16px;color:#aaaaaa;padding-left:24px;padding-right:24px"><br>	<br>	Sample Footer text: © 2015 Acme, Inc.<br>	<br>	You are receiving this email because you opted in on our website. Update your <a href="#" style="color:#aaaaaa">email preferences</a> or <a href="#" style="color:#aaaaaa">unsubscribe</a>.<br>	<br>	<strong>Acme, Inc.</strong><br>	<span class="ios-footer">123 Main St.<br>	Springfield, MA 12345<br></span> <a href="http://www.acme-inc.com" style="color:#aaaaaa">www.acme-inc.com</a><br>	<br>	<br></td>	</tr>	</table><!--/600px container -->	</td>	</tr>	</table><!--/100% background wrapper-->
</body>
</html>
</body>
</html>

Responsive Email Template - Script Codes CSS Codes

.header,
.title,
.subtitle,
.footer-text { font-family: Helvetica, Arial, sans-serif;
}
.header { font-size: 24px; font-weight: bold; padding-bottom: 12px; color: #DF4726;
}
.footer-text { font-size: 12px; line-height: 16px; color: #aaaaaa;
}
.footer-text a { color: #aaaaaa;
}
.container { width: 600px; max-width: 600px;
}
.container-padding { padding-left: 24px; padding-right: 24px;
}
.content { padding-top: 12px; padding-bottom: 12px; background-color: #ffffff;
}
code { background-color: #eee; padding: 0 4px; font-family: Menlo, Courier, monospace; font-size: 12px;
}
hr { border: 0; border-bottom: 1px solid #cccccc;
}
.hr { height: 1px; border-bottom: 1px solid #cccccc;
}
.title { font-size: 18px; font-weight: 600; color: #374550;
}
.subtitle { font-size: 16px; font-weight: 600; color: #2469A0;
}
.subtitle span { font-weight: 400; color: #999999;
}
.body-text { font-family: Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; text-align: left; color: #333333;
}
Responsive Email Template - Script Codes
Responsive Email Template - Script Codes
Home Page Home
Developer Anthony Adamski
Username anthonyadamski
Uploaded August 25, 2022
Rating 3
Size 3,373 Kb
Views 32,384
Do you need developer help for Responsive Email Template?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony Adamski (anthonyadamski) Script Codes
Name
Live CSS Blur
A Pen by Anthony Adamski
Single page concept
Work In Progress
Less Utility Classes
Cropped Background Images
Jquery Snippets
Image Hover Effect
Simple CSS3 Slider
Menu Overflow
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!