js-tutorial-step-3

<template>
  <div
    class="body"
    :style="{ backgroundImage: `url(https://s3.us-west-2.amazonaws.com/public.lob.com/solutions/Lob_demo_postcard_conversion/Retail+psc/4x6+Retail+Postcard/Links/indoor-4148898.jpg)` }"
  >
    <div class="header">Love the home you live in</div>
    <div class="logo">virtonis</div>
    <div id="safe-area"></div>
  </div>
</template>
<style scoped>
*,
*:before,
*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

textarea {
   font: inherit;
}
@font-face {
   font-family: "Lato-Bold";
   src: url(https://s3.us-west-2.amazonaws.com/public.lob.com/solutions/Lob_demo_postcard_conversion/Retail+psc/4x6+Retail+Postcard/Document+fonts/Lato-Bold.ttf)
       format("truetype");
}

@font-face {
   font-family: "Lato-Light";
   src: url(https://s3.us-west-2.amazonaws.com/public.lob.com/solutions/Lob_demo_postcard_conversion/Retail+psc/4x6+Retail+Postcard/Document+fonts/Lato-Light.ttf)
       format("truetype");
}

@font-face {
   font-family: "Lato-Regular";
   src: url(https://s3.us-west-2.amazonaws.com/public.lob.com/solutions/Lob_demo_postcard_conversion/Retail+psc/4x6+Retail+Postcard/Document+fonts/Lato-Regular.ttf)
       format("truetype");
}

.body {
   position: absolute;
   top: 0;
   left: 0;
   width: 6.25in;
   height: 4.25in;
   margin: 0;
   padding: 0;

   background-size: 6.25in 4.25in;
   background-repeat: no-repeat;
}

.header {
   position: absolute;
   width: 4.3232in;
   height: 1.8625in;
   left: 0.9138in;
   top: 0.2847in;
   font-size: 39.247pt;
   line-height: 35.804pt;
   font-family: "Lato-Light";
}

.logo {
   position: absolute;
   /* width: 1.2807in; */
   height: 0.4407in;
   right: 0.2in;
   top: 3.7072in;
   font-size: 24.787pt;
   line-height: 29.745pt;
   font-family: "Lato-Regular";
}

#safe-area {
   position: absolute;
   width: 5.875in;
   height: 3.875in;
   left: 0.1875in;
   top: 0.1875in;
   background-color: rgba(255, 255, 255, 0.5);
}
</style>