<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TEXT ON THE TAB</title>
<!--The style.css file allows you to change the look of your web pages.
If you include the next line in all your web pages, they will all share the same look.
This makes it easier to make new pages for your site.-->
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
.envelopeback{
background-image: url('YOUR IMAGE OF THE BACK');
background-size: 100%;
background-color: transparent;
width: 600px;
height: 440px;
border: none;
overflow: visible;
padding: 0px; }
.envelopeback:hover{
background-image: url('YOUR IMAGE OF THE FRONT'); }
.letter{
display: none; /* this is VITAL! it makes sure you can only read the letter when you open it */
background-image: url('YOUR PAPER TEXTURE');
background-size: 100%;
background-color: white; /* this is just a back up in case the image fails */
width: 460px;
min-height: 640px; /* min means that it will expand beyond that if there is more text */
color: black;
overflow: visible;
border: none;
border-radius: 0px; /* if you don't use rounded corners this won't be important to you*/
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /* places the letter in the middle of the window when you open it*/
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
font-family: "Lucida Handwriting", cursive;
box-shadow : 3px 3px 5px #666; /*3-D effect*/ }
.show {display:block; }
</style>
</head>
<body>
<div class="envelopeback" id="letter1">
<div class="letter" id="open1">
<left>
<!-- YOUR LETTER TEXT HERE -->
</left>
</div>
</div>
</code>
</div>
<script>
document.getElementById("letter1").onclick = function() {LetterOpen()};
function LetterOpen() {
document.getElementById("open1").classList.toggle("show");
}
document.getElementById("letter2").onclick = function() {LetterOpen2()};
function LetterOpen2() {
document.getElementById("open2").classList.toggle("show");
}
</script>
</body>
</html>