buttery toast | profile text

<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat&family=Poppins&display=swap" rel="stylesheet">
<style>
::-webkit-scrollbar {width: 5px; background: #3B3A3A}
::-webkit-scrollbar-thumb {background: linear-gradient(0deg, #869d72 0%, #83174a 100%);}

.body{
   margin: auto;
    width: 800px;
    height: 500px;
     border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.2);
    background: #3B3A3A;
    position: relative;
    font-family: 'Montserrat';
    box-shadow: 1px 1px 16px #666;
    overflow: hidden
}
.bg{
clip-path: polygon(100% 0%, 0% 0% , 0.00% 86.88%, 2.00% 88.74%, 4.00% 89.96%, 6.00% 90.48%, 8.00% 90.30%, 10.00% 89.41%, 12.00% 87.86%, 14.00% 85.69%, 16.00% 82.98%, 18.00% 79.83%, 20.00% 76.35%, 22.00% 72.66%, 24.00% 68.90%, 26.00% 65.19%, 28.00% 61.67%, 30.00% 58.46%, 32.00% 55.68%, 34.00% 53.43%, 36.00% 51.78%, 38.00% 50.79%, 40.00% 50.50%, 42.00% 50.92%, 44.00% 52.04%, 46.00% 53.80%, 48.00% 56.16%, 50.00% 59.03%, 52.00% 62.30%, 54.00% 65.87%, 56.00% 69.59%, 58.00% 73.35%, 60.00% 77.01%, 62.00% 80.44%, 64.00% 83.52%, 66.00% 86.13%, 68.00% 88.19%, 70.00% 89.63%, 72.00% 90.38%, 74.00% 90.44%, 76.00% 89.78%, 78.00% 88.45%, 80.00% 86.47%, 82.00% 83.93%, 84.00% 80.92%, 86.00% 77.54%, 88.00% 73.90%, 90.00% 70.15%, 92.00% 66.41%, 94.00% 62.81%, 96.00% 59.49%, 98.00% 56.56%, 100.00% 54.12%);
    height: 300px;
	width: 550px;
    border-right: 1px solid rgba(0,0,0,0.2);
    position: absolute;
    background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    top: -20px
}

img {
    object-fit: cover;
    border-radius: 20px;
}
h2{
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 20px;
    margin: 0px;
    color: #fff;
    font-weight: normal;
        line-height: 100%

}
h3{
    font-family: 'DM Serif Display';
    font-size: 40px;
    margin: 0px 0px 5px;
    color: #fff;
    font-weight: normal;
    line-height: 100%
}
h4{
    margin: 5px 0px;
    background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    padding: 5px 20px;
    color: #fff;
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 13px;
    width: auto
}
.text{
    padding: 20px;
    margin: 20px 20px 5px;
    border: 1px solid rgba(0,0,0,0.2);
    font-family: 'Montserrat';
    font-size: 13px;
    background: #5E5E5E;
    color: #fff;
    text-align: justify;
    border-radius: 20px 0px 0px 20px;
    position: relative;;
    height: 410px;
    overflow: auto

}
.sidebar{
	border-left: 1px solid rgba(0,0,0,0.2);
    height: 500px;
    width: 250px;
    position: absolute;
    left: 550px;
    padding: 20px;
    box-sizing: border-box;
    color: #fff
}
.tabcontent{
	overflow: auto;
	position: relative;
  font-size: 15px;
  display: hidden;
	padding: 20px;
    line-height: 1.2em
}
.tablinks{
    margin: 5px 0px;
	background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    padding: 5px 20px;
    color: #fff;
    border: none;
    font-family: 'Poppins';
    text-transform: uppercase;
    font-size: 13px;
  padding-left: 25px;
	border-radius: 5px;
  padding-right: 25px;
    cursor: pointer;
    transition: 0.3s all;
    height: 30px;
    letter-spacing: 1px

}
.tablinks:hover{
  padding-right: 30px;
  padding-left: 30px;

}
/* make this uhhhhh lighter than normal colors */
b,i,a{
background: linear-gradient(90deg, #BDDBA4 0%, #F98BBE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.user{
	padding: 10px;
    background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
    margin-bottom: 10px;
    height: 75px;
    border-radius: 10px;
            display: flex;
        align-items: center;
}

.user img{
        object-fit: cover;
        height: 75px;
        width: 75px;
        margin-right: 10px;
        border: 1px solid rgba(0,0,0,0.2);
        border-radius: 10px;
}
.blurb{
	padding: 5px;
    border-radius: 5px;
    background: rgba(250,250,250,0.3);
    margin-top: 5px
}
.aesth{
	column-count: 2;
	column-gap: 10px;
}
.aesth > img{
    border: 1px solid #646464;
    display:block;
    width: 100%;
    margin-bottom: 5px;
    transition: 1s all
}
fieldset{
    margin-bottom: 10px;
    border:1px solid #fff;
    text-align:justify
}
.stats{
	background: linear-gradient(90deg, #869d72 0%, #83174a 100%);
	text-transform:uppercase;
    text-align: center;
    color: #fff;
    padding: 2px;
}
</style>
<div class="body">
<div style="width: 550px; height: 500px; float: left">
<div class="bg"></div>
<div class="text">
<div class="tabcontent" id="1">
<h2>about</h2>
<h3>overview</h3>
<img src="https://64.media.tumblr.com/8c92c0e61e26b8c4f3fa1951a1adfc91/e703b4acb49b83e2-ef/s400x600/e13d10de9a6001386f967172b42c6b3975d0d80c.gifv" style="width: 100%; height: 200px">
<p>Lorem ipsum dolor sit amet, at justo iuvaret qui, id augue erant sea. Ei eius propriae similique nam. Pri viderer debitis conclusionemque ne. Nam ad modo graeci, pri ei modus mollis. Regione quaestio ut has, habeo signiferumque sed ne.

<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.
<h3>personality</h3>
<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.
<h3>appearance</h3>
<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
<p>Cu eum invenire recteque consequat, vix quaeque fastidii et. Vel brute graeci et, nulla labore aeterno per cu. No pri malorum maiorum disputando, eum at quod harum tantas. Sed solum veniam putent et, vocibus quaestio complectitur vim ut. Movet ancillae nec an.

<p>Sit cu impetus noluisse delicatissimi, ne soluta splendide eum. Nam altera accusamus temporibus ad, mea et debet albucius, ad pri esse lucilius perfecto. Ne aliquid vocibus fabellas vel. Mea impedit epicurei cu, ius feugait deterruisset comprehensam ad. Pro erant affert assentior ex.

<p>Cu omnium integre molestiae vim, oratio liberavisse in qui. Has ad erat voluptatum, no ius antiopam tractatos. Meis dolor quaestio et per. Errem tibique accusamus has no, nulla senserit efficiantur id eam. Nam ignota integre at, his ut ancillae incorrupte definitionem. Ut eos civibus temporibus.

<p>Pri commune constituto cu. Ut nemore conceptam eum. Ne pro case ubique expetendis. Ad duo idque copiosae complectitur, pro bonorum blandit et, omnis maiorum expetenda mea ex. Qui et tamquam definiebas, exerci patrioque delicatissimi eos et.
</div>
<div class="tabcontent" id="2">
<h2>information</h2>
<div style="background:#3B3A3A;margin:7px 0;">
<div class="stats" style=";width:78%;">78% TRAIT</div></div>
<div style="background:#3B3A3A;margin:7px 0;">
<div class="stats" style=";width:42%;">42% TRAIT</div></div>
<div style="background:#3B3A3A;margin:7px 0;">
<div class="stats" style=";width:57%;">57% TRAIT</div></div>
<div style="background:#3B3A3A;margin:7px 0;">
<div class="stats" style=";width:90%;">90% TRAIT</div></div>
<div style="background:#3B3A3A;margin:7px 0;">
<div class="stats" style=";width:69%;">69% TRAIT</div></div>
<h3>topics</h3>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Vel eros donec ac odio tempor orci dapibus ultrices in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt."</i> -- <a href="LINK" target="_blank">[LINK]</a>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Vel eros donec ac odio tempor orci dapibus ultrices in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt."</i> -- <a href="LINK" target="_blank">[LINK]</a>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <i>Vel eros donec ac odio tempor orci dapibus ultrices in. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt."</i> -- <a href="LINK" target="_blank">[LINK]</a>
</div>
<div class="tabcontent" id="3">
<h2>playlist</h2>
<div style="display:flex; margin-bottom: 10px">
<div style="width: 40%; margin-right: 40px;text-align: center; display: flex; align-items: center; justify-content: center">
<div><img src="https://64.media.tumblr.com/2510ef074c4a0407bb12954d5b93ef3f/09eb7275fa6d4c3b-38/s400x600/fe82dec4da290b68c07482c776e67e5a7a326696.gifv" style="object-fit: cover; height: 180px; width: 180px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.2); margin-bottom: 10px">
<h2>title name</h2>
<h2 style="font-size: 15px;">artist</h2>
</div></div>
<div style="width: 60%; border-radius: 10px; background: rgba(250,250,250,0.3); border; padding: 20px; text-align: center">
<h2>- now playing -</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
<br><b>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</b>
<br>Vel eros donec ac odio tempor orci dapibus ultrices in
</div></div>
<fieldset><legend><a href="LINK" target="_blank">MMMM YUMMY YUMMY</a></legend>
Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
</fieldset>
<fieldset><legend><a href="LINK" target="_blank">MMMM YUMMY YUMMY</a></legend>
Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
</fieldset>
<fieldset><legend><a href="LINK" target="_blank">MMMM YUMMY YUMMY</a></legend>
Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
<br>Fruit Salad, Yummy Yummy
</fieldset>
</div>
<div class="tabcontent" id="4">
<h2>aesthetic</h2>
<div class="aesth">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            <img src="https://i.pinimg.com/564x/e7/66/67/e76667e5d3069bcbd5eb1dc2e46856d5.jpg">
            </div>
</div>
<div class="tabcontent" id="5">
<h2>relations</h2>
<h3>familial</h3>
<div class="user"><a href="PROFILELINK" target="_blank"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"></a><div><h2>da riddler</h2><div class="blurb">age | occupation | relationship</div></div></div>
<h3>romantic</h3>
<div class="user"><a href="PROFILELINK" target="_blank"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"></a><div><h2>da riddler</h2><div class="blurb">age | occupation | relationship</div></div></div>
<h3>camaraderie</h3>
<div class="user"><a href="PROFILELINK" target="_blank"><img src="https://64.media.tumblr.com/9cbc1ad74730ee3f09d84c1046bf1970/dcd21359f9f91803-8b/s540x810/907bdaf4c54bda6cbf2cdf4e762ad0d604f06f73.gifv"></a><div><h2>da riddler</h2><div class="blurb">age | occupation | relationship</div></div></div>
</div>
</div>
<center><a href="https://finchscodes.tumblr.com/" target="_blank" style="color: #fff; text-decoration:none; font-size:12px;font-family:'poppins'">CODED BY FINCH</a></center></div>
<div class="sidebar">
<h2>oh god they're color coordinated</h2>
<h3>buttery toast</h3>
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">about</button>
<button class="tablinks" onclick="openCity(event, '2')">information</button>
<button class="tablinks" onclick="openCity(event, '3')">playlist</button>
<button class="tablinks" onclick="openCity(event, '4')">aesthetic</button>
<button class="tablinks" onclick="openCity(event, '5')">relations</button>
<hr>OOC Name / Timezone / Contact Method / Age
</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>