Skip to content

Instantly share code, notes, and snippets.

@eruvanos
Created April 23, 2018 02:12
Show Gist options
  • Save eruvanos/154168533f26323d497020b94664cab2 to your computer and use it in GitHub Desktop.
Save eruvanos/154168533f26323d497020b94664cab2 to your computer and use it in GitHub Desktop.
Postcard template
<html>
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<title>Lob.com Sample 4x6 Postcard Back</title>
<style>
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
position: relative;
width: 6.25in;
height: 4.25in;
margin: 0;
padding: 0;
border-color: black;
border-style: solid;
border-width: 1;
/* If using an image, the background image should have dimensions of 1875x1275 pixels. */
/*background-image: url(https://s3-us-west-2.amazonaws.com/lob-assets/beach.jpg);*/
/*background-size: 6.25in 4.25in;*/
/*background-repeat: no-repeat;*/
}
#safe-area {
position: absolute;
width: 5.875in;
height: 3.875in;
left: 0.1875in;
top: 0.1875in;
background-color: rgba(255,255,255,0.5);
}
#ink-free {
position: absolute;
width: 3.2835in;
height: 2.375in;
right: 0.275in;
bottom: 0.25in;
background-color: white;
}
.text {
margin: 10px;
width: 200px;
font-family: 'Open Sans';
font-weight: 400;
font-size: 18px;
color: black;
/*text-shadow: 2px 2px black;*/
}
</style>
</head>
<body>
<div id="safe-area">
<!-- All text should appear within the safe area. -->
<div class="text">
<h1>{{title}}</h1>
Liebe Grüße aus dem Internet.
<br/><br/>
Dies ist ein Photo von {{author}}.
<br/><br/>
Euer Maic
</div>
</div>
<!-- Delete this div before submitting your postcard! -->
<!-- Do not place any artwork or text in the ink free area. Address and postage will be automatically printed here by Lob. -->
<div id="ink-free"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment