i am not feeling good | profile text

<!--- tessismess for the inspired relations and aesthetic pages (the shit centers now, but i'll always wonder about the magic div needed) -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #eee}
::-webkit-scrollbar-thumb {background: #1e68a9}
.body{
	width: 500px;
    margin: auto;
    height: 700px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
    font-family: 'Montserrat';
    overflow: hidden;
}
.header{
	background: url(https://64.media.tumblr.com/7c63e5797be5773f3f47a3a5348f329f/e3bac12ee4364129-17/s400x600/bc2638cd166e1dc68d522a1d9c527ebb43f2d951.gifv)center;
    background-size: cover;
    height: 220px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 10px 20px;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    text-shadow: 2px 1px 2px #1e68a9
}
.title{
	height: 30px;
    background: #000;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5
}
.text{
	text-align: justify;
    padding: 20px;
    overflow: auto;
    font-size: 14px;
    height: 390px;
}
button:hover, .active {
    color: #1e68a9;
}
button{
	border:none;
    transition: all 1s;
    color: #fff;
    cursor: pointer;
	background: none;
    font-family: 'Montserrat'
}
img{
	object-fit: cover;
    display:block;
    width: 100%;
    margin-bottom: 5px
}
h2{
	text-align: right;
    margin-bottom: 0px;
    font-style: italic;
    text-transform: uppercase;
    border-bottom: 3px solid #1e68a9
}
.section{
	background: #eee;
    padding: 10px;
    margin: 10px 0px;
    font-size: 12px
}
.section > h2{
    margin: 0px 0px 10px
}
.name{
	font-size: 15px;
    font-weight: bold;
    color:#1e68a9;
}
.relation{
	background: #eee;
    padding: 10px;
    margin: 10px 0px;
    font-size: 12px;
    display: flex;
    align-items: center
}
.cred{
	background:#000;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-family: 'Montserrat';
    width: 502px;
    box-sizing: border-box;
    margin: auto
}
.stats{
	background:#646464;
	text-transform:uppercase;
    text-align: center;
    color: #fff;
    padding: 2px;
}
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="header">
i am not feeling good
</div>
<div class="title">
<img src="https://64.media.tumblr.com/00af970d51606f4f7c87eb9e8cfa75f6/54f33546f431ec5f-38/s540x810/49312ea5b56dfa4b1faf7348fe1bd627d941e153.gifv" style="border-radius: 50%; height: 120px; width: 120px; border: 10px solid #000; margin-top: -60px; margin-right: 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')">playlist</button>
<button class="tablinks" onclick="openCity(event, '4')">relations</button>
<button class="tablinks" onclick="openCity(event, '5')">stats</button>
</div>
<div class="tabcontent" id="1">
<div class="text">
<h2>about</h2>
<img src="https://64.media.tumblr.com/5f6b05b54a8d150de764bf10644cf9a1/54f33546f431ec5f-89/s540x810/48dde383ffb267c491169ebea4c19e108823cab1.gifv" style="width: 150px; height: 150px; float: left; margin: 10px 10px 10px 0px"><p>Lorem ipsum dolor sit amet, soluta regione ei sit, has integre dolores eu. Prima aeterno temporibus quo et, per modo velit eu. His no aeque maiorum deserunt, primis iudicabit ne vel. Dicant integre ea mei. Agam nonumy deserunt per et, viris saepe et vis, his unum elit adolescens ei.

<p><b>Cu blandit omnesque dissentias quo, eam ea appareat intellegat, has audire signiferumque ei. Modus nihil posidonium pri ex, at affert labore epicuri vel. </b>In ius augue utamur adipiscing, nam nonumy meliore ea. Duis inani convenire ad nam, vim at erant tractatos, unum inermis accusam id his. Ad aliquam sadipscing usu, nisl tantas democritum an mei, ad quo modus porro liber.

<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>
<h2>personality</h2>
<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.
<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
<h2>appearance</h2>
<p>Paulo nonumy sea ad, usu apeirian facilisis posidonium an, cu eum virtute menandri. Pri magna dicant corrumpit ad. Ea vel dolorem convenire evertitur, et tollit ocurreret accommodare usu. Quas homero recteque duo ex, et omnium aperiam qualisque sit.<i> Aperiri percipit praesent id vis, dolor mandamus pericula quo in, ne vim stet ferri. Mel nulla laboramus et, nostro patrioque consequat mea ut.</i>

<p>Vel eros erant oblique ad. Usu habemus indoctum et. His ad iuvaret postulant. Mundi tation omnesque sit cu, aperiam percipitur et vim.

<p>Ne usu mollis viderer ponderum. Ex vim dictas consetetur, viderer accusam his an, no duo audire nonumes. labores laoreet at, nobis euismod instructior eu. Est ea essent iriure, iisque repudiandae est ei, accusam consequat definitiones his ad.
</div>
</div>
<div class="tabcontent" id="2">
<div class="text">
<h2>aesthetic</h2>
<div style="column-count: 2;column-gap: 10px; margin-top: 10px">
<img src="https://64.media.tumblr.com/f34034e7aea13846bcc7b46508cbef23/b9cf1f9d8439674e-80/s640x960/a287f8996affab60197ba52b0f082914bdefd723.png">
<img src="https://64.media.tumblr.com/87d7f4d32a2e497eb8719212598e2074/9e13fc9daff15ad9-e2/s640x960/24c4844cb5d5d2dcaedbbe510b26b96063726d8b.gifv">
<img src="https://64.media.tumblr.com/2eae420199e3b57fec3c354db7a9352e/9c31b3ba8dfe7e10-40/s540x810/c998083529a13a4a9dff574c2ffab2e7fb77f18d.gifv">
<img src="https://64.media.tumblr.com/9abf199ddd12a4cae9dfa90cd0698657/65c588b836f54603-4b/s1280x1920/dd73c49c60e70f4645315e140a8e000124589f0f.jpg">
<img src="https://64.media.tumblr.com/a8e5220f6b1e2a96f50bf4aa66bdbf77/5164c2f76473e5e3-ca/s640x960/d9df8f258f0b32a659b7d98b867109559f32a259.jpg">
<img src="https://64.media.tumblr.com/6d3344ade6b2293e8cc8c1f7639c682a/54f33546f431ec5f-ef/s540x810/20bcc30078cd9a414c5119ef43cdbe17c1e35d96.gifv">
</div>
</div>
</div>
<div class="tabcontent" id="3">
<div class="text">
<h2>playlist</h2>
<div class="section">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
"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."</div>
<div class="section">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
"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."</div>
<div class="section">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
"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."</div>
<div class="section">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
"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."</div>
<div class="section">
<h2>♫<a href="LINK" style="text-decoration: none;color: #36353d;" target="_blank"> SONG</a></h2>
"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."</div>
</div>
</div>
<div class="tabcontent" id="4">
<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="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>
<h2>likes/dislikes</h2>
<div style="display: flex; justify-content:center;margin-top: -10px">
<!--keep these shit short-->
<ul>
<li><span class="material-icons">favorite</span>wow something<li>
<li><span class="material-icons">favorite</span>monke<li>
<li><span class="material-icons">favorite</span>bananas and shit<li>
<li><span class="material-icons">favorite</span>monke<li>
</ul>
<ul>
<li><span class="material-icons">close</span>off mark<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>
</div>
<div class="cred">OOC Name / Timezone / Contact Method / Age / <a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff;" 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>