hate at second thought | backstory code

<!-- i used this font for the title https://fontmeme.com/fonts/iceland-winterstorm-font/-->

<style>
.top {
max-width:730px;
background-image: url("https://imgur.com/O5e52Wb.jpg");
background-size: cover;
height:125px;
text-align:center;
position: relative;
}

.toptext {
color: rgb(255,255,255,0.5);
padding-top:20px;
font-family: "Times New Roman", Times, serif;
letter-spacing:4.5px;
font-style: italic;
font-size: 16px;
transition: 1s;
}

.toptext:hover {
color: rgb(255,255,255,0.7);
font-size: 18px
}

.title {
position: absolute;
bottom: -40px;
left: 0;
right: 0;
transition: 1s;
}

.title:hover {
filter: brightness(1.1);
}

.middle {
background-color: black;
height: 475px;
font-family: "Times New Roman", Times, serif;
max-width:630px;
padding: 40px 50px 40px 50px;
color: white;
font-size: 16px;
overflow: auto;
text-align: justify;
}

b {
color: #ecdb9d
}

.bottom {
max-width:730px;
background-image: url("https://imgur.com/O5e52Wb.jpg");
background-size: cover;
height:95px;
text-align:center;
position: relative;
}

.tab button {
background-color: #212121;
margin: -20px 5px 0 0;
width: 115px;
height: 40px;
font-family: 'Montserrat', sans-serif;
font-weight: 900;
border:1px solid black;
box-shadow: 0px 5px 0px #353535,
			0px 10px 0px #474747;
border-radius: 15px;
color: white;
border: 0px;
outline: none;
cursor: pointer;
transition: 0.5s
}

.tab button.active {
background-color: #474747;
box-shadow: 0px 5px 0px #353535,
			0px 10px 0px #212121;
}

.tabcontent {
animation: whoosh 0.3s ease-in forwards;
-webkit-animation: whoosh 0.3s ease-in forwards;
}

@keyframes whoosh {
0% { opacity: 0; }
100% { opacity: 1; }
}

@webkit-keyframes whoosh {
0% { opacity: 0; }
100% { opacity: 1; }
}

.bottomtext {
position: absolute;
bottom: 20px;
left: 0;
right: 0;
color: rgb(255,255,255,0.5);
letter-spacing:4.5px;
font-style: italic;
font-family: "Times New Roman", Times, serif;
transition: 1s;
font-size: 16px
}

.bottomtext:hover {
color: rgb(255,255,255,0.7);
font-size: 18px
}

</style>



<body>
<center>
<div class="top">
	<div class="toptext">
I thought she was mine, but now I know that she's not.
	</div>
	<div class="title">
<img src="https://fontmeme.com/permalink/250618/2f2849c1cabd621e2dc85c562a50fa1c.png" style="width:75%;">
	</div>
</div>
<div class="middle">
	<div id="pg1" class="tabcontent">
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare gravida arcu, ac suscipit justo fermentum in. Quisque quis sem cursus, feugiat magna lacinia, suscipit nunc. In id urna vel magna lacinia semper id nec nulla. Nulla sed odio vitae ex pellentesque vehicula. Maecenas malesuada lectus nec vulputate sagittis. Sed consequat blandit accumsan. Mauris efficitur dignissim nisl sit amet cursus. Mauris vitae erat nisl.<br><br>

Nulla sodales felis vitae lorem ornare, in suscipit augue dapibus. Integer at molestie augue. Pellentesque nec viverra massa. Praesent id euismod turpis. Quisque ut arcu sodales, sagittis ante sit amet, lacinia libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit leo, porta at viverra iaculis, tincidunt vel lorem. Duis facilisis cursus dui id rutrum. Nullam rhoncus ultricies aliquam. Etiam a est urna. Donec euismod ac tortor vel condimentum. Integer lorem sem, mattis et fermentum a, sollicitudin a dui.<br><br>

Pellentesque ut porta mauris. Pellentesque eleifend libero at felis consectetur bibendum. Nam condimentum nulla id dapibus porta. Ut lacus ipsum, rhoncus et elementum at, sodales nec risus. Ut non velit sed enim finibus venenatis rutrum in nisi. Proin id massa non nunc sagittis volutpat nec quis lacus. Nulla facilisi. Mauris facilisis eu libero pellentesque dictum. Ut lacinia urna ac neque ultrices pharetra. Phasellus ullamcorper fringilla sem, sed hendrerit ligula. Aenean vehicula vitae tellus non molestie. Aliquam sed fringilla metus.<br><br>

Phasellus dignissim arcu nec rhoncus mattis. Aenean sed ornare sapien. Fusce quis nisi id felis commodo faucibus. Donec elementum congue libero, nec malesuada diam iaculis ut. In eu sem velit. Vestibulum non sapien in urna scelerisque vestibulum. Morbi eget tellus finibus, pretium sapien non, hendrerit ipsum. Curabitur gravida, dolor quis cursus consequat, nulla velit accumsan ligula, ac ultricies diam nisl id nisi.<br><br>

Integer malesuada tellus dolor. Fusce euismod est sit amet pharetra commodo. Etiam mattis risus metus, vitae fringilla justo pretium eget. Cras id facilisis tellus. Nunc at tincidunt nisi, vel egestas magna. Nulla rhoncus mattis ante, at posuere metus efficitur sit amet. Sed viverra posuere urna nec vehicula. Nunc ut odio felis. Aenean at magna molestie, rutrum nunc in, accumsan ex. Donec urna orci, interdum vel felis at, egestas volutpat purus. Suspendisse malesuada venenatis rutrum. Phasellus sed quam semper, ultricies velit at, malesuada augue. Cras fringilla vulputate massa quis vulputate. Etiam nec lacinia ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>

	<div id="pg2" class="tabcontent">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare gravida arcu, ac suscipit justo fermentum in. Quisque quis sem cursus, feugiat magna lacinia, suscipit nunc. In id urna vel magna lacinia semper id nec nulla. Nulla sed odio vitae ex pellentesque vehicula. Maecenas malesuada lectus nec vulputate sagittis. Sed consequat blandit accumsan. Mauris efficitur dignissim nisl sit amet cursus. Mauris vitae erat nisl.<br><br>

Nulla sodales felis vitae lorem ornare, in suscipit augue dapibus. Integer at molestie augue. Pellentesque nec viverra massa. Praesent id euismod turpis. Quisque ut arcu sodales, sagittis ante sit amet, lacinia libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit leo, porta at viverra iaculis, tincidunt vel lorem. Duis facilisis cursus dui id rutrum. Nullam rhoncus ultricies aliquam. Etiam a est urna. Donec euismod ac tortor vel condimentum. Integer lorem sem, mattis et fermentum a, sollicitudin a dui.<br><br>

Pellentesque ut porta mauris. Pellentesque eleifend libero at felis consectetur bibendum. Nam condimentum nulla id dapibus porta. Ut lacus ipsum, rhoncus et elementum at, sodales nec risus. Ut non velit sed enim finibus venenatis rutrum in nisi. Proin id massa non nunc sagittis volutpat nec quis lacus. Nulla facilisi. Mauris facilisis eu libero pellentesque dictum. Ut lacinia urna ac neque ultrices pharetra. Phasellus ullamcorper fringilla sem, sed hendrerit ligula. Aenean vehicula vitae tellus non molestie. Aliquam sed fringilla metus.<br><br>

Phasellus dignissim arcu nec rhoncus mattis. Aenean sed ornare sapien. Fusce quis nisi id felis commodo faucibus. Donec elementum congue libero, nec malesuada diam iaculis ut. In eu sem velit. Vestibulum non sapien in urna scelerisque vestibulum. Morbi eget tellus finibus, pretium sapien non, hendrerit ipsum. Curabitur gravida, dolor quis cursus consequat, nulla velit accumsan ligula, ac ultricies diam nisl id nisi.<br><br>

Integer malesuada tellus dolor. Fusce euismod est sit amet pharetra commodo. Etiam mattis risus metus, vitae fringilla justo pretium eget. Cras id facilisis tellus. Nunc at tincidunt nisi, vel egestas magna. Nulla rhoncus mattis ante, at posuere metus efficitur sit amet. Sed viverra posuere urna nec vehicula. Nunc ut odio felis. Aenean at magna molestie, rutrum nunc in, accumsan ex. Donec urna orci, interdum vel felis at, egestas volutpat purus. Suspendisse malesuada venenatis rutrum. Phasellus sed quam semper, ultricies velit at, malesuada augue. Cras fringilla vulputate massa quis vulputate. Etiam nec lacinia ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>

	<div id="pg3" class="tabcontent">
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare gravida arcu, ac suscipit justo fermentum in. Quisque quis sem cursus, feugiat magna lacinia, suscipit nunc. In id urna vel magna lacinia semper id nec nulla. Nulla sed odio vitae ex pellentesque vehicula. Maecenas malesuada lectus nec vulputate sagittis. Sed consequat blandit accumsan. Mauris efficitur dignissim nisl sit amet cursus. Mauris vitae erat nisl.<br><br>

Nulla sodales felis vitae lorem ornare, in suscipit augue dapibus. Integer at molestie augue. Pellentesque nec viverra massa. Praesent id euismod turpis. Quisque ut arcu sodales, sagittis ante sit amet, lacinia libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit leo, porta at viverra iaculis, tincidunt vel lorem. Duis facilisis cursus dui id rutrum. Nullam rhoncus ultricies aliquam. Etiam a est urna. Donec euismod ac tortor vel condimentum. Integer lorem sem, mattis et fermentum a, sollicitudin a dui.<br><br>

Pellentesque ut porta mauris. Pellentesque eleifend libero at felis consectetur bibendum. Nam condimentum nulla id dapibus porta. Ut lacus ipsum, rhoncus et elementum at, sodales nec risus. Ut non velit sed enim finibus venenatis rutrum in nisi. Proin id massa non nunc sagittis volutpat nec quis lacus. Nulla facilisi. Mauris facilisis eu libero pellentesque dictum. Ut lacinia urna ac neque ultrices pharetra. Phasellus ullamcorper fringilla sem, sed hendrerit ligula. Aenean vehicula vitae tellus non molestie. Aliquam sed fringilla metus.<br><br>

Phasellus dignissim arcu nec rhoncus mattis. Aenean sed ornare sapien. Fusce quis nisi id felis commodo faucibus. Donec elementum congue libero, nec malesuada diam iaculis ut. In eu sem velit. Vestibulum non sapien in urna scelerisque vestibulum. Morbi eget tellus finibus, pretium sapien non, hendrerit ipsum. Curabitur gravida, dolor quis cursus consequat, nulla velit accumsan ligula, ac ultricies diam nisl id nisi.<br><br>

Integer malesuada tellus dolor. Fusce euismod est sit amet pharetra commodo. Etiam mattis risus metus, vitae fringilla justo pretium eget. Cras id facilisis tellus. Nunc at tincidunt nisi, vel egestas magna. Nulla rhoncus mattis ante, at posuere metus efficitur sit amet. Sed viverra posuere urna nec vehicula. Nunc ut odio felis. Aenean at magna molestie, rutrum nunc in, accumsan ex. Donec urna orci, interdum vel felis at, egestas volutpat purus. Suspendisse malesuada venenatis rutrum. Phasellus sed quam semper, ultricies velit at, malesuada augue. Cras fringilla vulputate massa quis vulputate. Etiam nec lacinia ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>

	<div id="pg4" class="tabcontent">
4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare gravida arcu, ac suscipit justo fermentum in. Quisque quis sem cursus, feugiat magna lacinia, suscipit nunc. In id urna vel magna lacinia semper id nec nulla. Nulla sed odio vitae ex pellentesque vehicula. Maecenas malesuada lectus nec vulputate sagittis. Sed consequat blandit accumsan. Mauris efficitur dignissim nisl sit amet cursus. Mauris vitae erat nisl.<br><br>

Nulla sodales felis vitae lorem ornare, in suscipit augue dapibus. Integer at molestie augue. Pellentesque nec viverra massa. Praesent id euismod turpis. Quisque ut arcu sodales, sagittis ante sit amet, lacinia libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit leo, porta at viverra iaculis, tincidunt vel lorem. Duis facilisis cursus dui id rutrum. Nullam rhoncus ultricies aliquam. Etiam a est urna. Donec euismod ac tortor vel condimentum. Integer lorem sem, mattis et fermentum a, sollicitudin a dui.<br><br>

Pellentesque ut porta mauris. Pellentesque eleifend libero at felis consectetur bibendum. Nam condimentum nulla id dapibus porta. Ut lacus ipsum, rhoncus et elementum at, sodales nec risus. Ut non velit sed enim finibus venenatis rutrum in nisi. Proin id massa non nunc sagittis volutpat nec quis lacus. Nulla facilisi. Mauris facilisis eu libero pellentesque dictum. Ut lacinia urna ac neque ultrices pharetra. Phasellus ullamcorper fringilla sem, sed hendrerit ligula. Aenean vehicula vitae tellus non molestie. Aliquam sed fringilla metus.<br><br>

Phasellus dignissim arcu nec rhoncus mattis. Aenean sed ornare sapien. Fusce quis nisi id felis commodo faucibus. Donec elementum congue libero, nec malesuada diam iaculis ut. In eu sem velit. Vestibulum non sapien in urna scelerisque vestibulum. Morbi eget tellus finibus, pretium sapien non, hendrerit ipsum. Curabitur gravida, dolor quis cursus consequat, nulla velit accumsan ligula, ac ultricies diam nisl id nisi.<br><br>

Integer malesuada tellus dolor. Fusce euismod est sit amet pharetra commodo. Etiam mattis risus metus, vitae fringilla justo pretium eget. Cras id facilisis tellus. Nunc at tincidunt nisi, vel egestas magna. Nulla rhoncus mattis ante, at posuere metus efficitur sit amet. Sed viverra posuere urna nec vehicula. Nunc ut odio felis. Aenean at magna molestie, rutrum nunc in, accumsan ex. Donec urna orci, interdum vel felis at, egestas volutpat purus. Suspendisse malesuada venenatis rutrum. Phasellus sed quam semper, ultricies velit at, malesuada augue. Cras fringilla vulputate massa quis vulputate. Etiam nec lacinia ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>

	<div id="pg5" class="tabcontent">
5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ornare gravida arcu, ac suscipit justo fermentum in. Quisque quis sem cursus, feugiat magna lacinia, suscipit nunc. In id urna vel magna lacinia semper id nec nulla. Nulla sed odio vitae ex pellentesque vehicula. Maecenas malesuada lectus nec vulputate sagittis. Sed consequat blandit accumsan. Mauris efficitur dignissim nisl sit amet cursus. Mauris vitae erat nisl.<br><br>

Nulla sodales felis vitae lorem ornare, in suscipit augue dapibus. Integer at molestie augue. Pellentesque nec viverra massa. Praesent id euismod turpis. Quisque ut arcu sodales, sagittis ante sit amet, lacinia libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elit leo, porta at viverra iaculis, tincidunt vel lorem. Duis facilisis cursus dui id rutrum. Nullam rhoncus ultricies aliquam. Etiam a est urna. Donec euismod ac tortor vel condimentum. Integer lorem sem, mattis et fermentum a, sollicitudin a dui.<br><br>

Pellentesque ut porta mauris. Pellentesque eleifend libero at felis consectetur bibendum. Nam condimentum nulla id dapibus porta. Ut lacus ipsum, rhoncus et elementum at, sodales nec risus. Ut non velit sed enim finibus venenatis rutrum in nisi. Proin id massa non nunc sagittis volutpat nec quis lacus. Nulla facilisi. Mauris facilisis eu libero pellentesque dictum. Ut lacinia urna ac neque ultrices pharetra. Phasellus ullamcorper fringilla sem, sed hendrerit ligula. Aenean vehicula vitae tellus non molestie. Aliquam sed fringilla metus.<br><br>

Phasellus dignissim arcu nec rhoncus mattis. Aenean sed ornare sapien. Fusce quis nisi id felis commodo faucibus. Donec elementum congue libero, nec malesuada diam iaculis ut. In eu sem velit. Vestibulum non sapien in urna scelerisque vestibulum. Morbi eget tellus finibus, pretium sapien non, hendrerit ipsum. Curabitur gravida, dolor quis cursus consequat, nulla velit accumsan ligula, ac ultricies diam nisl id nisi.<br><br>

Integer malesuada tellus dolor. Fusce euismod est sit amet pharetra commodo. Etiam mattis risus metus, vitae fringilla justo pretium eget. Cras id facilisis tellus. Nunc at tincidunt nisi, vel egestas magna. Nulla rhoncus mattis ante, at posuere metus efficitur sit amet. Sed viverra posuere urna nec vehicula. Nunc ut odio felis. Aenean at magna molestie, rutrum nunc in, accumsan ex. Donec urna orci, interdum vel felis at, egestas volutpat purus. Suspendisse malesuada venenatis rutrum. Phasellus sed quam semper, ultricies velit at, malesuada augue. Cras fringilla vulputate massa quis vulputate. Etiam nec lacinia ex. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</div>
</div>
<div class="bottom">
	<div class="tab">
	<button class="tablinks" onclick="openTab(event, 'pg1')" id="defaultOpen">‎ </button>
	<button class="tablinks" onclick="openTab(event, 'pg2')">‎ </button>
	<button class="tablinks" onclick="openTab(event, 'pg3')">‎ </button>
	<button class="tablinks" onclick="openTab(event, 'pg4')">‎ </button>
	<button class="tablinks" onclick="openTab(event, 'pg5')" style="margin-right: 0px">‎ </button>
	</div>
	<div class="bottomtext">
You got me like "I love you to the moon," but never back.
	</div>
</div>
<center><a href="https://kranae.tumblr.com/" target="_blank" style="font-size:12px;"><i>coded by kanae</i></a></center><br><br>
</center>
</body>

<script>
function openTab(evt, tabID) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  var selectedTab = document.getElementById(tabID);
  selectedTab.style.display = "block";

  evt.currentTarget.className += " active";

}

document.getElementById("defaultOpen").click();
</script>