lord zorblok | backstory

<link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
<style>
@font-face {font-family: Bacalisties; src: url(https://dl.dropbox.com/s/5z6w7r9q6h9ahsq/Bacalisties.ttf?dl=0);}
::-webkit-scrollbar {width: 5px; background: none}
::-webkit-scrollbar-thumb {background: #2980b9}
@keyframes slideInRight{
0%{transform: translate(25%,0);opacity: 0}
100%{transform: translate(0,0);opacity: 1}
}
@keyframes slideInLeft{
0%{transform: translate(0,0);opacity: 1}
100%{transform: translate(25%,0);opacity:0}
}
.flip-card {
  background-color: transparent;
  width: 500px;
  height: 700px;
  perspective: 1900px;
  margin: auto;
	position: relative;
    z-index: 3;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: all 1.2s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(-180deg);
  margin-left: -150px;
  position: relative;
  z-index: 1
}

.flip-card:hover .moreshit{
	animation: slideInRight ease-out;
	animation-duration: 1s;
	animation-fill-mode: both;
    animation-delay: 1.0s;
    opacity: 1
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background: url(https://64.media.tumblr.com/905dbca0d7503a4ac6da0193cf5a9a75/tumblr_mm81oziH251qjhgnwo1_r1_500.png)center;
	background-size: cover;
    outline: 1px solid #fff;
    outline-offset: -10px;
    display: flex;
    justify-content: center;
    font-family: 'Bacalisties';
    color: #fff;
    font-size: 50px;
    text-align: center;
    text-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 10px #000
}

.flip-card-back {
  background: #2980b9;
  color: #fff;
  transform: rotateY(-180deg);
  font-family: 'Work Sans';
  font-size: 14px;
  box-shadow: 1px 1px 10px #000
}
.moreshit{
	width: 500px;
    height: 590px;
    outline: 1px solid #fff;
    outline-offset: -10px;
    background:#bbb;
    transition: all 1s;
    position: absolute;
    z-index: 5;
    margin-left: 300px;
    margin-top: -650px;
    animation: slideInLeft;
    animation-duration: 0.2s;
	animation-fill-mode: both;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 1px 1px 10px #000
}
.info1{
    padding: 20px;
    position: relative;
    height: 660px;
    width: 250px;
    text-align: center;
    mso-line-height-rule: exactly;
}
h2{
	border-bottom: 5px solid #fff;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    text-align: left;
    margin-top: 0px;
    font-family: 'Bacalisties';
    letter-spacing: 2.5px
}
b{
	color: #fff;
    text-shadow: 1px 1px 3px #fff
}
.tablinks{
	border: none;
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    cursor: pointer;
    text-transform: uppercase;
    background: #fff;
    transition: all 1s;
    box-shadow: 1px 1px 5px #bbb
}
.tablinks:hover, .active{
	background: #bbb;
    color: #fff;
    text-shadow: 1px 1px 3px #fff
}
.text{
	padding: 20px;
    overflow: auto;
    height: 530px;
    text-align: justify;
}
img{
	object-fit: cover;
    display:block;
    width: 100%;
    margin-bottom: 5px
}
</style>
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front"><div style="margin-top: 550px">Lord Zorblok
    </div></div>
    <div class="flip-card-back">
    <div class="info1">
    <img src="https://64.media.tumblr.com/tumblr_m6gqd6CChq1qmj2w1o8_250.gif" style="object-fit: cover; width: 250px; height: 250px; margin-bottom: 10px">
<h2>NAME.</h2>
<button class="tablinks" onclick="openCity(event, '1')" id="defaultOpen">default</button>
<button class="tablinks" onclick="openCity(event, '2')">page1</button>
<button class="tablinks" onclick="openCity(event, '3')">page2</button>
<button class="tablinks" onclick="openCity(event, '4')">page3</button>
<button class="tablinks" onclick="openCity(event, '5')">page4</button>
<button class="tablinks" onclick="openCity(event, '6')">page5</button>
<button class="tablinks" onclick="openCity(event, '7')">page6</button>
<div style="margin-top: -25px; margin-left: 310px; display: flex; justify-content: center; align-items: center; width: 150px">
<a href="https://finchscodes.tumblr.com" style="text-decoration: none;color: #fff; font-size: 10px;" target="_blank">CODED BY FINCH</a></div>
</div>
<div class="moreshit">
<div class="tabcontent" id="1">
<div class="text">
<h2>Actually, I'm... mangerine</h2>
<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.

<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>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.

<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">
<h2>Lord Zorblok, The time of prophecy is upon us!</h2>
<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.

<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="3">
<div class="text">
<h2>Operation: We Love Ed Begley Jr But We Have To Cut His Segment Short to Perform</h2>
<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.

<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="4">
<div class="text">
<h2>The new girl is mine.I am a hot vampire</h2>
<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.

<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="5">
<div class="text">
<h2>astronaut Buzz Aldrin is very interested</h2>
<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.

<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="6">
<div class="text">
<h2>STOP BEING ORANGE!!!</h2>
<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.

<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="7">
<div class="text">
<h2> 5 municipal bonds with a compound interest rate 3% acruity monthly</h2>
<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.

<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>
  </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>