heehoo peanut | backstory

<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" 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: right;
	transition: 1s all;
	background: url(https://i.chzbgr.com/full/5378847232/h2BF450CA/elmo-is-way-too-happy-for-this-occasion)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{
	margin-top: 0px;
	margin-bottom: -30px;
	padding: 20px;
	text-transform: uppercase;
    font-size: 30px;
	position: relative
}
h3{
	margin-top: 0px;
    font-size: 20px;
    margin-bottom: 10px
}
.text{
	overflow: auto;
	text-align: justify;
	padding: 20px;
	background: #fff;
  	height: 460px
}
.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;
    display: block;
    transition: all 1s;
    margin-bottom: 10px
}
.text{
	overflow: auto;
	text-align: justify;
	padding: 20px;
	background: #fff;
  	height: 450px
}
.back{
	padding-left: 20px;
    position: relative;
	margin-top:-5px;
}
button:hover, .active {
    background: #b00b1e;
    transition: all 1s;
	letter-spacing: 2px
}
b, i, h2, h3, legend{
	color: #b00b1e
}
.warning{
	background: #b00b1e;
	color: #fff;
    padding: 10px;
    margin-bottom: 10px
}
</style>
<div class="body">
<div class="sidebar"></div>
<h2>character name.</h2>
<div class="tabcontent" id="1">
<div class="text" style="overflow: hidden">
<img src="https://media2.giphy.com/media/l46CBGCit9pkBqSmk/giphy.gif" style="width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px">
<div style=" border-left: 3px solid #b00b1e; padding-left: 10px">
<button class="tablinks" onclick="openCity(event, '2')">elmo is a friend</button>
<button class="tablinks" onclick="openCity(event, '3')">but elmo is also kid</button>
<button class="tablinks" onclick="openCity(event, '4')">shit the cops are here</button>
<button class="tablinks" onclick="openCity(event, '5')">i never gave him candy</button>
<button class="tablinks" onclick="openCity(event, '6')">it</button>
<button class="tablinks" onclick="openCity(event, '7')">i'm in jail</button>
</div>
<div class="warning">warning: don't be a punk </div>
<img src="https://i0.wp.com/john.do/wp-content/uploads/2010/01/elmo-laugh.gif?w=520" style="padding: 10px; border: 3px solid #b00b1e; height: 50px; width: 50px; object-fit: cover; border-radius: 50%; float: left; margin-right: 10px">
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>
</div>
</div>
<div class="tabcontent" id="2">
<div class="text">
<h3>a title</h3>
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="3">
<div class="text">
<h3>a title</h3>
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="4">
<div class="text">
<h3>a title</h3>
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="5">
<div class="text">
<h3>a title</h3>
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="6">
<div class="text">
<h3>praise elmo, the fifth coming of </h3>
<img src="https://media.tenor.com/images/79d5dfd7153d2e1af4bc270ab60818d1/tenor.gif" style="width: 100%; height: 150px; object-fit: cover; margin-bottom: 10px">
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="7">
<div class="text">
<h3>a title</h3>
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="back">
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen" style="height: 12px">&larrhk; back to home</button>
</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>