the death of peace of mind | book code

<!--HI OK. if you want to change the number of big buttons (there are currently five), you will need to cut away a few of the divs classified as "dropdown" and everything inside of them. you will need to change the width of these boxes after this, you can do so by going to the css section for the "dropbtn" class and changing the width px. if you want to add more it's basically that but instead of deleting you copy and paste the entire div class=dropdown thing-->

<!--if u want to change the number of dropdowns then you can copy and add or you can delete some of the the button class="tablink" things. just keep in mind that for each big button category, the top and bottom button need to have 8px of a margin at the top and bottom respectively. after adding the # of buttons you want, make sure to assign them a pg# properly!! so that they work-->


<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<style>

.back {
border-left: 10px solid white;
margin:2% 2% 0 2%;
padding:0.5%;
width: 840px;
max-width: 95%;
background-image: url("https://img.freepik.com/premium-vector/seamless-cute-pattern-three-vintage-cameras-isolated-light-background-background-retro_737296-777.jpg");

}

.topboob {
margin:4% 4% 2% 4%;
padding:1.5% 0;
width: 92%;
font-size: 30px;
font-weight: 700;
text-transform: uppercase;
background-color: rgb(255,255,255,0.95);
position: relative;
display: inline-block;
}

.botboob {
margin: 0 4% 4% 4%;
padding:4%;
width: 84%;
color:black;
font-size: 16px;
text-align: justify;
font-family: "Montserrat";
line-height: 23px;
background-color: rgb(255,255,255,0.95);
overflow:auto;
height: 470px;
}

.dropbtn {
background-color: #F4EBE7;
color: #786765;
border: 0px;
width:143px;
text-align: center;
padding-top:10px;
height: 30px;
font-size:16px;
font-weight:600;
cursor: pointer;
font-family: "Montserrat";
margin-bottom:2%;
transition: 0.5s;
}

.dropdown-content {
display: none;
position: absolute;
padding: 1px;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #d3c2b9;}

.tab button {
background-color: #efe9e6;
color: #786765;
font-weight:400;
border: 0px;
margin: 3px 0;
min-height:25px;
width:90%;
outline: none;
cursor: pointer;
font-family: "Montserrat";
transition: 0.5s;
}

.tab button:hover {
  background-color: #d3c2b9;
}

.tab button.active {
  background-color: #d3c2b9;
}

.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; }
}

.tittle {
text-align:center;
line-height: 28px;
margin-bottom:20px;
font-size:2em;
font-weight:700;
color: #584644;
padding-bottom:25px;
border-bottom: 2px solid #584644;
text-shadow: #584644 0 0 2px;
}

.yapper {
text-align: center;
font-size:14px;
background-color: rgba(244,235,231,0.7);
padding: 25px;
width:65%
}

.yaptiddie {
text-align: center;
font-size:18px;
margin-bottom:10px;
font-weight:600;
}

</style>

<body>

<center>
<div class="back"><!--background box-->
	<div class="topboob">
		<div class="tab">
<div class="dropdown">
	<div class="dropbtn">IT</div>
	<div class="dropdown-content">
		<button class="tablinks" onclick="openTab(event, 'pg1')" id="defaultOpen" style="margin-top:8px">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg2')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg3')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg4')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg5')" style="margin-bottom:8px">button</button>
	</div>
</div>

<div class="dropdown">
	<div class="dropbtn">WASN'T</div>
	<div class="dropdown-content">
		<button class="tablinks" onclick="openTab(event, 'pg6')" id="defaultOpen" style="margin-top:8px">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg7')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg8')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg9')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg10')" style="margin-bottom:8px">button</button>
	</div>
</div>

<div class="dropdown">
	<div class="dropbtn">HARD</div>
	<div class="dropdown-content">
		<button class="tablinks" onclick="openTab(event, 'pg11')" id="defaultOpen" style="margin-top:8px">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg12')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg13')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg14')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg15')" style="margin-bottom:8px">button</button>
	</div>
</div>

<div class="dropdown">
	<div class="dropbtn">TO</div>
	<div class="dropdown-content">
		<button class="tablinks" onclick="openTab(event, 'pg16')" id="defaultOpen" style="margin-top:8px">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg17')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg18')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg19')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg20')" style="margin-bottom:8px">button</button>
	</div>
</div>

<div class="dropdown">
	<div class="dropbtn">REALIZE</div>
	<div class="dropdown-content">
		<button class="tablinks" onclick="openTab(event, 'pg21')" id="defaultOpen" style="margin-top:8px">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg22')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg23')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg24')">button</button>
		<button class="tablinks" onclick="openTab(event, 'pg25')" style="margin-bottom:8px">button</button>
	</div>
</div>
		</div>
	</div><br>

<!--first dropdown-->

	<div class="botboob">
		<div id="pg1" class="tabcontent">
<div class="tittle">LOVE'S THE DEATH OF PEACE OF MIND</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit ipsum purus, sit amet sollicitudin neque aliquam et. Fusce fringilla eget ipsum in semper. Fusce blandit hendrerit orci at venenatis. Sed ac dui a lorem tincidunt venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin consequat rutrum mauris tincidunt congue. Vivamus hendrerit turpis hendrerit porttitor suscipit.<br><br>

Nam vestibulum nibh a sagittis hendrerit. Mauris sagittis vehicula elit, a laoreet mauris. In at bibendum tortor. In aliquam mauris sagittis, dignissim felis a, semper ex. Duis ut lacus at ligula imperdiet hendrerit quis a nunc. Phasellus non aliquam risus. Nam augue dolor, imperdiet eu pretium et, feugiat et metus. Nam sed enim interdum, vestibulum ligula a, elementum lectus. Pellentesque mattis egestas purus, ac mattis nunc.<br><br>

<center><div class="yapper">
	<div class="yaptiddie">
thought i could make it out
	</div>
Donec vel lacus non nibh egestas hendrerit nec ut elit. Mauris et euismod tortor, non efficitur nulla. Donec vitae tempor nibh, eget suscipit diam. Curabitur semper mattis nisl. Quisque id dictum neque. Donec euismod interdum lorem, at tempus erat dapibus vitae. Aliquam quis mauris et nibh eleifend commodo ut ac eros. Quisque at enim imperdiet, pulvinar dui vitae, congue ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas fringilla arcu et consectetur lobortis. Pellentesque congue venenatis orci, vitae rutrum arcu consectetur in. Suspendisse euismod ante malesuada venenatis tristique. Quisque scelerisque imperdiet lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus velit a ligula blandit, eu pretium est euismod. Quisque quis posuere magna, et aliquet enim.
</div></center><br>

Morbi non bibendum diam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce efficitur luctus velit sed lacinia. Duis tempus quam turpis, posuere hendrerit ex ornare in. Sed ullamcorper porttitor lorem, ut fermentum enim cursus in. Maecenas eros arcu, laoreet ornare tristique vitae, suscipit vel quam. Phasellus eget eros dignissim, hendrerit ipsum et, laoreet eros. Vivamus quis tortor eu quam tempus malesuada non sed quam. Nullam ac efficitur erat.

		</div>

		<div id="pg2" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
2
		</div>

		<div id="pg3" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
3
		</div>

		<div id="pg4" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
4
		</div>

		<div id="pg5" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
5
		</div>

<!--second dropdown-->

		<div id="pg6" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
6
		</div>

		<div id="pg7" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
7
		</div>

		<div id="pg8" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
8
		</div>

		<div id="pg9" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
9
		</div>

		<div id="pg10" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
10
		</div>

<!--third dropdown-->

		<div id="pg11" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
11
		</div>

		<div id="pg12" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
12
		</div>

		<div id="pg13" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
13
		</div>

		<div id="pg14" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
14
		</div>

		<div id="pg15" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
15
		</div>

<!--fourth dropdown-->

		<div id="pg16" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
16
		</div>

		<div id="pg17" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
17
		</div>

		<div id="pg18" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
18
		</div>
		<div id="pg19" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
19
		</div>

		<div id="pg20" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
20
		</div>

<!--fifth dropdown-->

		<div id="pg21" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
21
		</div>

		<div id="pg22" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
22
		</div>

		<div id="pg23" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
23
		</div>

		<div id="pg24" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
24
		</div>

		<div id="pg25" class="tabcontent">
<div class="tittle">PAGE TITLE GO HERE</div>
25
		</div>


	</div>
</div>
<div style="width: 650px;max-width: 88%;margin: 0% 3% 0 3%; padding: 0% 2% 2% 2%; font-size: 12px;"><center><a href="https://kranae.tumblr.com/" target="_blank">coded by kanae</a></center></div><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>