<!--------------------
BACKGROUND
--
replace ' IMAGE HERE ' with an image address
keep all image urls in brackets
--------------------->
<div style="
background: url(IMAGE HERE);
background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; width:100%; height: 100%; z-index:-10; position: absolute; top:0; bottom:0; left:0; right:0; "></div>
<div class="">
<div class="row no-gutters">
<div class="col-lg-3 mb-3 mr-lg-3">
<!--------------------
IMAGE
--------------------->
<div class="card rounded-0" style="height: 200px;
background: url(IMAGE HERE) center;
background-size: cover;"></div>
<!--------------------
INFO
--------------------->
<div class="card mt-3 rounded-0 p-2 px-3" style="height: 316px;">
<p>
<span>name</span>
<span class="pull-right text-muted">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span>age</span>
<span class="pull-right text-muted">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span>gender</span>
<span class="pull-right text-muted">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span>pronouns</span>
<span class="pull-right text-muted">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span>orientation</span>
<span class="pull-right text-muted">content</span>
</p>
<div><hr class="mt-0"></div>
<p>
<span>alignment</span>
<span class="pull-right text-muted">content</span>
</p>
</div>
</div>
<!--------------------
MAIN BODY
--------------------->
<div class="col-lg mb-3">
<div class="card rounded-0 p-3">
<!--------------------
QUOTE
--------------------->
<p class="text-center text-muted">"Quote."</p>
</div>
<!--------------------
ACTUAL TEXT
--------------------->
<div class="card rounded-0 p-3 mt-3" style="height: 461px; overflow: auto;">
<p style="text-indent: 10px">Copy/paste to add more paragraphs</p>
<div><hr class="mt-0"></div>
<p style="text-indent: 10px">and there's a horizontal line oo fancy</p>
</div>
</div>
<div class="col-lg-3 ml-lg-3">
<!--------------------
PLAYLIST
--------------------->
<div class="card rounded-0" style="height: 316px; overflow: auto;">
<!--- start copying here --->
<div class="mt-2 ml-2 d-flex align-items-center">
<div class="card rounded-0 border-0" style="height: 50px; width: 50px; overflow: hidden;">
<i class="fas fa-play fa-lg m-3 text-white" style="position: absolute"></i>
<!--- replace ' URL HERE ' with the end code of a youtube video --->
<iframe src="https://www.youtube.com/embed/URL HERE" style="bottom: 0px; position: absolute; opacity: 0"></iframe>
</div>
<span class="ml-2 text-muted">artist - song</span>
</div>
<!--- delete this line if it's the last song ( optional, I think it looks better ) --->
<div><hr class="mx-2 my-0"></div>
<!--- stop copying here --->
<!------>
<div class="mt-2 ml-2 d-flex align-items-center">
<div class="card rounded-0 border-0" style="height: 50px; width: 50px; overflow: hidden;">
<i class="fas fa-play fa-lg m-3 text-white" style="position: absolute"></i>
<!--- replace ' URL HERE ' with the end code of a youtube video --->
<iframe src="https://www.youtube.com/embed/URL HERE" style="bottom: 0px; position: absolute; opacity: 0"></iframe>
</div>
<span class="ml-2 text-muted">artist - song</span>
</div>
<!------>
</div>
<!--------------------
RELATIONSHIPS
--------------------->
<div class="card rounded-0 mt-3" style="height: 200px;">
<div id="rel" class="carousel slide" data-ride="carousel">
<div class="" style="height: 40px; position: relative">
<a class="carousel-control-prev" href="#rel" role="button" data-slide="prev">
<i class="fas fa-chevron-left fa-2x text-muted"></i>
</a>
<a class="carousel-control-next" href="#rel" role="button" data-slide="next">
<i class="fas fa-chevron-right fa-2x text-muted"></i>
</a>
</div>
<div class="p-2">
<div class="carousel-inner">
<!--- first relationship, don't copy this one --->
<div class="carousel-item active">
<div class="row no-gutters justify-content-center align-items-center">
<!--- image --->
<div class="card rounded-0" style="background: url(IMAGE HERE) center; background-size: cover; height: 75px; width: 75px"></div>
<div>
<div style="width: 157px" class="d-flex justify-content-around text-white">
<!--- hearts, change ' fas ' to ' far ' to change it from solid to outlined --->
<i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i>
</div>
<p class="text-center mt-2 mb-1"><a href="LINK HERE">name</a></p>
<p class="text-center text-muted">relationship</p>
</div>
</div>
<div class="mt-2" style="height: 58px; overflow: hidden">
<p class="mb-0 text-white">relationship description, keep it short</p>
</div>
</div>
<!------>
<!--- start copying here --->
<div class="carousel-item">
<div class="row no-gutters justify-content-center align-items-center">
<!--- image --->
<div class="card rounded-0" style="background: url(IMAGE HERE) center; background-size: cover; height: 75px; width: 75px"></div>
<div>
<div style="width: 157px" class="d-flex justify-content-around text-white">
<!--- hearts, change ' fas ' to ' far ' to change it from solid to outlined --->
<i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i><i class="fas fa-heart"></i>
</div>
<p class="text-center mt-2 mb-1"><a href="LINK HERE">two</a></p>
<p class="text-center text-muted">relationship</p>
</div>
</div>
<div class="mt-2" style="height: 58px; overflow: hidden">
<p class="mb-0 text-white">relationship description, keep it short</p>
</div>
</div>
<!--- stop copying here --->
<!--- bunch of ending tags lol --->
</div>
</div>
</div>
</div>
<!--------------------
CREDIT
--
try to remove I dare you
--------------------->
<p class="pull-right" class="text-light">
<a href="https://toyhou.se/12536230.char-code-yeah-sure-dude" class="text-light"><i class="far mt-3 fa-code tooltipster" title="code by Bretzel_Bin" /></a>
<!---copy and paste this line for more image credits lol or just delete it I guess--->
. <a href="LINK HERE" class="text-light"><i class="far fa-image tooltipster" title="image from ___" /></a>
</p>
</div>
</div>
</div>