Email template
How do I make an email template?
What is a email template? How do you make a email template? This script and codes were developed by Adethrax on 12 August 2022, Friday.
Email template - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>email template</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta name="viewport" content="width=device-width" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>We are aplus design</title> <link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
</head>
<body bgcolor="#FFFFFF"> <table class="head-wrap"> <tr> <td></td> <td class="header container"> <div class="content"> <table> <tr> <td align="center"> <a href="http://www.aplusdesign.gb.com/"><img class="logoa" src="http://www.aplusdesign.gb.com/wp-content/themes/bigbangwp/images/images/toplogonew.png" /></a> </td> </tr> </table> <table> <tr> <td align="center"> <h3 align="center">Welcome to aplus design</h3> <p class="lead" align="center">We love to <b>design</b> and <b>build</b> quality websites</p> <p><img src="http://www.aplusdesign.gb.com/wp-content/themes/bigbangwp/images/images/showcase.png" /></p> <p> <button class="btnheader"><a href="http://www.aplusdesign.gb.com/contact-us/">Get started</a></button> </p> </td> </tr> </table> </div> </td> <td> </td> </tr> </table> <table class="body-wrap"> <tr> <td></td> <td class="container" bgcolor="#fff"> <div class="content"> <table> <tr> <td> <h3>We design and build Web stuff. </h3> <p>We are an exciting web design agency located within the heart of the Shropshire countryside. Surrounded by the beauty of hills and fields an ideal location to thrive on creative ideas and building talent.</p> <!-- start --> <table class="social" width="100%"> <tbody><tr> <td> <table align="left" class="column"> <tbody><tr> <td> <div class="boxa">CMS WEBSITES</div> <br> <div class="boxb">RESPONSIVE WEBSITES</div> <br> </td> </tr> </tbody></table> <table align="left" class="column"> <tbody><tr> <td> <div class="boxc">ECOMMERCE WEBSITES</div> <br> <div class="boxd">WORDPRESS WEBSITES</div> <br> </td> </tr> </tbody></table> <img src="http://www.aplusdesign.gb.com/wp-content/themes/bigbangwp/images/images/moba.png"/> <p>Contact us today to see how we can help you</p> <span class="clear"></span> </td> </tr> </tbody></table> <!--end--> <table class="social" width="100%"> <tr> <td> <table align="left" class="column"> <tr> <td> <h5 class="">Connect with Us:</h5> <p class=""><a href="https://www.facebook.com/aplusdesignuk" class="soc-btn fb">Facebook</a> <a href="https://twitter.com/aplusdesignuk" class="soc-btn tw">Twitter</a> <a href="" class="soc-btn gp">Google+</a></p> </td> </tr> </table> <table align="left" class="column"> <tr> <td> <h5 class="">Contact Info:</h5> <p>Phone: <strong>408.341.0600</strong> <br/> Email: <strong><a href="emailto:[email protected]"><span class="__cf_email__">[email protected]</span></a></strong></p> </td> </tr> </table> <span class="clear"></span> </td> </tr> </table> </td> </tr> </table> </div> </td> <td></td> </tr> </table> <table class="footer-wrap"> <tr> <td></td> <td class="container"> <div class="content"> <table> <tr> <td align="center"> <p> <a href="#"><img src="http://www.aplusdesign.gb.com/wp-content/uploads/2014/08/footerlogonew.png"></a> </p> </td> </tr> </table> </div> </td> <td></td> </tr> </table>
</body>
</html>
</body>
</html>
Email template - Script Codes CSS Codes
/* ------------------------------------- GLOBAL
------------------------------------- */
* { margin:0; padding:0;
}
* { font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; }
.logoa {height:200px; padding: 40px;}
img { max-width: 100%;
}
.collapse { margin:0; padding:0;
}
body { -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:none; width: 100%!important; height: 100%;
}
/* ------------------------------------- ELEMENTS
------------------------------------- */
a { color: #2BA6CB;}
.btn { text-decoration:none; color: #FFF; background-color: #666; padding:10px 16px; font-weight:bold; margin-right:10px; text-align:center; cursor:pointer; display: inline-block;
}
p.callout { padding:15px; background-color:#ECF8FF; margin-bottom: 15px;
}
.callout a { font-weight:bold; color: #2BA6CB;
}
table.social {
/* padding:15px; */ background-color: #fff;
}
.social .soc-btn { padding: 3px 7px; font-size:12px; margin-bottom:10px; text-decoration:none; color: #FFF;font-weight:bold; display:block; text-align:center;
}
a.fb { background-color: #3B5998!important; }
a.tw { background-color: #1daced!important; }
a.gp { background-color: #DB4A39!important; }
a.ms { background-color: #000!important; }
.sidebar .soc-btn { display:block; width:100%;
}
/* ------------------------------------- HEADER
------------------------------------- */
table.head-wrap { width: 100%;
background: url(http://www.aplusdesign.gb.com/wp-content/themes/bigbangwp/images/images/bgnewa.jpg);}
.header .btnheader {
background:none; border: none;
}
.btnheader a { color: #fff; text-decoration: none; background: none; border: 2px solid #fff; padding: 10px 40px ; border-radius: 2px; font-size: 16px; margin: 15px 0px; display: block;
}
.header h3,.header p {color: #fff;}
.header.container table td.logo { padding: 15px; }
.header.container table td.label { padding: 15px; padding-left:0px;}
.btnfooter {
background:none; border: none;
}
.btnfooter a { color: #fff; text-decoration: none; background: #7CC0CB; border: 2px solid #7CC0CB; padding: 10px 80px ; border-radius: 2px; font-size: 16px; margin: 15px 0px; display: block; text-align: center;
}
.boxa { background: #953895; font-size: 14px; width:100%; padding: 20px 0px; text-align: center; font-weight: bold; color: #fff;
}
.boxb { background: #b9225a; width:100%; padding: 20px 0px; text-align: center; font-weight: bold; font-size: 14px; color: #fff;
}
.boxc { font-size: 14px; background: #b1af35; width:100%; padding: 20px 0px; text-align: center; font-weight: bold; color: #fff;
}
.boxd { background: #14a051; width:100%; padding: 20px 0px; text-align: center; font-weight: bold; font-size: 14px; color: #fff;
}
/* ------------------------------------- BODY
------------------------------------- */
table.body-wrap { width: 100%;}
/* ------------------------------------- FOOTER
------------------------------------- */
table.footer-wrap { width: 100%; clear:both!important; background:url(http://www.aplusdesign.gb.com/wp-content/uploads/2014/03/gr.gif);
}
.footer-wrap .container td.content p { border-top: 1px solid rgb(215,215,215); padding-top:15px;}
.footer-wrap .container td.content p { font-size:10px; font-weight: bold;
}
/* ------------------------------------- TYPOGRAPHY
------------------------------------- */
h1,h2,h3,h4,h5,h6 {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; line-height: 1.1; margin-bottom:15px; color:#000;
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small { font-size: 60%; color: #6f6f6f; line-height: 0; text-transform: none; }
h1 { font-weight:200; font-size: 44px;}
h2 { font-weight:200; font-size: 37px;}
h3 { font-weight:500; font-size: 27px;}
h4 { font-weight:500; font-size: 23px;}
h5 { font-weight:900; font-size: 17px;}
h6 { font-weight:900; font-size: 14px; text-transform: uppercase; color:#444;}
.collapse { margin:0!important;}
p, ul { margin-bottom: 10px; font-weight: normal; font-size:14px; line-height:1.6;
}
p.lead { font-size:17px; }
p.last { margin-bottom:0px;}
ul li { margin-left:5px; list-style-position: inside;
}
/* ------------------------------------- SIDEBAR
------------------------------------- */
ul.sidebar { background:#ebebeb; display:block; list-style-type: none;
}
ul.sidebar li { display: block; margin:0;}
ul.sidebar li a { text-decoration:none; color: #666; padding:10px 16px;
/* font-weight:bold; */ margin-right:10px;
/* text-align:center; */ cursor:pointer; border-bottom: 1px solid #777777; border-top: 1px solid #FFFFFF; display:block; margin:0;
}
ul.sidebar li a.last { border-bottom-width:0px;}
ul.sidebar li a h1,ul.sidebar li a h2,ul.sidebar li a h3,ul.sidebar li a h4,ul.sidebar li a h5,ul.sidebar li a h6,ul.sidebar li a p { margin-bottom:0!important;}
/* --------------------------------------------------- RESPONSIVENESS Nuke it from orbit. It's the only way to be sure.
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container { display:block!important; max-width:600px!important; margin:0 auto!important; /* makes it centered */ clear:both!important;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content { padding:15px; max-width:600px; margin:0 auto; display:block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table { width: 100%; }
/* Odds and ends */
.column { width: 300px; float:left;
}
.column tr td { padding: 0px; }
.column-wrap { padding:0!important; margin:0 auto; max-width:600px!important;
}
.column table { width:100%;}
.social .column { width: 280px; min-width: 279px; float:left;
}
/* Be sure to place a .clear element after each set of columns, just to be safe */
.clear { display: block; clear: both; }
/* ------------------------------------------- PHONE For clients that support media queries. Nothing fancy.
-------------------------------------------- */
@media only screen and (max-width: 600px) { a[class="btn"] { display:block!important; margin-bottom:10px!important; background-image:none!important; margin-right:0!important;} div[class="column"] { width: auto!important; float:none!important;} table.social div[class="column"] { width:auto!important; }
}
Developer | Adethrax |
Username | adethrax |
Uploaded | August 12, 2022 |
Rating | 3 |
Size | 4,499 Kb |
Views | 30,360 |
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!
Name | Size |
A Pen by adethrax | 7,401 Kb |
Hover Box CSS | 1,652 Kb |
Responsive Brand Scroller | 5,023 Kb |
Title Box Hover | 1,837 Kb |
Bootstrap Homepage | 5,917 Kb |
JQuery FlexSlider responsive | 3,418 Kb |
Bootstrap Slider | 2,068 Kb |
Responsive images - hover | 2,135 Kb |
Bootstrap Image Boxes | 1,681 Kb |
Fancybox.js | 2,409 Kb |
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!
Name | Username | Size |
Background-blend-mode Test | 0x04 | 4,744 Kb |
Asteroids | Davedehaan | 2,846 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
404 Error Page | WebSonick | 3,203 Kb |
Web SQL | Hoehoe | 1,983 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Price table | Serluk | 5,928 Kb |
CSS Colors | Alexpate | 2,232 Kb |
CSS Tooltips | Darylldoyle | 2,599 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!