Commit 0fc58c02 authored by Matija Obreza's avatar Matija Obreza
Browse files

Newsletter template

parent 2c2abbb9
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
margin:0;
font-family: "Roboto",Helvetica,Arial,sans-serif;
}
a{
color:#006db4;
font-weight: bold;
}
.mail-newsletter{
width:100%;
border-collapse: collapse;
}
.head{
background-image: url("logo-mail.png");
height:118px;
background-position: 32% 35%;
background-repeat:no-repeat;
background-color: #4d4c46 ;
}
.follow-header{
display:inline-block;
width: 77%;
text-align:right;
}
.follow-header a{
display: inline-block;
height: 20px;
width: 72px;
vertical-align: middle;
/* border-right:1px solid #fff; */
}
.twitter{
background: url("twitter.png")no-repeat 50% 0;
margin-left: 40px;
/* border-left:1px solid #fff; */
}
.facebook {
background: url("facebook.png") no-repeat 50% 0;
}
.linkedin {
background: url("linkedin.png") no-repeat 50% 0;
}
.grey{
background:#e7e5df;
}
.child{
border-collapse: collapse;
}
.child, .info{
width: 650px;
margin: 0 auto;
background: #fff;
}
.banner{
background: url("banner-mail.png") no-repeat 50% 0;
height:335px;
position:relative;
}
.banner span{
text-transform: uppercase;
position: absolute;
bottom: 2px;
left: 21px;
color: #fff;
background: #88ba42;
padding: 12px 15px;
font-size: 19px;
font-weight: bold;
letter-spacing: 0.5px;
}
.massege{
padding: 15px;
display: inline-block;
}
.massege h1{
color:#006db4;
margin: 6px 0;
font-size: 39px;
font-family: sans-serif;
font-weight: normal;
letter-spacing: 0.5px;
}
.massege p {
line-height: 23px;
}
.info .title,
.insight .title{
border-bottom:1px solid #c9c9c7;
height:34px;
margin-bottom: 0;
}
.info .title span,
.insight .title span{
text-transform: uppercase;
color: #fff;
background: #88ba42;
padding: 12px 15px;
font-size: 19px;
font-weight: bold;
letter-spacing: 0.5px;
}
.info {
border-spacing: 20px 30px;
}
.img1{
background: url("../html/images/mail-img3.png");
height:101px;
background-position: 0 0;
background-repeat:no-repeat;
background-color: #e7e5df;
}
.img2{
background: url("mail-img2.png");
height:101px;
background-position: 0 0;
background-repeat:no-repeat;
background-color: #e7e5df;
}
.img3{
background-image: url("mail-img1.png");
height:101px;
background-position: 0 0;
background-repeat:no-repeat;
background-color: #e7e5df;
}
.item{
border:1px solid #d2d0cb;
}
.item p {
margin-left: 170px;
color:#006db4;
font-size: 23px;
}
.banner2{
background: url("mail-banner2.png") no-repeat 0 0;
height:320px;
}
.insight{
width: 650px;
margin: 0 auto;
background: #fff;
border-spacing:20px 10px;
}
.insight p{
margin-bottom:10px;
}
.insight .massege {
display: inline-block;
margin: -5px -18px;
padding:0;
}
.twitter{
background: url("twitter.png") no-repeat 50% 0;
margin-left: 40px;
/* border-left:1px solid #fff; */
}
.facebook {
background: url("facebook.png") no-repeat 50% 0;
}
.linkedin {
background: url("linkedin.png") no-repeat 50% 0;
}
.follow{
background:#4d4c46;
color:#fff;
height: 56px;
text-align: center;
}
.follow a{
display: inline-block;
height: 20px;
width: 60px;
vertical-align: middle;
/* border-right:1px solid #fff; */
}
.under-footer{
width: 650px;
margin: 0 auto;
background: #fff;
border-collapse: collapse;
}
.forward{
background-image: url("icon-mail.png");
height:127px;
background-position: 5% 49%;
background-repeat:no-repeat;
background-color: #88ba42;
}
.forward span{
display:inline-block;
font-weight:bold;
color:#fff;
margin-left: 115px;
font-size: 30px;
margin-right: 15px;
}
.forward a{
color: #fff;
padding: 16px 47px;
border: 1px solid #fff;
text-decoration: none;
vertical-align: super;
}
.footer {
margin: 0 auto;
text-align:center;
margin-top: 25px;
font-size: 13px;
}
.footer p{
margin:0;
}
.footer p a{
text-decoration:none;
}
.footer .copyright {
text-transform:uppercase;
height:68px;
}
</style>
</head>
<body>
<table class="mail-newsletter">
<tr>
<td class="head">
<p class="follow-header">
<a target="_blank" href="https://www.twitter.com/GenesysPGR" class="twitter"></a>
<!--
<a href="" class="facebook"></a>
<a href="" class="linkedin"></a>
-->
</p>
</td>
</tr>
<tr>
<td class="grey">
<table class="child">
<tr>
<td class="banner"><span>main article</span></td>
</tr>
<tr class="massege">
<td>
<h1>Brazil to play key role in global food security</h1>
<p>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.
</p> </br>
<a href="#" class="read">Read all article...</a>
</td>
</tr>
<tr>
<table class="info">
<tr>
<td>
<p class="title"><span>this month</span></p>
</td>
</tr>
<tr>
<td class="item img1">
<p>Analytics: Overview of deposits to genebanks from regions</p>
</td>
</tr>
<tr>
<td class="item img2">
<p>ITPGRFA publishes statistics on germplasm distributions</p>
</td>
</tr>
<tr>
<td class="item img3">
<p>Featured Institute: Forschungsanstalt AgroscopeReckenholz-Tänikon</p>
</td>
</tr>
</table>
<table class="insight">
<tr>
<td>
<p class="title"><span>insight</span></p>
</td>
</tr>
<tr>
<td class="banner2"></td>
</tr>
<tr class="massege">
<td>
<h1>Video: Newsy on the deposit to the seed vault </h1>
<p>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.
</p> </br>
<a href="#" class="read">Read all article...</a>
</td>
</tr>
</table>
<table class="under-footer">
<tr>
<td class="forward">
<span>Spread the news!</span>
<!-- <a href="#" class="button">Forward to a friend</a> -->
</td>
</tr>
<tr class="follow">
<td>
Follow us
<a target="_blank" href="https://www.twitter.com/GenesysPGR" class="twitter"></a>
<!--
<a href="" class="facebook"></a>
<a href="" class="linkedin"></a>
-->
</td>
</tr>
</table>
<table class="footer">
<tr>
<td>
<p>
This email was sent by Genesys PGR to <a href="#">nancy.smith@gmail.com</a>
</p>
<p>To change you subscription preferences click here to <a href="#">update</a></p>
<p>To stop receiving all Genesys emails, click here to <a href="#">unsubscribe</a></p>
</td>
</tr>
<tr class="copyright">
<td>
<p> &copy; 2015 &middot; Global Crop Diversity Trust &middot; all rights reserved</p>
</td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
margin:0;
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.mail{ width: 100%; margin: 0 auto; border-collapse: collapse;}
.head{
background-image: url("../html/images/logo_genesys.png");
height:118px;
background-position: 30% 32%;
background-repeat:no-repeat;
background-color: #4d4c46 ;
}
.child{
width: 650px;
margin: 0 auto;
background: #fff;
border-spacing: 18px;
}
.name{
font-size:27px;
height: 60px;
}
.child tr td{
padding:10px;
}
.child tr td p{
font-size:16px;
}
.massege{
text-align:center;
background:#88ba42;
color:#fff;
height:90px;
font-size:18px;
}
.confirm{
background:#e7e5df;
text-align:center;
height:90px;
font-size:18px;
}
.confirm a{
color:#006db4;
}
.grey{
background:#e7e5df;
}
.footer {
margin: 0 auto;
text-align:center;
margin-top: 25px;
font-size: 13px;
}
.footer p{
margin:0;
}
.footer p a{
text-decoration:none;
}
.footer .copyright {
text-transform:uppercase;
height:68px;
}
.follow{
background:#4d4c46;
color:#fff;
height: 56px;
text-align: center;
}
.follow a{
display: inline-block;
height: 20px;
width: 60px;
vertical-align: middle;
border-right:1px solid #fff;
}
.icons{
width: 654px;
margin: 0 auto;
margin-top: -2px;
}
.twitter{
background: url("../html/images/twitter.png")no-repeat 50% 0;
margin-left: 40px;
border-left:1px solid #fff;
}
.facebook {
background: url("../html/images/facebook.png")no-repeat 50% 0;
}
.linkedin {
background: url("../html/images/linkedin.png")no-repeat 50% 0;
}
</style>
</head>
<body>
<table class="mail">
<tr>
<td class="head"></td>
</tr>
<tr>
<td class="grey">
<table class="child">
<tr class="name">
<td>Hello Ms.Nancy!</td>
</tr>
<tr class="massege">
<td>You registration process is successfully completed</td>
</tr>
<tr class="confirm">
<td><a href="#">Click here to confirm your identity</a></td>
</tr>
<tr>
<td>
<p>
<h4>Your Privacy Matters to us!</h4>
A confirmations link has been sent to your email address. In order to activate your new Genesys account,
and be able to sign in with your new credentials, you will need to have access to your email and confirm your
identity, by clicking on the confirmation link.
</p>
</td>
</tr>
<tr class="link">
<td><strong>Your Genesys team</strong></br> <a href="#">help@genesys-pgr.org</a></td>
</tr>
</table>
<table class="icons">
<tr class="follow">
<td>
Follow us
<a href="" class="twitter"></a>
<a href="" class="facebook"></a>
<a href="" class="linkedin"></a>
</td>
</tr>
</table>
<table class="footer">
<tr>
<td>
<p>
This email was sent by Genesys to <a href="#">nancy.smith@gmail.com</a>
</p>
<p>To change you subscription preferences click here to <a href="#">update</a></p>
<p>To stop receiving all Genesys emails, click here to <a href="#">unsubscribe</a></p>
</td>
</tr>
<tr class="copyright">
<td>
<p> &copy; 2015 &middot; genesys &middot; all rights reserved</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
margin:0;
}
.mail{ width: 100%; margin: 0 auto; border-collapse: collapse;}
.head{
background: url("../html/images/logo_genesys.png")no-repeat 30% 32% #4d4c46;
height:118px;
}
.child{
width: 650px;
margin: 0 auto;
background: #fff;
border-spacing: 18px;
font-family:"Roboto";
}
.name{
font-size:27px;
height: 60px;
}
.child tr td p{
font-size:16px;
}
.massege div{
background: url("../html/images/mail-img.png")no-repeat 0 0 #c6d6b0;
height:303px;
width: 612px;
}
.massege p{
text-align:center;
background:#88ba42;
color:#fff;
padding: 36px 0;
font-size:18px;
margin:0;
}
.confirm{
background:#e7e5df;
text-align:center;
height:90px;
font-size:18px;
}
.confirm a{
color:#006db4;
}
.grey{
background:#e7e5df;
}
.footer {
margin: 0 auto;
text-align:center;
margin-top: 25px;
font-size: 13px;
}
.footer p{
margin:0;
}
.footer p a{
text-decoration:none;
}
.footer .copyright {
text-transform:uppercase;
height:68px;
}
.follow{
background:#4d4c46;
color:#fff;
height: 56px;
text-align: center;
}
.follow a{
display: inline-block;
height: 20px;
width: 60px;
vertical-align: middle;
border-right:1px solid #fff;
}
.icons{
width: 654px;
margin: 0 auto;
margin-top: -2px;
}
.follow .list-inline{
margin:0;
}
.follow .list-inline li{