emo capybara… | club code

<!--hi. there is copious use of notes because i am bad at keeping track of divs-->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Monomakh&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Ephesis&family=Lora:ital,wght@0,400..700;1,400..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

<style>

.back {
background-color:#000;
margin: 3% 3% 0 3%;
padding: 2%;
width: 650px;
border-radius: 1%;
font-size:14px;
height:600px;
max-width: 88%;
}

.rahtatata1 {
background-color:#6e1f1f;
padding:1%;
color: white;
}

.roooog2 {
background-color:#6e1f1f;
padding:1%;
margin-top: -5px;
height: 494px;
color: white;
}

.tittle {
background-image: url('https://wallpapers.com/images/hd/dark-red-aesthetic-8oh5mlo21uq2zbgt.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
text-align: center;
padding: 2%;
font-size: 32px;
font-family: 'Monomakh';
}

.bigbox {
display: flex;
column-gap: 1%;
}

.column1 {
width: 30%;
background-color: black;
padding: 15px;
border: 1px solid black;
overflow: auto;
height: 462px
}

.column2 {
background-image: url('https://imgur.com/XvDau3d.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
width: 65%;
font-size:16px;
padding: 5px 15px 15px 15px;
background-color: black;
border: 1px solid black;
text-align: left;
overflow: auto;
height: 472px
}

.tab button {
background-color: #6e1f1f;
color:white;
border: 1px solid black;
border-radius; 5%;
width:100%;
outline: none;
font-family: "Montserrat", sans-serif;
cursor: pointer;
transition: 0.5s;
height:6%;
}

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

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

.tabcontent {
padding-top:9px;
animation: whoOOOOosh 0.3s ease-in forwards;
-webkit-animation: whoOOOOosh 0.3s ease-in forwards;
}

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

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

hr {
border: 1px dotted #000;
border-style: none none dotted;
background-color: #fff;
}

</style>
<body>
<div class="back">
	<div class="rahtatata1">
		<div class="tittle">EMO CAPYBARA...
		</div>
	</div><br>

	<div class="roooog2">
		<div class="bigbox">
       		<div class="column1">
				<div style="text-align:center">
<img src="https://imgur.com/mQxQps3.gif" alt="Ansel PFP" style="width:90%;border-radius: 50%;border: 1px solid black;"><br><span style="font-family: 'Ephesis', cursive;font-size:27px;color:white">Thine Mother</span>
				</div><hr>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit rutrum malesuada. In pretium porta venenatis. Nulla eleifend lectus vel nisl imperdiet sagittis. Aliquam pellentesque sit amet odio.<br><br>

<!--for the text on the left side, if you make it too long the entire left side will start to scroll this is on purpose because it's more mobile friendly but you can add a div box with overflow:auto just for the text if you don't want that-->

				<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'pg1')" id="defaultOpen">BUTTON 1</button>
  <button class="tablinks" onclick="openTab(event, 'pg2')">BUTTON 2</button>
  <button class="tablinks" onclick="openTab(event, 'pg3')">BUTTON 3</button>
<button class="tablinks" onclick="openTab(event, 'pg4')">BUTTON 4</button>
				</div>
			</div>

<!--KANAE THIS IS THE END OF COLUMN 1 OK DONT REMOVE THAT DIV-->

			<div class="column2">
				<div id="pg1" class="tabcontent">
PAGE 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit rutrum malesuada. In pretium porta venenatis. Nulla eleifend lectus vel nisl imperdiet sagittis. Aliquam pellentesque sit amet odio et pretium. Ut vitae ante sit amet eros consequat fermentum. Integer eget arcu sed urna consectetur hendrerit. Nullam dignissim egestas euismod. Nullam pulvinar turpis volutpat leo fringilla congue.<br><br>

Aenean eget vulputate nisi. Sed nec dolor ut quam semper faucibus in sit amet sem. Nulla in aliquam mi. Cras sodales velit ac nulla fringilla, at ornare erat aliquet. Praesent iaculis augue sit amet magna laoreet interdum. Nunc eleifend porta tortor. Quisque at volutpat est. Aliquam efficitur augue ex, in hendrerit ipsum suscipit in. Suspendisse posuere ullamcorper facilisis. Nunc eu urna aliquam, pretium leo at, accumsan ex. Phasellus tristique eu ex non porta. Quisque sed eros non risus ultricies auctor id eget enim. Curabitur eu nulla massa.<br><br>

Proin venenatis justo id dolor porta, sit amet ullamcorper mi lobortis. Nunc ultricies hendrerit justo. Integer eleifend imperdiet quam eu faucibus. Maecenas mattis quam et dolor consequat, et ornare purus convallis. Quisque sed sapien at ex dapibus dignissim sit amet in sem. Curabitur ut nisl non lectus cursus pretium. Vestibulum odio leo, venenatis at leo ac, finibus fermentum lorem. Sed vitae consequat nibh. Morbi ut leo vehicula, ultrices lectus et, volutpat elit. Donec suscipit ligula eros, et tempus lacus pellentesque id. Proin mollis magna sit amet purus pellentesque bibendum. Nam sit amet tempor odio.<br><br>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam at justo leo. Pellentesque rhoncus nulla sit amet sem pulvinar dapibus quis eu sem. Vestibulum dignissim venenatis enim, vel rhoncus sem. Vestibulum accumsan nibh nisl, vel aliquet massa fermentum fringilla. Nam maximus lacus nec nibh placerat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum pellentesque nec purus a bibendum.
				</div>

				<div id="pg2" class="tabcontent">
PAGE 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit rutrum malesuada. In pretium porta venenatis. Nulla eleifend lectus vel nisl imperdiet sagittis. Aliquam pellentesque sit amet odio et pretium. Ut vitae ante sit amet eros consequat fermentum. Integer eget arcu sed urna consectetur hendrerit. Nullam dignissim egestas euismod. Nullam pulvinar turpis volutpat leo fringilla congue.<br><br>

Aenean eget vulputate nisi. Sed nec dolor ut quam semper faucibus in sit amet sem. Nulla in aliquam mi. Cras sodales velit ac nulla fringilla, at ornare erat aliquet. Praesent iaculis augue sit amet magna laoreet interdum. Nunc eleifend porta tortor. Quisque at volutpat est. Aliquam efficitur augue ex, in hendrerit ipsum suscipit in. Suspendisse posuere ullamcorper facilisis. Nunc eu urna aliquam, pretium leo at, accumsan ex. Phasellus tristique eu ex non porta. Quisque sed eros non risus ultricies auctor id eget enim. Curabitur eu nulla massa.<br><br>

Proin venenatis justo id dolor porta, sit amet ullamcorper mi lobortis. Nunc ultricies hendrerit justo. Integer eleifend imperdiet quam eu faucibus. Maecenas mattis quam et dolor consequat, et ornare purus convallis. Quisque sed sapien at ex dapibus dignissim sit amet in sem. Curabitur ut nisl non lectus cursus pretium. Vestibulum odio leo, venenatis at leo ac, finibus fermentum lorem. Sed vitae consequat nibh. Morbi ut leo vehicula, ultrices lectus et, volutpat elit. Donec suscipit ligula eros, et tempus lacus pellentesque id. Proin mollis magna sit amet purus pellentesque bibendum. Nam sit amet tempor odio.<br><br>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam at justo leo. Pellentesque rhoncus nulla sit amet sem pulvinar dapibus quis eu sem. Vestibulum dignissim venenatis enim, vel rhoncus sem. Vestibulum accumsan nibh nisl, vel aliquet massa fermentum fringilla. Nam maximus lacus nec nibh placerat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum pellentesque nec purus a bibendum.

				</div>

				<div id="pg3" class="tabcontent">
PAGE 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit rutrum malesuada. In pretium porta venenatis. Nulla eleifend lectus vel nisl imperdiet sagittis. Aliquam pellentesque sit amet odio et pretium. Ut vitae ante sit amet eros consequat fermentum. Integer eget arcu sed urna consectetur hendrerit. Nullam dignissim egestas euismod. Nullam pulvinar turpis volutpat leo fringilla congue.<br><br>

Aenean eget vulputate nisi. Sed nec dolor ut quam semper faucibus in sit amet sem. Nulla in aliquam mi. Cras sodales velit ac nulla fringilla, at ornare erat aliquet. Praesent iaculis augue sit amet magna laoreet interdum. Nunc eleifend porta tortor. Quisque at volutpat est. Aliquam efficitur augue ex, in hendrerit ipsum suscipit in. Suspendisse posuere ullamcorper facilisis. Nunc eu urna aliquam, pretium leo at, accumsan ex. Phasellus tristique eu ex non porta. Quisque sed eros non risus ultricies auctor id eget enim. Curabitur eu nulla massa.<br><br>

Proin venenatis justo id dolor porta, sit amet ullamcorper mi lobortis. Nunc ultricies hendrerit justo. Integer eleifend imperdiet quam eu faucibus. Maecenas mattis quam et dolor consequat, et ornare purus convallis. Quisque sed sapien at ex dapibus dignissim sit amet in sem. Curabitur ut nisl non lectus cursus pretium. Vestibulum odio leo, venenatis at leo ac, finibus fermentum lorem. Sed vitae consequat nibh. Morbi ut leo vehicula, ultrices lectus et, volutpat elit. Donec suscipit ligula eros, et tempus lacus pellentesque id. Proin mollis magna sit amet purus pellentesque bibendum. Nam sit amet tempor odio.<br><br>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam at justo leo. Pellentesque rhoncus nulla sit amet sem pulvinar dapibus quis eu sem. Vestibulum dignissim venenatis enim, vel rhoncus sem. Vestibulum accumsan nibh nisl, vel aliquet massa fermentum fringilla. Nam maximus lacus nec nibh placerat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum pellentesque nec purus a bibendum.
				</div>

				<div id="pg4" class="tabcontent">
PAGE 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras hendrerit rutrum malesuada. In pretium porta venenatis. Nulla eleifend lectus vel nisl imperdiet sagittis. Aliquam pellentesque sit amet odio et pretium. Ut vitae ante sit amet eros consequat fermentum. Integer eget arcu sed urna consectetur hendrerit. Nullam dignissim egestas euismod. Nullam pulvinar turpis volutpat leo fringilla congue.<br><br>

Aenean eget vulputate nisi. Sed nec dolor ut quam semper faucibus in sit amet sem. Nulla in aliquam mi. Cras sodales velit ac nulla fringilla, at ornare erat aliquet. Praesent iaculis augue sit amet magna laoreet interdum. Nunc eleifend porta tortor. Quisque at volutpat est. Aliquam efficitur augue ex, in hendrerit ipsum suscipit in. Suspendisse posuere ullamcorper facilisis. Nunc eu urna aliquam, pretium leo at, accumsan ex. Phasellus tristique eu ex non porta. Quisque sed eros non risus ultricies auctor id eget enim. Curabitur eu nulla massa.<br><br>

Proin venenatis justo id dolor porta, sit amet ullamcorper mi lobortis. Nunc ultricies hendrerit justo. Integer eleifend imperdiet quam eu faucibus. Maecenas mattis quam et dolor consequat, et ornare purus convallis. Quisque sed sapien at ex dapibus dignissim sit amet in sem. Curabitur ut nisl non lectus cursus pretium. Vestibulum odio leo, venenatis at leo ac, finibus fermentum lorem. Sed vitae consequat nibh. Morbi ut leo vehicula, ultrices lectus et, volutpat elit. Donec suscipit ligula eros, et tempus lacus pellentesque id. Proin mollis magna sit amet purus pellentesque bibendum. Nam sit amet tempor odio.<br><br>

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam at justo leo. Pellentesque rhoncus nulla sit amet sem pulvinar dapibus quis eu sem. Vestibulum dignissim venenatis enim, vel rhoncus sem. Vestibulum accumsan nibh nisl, vel aliquet massa fermentum fringilla. Nam maximus lacus nec nibh placerat blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum pellentesque nec purus a bibendum.
				</div>
			</div>
		</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>

<!--touch this credit and i will come and use evil magic to make sure your pillow is warm on both sides 24/7 forever-->

</body>



<!--gonna be honest guys idk what this javascript is. all i know is that w3 schools says it'll work and i trust it w/ my life at this point-->
<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";

  selectedTab.scrollIntoView({ behavior: "auto", block: "start" });
}

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