<!--- Another code! Probably my most complex yet, although it's not.. Too detailed? Never write too much, so that's mostly why it is the way it is, haha. Hope you enjoy it, regardless! This is the dark mode copy of the code, and will work better with dark images, although you can definitely try using a lighter one!--->
<!-- feel free to replace #DEC18E with any hex colour you'd like throughout the entire code! It's the default gold you can see on the code's page. --->
<div class="container-fluid card border-0 pt-auto;">
<div class="row justify-content-center">
<!--- CARD I: Basics, including the first pagedoll alongside a character's general info --->
<div class="col-md-12">
<center><div class="card" style="max-width:1000px; background-image: url(BACKGROUND'S URL HERE); background-size: cover; background-position: justify; border-radius: 1em;">
<!--- Background image for card I goes here.-->
<div style="background-image: linear-gradient(to top, rgba(0,22,36,1) 46%, rgba(9,9,121,0) 92%); background-attatchment: fixed; border-radius: 1em;">
<div class="p-3">
<div class="row">
<div class="col-md-8">
<div style="background: #DEC18E; border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><div class="mt-2"></div>
<span style="letter-spacing:3.5mm; font-size:25px; font-weight:lighter; color: #000; font-family:georgia;"><em>TITLE TEXT HERE</em></span><br></div><div class="mt-4">
<!--- Feel free to swap out any of these icons below with new ones and/or add more to your liking! --->
<center>
<span style="letter-spacing:2mm;">
<a href="#">
<i class="fas fa-images tooltipster fa-lg" title="Gallery" style="color: white;">
</i></a>
<a href="#">
<i class="fas fa-link tooltipster fa-lg" title="Links" style="color: white;">
</i></a>
<a href="#">
<i class="fas fa-list-alt tooltipster fa-lg" title="Masterlist" style="color: white;">
</i></a></span>
</center>
<br>
<span style="letter-spacing:1mm; color:#DEC18E; font-size:25px; font-weight:light; font-family:georgia;">Filler text here</span><div class="mt-3">
<!--- Feel free to change any of the identifiers (name, pronouns, etc) below to your own liking! I don't think it'd be possible to add any more rows without it looking wonky, though. By [Content], you don't have to keep the [brackets that contain the word 'content]! Please feel free to delete them when writing your info. --->
<div class="row" style="font-family:georgia; color: white;">
<div class="col-sm"><strong>NAME</strong><span class="pull-right"><em>[CONTENT]</em></span></div>
<div class="col-sm"><strong>PRONOUNS</strong><span class="pull-right"><em>[CONTENT]</em></span></div>
<div class="col-sm"><strong>SPECIES</strong><span class="pull-right"><em>[CONTENT]</em></span></div>
</div>
<div class="row" style="font-family:georgia; color: white;">
<div class="col-sm"><strong>ALIASES</strong><span class="pull-right"><em>[CONTENT]</em></span></div>
<div class="col-sm"><strong>AGE</strong><span class="pull-right"><em>[CONTENT]</em></span></div>
<div class="col-sm"><strong>RESIDENCE</strong><span class="pull-right"><em>[CONTENT]</em></span></div><div class="mt-2"></div>
<!--- Character blurb goes here. --->
<br></div></div><br></span><span style="color: white;">On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
</span></div></div>
<!--- Pagedoll goes here. --->
<br><br><div class="col-md-4" style="z-index:2;">
<div style="margin-left: -200px; margin-right: -25px;">
<img src="https://via.placeholder.com/300" class="float-right" style="max-height:350px;">
</div>
<span style="letter-spacing:2mm; color:#DEC18E; font-size:20px; font-weight:light; font-family:georgia;"><i>filler text here</i></span><br>
<!--- PAGEDOLL credit goes here. PLEASE DO NOT REMOVE THIS, and please give credit to the artist! --->
<span class="pull-right"><a href="PAGEDOLL CREDIT URL HERE"><i class="fas fa-image tooltipster fa-sm" title="Pagedoll by NAME" style="color: white;"></a>
<span style="color: #DEC18E;">/</span>
<!--- BACKGROUND credit goes here. PLEASE DO NOT REMOVE THIS, and please give credit to the photographer/artist! --->
<a href="BACKGROUND CREDIT URL HERE"><i class="fas fa-camera tooltipster fa-sm" title="Background by NAME" style="color: white;"></a></i></div>
</div></div></div></div></div></div><div class="p-2"></div>
<!--- CARD II: Story & Notes dedicated --->
<div class="row">
<div class="col-md-12">
<center><div class="card" style="max-width:1000px; min-height:400px; background-image: url(BACKGROUND FOR CARD II URL IMAGE HERE); background-size: cover; background-position: justify; border-radius: 1em;">
<div style="background-image: linear-gradient(to top, rgba(0,22,36,1) 46%, rgba(9,9,121,0) 92%); background-attatchment: fixed; border-radius: 1em; min-height:400px;"><div class="p-3">
<!--- Background image url for card II goes here. --->
<div class="row">
<div class="col-md-2">
<span style="letter-spacing:3.5mm; font-size:20px; font-weight:lighter; font-family:georgia; color: white;"><em>FILLER TEXT</em></span><div class="mt-3">
<span style="letter-spacing:2mm; color:#DEC18E; font-size:20px; font-weight:light; font-family:georgia;"><i>filler text</i></span><br>
<!--- BACKGROUND credit goes here. PLEASE DO NOT REMOVE THIS unless you're removing THE ENTIRE CARD- and please give credit to the photographer/artist! --->
<span class="pull-left"><a href="BACKGROUND CREDIT URL HERE"><i class="fas fa-camera tooltipster fa-sm" title="Background by NAME" style="color: white;"></a></i></span>
</div></div>
<div class="col-md-6">
<div style="background: #DEC18E; border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><div class="mt-2"></div>
<span style="letter-spacing:3.5mm; font-size:25px; font-weight:lighter; font-family:georgia; color: #000;"><em>STORY</em></span></div><br>
<span style="font-size:15px; color: white;">You can write as much as you want! The container will stretch. On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</span>
</div>
<div class="col-md-4">
<div style="background: #DEC18E; border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><div class="mt-2"></div>
<span style="letter-spacing:3.5mm; font-size:25px; font-weight:lighter; font-family:georgia; color: #000;"><em>NOTES</em></span></div><br>
<!--- You can remove or add as many note bullets as you need. Just be sure to copy from <br> to note'. --->
<span style="font-size:15px; letter-spacing:1px; color: white; font-family:georgia;">
<i class="fas fa-chevron-right fa-sm" style="color: white;"></i> A note here!
<br><br>
<i class="fas fa-chevron-right fa-sm" style="color: white;"></i> Another note here!
<br><br>
<i class="fas fa-chevron-right fa-sm" style="color: white;"></i> Even more notes!
<br><br>
<i class="fas fa-chevron-right fa-sm" style="color: white;"></i> Yup, another note!
</span>
</div></div></div></div></div><div class="p-2"></div>
<!--- End of Card II. --->
<!--- CARD III: Relationships & 2nd pagedoll --->
<div class="row">
<div class="col-md-12">
<center><div class="card" style="max-width:1000px; background-image: url(BACKGROUND FOR CARD II URL IMAGE HERE); background-size: cover; background-position: justify; border-radius: 1em;">
<div style="background-image: linear-gradient(to top, rgba(0,22,36,1) 46%, rgba(9,9,121,0) 92%); background-attatchment: fixed; border-radius: 1em;"><div class="p-3">
<!--- Background image url for card III goes here. --->
<div class="row">
<div class="col-md-7">
<div style="background: #DEC18E; border-top-right-radius:10px; border-top-left-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;"><div class="mt-2"></div>
<span style="letter-spacing:2mm; font-size:25px; font-weight:lighter; font-family:georgia; color: #000;"><em>RELATIONSHIPS</em></span></div><br>
<!--- Feel free to add or remove relationships- to add some more, select starting from here... --->
<div class="row">
<div class="col-sm">
<div class="card border-0 rounded-10" style="background: url(RELATIONSHIP ICON 1);background-size: cover; background-position: center; height:105px;width:105px"></div>
<!--- image URL for the other character in the relationship goes here. --->
<span class="pull-right">
<span style="font-size:20px; letter-spacing:3px; font-family:georgia;"><a href="#" style="color: #DEC18E;">NAME</a></span><br>
<!--- Hearts can be added and/or removed; just paste/erase <i class="fas fa-heart fa-xs" style="color: white;"></i> to add/remove a heart. --->
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<br><i class="fas fa-chevron-right fa-sm" style="color: white;"></i><span style="color: white;"> You can write quite a bit here! The box will stretch.</span>
</div>
<div class="col-sm">
<div class="card border-0 rounded-10" style="background: url(RELATIONSHIP ICON 2);background-size: cover; background-position: center; height:105px;width:105px"></div>
<span class="pull-right">
<span style="font-size:20px; letter-spacing:3px; font-family:georgia;"><a href="#" style="color: #DEC18E;">NAME</a></span><br>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<br><i class="fas fa-chevron-right fa-sm" style="color: white;"></i><span style="color: white;"> You can write quite a bit here! The box will stretch.</span></div></div><br>
<!--- ...and finish selecting here. Copy everything that's selected and paste at the end of where you copied. Vice versa for erasing. --->
<div class="row">
<div class="col-sm">
<div class="card border-0 rounded-10" style="background: url(RELATIONSHIP ICON 3);background-size: cover; background-position: center; height:105px;width:105px"></div>
<span class="pull-right">
<span style="font-size:20px; letter-spacing:3px; font-family:georgia;"><a href="#" style="color: #DEC18E;">NAME</a></span><br>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<br><i class="fas fa-chevron-right fa-sm" style="color: white;"></i><span style="color: white;"> You can write quite a bit here! The box will stretch.</span></div>
<div class="col-sm">
<div class="card border-0 rounded-10" style="background: url(RELATIONSHIP ICON 4);background-size: cover; background-position: center; height:105px;width:105px"></div>
<span class="pull-right">
<span style="font-size:20px; letter-spacing:3px; font-family:georgia;"><a href="#" style="color: #DEC18E;">NAME</a></span><br>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<i class="fas fa-heart fa-xs" style="color: white;"></i>
<br><i class="fas fa-chevron-right fa-sm" style="color: white;"></i><span style="color: white;"> You can write quite a bit here! The box will stretch.</span></div>
</div></div>
<div class="col-md-5">
<span style="letter-spacing:3.5mm; font-size:20px; font-weight:lighter; font-family:georgia; color: white;"><em>FILLER TEXT</em></span><div class="mt-1"></div>
<!--- SECOND pagedoll's image url goes here.--->
<img src="https://via.placeholder.com/300" style="max-height:280px;"><div class="mt-1"></div>
<span style="letter-spacing:2mm; color:#DEC18E; font-size:20px; font-weight:light; font-family:georgia;"><i>filler text</i></span><br>
<!--- PAGEDOLL credit goes here. PLEASE DO NOT REMOVE THIS unless you're removing THE ENTIRE CARD- and please give credit to the artist! --->
<span class="pull-right"><a href="PAGEDOLL CREDIT URL HERE"><i class="fas fa-image tooltipster fa-sm" title="Pagedoll by NAME" style="color: white;"></i></a>
<span style="color: #DEC18E;">/</span>
<!--- BACKGROUND credit goes here. PLEASE DO NOT REMOVE THIS unless you're removing THE ENTIRE CARD- and please give credit to the photographer/artist! --->
<a href="BACKGROUND CREDIT URL HERE"><i class="fas fa-camera tooltipster fa-sm" title="Background by NAME" style="color: white;"></a></i></div></div></span>
</div></div></div></div></div></div></div></div>
<!--- End of Card III. --->
<!--- Credit line for the overall code, DO NOT REMOVE --->
<span class="pull-right"><a href="https://toyhou.se/Coturnix"><i class="fas fa-moon-stars tooltipster fa-lg" style="color: #ffd633;" title="Code cooked up by Quail"></i></a></span>