<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
width: 600px;
height: 408px;
}
.page {
position: relative;
width: 600px;
height: 408px;
overflow: hidden;
}
</style>
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="page" style="background-color: white">
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 23.999999999999144px;
top: 23.000000000000085px;
width: 557.3302993539745px;
height: 2px;
overflow: hidden;
transform: rotate(0deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_1G2LGsNiVzCTh98js23bce.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 557.3302993539745px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 25.000000000000007px;
top: 24.00000000000003px;
width: 360px;
height: 2px;
overflow: hidden;
transform: rotate(90.00000000000014deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_mHrMaqJRWVmybFEL7hyQPC.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 360px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 23.99999999999917px;
top: 383.00000000000006px;
width: 552.0000000000009px;
height: 2px;
overflow: hidden;
transform: rotate(5.900159409091732e-15deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_xobwCrm4GU5n8kd4PHEnoH.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 552.0000000000009px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 577px;
top: 24.000000000000068px;
width: 359.99999999999994px;
height: 2px;
overflow: hidden;
transform: rotate(90.00000000000014deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_mHrMaqJRWVmybFEL7hyQPC.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 360px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 12.000000000000027px;
top: 11px;
width: 576px;
height: 2px;
overflow: hidden;
transform: rotate(2.1203697876423446e-15deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_wW69auA9ceJXetcXRLRBP3.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 576px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 12.999999999999996px;
top: 12.000000000000023px;
width: 384.0000000000001px;
height: 2px;
overflow: hidden;
transform: rotate(90deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_ogfLGFryVvXtESKyhivgXZ.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 384px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 12.000000000000028px;
top: 395.00000000000034px;
width: 576.0000000000001px;
height: 2px;
overflow: hidden;
transform: rotate(-2.261727773485167e-14deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_63qRpwkVGGUz8s2UbvctrQ.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 576px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<div style="
position: absolute;
margin: 0;
padding: 0;
left: 588.9999999999998px;
top: 12.000000000000018px;
width: 384px;
height: 2px;
overflow: hidden;
transform: rotate(90deg);
transform-origin: top left;">
<img src="https://pg-prod-bucket-1.s3.amazonaws.com/images/org_hC2tD8A3WXGboP9oEEQHYY/test/image_1NnaGLGvwYekMrH2tXZdss.svg%2Bxml" style="
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 384px;
height: 2px;
opacity: 1;
filter: blur(0px) brightness(1);" />
</div>
<!-- Text added -->
<div style="
position: absolute;
left: 50%; /* Adjust horizontal centering */
top: 50%; /* Adjust vertical centering */
transform: translate(-50%, -50%); /* Center the element relative to its own dimensions */
font-family: 'Roboto', sans-serif;
font-size: 20px;
color: #000000;
text-align: center; /* Optional: Center align text */
">
This is a 4x6 postcard. The document size is 4.25x6.25, but the blue
border is what the postcard will be trimmed down to. Your background
artwork should extend to the edge of the document, but text should be
placed within the pink border
</div>
</div>
</div>
</body>
</html>
Sample file:
