Select All
<!DOCTYPE HTML>
<!--Rules:
For the Coders Quarters Febuary Challenge:
Meant to be flexable with both romantic and platonic relationships & easily expandable for Poly-relationships & groups
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
Text, links: text-primary
Separators: bg-primary
Separator gradients: rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%
Change the colors: Ctrl+f and search for the color you want to change.
-Gradients use RGBA colors. Last number in an RGBA color changes the opacity (eg: 0- transparent. 0.5- semi-transparent. 1- solid)
(placeholder images are from unsplash)
-->
<div class="container" style="max-width:1000px">
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Characters-->
<div class="row">
<!--Character 1-->
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card bg-faded border-0 rounded-0 p-2" style="min-height:230px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1480554840075-72cbdabbf689?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cmFiYml0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/KvHT4dltPEQ" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--info-->
<div class="col-12 col-lg-8 mb-3">
<div class="card bg-faded border-0 rounded-0 p-2 h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-2">
<!--title-->
<a href="#">
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Character Name</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class='fa-regular fa-heart'></i></span>
</a>
<hr class="mt-1" style="border-width:3px">
<div class="row">
<!--basic info-->
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Gender</span>
<span class="pull-right"> gender (pro/noun)</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Orientation</span>
<span class="pull-right">Orient.</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Birthday</span>
<span class="pull-right">00/00</span>
<hr class="mt-1 mb-2">
</div>
<!--breif intro-->
<div class="col-12 col-md-6 order-2 order-lg-1">
<p>Have a lot of info? this section will expand!</p>
<p>image on the side won't expand to keep things neat however</p>
</div>
</div>
</div>
</div>
</div>
<!--end Character 1-->
<!--Character 2-->
<!--info-->
<div class="col-12 col-lg-8 mb-3 order-2 order-lg-1">
<div class="card bg-faded border-0 rounded-0 p-2 h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-2">
<!--title-->
<a href="#">
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Character Name</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class='fa-regular fa-heart'></i></span>
</a>
<hr class="mt-1" style="border-width:3px">
<!--(info)-->
<div class="row">
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Gender</span>
<span class="pull-right"> gender (pro/noun)</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Orientation</span>
<span class="pull-right">Orient.</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Birthday</span>
<span class="pull-right">00/00</span>
<hr class="mt-1 mb-2">
</div>
<div class="col-12 col-md-6 order-1 order-lg-2">
<p>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>
</div>
</div>
</div>
</div>
</div>
<!--image-->
<div class="col-12 col-lg-4 mb-3 order-1 order-lg-2">
<div class="card bg-faded border-0 rounded-0 p-2" style="min-height:230px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/u_kMWN-BWyU" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--end Character 2-->
</div>
<!--end characters-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--about-->
<div class="row">
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:400px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1592600226270-ec07bcaed32d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/Uzf9CYH5Rak" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--main about-->
<div class="col-12 col-lg-8 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> About Us</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-house-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
</div>
</div>
</div>
</div>
<!--end about-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Dynamic-->
<div class="row">
<!--main info-->
<div class="col-12 col-lg-8 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> Our Dynamic</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-hands-holding-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--basics-->
<div class="row">
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Relationship</span>
<span class="pull-right"> Friends/dating/etc.</span>
<hr class="mt-1 mb-2">
</div>
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Status</span>
<span class="pull-right"> Close/distant/etc.</span>
<hr class="mt-1 mb-2">
</div>
</div>
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
</div>
</div>
</div>
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:400px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1596489720730-2ba63c354215?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=715&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/prMB2KfnEQY" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--Character 1's thoughts-->
<div class="col-12 col-lg-6 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:1.75em;font-weight:bold;letter-spacing:1px"> Character 1's thoughts</span>
<span class="text-primary pull-right" style="font-size:1.75em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-head-side-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand!</p>
<p>These are for specific thoughts they have on eachother
<br>
(eg: Character 1 thinking character 2 can be a bit immature at times, but they know they mean well and enjoy their antics)
</p>
</div>
</div>
</div>
<!--Character 1's thoughts-->
<div class="col-12 col-lg-6 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:1.75em;font-weight:bold;letter-spacing:1px"> Character 2's thoughts</span>
<span class="text-primary pull-right" style="font-size:1.75em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-head-side-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand!</p>
<p>These are for specific thoughts they have on eachother
<br>
(eg: Character 2 knowing character 1 is more serious and reserved, but they still understand and respect their boundries)
</p>
</div>
</div>
</div>
</div>
<!--end Dynamic-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Story-->
<div class="row">
<!--image-->
<div class="col-12 col-lg-3 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:450px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1609151257897-4d24b5a6491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/j4YRR0lFgyU" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--info-->
<div class="col-12 col-lg-9 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Our Story</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-book-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
<span class="mt-1" style="font-size:1.5em"> Subsection</span>
<hr class="mt-2">
<p>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>
</div>
</div>
</div>
</div>
<!--end story-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Trivia-->
<div class="row">
<!--(Trivia)-->
<div class="col-12 col-lg-7 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> Trivia</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-icons"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p><i class='fas fa-circle mr-1'></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class='fas fa-circle mr-1'></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class='fas fa-circle mr-1'></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
</div>
</div>
</div>
<!--Playlist-->
<div class="col-12 col-lg-5 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Our Playlist</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-list-music"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--playlist-->
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
</div>
</div>
</div>
</div>
<!--end trivia-->
<!--Mood-->
<div class="row">
<!--image 1-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-primary rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1447713060098-74c4ed0be5e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1122&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/Mx_05dSqRJA" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 2-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-success rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1603648396835-7dcdf45d26b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/fO2b432Z9Zc" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 3-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-warning rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1512233866604-11b9c3d7ec96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size:cover;
background-position:bottom
">
<!--Image credit-->
<a href="https://unsplash.com/photos/86rNiLqog4E" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 4-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-danger rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1519305124423-5ccccff55da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/QN6NkYi3CKs" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
</div>
<!--end mood-->
<!--Credit. You may move it, but please do not delete/remove-->
<div class="card mb-3 bg-primary border-0 rounded-0 py-1 px-2" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
<p style="text-align:right;color:#ffffff;text-shadow: 0px 1px 3px #000000">HTML by <a href="https://toyhou.se/14835300" style="color:#ffffff"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
</div>
</div>
Manual Select
<!DOCTYPE HTML>
<!--Rules:
For the Coders Quarters Febuary Challenge:
Meant to be flexable with both romantic and platonic relationships & easily expandable for Poly-relationships & groups
You may
-frankenstein with other codes (as long as the creator of said code allows it)
-edit/change as much as you need (example: making character codes into user codes, vice-versa)
You may not
-Redistribute, resell, and/or claim its yours
-Remove credit (you're allowed to move & edit it though, just keep it visible)
Misc Notes:
-When editing, remember to turn WYSIWYG off! My codes may break otherwise
-Some basic html knowledge is recommended for editing
Default Colors:
Text, links: text-primary
Separators: bg-primary
Separator gradients: rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%
Change the colors: Ctrl+f and search for the color you want to change.
-Gradients use RGBA colors. Last number in an RGBA color changes the opacity (eg: 0- transparent. 0.5- semi-transparent. 1- solid)
(placeholder images are from unsplash)
-->
<div class="container" style="max-width:1000px">
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Characters-->
<div class="row">
<!--Character 1-->
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card bg-faded border-0 rounded-0 p-2" style="min-height:230px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1480554840075-72cbdabbf689?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cmFiYml0fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=600&q=60);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/KvHT4dltPEQ" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--info-->
<div class="col-12 col-lg-8 mb-3">
<div class="card bg-faded border-0 rounded-0 p-2 h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-2">
<!--title-->
<a href="#">
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Character Name</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class='fa-regular fa-heart'></i></span>
</a>
<hr class="mt-1" style="border-width:3px">
<div class="row">
<!--basic info-->
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Gender</span>
<span class="pull-right"> gender (pro/noun)</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Orientation</span>
<span class="pull-right">Orient.</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Birthday</span>
<span class="pull-right">00/00</span>
<hr class="mt-1 mb-2">
</div>
<!--breif intro-->
<div class="col-12 col-md-6 order-2 order-lg-1">
<p>Have a lot of info? this section will expand!</p>
<p>image on the side won't expand to keep things neat however</p>
</div>
</div>
</div>
</div>
</div>
<!--end Character 1-->
<!--Character 2-->
<!--info-->
<div class="col-12 col-lg-8 mb-3 order-2 order-lg-1">
<div class="card bg-faded border-0 rounded-0 p-2 h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-2">
<!--title-->
<a href="#">
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Character Name</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class='fa-regular fa-heart'></i></span>
</a>
<hr class="mt-1" style="border-width:3px">
<!--(info)-->
<div class="row">
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Gender</span>
<span class="pull-right"> gender (pro/noun)</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Orientation</span>
<span class="pull-right">Orient.</span>
<hr class="mt-1 mb-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Birthday</span>
<span class="pull-right">00/00</span>
<hr class="mt-1 mb-2">
</div>
<div class="col-12 col-md-6 order-1 order-lg-2">
<p>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>
</div>
</div>
</div>
</div>
</div>
<!--image-->
<div class="col-12 col-lg-4 mb-3 order-1 order-lg-2">
<div class="card bg-faded border-0 rounded-0 p-2" style="min-height:230px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/u_kMWN-BWyU" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--end Character 2-->
</div>
<!--end characters-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--about-->
<div class="row">
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:400px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1592600226270-ec07bcaed32d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/Uzf9CYH5Rak" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--main about-->
<div class="col-12 col-lg-8 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> About Us</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-house-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
</div>
</div>
</div>
</div>
<!--end about-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Dynamic-->
<div class="row">
<!--main info-->
<div class="col-12 col-lg-8 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> Our Dynamic</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-hands-holding-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--basics-->
<div class="row">
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Relationship</span>
<span class="pull-right"> Friends/dating/etc.</span>
<hr class="mt-1 mb-2">
</div>
<div class="col-12 col-md-6 order-1 order-lg-2">
<span class="text-primary" style="font-weight:bold;letter-spacing:1px">Status</span>
<span class="pull-right"> Close/distant/etc.</span>
<hr class="mt-1 mb-2">
</div>
</div>
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
</div>
</div>
</div>
<!--image-->
<div class="col-12 col-lg-4 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:400px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1596489720730-2ba63c354215?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=715&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/prMB2KfnEQY" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--Character 1's thoughts-->
<div class="col-12 col-lg-6 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:1.75em;font-weight:bold;letter-spacing:1px"> Character 1's thoughts</span>
<span class="text-primary pull-right" style="font-size:1.75em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-head-side-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand!</p>
<p>These are for specific thoughts they have on eachother
<br>
(eg: Character 1 thinking character 2 can be a bit immature at times, but they know they mean well and enjoy their antics)
</p>
</div>
</div>
</div>
<!--Character 1's thoughts-->
<div class="col-12 col-lg-6 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:1.75em;font-weight:bold;letter-spacing:1px"> Character 2's thoughts</span>
<span class="text-primary pull-right" style="font-size:1.75em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-head-side-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand!</p>
<p>These are for specific thoughts they have on eachother
<br>
(eg: Character 2 knowing character 1 is more serious and reserved, but they still understand and respect their boundries)
</p>
</div>
</div>
</div>
</div>
<!--end Dynamic-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Story-->
<div class="row">
<!--image-->
<div class="col-12 col-lg-3 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="min-height:300px;max-height:450px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1609151257897-4d24b5a6491e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/j4YRR0lFgyU" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--info-->
<div class="col-12 col-lg-9 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Our Story</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-book-heart"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p>Have a lot of info? This section will expand! Image on the side will only expand to a certain point to keep things neat though</p>
<p>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>
<span class="mt-1" style="font-size:1.5em"> Subsection</span>
<hr class="mt-2">
<p>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>
</div>
</div>
</div>
</div>
<!--end story-->
<div class="card mb-3 bg-primary border-0 rounded-0" style="height:20px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(270deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
</div>
<!--Trivia-->
<div class="row">
<!--(Trivia)-->
<div class="col-12 col-lg-7 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px"> Trivia</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-icons"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--info-->
<p><i class='fas fa-circle mr-1'></i> Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p><i class='fas fa-circle mr-1'></i> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p><i class='fas fa-circle mr-1'></i> It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
</div>
</div>
</div>
<!--Playlist-->
<div class="col-12 col-lg-5 mb-3">
<div class="card border-0 rounded-0 bg-faded h-100" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);">
<div class="card-body p-3">
<!--title-->
<span class="text-primary" style="font-size:2em;font-weight:bold;letter-spacing:1px">Our Playlist</span>
<span class="text-primary pull-right" style="font-size:2em;font-weight:bold;letter-spacing:1px">
<i class="fa-regular fa-list-music"></i></span>
<hr class="mt-1" style="border-width:3px">
<!--playlist-->
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
<br class="mb-2">
<a href="#" style="font-size:1.5em;font-weight:bold;letter-spacing:1px">
<i class="fa-solid fa-play"></i> Song Title - Artist Name
</a>
</div>
</div>
</div>
</div>
<!--end trivia-->
<!--Mood-->
<div class="row">
<!--image 1-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-primary rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1447713060098-74c4ed0be5e5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1122&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/Mx_05dSqRJA" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 2-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-success rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1603648396835-7dcdf45d26b8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/fO2b432Z9Zc" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 3-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-warning rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1512233866604-11b9c3d7ec96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
background-size:cover;
background-position:bottom
">
<!--Image credit-->
<a href="https://unsplash.com/photos/86rNiLqog4E" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
<!--image 4-->
<div class="col-12 col-sm-6 col-lg-3 mb-3">
<div class="card bg-danger rounded-0 border-0" style="min-height:200px;box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:url(https://images.unsplash.com/photo-1519305124423-5ccccff55da9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2069&q=80);
background-size:cover;
background-position:center
">
<!--Image credit-->
<a href="https://unsplash.com/photos/QN6NkYi3CKs" data-toggle="tooltip" title="img - unsplash" style="color:#ffffff;position:absolute;bottom:2px;right:6px;font-size:1.25em;text-shadow: 0px 1px 3px #000000"> <i class="fas fa-image"></i> </a>
</div>
</div>
</div>
<!--end mood-->
<!--Credit. You may move it, but please do not delete/remove-->
<div class="card mb-3 bg-primary border-0 rounded-0 py-1 px-2" style="box-shadow: 2px 3px 5px rgba(0,0,0,0.3);
background-image:linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%)">
<p style="text-align:right;color:#ffffff;text-shadow: 0px 1px 3px #000000">HTML by <a href="https://toyhou.se/14835300" style="color:#ffffff"><i class='fad fa-heart'></i> Jade-Everstone</a></p>
</div>
</div>