Air-Mail Envelope Display

INFORMATION & CODE

Air-Mail Envelope Display

What the Code Does

This code creates a digital air-mail postcard/envelope design using HTML and CSS. The HTML provides the content and structure, while the CSS creates the visual appearance.

How the Code Works

The HTML sets up a standard webpage and links to an external styles.css file. It also imports Google Fonts and Font Awesome. Inside the <body>, the .mail-container is the main card, containing an inner section with an “Air-Mail” label, a postage-stamp image, and placeholder recipient address information. The <br> elements create line breaks within the address.

The CSS controls the card's size, position, colours, fonts, and layout. The .mail-container is 600px wide and 295px high and is centred using margin: 0 auto. Its repeating-linear-gradient() creates the distinctive red, light-blue, and blue diagonal air-mail border, white box-shadow gives the card a raised appearance.

The .inner element creates the light-blue area inside the card and uses the Caveat Google Font to give the address a handwritten appearance. The postage-stamp image is positioned in the top-right corner using absolute positioning. The .tag class similarly positions the blue Air-Mail label near the top-right of the card.

How to Use the Code

To use the code, save the HTML as index.html and the CSS as styles.css in the same folder. Open index.html in a browser to view the design. You can replace the placeholder address, change the postage-stamp image URL, and modify the CSS colours, dimensions, fonts, or positioning to customise the card.

HTML


                <!doctype html>
<html lang="en/US">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Air-Mail Envelope Display</title>
    <link rel="stylesheet"  href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/d9cf1148e3.js" crossorigin></script>
  </head>
  <body>
    <div class="mail-container">
      <div class="inner">
        <h4 class="tag">Air-Mail</h4>
        <img src="https://e-nash.net/photos/postage-stam.png" alt="Postage stamp">
        <p><u>To</u><br>1st line of address<br>Town name<br>County/State name<br>Country<br>Post/Zip Code</p>
      </div>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                     
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500&display=swap');

* {
  box-sizing: border-box;
}

body {
  padding: 10px;
  margin: 0;
  background: #f5f5f5;
}

.mail-container {
  position: relative;
  width: 600px;
  height: 295px;
  margin:0 auto;
  background-image: repeating-linear-gradient(135deg, #ff0505 0px, #fa0000 30px, #ddeeff 30px, #ddeeff 50px, #0099ff 50px, #00aaff 80px, #ddeeff 80px, #ddeeff 100px);
  padding: 12px;
  box-shadow: 3px 4px 15px rgba(0, 0, 0, 0.5);
}

.mail-container .inner {
  position: relative;
  background: #ddeeff;
  padding: 40px 0 55px 150px;
  width: 100%; 
  height: 100%;
  color: #0000cc;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem
}

.inner p {
  color: #0000cc;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
}

.inner p u {
  color: #0000cc;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
}

img {
  position: absolute;
  top: 10px;
  right: 10px;
}

.tag {
  position: absolute;
  top: -10px;
  right: 120px;
  width: 120px;
  padding: 5px 20px;
  background: #00aaff;
  color: white;
  font-family: "Arial",san-serif;
  font-size: 16px;
  text-align: center;
}

MENU

INFORMATION & CODE