false reality time buckos | profile text

<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
::-webkit-scrollbar {display: none;}
@keyframes fadeIn {
  0% {opacity:0}
  100% {opacity:1;}
}

.body{
	background: #eee;
	height: 600px;
	font-family: 'Work Sans';
	border: 1px solid rgba(0,0,0,0.2);
  	width: 850px;
    margin: auto
}
.sidebar{
	position: relative;
	float: left;
	transition: 1s all;
	background: url(https://64.media.tumblr.com/a4f1e0deb058a42566cd1f1c35403b09/60439bfcb80dfa62-cd/s540x810/2233169f772500293db385d77946d458f12053c8.gifv)center;
	width: 350px;
	height: 600px;
  background-size: cover;
}
.tabcontent{
	overflow: auto;
	position: relative;
  font-size: 15px;
  display: hidden;
	padding: 20px;
transition: all 1s;
  animation: fadeIn ease-in 1s;
}
h2{
	text-align: right;
	text-transform: uppercase;
    font-size: 30px;
	margin: 10px 20px 0px 20px;
	position: relative
}
.text{
	overflow: auto;
	text-align: justify;
	padding: 20px;
	background: #fff;
  	height: 440px
}
.tablinks{
	background: #c4a29d;
	border: 1px solid rgba(0,0,0,0.2);
    border: none;
    cursor: pointer;
    outline: none;
	height: 10px;
    text-align: center;
	font-family: 'Work Sans';
	text-transform: uppercase;
	font-size: 16px;
    transition: all 1s
}
.tablinks:first-child{
	margin-left: 20px;
}
button:hover, .active {
    background: #b00b1e;
    transition: all 1s;
	letter-spacing: 2px
}
b, i, h2, legend{
	color: #b00b1e
}
fieldset{
	text-align: center
}
legend{
	text-align: left
}
.rawr{
width: 125px;
  height: 5px;
	margin: 10px 0;
  border-radius: 10px;
  background: #eee;
  overflow: hidden
}
.stat{
height: 5px;
  border-radius: 10px;
  background: #000
}
ul {
	padding-left:15px;
	list-style:none;
    width: 180px
}
.material-icons{
	margin-right: 10px;
	padding-top: 0px;
	position: relative;
  	bottom:-7px
}
</style>
<div class="body">
<div class="sidebar"></div>
<div style="justify-content: space-between;">
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">About</button>
<button class="tablinks" onclick="openCity(event, '2')">aesthetic</button>
<button class="tablinks" onclick="openCity(event, '3')">relations</button>
<button class="tablinks" onclick="openCity(event, '4')">Stats</button>
<button class="tablinks" onclick="openCity(event, '5')">playlist</button>
</div>
<h2>character name.</h2>
<div class="tabcontent" id="1">
<div class="text">
Lorem ipsum dolor sit amet,<b> eam habeo epicurei ne,</b> nisl tation expetendis eu mea. Pri posse congue appetere eu. Vel vitae singulis ne. Et paulo apeirian his, has modus fierent mentitum at, alia tritani est in.<i> Hinc vide gloriatur vel ne, per scripta omittantur te, at meis dictas intellegat per.</i>

<p>Mea erroribus reformidans te, probo patrioque ut. Vim in justo verterem tincidunt, in docendi copiosae detraxit nec. Nec ex fierent noluisse. Ne vim ubique mentitum, laoreet comprehensam id quo, an putent labitur definitionem eam. Causae laboramus sententiae ex ius.
Lorem ipsum dolor sit amet, eam habeo epicurei ne, nisl tation expetendis eu mea. Pri posse congue appetere eu. Vel vitae singulis ne. Et paulo apeirian his, has modus fierent mentitum at, alia tritani est in. Hinc vide gloriatur vel ne, per scripta omittantur te, at meis dictas intellegat per.

<p>Mea erroribus reformidans te, probo patrioque ut. Vim in justo verterem tincidunt, in docendi copiosae detraxit nec. Nec ex fierent noluisse. Ne vim ubique mentitum, laoreet comprehensam id quo, an putent labitur definitionem eam. Causae laboramus sententiae ex ius.
</div>
</div>
<div class="tabcontent" id="2">
<div style="height:480px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;grid-template-areas:'one four' 'two five' 'three six';grid-gap:5px;margin:0 0 20px 0;">
				<div style="grid-area:one;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
				<div style="grid-area:two;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
				<div style="grid-area:three;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
				<div style="grid-area:four;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
				<div style="grid-area:five;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
				<div style="grid-area:six;background: url(PICTURE)center;background-size:cover;padding: 10px; border:1px solid rgba(0,0,0,0.2)"></div>
</div>
</div>
<div class="tabcontent" id="3">
<div class="text">
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff">
<img src="PICTURE" style="height:100px; width: 100px; object-fit: cover; float:left; margin-right: 10px">
<b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff">
<img src="PICTURE" style="height:100px; width: 100px; object-fit: cover; float:left; margin-right: 10px">
<b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff">
<img src="PICTURE" style="height:100px; width: 100px; object-fit: cover; float:left; margin-right: 10px">
<b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff">
<img src="PICTURE" style="height:100px; width: 100px; object-fit: cover; float:left; margin-right: 10px">
<b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
<div style="border:1px solid rgba(0,0,0,0.3);padding: 10px; margin-bottom: 10px;background: #fff">
<img src="PICTURE" style="height:100px; width: 100px; object-fit: cover; float:left; margin-right: 10px">
<b>NAME | RELATIONSHIP -- </b>Lorem ipsum dolor sit amet, cu ius veniam aperiam. Mel labores epicuri theophrastus ei, atqui accommodare intellegebat vix ut. Quod malorum nostrum ea . Nec mazim paulo eu.
</div>
</div>
</div>
<div class="tabcontent" id="4">
<div class="text" style=" column-count: 3; height: 90px; margin-bottom: 20px">
monke <div class="rawr"><div class="stat" style="width: 60%"></div></div>
dinosaur <div class="rawr"><div class="stat" style="width: 20%"></div></div>
no<div class="rawr"><div class="stat" style="width: 80%"></div></div>
reeeee<div class="rawr"><div class="stat" style="width: 69%"></div></div>
no<div class="rawr"><div class="stat" style="width: 80%"></div></div>
reeeee<div class="rawr"><div class="stat" style="width: 69%"></div></div>
</div>
<div class="text" style="height: 170px; overflow: hidden; margin-bottom: 20px">
<b>LIKES/DISLIKES</b>

<div style="display: flex;">
<!--keep these shit short-->
<ul>
<li><span class="material-icons">favorite</span>bananas and shit<li>
<li><span class="material-icons">favorite</span>monke<li>
<li><span class="material-icons">favorite</span>monke<li>
<li><span class="material-icons">favorite</span>monke<li>
<li><span class="material-icons">favorite</span>monke<li>
</ul>
<ul>
<li><span class="material-icons">close</span>monke<li>
<li><span class="material-icons">close</span>monke<li>
<li><span class="material-icons">close</span>monke<li>
<li><span class="material-icons">close</span>monke<li>
<li><span class="material-icons">close</span>monke<li>
</ul>
</div>
</div>
<div class="text" style="height: 60px; text-align: center; align-items: center; justify-content: center; display: flex">
<b>"a quote or something i don't give a "</b>
</div>
</div>
<div class="tabcontent" id="5">
<div class="text" style="height: 445px">
<fieldset style="margin-bottom: 10px; background: #fff;border:1px solid rgba(0,0,0,0.3);">
<legend>♫<a href="LINK" style="text-decoration: none;color: #000;" target="_blank"> SONG</a>
</legend>
<i>Ooga Booga Lyrics</i>
</fieldset>
<fieldset style="margin-bottom: 10px; background: #fff;border:1px solid rgba(0,0,0,0.3);">
<legend>♫<a href="LINK" style="text-decoration: none;color: #000;" target="_blank"> SONG</a>
</legend>
<i>Ooga Booga Lyrics</i>
</fieldset>
<fieldset style="margin-bottom: 10px; background: #fff;border:1px solid rgba(0,0,0,0.3);">
<legend>♫<a href="LINK" style="text-decoration: none;color: #000;" target="_blank"> SONG</a>
</legend>
<i>Ooga Booga Lyrics</i>
</fieldset>
<fieldset style="margin-bottom: 10px; background: #fff;border:1px solid rgba(0,0,0,0.3);">
<legend>♫<a href="LINK" style="text-decoration: none;color: #000;" target="_blank"> SONG</a>
</legend>
<i>Ooga Booga Lyrics</i>
</fieldset>
<fieldset style="margin-bottom: 10px; background: #fff;border:1px solid rgba(0,0,0,0.3);">
<legend>♫<a href="LINK" style="text-decoration: none;color: #000;" target="_blank"> SONG</a>
</legend>
<i>Ooga Booga Lyrics</i>
</fieldset>
</div>
</div>
</div>
<div style="text-align: center; margin: auto; padding: 10px">
<a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #000; font-size: 10px; font-family: 'Work Sans'" target="_blank">CODED BY FINCH</a></div>
<script>
function openCity(evt, cityName) {
  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", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

   window.onload = function(e){
      document.getElementById("defaultOpen").click();
   }

  $(document).ready(function() {  //If you are using jquery then use this other wise you can use normal window.onload
     document.getElementById("defaultOpen").click();
  });

</script>