<!--
Divination - toyhouse code by 3LeggedPoet
Created for Coders Quarters October 2023
This code uses one custom colour. By default this is:
text and embellishments: #745f8d
More info on tarot Major Arcana can be found here:
www.biddytarot.com/tarot-card-meanings/major-arcana/
Feel free to swap out the cards used for more
relevent symbolism to your own characters :)
-->
<div class="container">
<div class="row w-100 mt-5">
<!-- card one: the magician -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(-5deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- card number -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">I</span>
</p>
<!-- card cover: splash image 1 -->
<div class="mx-3" style="background-image:url(https://images.unsplash.com/photo-1607851673372-d3a481942bf6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3870&q=80);height:490px;background-size:cover;background-position:center;position:relative;top:-10px;display:flex;">
<!-- image internal border -->
<div style="border:solid 3px white;width:96%;height:98%;position:relative;margin:auto"></div>
</div>
<!-- card name -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">The Magician</span>
</p>
</div>
<!-- card two: introduction -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(-1deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;position:relative;top:-0px;left:-10px;z-index:5">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- character name -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">Character Name</span>
</p>
<!-- card content - this box will scroll! -->
<div class="mx-3" style=";height:490px;background-size:cover;background-position:center;position:relative;top:-10px;color:#745f8d;overflow:auto;scrollbar-width:none;">
<!-- profile image -->
<img class="px-5 my-2" src="URL HERE" style="width:100%">
<!-- add as many <p> tags as you like! -->
<p class="mt-1">
Tell us about your character here!<br>
This box will scroll when your text becomes long enough.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie magna in sem bibendum pellentesque. Ut ornare sed massa eu venenatis. Donec placerat sapien quam, et lobortis sem tempus condimentum. Integer consectetur gravida enim egestas convallis. Duis rhoncus ipsum ante, sit amet molestie lorem suscipit id.
</p>
<p>
Morbi volutpat, tellus a viverra auctor, massa lectus placerat tellus, nec molestie tortor massa eu risus. Mauris a auctor tellus. Praesent laoreet neque nibh, vitae pulvinar orci ullamcorper vel. Cras rhoncus nunc at ligula auctor elementum. Vestibulum eget neque metus. Praesent rutrum vitae nisl sit amet sollicitudin. Sed eu erat id lectus interdum vulputate.
</p>
<!-- quote - this will stick to the bottom of the card when scrolling -->
<div class="bg-light" style="position:sticky;bottom:0">
<hr style="border:1px solid #745f8d;">
<p class="text-center small">
<em>“This is a quote that sums up your character.”</em><br>
-Someone Interesting </p>
</div>
</div>
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">
<!-- card icon -->
<i class="fa-regular fa-flask-round-poison"></i>
</span>
</p>
</div>
<!-- card three: the star -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(2deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;position:relative;top:-6px;left:-10px">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- card number -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">XVII</span>
</p>
<!-- card cover: splash image 2 -->
<div class="mx-3" style="background-image:url(https://images.unsplash.com/photo-1590725142982-75df9e332f75?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80);height:490px;background-size:cover;background-position:center;position:relative;top:-10px;display:flex;">
<!-- image internal border -->
<div style="border:solid 3px white;width:96%;height:98%;position:relative;margin:auto;"></div>
</div>
<!-- card name -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">The Star</span>
</p>
</div>
</div>
<div class="row w-100 mb-5">
<!-- card four: backstory -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(-1deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;position:relative;top:-6px">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- card title -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">Backstory</span>
</p>
<!-- card content - this box will scroll! -->
<div class="mx-3" style=";height:490px;background-size:cover;background-position:center;position:relative;top:-10px;color:#745f8d;overflow:auto;scrollbar-width:none;">
<!-- add as many <p> tags as you like for new paragraphs! -->
<p class="mt-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam molestie magna in sem bibendum pellentesque. Ut ornare sed massa eu venenatis. Donec placerat sapien quam, et lobortis sem tempus condimentum. Integer consectetur gravida enim egestas convallis. Duis rhoncus ipsum ante, sit amet molestie lorem suscipit id. Morbi volutpat, tellus a viverra auctor, massa lectus placerat tellus, nec molestie tortor massa eu risus. Mauris a auctor tellus. <br>
Praesent laoreet neque nibh, vitae pulvinar orci ullamcorper vel. Cras rhoncus nunc at ligula auctor elementum. Vestibulum eget neque metus. Praesent rutrum vitae nisl sit amet sollicitudin. Sed eu erat id lectus interdum vulputate.
</p>
<p>
Maecenas vitae elit dui. Suspendisse venenatis velit in consectetur lobortis. Etiam quam nulla, rutrum et eleifend in, facilisis non nibh. Donec laoreet justo sit amet bibendum volutpat. Fusce rutrum massa ut lectus tincidunt porta. Suspendisse sit amet lacinia lorem. Morbi eu pharetra odio, ac laoreet nulla. Vestibulum eget ultrices lacus, ac pellentesque est.
</p>
<!-- horizontal line -->
<hr style="border:1px solid #745f8d;">
<p>
Aliquam blandit turpis id tortor vulputate, imperdiet rhoncus libero dapibus. Fusce vestibulum purus magna, a consequat sapien varius id. Morbi vitae felis commodo, tempus nunc nec, ornare ante. Quisque id orci lorem. Morbi sodales hendrerit lacinia. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros ex, consequat quis nunc ac, lacinia porta velit. Ut sed sapien vel massa rhoncus scelerisque. Vestibulum pharetra turpis diam, iaculis bibendum leo tempus ac.
</p>
</div>
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">
<!-- card icon -->
<i class="fa-regular fa-sparkles"></i>
</span>
</p>
</div>
<!-- card five: wheel of fortune -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(2deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;position:relative;top:-8px;left:-0px;z-index:4">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- card number -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">X</span>
</p>
<!-- card cover: splash image 3 -->
<div class="mx-3" style="background-image:url(https://images.unsplash.com/photo-1607773709367-06b7a91f7e4a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3798&q=80);height:490px;background-size:cover;background-position:center;position:relative;top:-10px;display:flex;">
<!-- image internal border -->
<div style="border:solid 3px white;width:96%;height:98%;position:relative;margin:auto"></div>
</div>
<!-- card name -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">Wheel of Fortune</span>
</p>
</div>
<!-- card six: about/general info -->
<div class="col-lg-4 col-md-6 col-sm-8 rounded p-3 bg-light" style="transform: rotate(-1deg);background:#2f2e34;box-shadow: -1px 3px 10px -2px #000000;position:relative;top:-10px;left:-0px">
<!-- card internal border -->
<div class="rounded" style="border:2px solid #745f8d;height:90%;position:absolute;width:90%;top:30px">
</div>
<!-- card title -->
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">About</span>
</p>
<!-- card content - this box will scroll! -->
<div class="mx-3" style=";height:490px;background-size:cover;background-position:center;position:relative;top:-10px;color:#745f8d;overflow:auto;scrollbar-width:none;">
<div class="mt-1">
<!-- info table - if adding new items to this, a <tr> is a row, and a <td> is a box on that row -->
<table style="border:0px">
<tbody>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt;">Occupation:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Background:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Species:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Age:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Gender:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Sexuality:</td>
<td style="padding: 0px">[]</td>
</tr>
<tr>
<td style="font-family:times new roman, serif;font-weight:bold;font-size:12pt">Height:</td>
<td style="padding: 0px">[]</td>
</tr>
</tbody>
</table>
</div>
<!-- horizontal line -->
<hr style="border:1px solid #745f8d;">
<!-- permissions -->
<p><i class="far fa-square-check"></i> You may draw this character!</p>
<p><i class="far fa-square-check"></i> You can draw this character interacting with your own or others.</p>
<p><i class="far fa-square-xmark"></i> This character is not for trade or resale!</p>
</div>
<p class="text-center" style="position:relative;z-index:2;font-family:times new roman, serif;font-size:16pt;color:#745f8d;font-weight:bold">
<span class="bg-light px-2">
<!-- card icon -->
<i class="fa-regular fa-wand-sparkles"></i>
</span>
</p>
</div>
</div>
</div>
<div class="row" style="margin-top:-40px;z-index:200;position:relative">
<!-- please don't remove my credit! -->
<a href="https://toyhou.se/3leggedpoet/characters/folder:4871742" title="code by three" style="margin:auto;color:#ffffff;font-weight:lighter;opacity:0.2">
<i class="fa-solid fa-code fa-sm"></i>
</a>
</div>