Skip to content

Instantly share code, notes, and snippets.

@zakius
Created June 25, 2021 22:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zakius/d7bb6634adbc24cd2ad4045a1667f095 to your computer and use it in GitHub Desktop.
Save zakius/d7bb6634adbc24cd2ad4045a1667f095 to your computer and use it in GitHub Desktop.
<div class="tab-content" style="min-width:calc(100% - 18px);">
<div class="tab-pane fade in" id="ONE">
<div class="p-0" style="height:600px;">
<div class="row no-gutters pl-2 pt-0">
<div class="col-md-3">
<div class="card-block bg-faded h-100" style="background-image:url(&quot;https://file.toyhou.se/images/15823916_Q7nFAwEapRRYUdS.png&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
<div class="col-md-6 px-4">
<div class="row no-gutters" style="overflow:hidden;">
<div class="col-md-12 bg-faded px-2">
<h1 class="display-4 text-uppercase mx-2 mb-0 pull-left" style="color:#9f9f9f;letter-spacing:3px;">
Ismael the Reaper
</h1>
</div>
<div class="col-md-12 col-lg-12 bg-faded px-2">
<span class="text-uppercase text-muted mx-2 mt-0 mb-1 pull-left">
FOUNDER OF HOUSE VOIDBREAKER
</span>
</div>
<div class="col-md-12 bg-faded px-2 my-2" style="height:230px;min-width:calc(100% + 18px);overflow:auto;padding-right:calc(.5rem + 18px) !important;">
<p class="text-justify my-2 mx-3">
Master of dark magic, one of the strongest people in his times.
Got his immense power from enslaving and slaying a blood god. Meant to be feared. Strong, clever, brutal and ruthless. Perceived immortal.
</p>
<p class="text-justify my-2 mx-3">
Ismael got married to Fae Hellebore, and swore to his dear wife he'll do everything to be worthy of her. They lived happily until he did. They had six children together, and after Fae's death Ismael had 3 more wifes.
</p>
<p class="text-justify my-2 mx-3">
Responsible for a lot of deaths, including his wife Fae, most of their children, and entire house of Hellebore.
</p>
</div>
<div class="col-md-12 bg-faded px-2">
<h1 class="display-4 text-uppercase mb-0 mx-2 pull-right" style="color:#9f9f9f;letter-spacing:3px;">
Fae
</h1>
</div>
<div class="col-md-12 col-lg-12 bg-faded px-2">
<span class="text-uppercase text-muted mx-2 pull-right">
OF HOUSE HELLEBORE
</span>
</div>
<div class="col-md-12 bg-faded px-2 mt-2" style="height:230px;min-width:calc(100% + 18px);overflow:auto;padding-right:calc(.5rem + 18px) !important;">
<p class="text-justify my-2 mx-3">
Ismael's first wife. Fell in love with him before he got the reaper part of his name. He was her sweetheart and she was his. She was a real cutie, and a kind, sweet, wholehearted woman, always happy and trying to stay positive. Her family didn't aprove of her choice of a man, and disowned her.
</p>
<p class="text-justify my-2 mx-3">
She had six children, three boys and three girls, from which only one had children of their own and two others lived past twenty years of age.
</p>
<p class="text-justify my-2 mx-3">
She was killed by her husband, Ismael.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block bg-faded h-100" style="background-image:url(&quot;https://file.toyhou.se/images/15823896_CERMKD0SJiN2BJj.png&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade active show" id="TWO">
<div class="p-0" style="height:600px;overflow:auto;">
<div class="row no-gutters pl-2 pt-0">
<div class="col-md-12 pr-4">
<div class="row no-gutters"><div class="col-md-9 pb-2"><div class="card-block bg-faded h-100">
<ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing:1px;border-radius:0;">
<li class="nav-item col mr-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a href="#SERMAIEL" data-toggle="tab" class="d-flex px-3 py-2 show active" style="text-decoration:none;height:200px;background:url(&quot;https://file.toyhou.se/thumbnails/14212256_4Re.png&quot;) center;background-size:cover;">
</a>
</li>
<li class="nav-item col mx-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a href="#DUPA" data-toggle="tab" class="d-flex px-3 py-2 show" style="text-decoration:none;height:200px;background:url(&quot;https://file.toyhou.se/thumbnails/14212256_4Re.png&quot;) center;background-size:cover;">
</a>
</li>
<li class="nav-item col mx-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#TWO" style="border-radius:0;">
Reference
</a>
</li>
<li class="nav-item col mx-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link" data-toggle="tab" href="#FIVE" style="border-radius:0;">
Jeszcze niewiem co
</a>
</li>
<li class="nav-item col mx-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a href="#DUPA" data-toggle="tab" class="d-flex px-3 py-2" style="text-decoration:none;height:200px;background:url(&quot;https://file.toyhou.se/thumbnails/14212256_4Re.png&quot;) center;background-size:cover;">
</a>
</li>
<li class="nav-item col ml-1 mb-1 beton" style="overflow:hidden;min-width:0;">
<a href="#MARTWE" data-toggle="tab" class="d-flex px-3 py-2" style="text-decoration:none;height:200px;background:url(&quot;https://f2.toyhou.se/file/f2-toyhou-se/thumbnails/36454666_xHK.png&quot;) center;background-size:cover;">
</a>
</li>
</ul>
</div></div>
<div class="col-md-12">
<div class="tab-content">
<div class="tab-pane fade in active show" id="SERMAIEL">
<div class="row no-gutters col-md-9">
<div class="col-md-12 pb-2">
<div class="card-block bg-faded h-100">sermaielelelellel
</div></div>
<div class="col-md-12"><div class="card-block bg-faded h-100">
SERMAIELdsssdfsdf sdf sdf sdf sdf sdf sdf sdf sdf ssdfsdfsdfsdfdf sdf sdf sdf sdf
</div></div></div>
<div class="card-block bg-faded h-600 col-md-3" style="background-image:url(&quot;https://file.toyhou.se/images/15823896_CERMKD0SJiN2BJj.png&quot;);background-size:cover;background-position:top;height:600px;display: inline-block; position: absolute; right: 0; left: auto; top: -252px">
</div></div>
<div class="tab-pane fade" id="DUPA"> dupadupadupaudpadupaudpada
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="tab-content">
<div class="tab-pane fade in active show">
</div>
<div class="tab-pane fade">
<div class="card-block bg-faded h-600" style="background-image:url(&quot;https://file.toyhou.se/characters/4196880?1565201760&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="THREE">
<div class="p-0" style="height:600px;">
<div class="row no-gutters pl-2 pt-0">
<div class="col-md-1 px-0 py-0">
<div class="bg-faded p-2" style="min-height:600px;">
<ul class="nav nav-pills row no-gutters text-center text-uppercase" style="letter-spacing:1px;border-radius:0;">
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link active tooltipster" title="" data-toggle="tab" href="#ONE" style="border-radius:0;" data-original-title="First Generation">
I
</a>
</li>
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link tooltipster" title="" data-toggle="tab" href="#TWO" style="border-radius:0;" data-original-title="Second Generation">
II
</a>
</li>
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link tooltipster" title="" data-toggle="tab" href="#THREE" style="border-radius:0;" data-original-title="Third Generation">
III
</a>
</li>
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link tooltipster" title="" data-toggle="tab" href="#FOUR" style="border-radius:0;" data-original-title="Fourth Generation">
IV
</a>
</li>
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link tooltipster" title="" data-toggle="tab" href="#FIVE" style="border-radius:0;" data-original-title="Fifth Generation">
V
</a>
</li>
<li class="nav-item col-md-12 col-2 my-1 mx-0 beton" style="overflow:hidden;min-width:0;">
<a class="btn btn-default border-0 nav-link tooltipster" title="" data-toggle="tab" href="#SIX" style="border-radius:0;" data-original-title="Sixth Generation">
VI
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-11 px-0 py-0" style="max-height:610px;overflow:hidden;">
<div class="row no-gutters pl-2 pt-0">
<div class="card-block bg-faded h-100" style="background-image:url(&quot;https://file.toyhou.se/images/15823916_Q7nFAwEapRRYUdS.png&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="FOUR">
<div class="p-0" style="height:600px;overflow:auto;">
asdasdasdasd asdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="tab-pane fade" id="FIVE">
<div class="p-0" style="height:600px;overflow:auto;">
asdasdasdasd sdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="tab-pane fade" id="SIX">
<div class="p-0" style="height:600px;overflow:auto;">
asdasdasdasd sdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdasdasdasd aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
<div class="tab-pane fade" id="SEVEN">
<div class="p-0" style="height:600px;">
<div class="row no-gutters pl-2 pt-0">
<div class="col-md-3">
<div class="card-block bg-faded h-100" style="background-image:url(&quot;https://f2.toyhou.se/file/f2-toyhou-se/images/15804911_JzeGiK7umCm6zVM.png?1565201618&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
<div class="col-md-6 px-4">
<div class="row no-gutters" style="overflow:hidden;">
<div class="col-md-12 bg-faded px-2">
<h1 class="display-4 text-uppercase mx-2 mb-0 pull-left" style="color:#9f9f9f;letter-spacing:3px;">
Purifier
</h1>
</div>
<div class="col-md-12 col-lg-12 bg-faded px-2">
<span class="text-uppercase text-muted mx-2 mt-0 mb-1 pull-left">
PERIL'S FIRST BORN
</span>
</div>
<div class="col-md-12 bg-faded px-2 my-2" style="height:230px;min-width:calc(100% + 18px);overflow:auto;padding-right:calc(.5rem + 18px) !important;">
<p class="text-justify my-2 mx-3">
Master of dark magic, one of the strongest people in his times.
Got his immense power from enslaving and slaying a blood god. Meant to be feared. Strong, clever, brutal and ruthless. Perceived immortal.
</p>
<p class="text-justify my-2 mx-3">
Ismael got married to Fae Hellebore, and swore to his dear wife he'll do everything to be worthy of her. They lived happily until he did. They had six children together, and after Fae's death Ismael had 3 more wifes.
</p>
<p class="text-justify my-2 mx-3">
Responsible for a lot of deaths, including his wife Fae, most of their children, and entire house of Hellebore.
</p>
</div>
<div class="col-md-12 bg-faded px-2">
<h1 class="display-4 text-uppercase mb-0 mx-2 pull-right" style="color:#9f9f9f;letter-spacing:3px;">
Blessing
</h1>
</div>
<div class="col-md-12 col-lg-12 bg-faded px-2">
<span class="text-uppercase text-muted mx-2 pull-right">
SECONDBORN
</span>
</div>
<div class="col-md-12 bg-faded px-2 mt-2" style="height:230px;min-width:calc(100% + 18px);overflow:auto;padding-right:calc(.5rem + 18px) !important;">
<p class="text-justify my-2 mx-3">
Ismael's first wife. Fell in love with him before he got the reaper part of his name. He was her sweetheart and she was his. She was a real cutie, and a kind, sweet, wholehearted woman, always happy and trying to stay positive. Her family didn't aprove of her choice of a man, and disowned her.
</p>
<p class="text-justify my-2 mx-3">
She had six children, three boys and three girls, from which only one had children of their own and two others lived past twenty years of age.
</p>
<p class="text-justify my-2 mx-3">
She was killed by her husband, Ismael.
</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block bg-faded h-100" style="background-image:url(&quot;https://file.toyhou.se/images/14212256_4RevzXn6JboGvh9.png&quot;);background-size:cover;background-position:top;height:600px;">
</div>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment