it’s saturday night | profile text

<!---creds to audreyscodes for the font used in the title; go check her out!!-->
<!--- and creds to 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=Source+Serif+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-thumb {background: #646464!important}

@font-face{font-family:Tiffany;src:url(https://dl.dropbox.com/s/z5ae8b6dzysia09/TiffanyScript.otf);}

@keyframes fadeInUp {
  0% {transform: translate3d(0, 100%, 0);}
100% {transform: none;}
}

::-webkit-scrollbar {width: 5px; background: none; padding: 0px}
::-webkit-scrollbar-thumb {background: rgba(100,100,100,0.5);}

.body{
	margin: auto;
    border: 3px solid #000;
    background: #000;
    width: 800px;
    height: 600px;
    overflow: hidden;
	font-family: 'Source Serif Pro'
}
.menu{
	width: 202px;
    height: 600px;
    float: left;
    box-sizing: border-box;
	background: #646464;
    border-right: 2px solid #000;
}
.menuimg{
	height: 148px;
    width: 200px;
    background: url(https://i.pinimg.com/originals/bd/ea/34/bdea3423d003d4e77a1f12172c404761.gif)center;
    background-size: cover;
    border-bottom: 2px solid #000
}
.text{
	background:#bbb;
    padding: 20px;
    font-size: 14px;
    height: 430px;
    text-align: justify;
    animation: fadeInUp 1.2s ease-in-out;
    animation-fill-mode: both;
    overflow: auto;
}
.title{
    background: url(https://i.pinimg.com/564x/a4/22/ac/a422acc64e3538259e46e3091a398079.jpg)center;
    background-size:cover;
    padding: 10px;
    height: 150px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-bottom: 2px solid #000
}
.header{
	font-size: 20px;
    color: #b00b1e;
    font-family: 'Tiffany';
    text-align: center;
    font-weight: bold;
}
.header1{
	position: relative;
    z-index: 1;
    text-shadow: 1px 1px 2px #000
}
.header2{
	font-family: 'Source Serif Pro';
    font-size: 20px;
    color:#000;
    margin-top: -20px;
    position: relative;
    z-index:0;
    text-shadow: 1px 1px 3px #000
}
.tablinks:hover, .active {
    text-shadow:1px 1px 2px #000!important;
    font-size: 19px!important;
    box-shadow: inset 202px 202px 0px 0px #b00b1e!important;
    color: #fff!important;
}
.tablinks{
    border: none;
    font-size:18px;
    box-shadow: inset 0px 0px 0px 0.069px #b00b1e;
    transition: all 1.2s;
    font-family: 'tiffany';
    text-shadow:1px 1px 2px rgba(250,250,250,0.9);
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
	box-sizing: border-box;
    color: #242424;
    padding: 10px;
    width: 180px;
    position:relative;
    z-index:2;
    height: 72.5px;
    font-weight: bold;
    margin: 15px 10px;
    overflow:hidden
}
h2, b, i{
	color: #b00b1e;
   	text-shadow:1px 1px 2px #000;
}
h2{
	margin-top: 0px;
    margin-bottom: 5px;
    border-bottom: 4px solid rgba(100,100,100,0.5);
    padding-bottom: 5px;
    text-align: right;
    font-size: 25px
}
.huh{
	background: url(https://64.media.tumblr.com/8e9a4fc707aff2c526a5970ca3cfb2fc/tumblr_plk52dLgF61rb4ia6_1280.jpg)center!important;
    background-size: cover;
}
.cred{
	background:#000;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-family: 'Source Serif Pro';
    width: 807px;
    box-sizing: border-box;
    margin: auto
}
.relation{
	display: flex;
    align-items: center;
    padding: 10px;
    background: #aaa;
    margin-bottom: 10px;
}
.name{
	font-size: 15px;
    font-weight: bold;
    color:#b00b1e;
    text-shadow:1px 1px 2px #000;
}
img{
	object-fit: cover;
    border: 3px solid #646464;
    display:block;
    width: 100%;
    margin-bottom: 5px
}
.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="menu">
<div class="menuimg"></div>
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen" style="background: url(https://data.whicdn.com/images/347277045/original.jpg)center;background-size:cover;">about</button>
<button class="tablinks"onclick="openCity(event, '2')" style="background: url(http://pm1.narvii.com/6480/9eb73617d6e844ce11a4765f0d7336004ef90e6b_00.jpg)center;background-size:cover;">playlist</button>
<button class="tablinks" onclick="openCity(event, '3')" style="background: url(https://p.favim.com/orig/2018/09/15/red-grunge-red-aesthetic-rose-Favim.com-6310308.jpg)center;background-size:cover;">stats</button>
<button class="tablinks" onclick="openCity(event, '4')" style="background: url(https://64.media.tumblr.com/f024c89bef51e2839119fb80c60e742c/tumblr_pll1ndOhTK1ukk143_400.jpg)center;background-size:cover;">aesthetic</button>
<button class="tablinks" onclick="openCity(event, '5')" style="background: url(https://64.media.tumblr.com/217dfeed96d320318768fce3a82f090d/0851d32d44388e06-0d/s1280x1920/5bc6cc60723e534643cfb104e3dfc13084d6e23d.jpg)center;background-size:cover;">relations</button>
</div>
<div class="title">
<div class="header"><div class="header1">It’s Saturday Night</div>
<div class="header2">Do you think I’ll get invited tonight?</div></div>
</div>
<div class="huh">
<div class="tabcontent" id="1">
<div class="text">
<h2>about</h2>
<img src="https://64.media.tumblr.com/73e152b6db3a6b21428ebb1ef266f05d/bbbb7fa0eb0255c3-8a/s540x810/7945e69ebcc2c4313db093919c5a405b5527079f.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.

<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>playlist</h2>
<div style="background: #aaa; padding: 10px; margin-bottom: 10px">
<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 style="background: #aaa; padding: 10px; margin-bottom: 10px">
<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 style="background: #aaa; padding: 10px; margin-bottom: 10px">
<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 style="background: #aaa; padding: 10px; margin-bottom: 10px">
<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 style="background: #aaa; padding: 10px; margin-bottom: 10px">
<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 class="tabcontent" id="3">
<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: #b00b1e; 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="#000"><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">
"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. Usu adhuc fugit maiorum ex, sit ei putent facilisis. Duo et altera putant appetere, cu magna sonet temporibus duo."
</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 cool<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 class="tabcontent" id="4">
<div class="text">
<h2>aesthetic</h2>
<div style="column-count: 3;column-gap: 10px">
<img src="https://data.whicdn.com/images/327006765/original.jpg">
<img src="https://i.ytimg.com/vi/ELZv0807HNE/maxresdefault.jpg">
<img src="https://data.whicdn.com/images/348763607/original.jpg">
<img src="https://preview.redd.it/fi8d72dlack41.jpg?auto=webp&s=39e01217a393c0ffac2ad45a4120ae0c0ab2b40a">
<img src="https://i.pinimg.com/originals/a6/df/21/a6df216fb10fdff5a7533b280c62d293.jpg">
<img src="https://wallpaperaccess.com/full/2181318.jpg">
</div>
</div>
</div>
<div class="tabcontent" id="5">
<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>
</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>