Grassy Framing
created by:Aris
Custom ColorsHTMLCharacter
Copy
<!--
grass & tab button background colour & sliders colour: #3f4934
other background colour: #59644b
accent colour: #C3D8E2 #3d6c83
border colour: #edeac9
text colour: #f5f4df
heart colour (can change per relationship too): #9c3636
-->
<div class="container p-3" style="max-width:1200px; font-family:calibri; color:#f5f4df; background:url('https://images.unsplash.com/photo-1448375240586-882707db888b'); background-size:cover; background-position:center; background-repeat:no-repeat">
<div class="p-3" style="background-color:rgba(10,13,8,0.8)">
<!-- top row -->
<div class="row no-gutters">
<!-- design/bio -->
<div class="col-lg col-sm-12" style="position:relative">
<!-- name, keep quite short for mobile. pref no longer than 'Lorem ipsum' -->
<div class="row no-gutters px-3 pt-2 justify-content-center align-content-center" style="position:absolute; background-color:#1b2813; right:-5px; top:-10px; z-index:1; min-width:200px; height:60px; border-bottom:3px double #edeac9; border-left:3px double #edeac9; border-top:2px solid #edeac9; border-right:2px solid #edeac9">
<span style="font-size:2.5em; font-variant:small-caps">Lorem ipsum</span>
</div>
<!-- image area -->
<div class="row no-gutters align-content-end" style="position:relative; height:250px; width:100%">
<!-- image -->
<img class="mx-auto" src="IMG_HERE" style="max-height:95%">
<div class="h-100 w-100" style="border-top: 3px double #edeac9; border-left: 3px double #edeac9; border-right: 3px double #edeac9; position:absolute"></div>
<div class="h-100 w-100 p-0" style="position:absolute; bottom:-5px; color:#bfd4a2">
<i class="fas fa-leaf" style="position:absolute; left:-0.225em; top:-0.225em; font-size:3em; color:#ca7b2f; transform:rotate(80deg)"></i>
<i class="fas fa-cloud" style="position:absolute; left:2.675em; bottom:0.1em; font-size:2em; color:#707c5f"></i>
<i class="fa-sharp fa-cloud" style="position:absolute; left:-0.5px; bottom:-5px; font-size:5em; color:#3f4934"></i>
<i class="fa-sharp fa-cloud" style="position:absolute; bottom:-0.225em; right:0em; font-size:4em; color:#3f4934"></i>
<i class="fa-light fa-wind" style="position:absolute; bottom:0em; left:-5px; font-size:3em; color:#95a77c; transform:rotate(270deg)"></i>
<i class="fa-sharp fa-mountains" style="position:absolute; bottom:-0.2em; left:0em; font-size:0.8em; color:#3f4934"></i>
<i class="fa-sharp fa-mountains" style="position:absolute; bottom:-0.2em; left:0.225em; font-size:1em; color:#3f4934"></i>
<i class="fa-sharp fa-mountains" style="position:absolute; bottom:-0.2em; left:20px; font-size:0.6em; color:#3f4934"></i>
<span class="fa-stack fa-2x" style="position:absolute; bottom:7px; left:5px; font-size:1.2em; transform:rotate(30deg)">
<i class="fa-solid fa-flower fa-stack-1x" style="color:#df9559"></i>
<i class="fa-duotone fa-flower fa-stack-1x" style="color:#e7e3a8"></i>
</span>
<span class="fa-stack fa-2x" style="position:absolute; bottom:-6px; left:20px; font-size:0.8em; transform:rotate(30deg)">
<i class="fa-solid fa-flower fa-stack-1x" style="color:#de7724"></i>
<i class="fa-duotone fa-flower fa-stack-1x" style="color:#e7e3a8"></i>
</span>
<span class="fa-stack fa-2x" style="position:absolute; bottom:0.2em; left:-25px; font-size:1.2em; transform:rotate(30deg)">
<i class="fa-solid fa-flower fa-stack-1x" style="color:#df5959"></i>
<i class="fa-duotone fa-flower fa-stack-1x" style="color:#e7e3a8"></i>
</span>
<i class="fa-sharp fa-mountains" style="position:absolute; bottom:-0.06em; left:200px; font-size:2em; color:#3f4934"></i>
<i class="fa-sharp fa-icicles" style="position:absolute; bottom:-0.06em; right:100px; font-size:2em; color:#3f4934; transform:rotate(170deg)"></i>
<span class="fa-stack fa-2x" style="position:absolute; bottom:-7px; left:170px; font-size:1.6em">
<i class="fa-solid fa-flower-daffodil fa-stack-1x" style="color:#72995d"></i>
<i class="fa-duotone fa-flower-daffodil fa-stack-1x" style="color:#fae99a"></i>
</span>
<i class="fa-sharp fa-icicles" style="position:absolute; bottom:-0.06em; left:150px; font-size:2em; color:#3f4934; transform:rotate(180deg)"></i>
<i class="fa-sharp fa-icicles" style="position:absolute; bottom:-0.06em; left:85px; font-size:1.7em; color:#3f4934; transform:rotate(190deg)"></i>
<i class="d-lg-block d-none fa-sharp fa-mountains" style="position:absolute; bottom:-0.06em; left:17.5em; font-size:1.2em; color:#3f4934"></i>
</div>
</div>
<!-- bio -->
<div class="row no-gutters" style="background-color:#3f4934; width:100%; height:124px; overflow:auto">
<!-- left row -->
<div class="col-lg col-12 p-2" style="font-size:1.25em; line-height:1.5">
<div class="justify-content-between">
<span style="color:#edeac9"><b>Gender</b></span>
<span>content</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Pronouns</b></span>
<span>con/tent</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Sexuality</b></span>
<span>content</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Age</b></span>
<span>content</span>
</div>
</div>
<!-- right row -->
<div class="col-lg col-12 p-2" style="font-size:1.25em; line-height:1.5">
<div class="justify-content-between">
<span style="color:#edeac9"><b>Group</b></span>
<span>content</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Rank</b></span>
<span>content</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Status</b></span>
<span>content</span>
</div>
<div class="justify-content-between">
<span style="color:#edeac9"><b>Theme</b></span>
<span><a href="SONG-URL" target="_blank"><i class="fas fa-music fa-sm" style="color:#C3D8E2"></i></a></span>
</div>
</div>
</div>
</div>
<!-- main -->
<div class="col-lg col-sm-12 mt-lg-0 mt-2 ml-lg-2 ml-0" style="">
<!-- tab buttons -->
<ul class="nav nav-btn nav-fill border-bottom-0" style="height:40px; border:1px solid #edeac9; background-color:#3f4934">
<li class="nav-item">
<a class="nav-link active btn btn-outline-primary align-items-center justify-content-center h-100" href="#Personality" data-toggle="tab" style="mix-blend-mode:luminosity; border-radius:0px; box-shadow:none"><i class="fas fa-user fa-lg" style="color:#edeac9"></i></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary align-items-center justify-content-center h-100" href="#Sliders" data-toggle="tab" style="mix-blend-mode:luminosity; border-radius:0px; box-shadow:none"><i class="fas fa-bars-progress fa-lg" style="color:#edeac9"></i></a>
</li>
<li class="nav-item">
<a class="nav-link btn btn-outline-primary align-items-center justify-content-center h-100" href="#Story" data-toggle="tab" style="mix-blend-mode:luminosity; border-radius:0px; box-shadow:none"><i class="fas fa-book fa-lg" style="color:#edeac9"></i></a>
</li>
</ul>
<!-- tab content -->
<div class="h-100" style="padding-bottom:0px">
<div class="tab-content" style="background-color:#59644b; border:3px double #edeac9; height:334px">
<div class="tab-pane fade show active p-2" id="Personality" style="font-size:1.15em; height:312.5px; overflow:auto">
<!-- personality text -->
<p>Write some stuff about your character's personality here! Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<!-- positive/negative traits -->
<div class="mt-4 justify-content-between" style="font-size:1.3em; font-variant:small-caps">
<b>Positive Traits</b>
<b>Negative Traits</b>
</div>
<div class="row no-gutters">
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fas fa-plus fa-xs"></i></span>Lorem ipsum.</li>
<li><span class="fa-li"><i class="fas fa-plus fa-xs"></i></span>Dolor sit amet</li>
<li><span class="fa-li"><i class="fas fa-plus fa-xs"></i></span>Sed tellus blandit viverra sed eget odio.</li>
</ul>
</div>
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="far fa-x fa-xs"></i></span>Donec accumsan tempor lacus.</li>
<li><span class="fa-li"><i class="far fa-x fa-xs"></i></span>Venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li><span class="fa-li"><i class="far fa-x fa-xs"></i></span>Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
<!-- neutral traits & fears -->
<div class="mt-2 justify-content-between" style="font-size:1.3em; font-variant:small-caps">
<b>Neutral Traits</b>
<b>Fears</b>
</div>
<div class="row no-gutters">
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="far fa-equals fa-xs"></i></span>Lorem ipsum dolor sit amet.</li>
<li><span class="fa-li"><i class="far fa-equals fa-xs"></i></span>Consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="far fa-equals fa-xs"></i></span>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
</ul>
</div>
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fal fa-burst fa-xs"></i></span>Donec accumsan tempor lacus.</li>
<li><span class="fa-li"><i class="fal fa-burst fa-xs"></i></span>Venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
</ul>
</div>
</div>
<!-- likes dislikes -->
<div class="mt-2 justify-content-between" style="font-size:1.3em; font-variant:small-caps">
<b>Likes</b>
<b>Dislikes</b>
</div>
<div class="row no-gutters">
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fal fa-heart fa-xs"></i></span>Lorem ipsum dolor sit amet.</li>
<li><span class="fa-li"><i class="fal fa-heart fa-xs"></i></span>Consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fal fa-heart fa-xs"></i></span>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
</ul>
</div>
<div class="col-6">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fal fa-heart-crack fa-xs"></i></span>Donec accumsan tempor lacus.</li>
<li><span class="fa-li"><i class="fal fa-heart-crack fa-xs"></i></span>Venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li><span class="fa-li"><i class="fal fa-heart-crack fa-xs"></i></span>Curabitur ac finibus eros.</li>
</ul>
</div>
</div>
</div>
<div class="tab-pane fade p-2" id="Sliders" style="height:312.5px; overflow:auto">
<!-- sliders -->
<div class="row no-gutters">
<!-- personality trait sliders -->
<div class="col-lg-6 col-12">
<div class="text-left p-1" style="font-size:2em; font-variant:small-caps">
<span>Personality Traits</span>
</div>
<div style="font-size:1.2em; font-variant:small-caps; line-height:1.745">
<div class="px-2 justify-content-between pb-1">
<span>Lone Wolf</span>
<span>Wolf Pack</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px; width:95%; background:#edeac9; overflow:visible; border:2.5px solid #edeac9">
<!-- change width on line below to change how far along the diamond on the slider is -->
<div class="progress-bar" style="width:50%; background:none; margin-top:.5px">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#3f4934"></i>
</div></div>
<div class="px-2 justify-content-between pb-1">
<span>Daring</span>
<span>Cautious</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px; width:95%; background:#edeac9; overflow:visible; border:2.5px solid #edeac9">
<!-- change width on line below to change how far along the diamond on the slider is -->
<div class="progress-bar" style="width:50%; background:none; margin-top:.5px">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#3f4934"></i>
</div></div>
<div class="px-2 justify-content-between pb-1">
<span>Poker Face</span>
<span>Heart on Sleeve</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px; width:95%; background:#edeac9; overflow:visible; border:2.5px solid #edeac9">
<!-- change width on line below to change how far along the diamond on the slider is -->
<div class="progress-bar" style="width:50%; background:none; margin-top:.5px">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#3f4934"></i>
</div></div>
<div class="px-2 justify-content-between pb-1">
<span>Book Smart</span>
<span>Street Smart</span>
</div>
<div class="progress mx-auto mb-3" style="height:2.5px; width:95%; background:#edeac9; overflow:visible; border:2.5px solid #edeac9">
<!-- change width on line below to change how far along the diamond on the slider is -->
<div class="progress-bar" style="width:50%; background:none; margin-top:.5px">
<i class="fas fa-rhombus fa-lg pull-right mr-n1" style="color:#3f4934"></i>
</div></div>
</div>
</div>
<!-- skill sliders -->
<div class="col-lg-6 col-12">
<div class="text-right p-1" style="font-size:2em; font-variant:small-caps">
<span>Skills</span>
</div>
<div style="font-size:1.35em; font-variant:small-caps">
<div class="justify-content-center pb-1"><span>Offense</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edeac9">
<!-- change width on line below to change how filled in the slider is -->
<div class="progress-bar justify-content-end mb-3" style="width:50%; background-color:#3f4934"></div>
</div>
<div class="justify-content-center pb-1"><span>Defense</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edeac9">
<!-- change width on line below to change how filled in the slider is -->
<div class="progress-bar justify-content-end" style="width:50%; background-color:#3f4934"></div>
</div>
<div class="justify-content-center pb-1"><span>Agility</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edeac9">
<!-- change width on line below to change how filled in the slider is -->
<div class="progress-bar justify-content-end mb-3" style="width:50%; background-color:#3f4934"></div>
</div>
<div class="justify-content-center pb-1"><span>Survival</span></div>
<div class="progress mx-auto mb-3" style="height:5px; width:90%; background-color:#edeac9">
<!-- change width on line below to change how filled in the slider is -->
<div class="progress-bar justify-content-end" style="width:50%; background-color:#3f4934"></div>
</div>
</div>
</div>
</div>
<!-- powers -->
<div class="mt-2" style="font-size:1.1em">
<b style="font-size:1.25em">Power I</b>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</p>
<b class="justify-content-end" style="font-size:1.25em">Power II</b>
<p class="text-right">Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros.</p>
<b style="font-size:1.25em">Power III</b>
<p>Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
<!-- mental/physical health -->
<div class="mt-4 justify-content-between" style="font-size:1.3em; font-variant:small-caps">
<b>Mental Health</b>
<b>Physical Health</b>
</div>
<div class="row no-gutters">
<div class="col mr-1">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fal fa-brain fa-xs"></i></span>Lorem ipsum dolor sit amet.</li>
<li><span class="fa-li"><i class="fal fa-brain fa-xs"></i></span>Consectetur adipiscing elit.</li>
<li><span class="fa-li"><i class="fal fa-brain fa-xs"></i></span>Duis sollicitudin elit sed tellus blandit viverra sed eget odio.</li>
</ul>
<p>Talk about your character's mental health here! Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
</div>
<div class="col ml-1">
<ul class="fa-ul" style="font-size:1.1em; padding-top:5px; margin-left:25px">
<li><span class="fa-li"><i class="fal fa-heart-pulse fa-xs"></i></span>Donec accumsan tempor lacus.</li>
<li><span class="fa-li"><i class="fal fa-heart-pulse fa-xs"></i></span>Venenatis elit feugiat non. Duis porta eros et velit blandit dapibus.</li>
<li><span class="fa-li"><i class="fal fa-heart-pulse fa-xs"></i></span>Curabitur ac finibus eros.</li>
</ul>
<p>Talk about your character's physical health here! Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
<div class="tab-pane fade p-2" id="Story" style="height:312.5px; overflow:auto">
<b style="font-size:1.75em; font-variant:small-caps"><i class="fas fa-bookmark pr-2"></i>Early Life</b>
<p style="font-size:1.15em">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.
</p>
<b class="justify-content-end" style="font-size:1.75em; font-variant:small-caps">Main Life<i class="fas fa-book-open-cover pl-2 pt-2"></i></b>
<p class="text-right" style="font-size:1.15em">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
<br>
Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<b style="font-size:1.75em; font-variant:small-caps"><i class="fas fa-book pr-2"></i>Later Life</b>
<p style="font-size:1.15em">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non. Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
<p style="font-size:1.15em">
Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.
</p>
</div>
</div></div>
</div>
</div>
<!-- bottom row -->
<div class="row no-gutters" style="">
<!-- relationships -->
<div class="col-lg-9 col-12 mb-lg-0 mb-4 mt-2">
<div id="relationships" class="carousel slide h-100" data-interval="false" data-pause="true"><div class="carousel-inner h-100">
<!-- relationship slide 1 -->
<div class="carousel-item active h-100 mb-3"><div class="row no-gutters h-100">
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0; top:10px">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; left:8px; top:60px; border-left:1px solid #edeac9; border-bottom:1px solid #edeac9; height:175px; width:190px; margin-left:3px"></div>
<!-- image -->
<div class="mx-auto ml-lg-3" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:30px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; left:3px; top:40px; border-left:1px solid #edeac9; border-bottom:1px solid #edeac9; border-right:1px solid #edeac9; height:175px; width:210px"></div>
<!-- image -->
<div class="mx-auto ml-lg-2" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:10px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; top:40px; border-bottom:1px solid #edeac9; border-right:1px solid #edeac9; height:175px; width:210px"></div>
<!-- image -->
<div class="mx-auto mr-lg-2" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:10px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0; top:10px">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; left:10px; top:60px; border-right:1px solid #edeac9; border-bottom:1px solid #edeac9; height:175px; width:195px"></div>
<!-- image -->
<div class="mx-auto mr-lg-3" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:30px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div></div>
<!-- relationship slide 2 -->
<div class="carousel-item h-100 mb-3"><div class="row no-gutters h-100">
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0; top:10px">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; left:8px; top:60px; border-left:1px solid #edeac9; border-bottom:1px solid #edeac9; height:175px; width:190px; margin-left:3px"></div>
<!-- image -->
<div class="mx-auto ml-lg-3" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:30px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
<div class="col-lg-3 col-12">
<!-- name -->
<div class="justify-content-center" style="background-color:rgba(0,0,0,0.4); border-radius:10px; padding:5px;margin-top:10px; width:200px; position:absolute; font-size:1.2em; font-variant:small-caps; margin:auto; right:0; left:0">
<span>Lorem Ipsum</span>
</div>
<!-- border stuff -->
<div class="p-2 d-lg-block d-none" style="position:absolute; left:3px; top:40px; border-left:1px solid #edeac9; border-bottom:1px solid #edeac9; border-right:1px solid #edeac9; height:175px; width:210px"></div>
<!-- image -->
<div class="mx-auto ml-lg-2" style="background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; height:200px; width:200px; margin-top:10px"></div>
<!-- hearts -->
<div class="justify-content-center mx-auto" data-toggle="tooltip" style="color:#9c3636; background-color:rgba(0,0,0,0.4); border-radius:15px; padding:7.5px; padding-left:20px; padding-right:20px; margin-top:10px; width:100px" title="Insert some short thoughts about this character and their relationship.">
<i class="fas fa-heart mr-1"></i>
<i class="fas fa-heart mr-1"></i>
<i class="far fa-heart-half-stroke mr-1"></i>
<i class="far fa-heart mr-1"></i>
<i class="far fa-heart"></i>
</div>
</div>
</div></div>
</div>
<!-- buttons -->
<a class="carousel-control-prev" href="#relationships" role="button" data-slide="prev" style="width:50px">
<span class="fas fa-chevron-left fa-2xl" aria-hidden="true" style="color:#f5f4df"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#relationships" role="button" data-slide="next" style="width:50px">
<span class="fas fa-chevron-right fa-2xl" aria-hidden="true" style="color:#f5f4df"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- headshot picture thingy -->
<div class="col-lg-3 col-11" style="position:relative; height:265px; width:265px">
<div class="h-100 w-100" style="border:3px double #edeac9; background:url('IMG_HERE'); background-size:cover; background-position:center; background-repeat:no-repeat; position:absolute; right:-15px; top:-15px; background-clip:padding-box">
<img src="">
</div>
</div>
</div>
<!-- code credit, do not remove -->
<a href="/Aris" data-toggle="tooltip" title="HTML by Palarista" style="position:absolute; bottom:25px; right:25px">
<i class="fas fa-code" style="color:#C3D8E2; opacity:0.75"></i>
</a>
</div>
</div>