<body>

  <article>
    <h1>Awesome<br>Company</h1>

    <address>
      <p>The Awesome Company</p>
      <p>102-112 Frail Bend Bridge<br>
      The Dwindlings<br>
      Little Hornet<br>
      HX3 9ZQ<br>
      UK</p>
    </address>
  </article>


</body>

* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
  background: #ccc;

}

article {
  width: 210mm;
  height: 297mm;
  margin: 20px auto;
  position: relative;
  background-image: url(https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png),url(https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png),linear-gradient(0deg,#817171 ,#eee 15%),linear-gradient(180deg,#817171 ,#eee 40%);
  background-repeat: no-repeat,no-repeat;
  background-position: top , bottom;
  border-top: 1mm solid red;
  border-bottom: 1mm solid red;


}

address {
  position: absolute;
  bottom: 8mm;
  right: 20mm;


}

h1 {
  position: absolute;
  top: 12mm;
  left: 20mm;
  width: 128px;
  height: 128px;
  font-size: 20px;
  letter-spacing: 1px;
  text-align: center;
  padding: 44px 0;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-image: url(https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png);
  border-radius: 50%;
  box-shadow:  5px 5px 5px black;
  
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.