young man, there’s no need to be down | profile text

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #bbb}
::-webkit-scrollbar-thumb {background: #000; width: 10px}
@font-face {font-family: 'Mellow Yellow'; src: url(https://cdn.statically.io/gh/finchscodes/fonts/main/Mellow%20Yellow.ttf)}
@keyframes slide{
0%{transform: translate(25%,0);opacity: 0}
100%{transform: translate(0,0);opacity: 1}
}
.body{
	height: 600px;
    width: 750px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    margin: auto;
    font-family: 'Montserrat';
    display: flex;
    overflow: hidden
}
.header{
	font-family: 'Mellow Yellow';
    padding: 20px;
    background: #6B4E71;
    height: 70px;
    color: #fff;
    text-shadow: 5px 0px 2px #000;
    font-size: 45px
}
.subheader{
	text-align: right;
    font-size: 20px;
    text-transform: uppercase;
    text-shadow: 1px 1px 3px #fff;
    font-family: 'Montserrat'
}
.bar{
	float: right;
    height: 560px;
    padding: 20px;
    background: #53687E;
    width: 200px;
    text-align: center;
    color: #fff;
    font-size: 10px
}
.text{
	text-align: justify;
    font-size: 15px;
    padding: 20px;
     overflow: auto;
     height: 450px;
        animation-name: slide;
        animation-duration: 0.7s;
}
.tablinks{
	border: 1px solid rgba(0,0,0,0.2);
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    font-family: 'Mellow Yellow';
    cursor: pointer;
    text-transform: uppercase;
    font-size: 25px;
    background: #bbb;
    transition: all 1s;
    box-shadow: 1px 1px 5px #bbb;
    font-weight: bold;
    letter-spacing: 2px;
    color: #fff
}
.tablinks:hover, .active{
	background: #000;
    box-shadow: 1px 1px 5px #000;
    font-size: 28px
}
img{
	object-fit: cover
}
h2{
	margin: 0px;
    color: #6B4E71;
    text-transform: uppercase;
    border-bottom: 5px solid #53687E;
    padding-bottom: 5px;
    font-family: 'Mellow Yellow';
    font-size: 25px;
    letter-spacing: 2px;
}
i, b{
	color: #53687E;
    text-shadow: 1px 1px 1px #53687E
}
.song{
	padding: 10px;
    background: #eee;
    font-size: 12px;
    margin: 5px 0px;
}
.song > h2{
	border-bottom: none;
    margin-top: -10px;
    margin-bottom: -5px
}
.song > i{
	color: #000;
}
.tabcontent{
	overflow: hidden
}
.relation{
	display: flex;
    align-items: center;
    padding: 10px;
    background: #eee;
    margin: 5px 0px;
    font-size: 12px
}
.name{
	font-size: 25px;
    font-family: 'Mellow Yellow';
    letter-spacing: 2px;
    font-weight: bold;
    color:#6B4E71;
    text-shadow:1px 1px 2px #6B4E71;
}
.stats{
	background:#646464;
	text-transform:uppercase;
    text-align: center;
    color: #fff;
    padding: 2px;
}
</style>
<div class="body">
<div style="width: 520px; height:600px">
<div class="header">
young man, there's no need to be down
<div class="subheader">become mothman
</div>
</div>
<div class="tabcontent" id="1">
<div class="text">
<h2>evolve wings and mothman</h2>
<p><img src="https://64.media.tumblr.com/2285332465350e97d16ba1a9c3000538/4d98a220ce472361-16/s1280x1920/50de93c5887e80b6823b77703dfac1f58eab7884.jpg" style="height: 200px; float: left; margin-right: 10px">Lorem ipsum dolor sit amet, minim singulis an, ne sea verear labitur. Malis corpora reprimique ut vis, probo consul ut has. <b>Eos delectus partiendo id, quaeque conceptam eu quo. Omittam explicari quo eu, usu ex numquam argumentum. Verear propriae perpetua at per.</b>
<p><i>At option iuvaret sea. Omnium facilis id qui. Has purto iisque instructior eu. Vim et vero illud.</i>

<p>Quo ei facete oportere. Nam no error veniam pericula, ius an illum laudem postea, nihil recteque mea no. Sit ut elit facete rationibus. Id oportere rationibus vel, et eos facer petentium urbanitas. Te erant tempor quo, nec ea indoctum complectitur signiferumque, pro pericula maluisset conclusionemque in.
<h2>personality</h2>
<p>Pro idque mazim ad. Congue tantas denique sea in. Audiam reprimique ea eum. Eu usu nihil honestatis, ut quando expetenda eum.
<p>Lorem ipsum dolor sit amet, minim singulis an, ne sea verear labitur. Malis corpora reprimique ut vis, probo consul ut has. Eos delectus partiendo id, quaeque conceptam eu quo. Omittam explicari quo eu, usu ex numquam argumentum. Verear propriae perpetua at per.

<p>At option iuvaret sea. Omnium facilis id qui. Has purto iisque instructior eu. Vim et vero illud.
<h2>appearance</h2>
<p>Quo ei facete oportere. Nam no error veniam pericula, ius an illum laudem postea, nihil recteque mea no. Sit ut elit facete rationibus. Id oportere rationibus vel, et eos facer petentium urbanitas. Te erant tempor quo, nec ea indoctum complectitur signiferumque, pro pericula maluisset conclusionemque in.

<p>Pro idque mazim ad. Congue tantas denique sea in. Audiam reprimique ea eum. Eu usu nihil honestatis, ut quando expetenda eum.

<p>Solum facer decore ea quo, at pro iuvaret invidunt convenire, duo exerci eruditi legimus ut. Ad ius minim aliquid expetenda, aeterno suscipiantur pro in, ei eirmod accumsan . Eros debitis meliore eos ei, nullam recteque no vim. Vide omittantur definitiones cu nam. Te sed rebum adversarium intellegebat, nibh recusabo scribentur id vis, agam fabulas repudiare mei ne. Id his oratio denique epicurei.
</div>
</div>
<div class="tabcontent" id="2">
<div class="text" style="overflow: hidden">
<div style="height:450px;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(https://64.media.tumblr.com/c7a659c0cf78091a32d04caea49ad7a8/8f9eaef51182de30-3a/s2048x3072/2307c3df713c0bc5b9ea0ea482cf1437c163b266.jpg)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
				<div style="grid-area:two;background: url(https://64.media.tumblr.com/aef6e1dc943018b382f8f87d0e3c4393/0502113ab56e0f0a-8e/s2048x3072/e46301ce75beca3a0574e3fdd43147b3ec7d5689.jpg)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
				<div style="grid-area:three;background: url(https://64.media.tumblr.com/464ec826a91b8e3e3aee05ed72dba8db/99bec773962a97ff-67/s640x960/734c79e54096315e07972f26f239d53e982729d0.png)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
				<div style="grid-area:four;background: url(https://64.media.tumblr.com/7fc7d2610cf9c5f50b99a28289787da2/0b9f04ab498b4bd3-fe/s400x600/58b3073ab7a6985bd32a5c28171955480cc3520c.jpg)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
				<div style="grid-area:five;background: url(https://64.media.tumblr.com/920e647ce6f9265aefc38941d51f1eda/d3566eb93f4e9b62-30/s500x750/447c6c7f5263912016e4a50061753ffd52349128.jpg)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
				<div style="grid-area:six;background: url(https://64.media.tumblr.com/08baee32d2493c3d81fc666c863cdb01/9d64d0f7c9b79daf-c4/s1280x1920/0d348ff54245bfdd029c52b4183bbd6db4bc9deb.jpg)center;background-size:cover;border: 1px solid rgba(0,0,0,0.2);"></div>
</div>
</div>
</div>
<div class="tabcontent" id="3">
<div class="text">
<h2>relations</h2>
<div class="relation">
<img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><div><div class="name">NAME | RELATIONSHIP --</div>
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 class="relation">
<img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><div><div class="name">NAME | RELATIONSHIP --</div>
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 class="relation">
<img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><div><div class="name">NAME | RELATIONSHIP --</div>
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 class="relation">
<img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><div><div class="name">NAME | RELATIONSHIP --</div>
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 class="relation">
<img src="PICTURE" style="height:70px; width: 70px; object-fit: cover; float:left; margin-right: 10px"><div><div class="name">NAME | RELATIONSHIP --</div>
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>
<div class="tabcontent" id="4">
<div class="text">
<h2>information</h2>
<table style="font-size:14px;color: #000; margin-top: 10px;">
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">name.</td><td>name</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">age.</td><td>age</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">gender.</td><td>gender</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">sexuality.</td><td>sexuality</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">house.</td><td>house</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">year.</td><td>year</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">occupation.</td><td>occupation</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">martial status.</td><td>dating: gamer<br>used to date: not a gamer</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">height.</td><td>height</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">hair color.</td><td>hair color</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">eye color.</td><td>eye color</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">features.</td><td>a scar on butt<br> something something</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">build.</td><td>build</td></tr>
<tr><td style="color: #6B4E71; font-weight:bold;padding-right: 15px">family.</td><td>dad <br>mum <br>dead bro lol</td></tr>
</table>
</div>
</div>
<div class="tabcontent" id="5">
<div class="text">
<h2>stats</h2>
<div style="background:#eee;margin:7px 0;">
<div class="stats" style=";width:78%;">78% TRAIT</div></div>
<div style="background:#eee;margin:7px 0;">
<div class="stats" style=";width:42%;">42% TRAIT</div></div>
<div style="background:#eee;margin:7px 0;">
<div class="stats" style=";width:57%;">57% TRAIT</div></div>
<div style="background:#eee;margin:7px 0;">
<div class="stats" style=";width:90%;">90% TRAIT</div></div>
<div style="background:#eee;margin:7px 0;">
<div class="stats" style=";width:69%;">69% TRAIT</div></div>
<div style="background: #eee; margin: 10px 0px">
<div style="background: #53687E; height: 144px; width: 140px; float: left; margin-right:20px"><svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="150" height="150"
viewBox="0 0 185 185"
style=" fill:#000000; margin: auto"><g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,171.98863v-171.98863h171.98863v171.98863z" fill="none"></path><g id="original-icon" fill="#fff"><path d="M28.48608,21.375c-7.8375,0 -14.1665,6.4125 -14.1665,14.25l-0.06958,85.48608c0,7.87313 6.37688,14.26392 14.25,14.26392h14.23608h0.01392v28.5l28.48608,-28.5h71.25c7.8375,0 14.25,-6.4125 14.25,-14.25v-85.5c0,-7.8375 -6.4125,-14.25 -14.25,-14.25zM49.875,57h28.5v21.375v7.125l-14.25,21.375h-14.25l14.25,-21.375h-14.25zM92.625,57h28.5v21.375v7.125l-14.25,21.375h-14.25l14.25,-21.375h-14.25z"></path></g></g></svg></div>
<div style="padding:20px; color: #000; font-size: 12px">
"Lorem ipsum dolor sit amet, dico principes vis et. Est ea sapientem conceptam dissentiunt, an sed option nonumes dolores. Solum feugiat nonumes ne , saperet erroribus efficiendi in mel."
</div>
</div>
<div style="column-count: 3;text-align: center;">
<div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">STR:</div> 69
<p><div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">CON:</div> 3
<p><div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">DEX:</div> 121
<p><div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">INT:</div> -2
<p><div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">WIS:</div> 24
<p><div style="font-family: 'Mellow Yellow'; font-weight: bold; font-size: 30px">CHA:</div> -9
</div>
</div>
</div>
<div class="tabcontent" id="6">
<div class="text">
<h2>playlist</h2>
<div class="song">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div class="song">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div class="song">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div class="song">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
<div class="song">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
<i>"Lorem ipsum dolor sit amet, vim an illud principes, qui et feugiat utroque assentior. Utinam impetus adolescens te est, eos dolor veniam ea, vel illud movet facilisi ad."</i></div>
</div>
</div>
</div>
<div class="bar">
<img src="https://64.media.tumblr.com/628620dd8ba614a8b6d32e39d17efe71/00a58e38d79e4813-76/s1280x1920/d992a4a8e59dfd2dd6f1626070d9e9b24df86742.jpg" style="height: 200px; width: 200px; border: 1px solid rgba(0,0,0,0.2); border-radius: 50%; margin-bottom: 10px">
<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')">info</button>
<button class="tablinks" onclick="openCity(event, '5')">stats</button>
<button class="tablinks" onclick="openCity(event, '6')">playlist</button>
NAME / TIMEZONE / AGE / CONTACT /
<a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff; font-size: 10px;" target="_blank">CODED BY FINCH</a>
</div>
</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>