Front
<html>
<head>
<title>Postcard Custom - Front</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
}
strong {
font-weight: 300;
}
body {
width: 6.25in;
height: 4.25in;
margin: 0;
padding: 0;
background-image: url(https://www.clientswebsite.com/images/AMP-postcard-front.jpg);
background-size: 6.25in 4.25in;
background-repeat: no-repeat;
}
#safe-area {
position: relative;
margin-top: 0.1875in;
margin-left: 0.1875in;
width: 5.875in;
height: 3.875in;
/*background-color: rgba(255,255,255,0.5);*/
}
#wrapper {
position:absolute;
left: -0.1875in;
bottom: -0.1875in;
padding: 0.0in 0.06in 0.1in 0.25in;
top: 1.535in;
width: 3.415in;
text-align: center;
/*background-color: rgba(15,114,98,0.5);*/
}
#logo {
height: .616in;
margin-top: 0.1in;
width: 100%;
white-space: nowrap;
}
#logo .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#logo img {
max-height: 100%;
max-width: 1.2in;
vertical-align: middle;
}
#title {
margin: .15in .2in;
font-size: 20px;
font-weight: 100;
}
#content {
margin: 0 .2in;
font-size: 22px;
font-weight: 300;
}
#phone {
margin-top: .15in;
font-size: 19px;
font-weight: 100;
}
</style>
</head>
<body>
<div id="safe-area">
<div id="wrapper">
<div id="logo">
<div class="helper"></div>
</div>
<div id="title">
</div>
<div id="content">
</div>
<div id="phone">
</div>
</div>
</div>
</body>
</html>
Back
<html>
<head>
<title>Postcard 5 - Back</title>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" rel="stylesheet">
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
font-weight: 100;
color: #fff;
}
strong {
font-weight: 300;
}
body {
width: 6.25in;
height: 4.25in;
margin: 0;
padding: 0;
background-image: url(https://www.clientswebsite.com/images/AMP-postcard-back.jpg);
background-size: 6.25in 4.25in;
background-repeat: no-repeat;
}
#safe-area {
position: relative;
margin-top:0.1875in;
margin-left:0.1875in;
width: 5.875in;
height: 3.875in;
/*background-color: rgba(255,255,255,0.5);*/
}
#ink-free {
position: absolute;
width: 3.34in;
height: 2.4in;
right: 0.0625in;
bottom: 0.0625in;
background: #fff;
}
#title {
position: absolute;
top: 0.0625in;
left: 0.0625in;
right: 0.0625in;
height: 1.25in;
padding-top: 0.325in;
text-align:center;
font-size: 38px;
}
#content {
position: absolute;
top: 1.42in;
width: 2.25in;
left: 0.0625in;
bottom: 0.0625in;
padding-top: 0.5in;
text-align:center;
font-size: 34px;
}
#content .phone {
display:inline-block;
margin-top:15px;
font-size: 25px;
font-weight: 300;
}
</style>
</head>
<body>
<div id="safe-area">
<div id="title">
</div>
<div id="content">
<span class="phone">
</span>
</div>
<!--<div id="ink-free"></div>-->
</div>
</body>
</html>
