<!--
██████╗░░█████╗░ ███╗░░██╗░█████╗░████████╗ ██╗░░░██╗░██████╗███████╗
██╔══██╗██╔══██╗ ████╗░██║██╔══██╗╚══██╔══╝ ██║░░░██║██╔════╝██╔════╝
██║░░██║██║░░██║ ██╔██╗██║██║░░██║░░░██║░░░ ██║░░░██║╚█████╗░█████╗░░
██║░░██║██║░░██║ ██║╚████║██║░░██║░░░██║░░░ ██║░░░██║░╚═══██╗██╔══╝░░
██████╔╝╚█████╔╝ ██║░╚███║╚█████╔╝░░░██║░░░ ╚██████╔╝██████╔╝███████╗
╚═════╝░░╚════╝░ ╚═╝░░╚══╝░╚════╝░░░░╚═╝░░░ ░╚═════╝░╚═════╝░╚══════╝
░██╗░░░░░░░██╗██╗░░░██╗░██████╗██╗░██╗░░░░░░░██╗██╗░░░██╗░██████╗░
░██║░░██╗░░██║╚██╗░██╔╝██╔════╝██║░██║░░██╗░░██║╚██╗░██╔╝██╔════╝░
░╚██╗████╗██╔╝░╚████╔╝░╚█████╗░██║░╚██╗████╗██╔╝░╚████╔╝░██║░░██╗░
░░████╔═████║░░░╚██╔╝░░░╚═══██╗██║░░████╔═████║░░░╚██╔╝░░██║░░╚██╗
░░╚██╔╝░╚██╔╝░░░░██║░░░██████╔╝██║░░╚██╔╝░╚██╔╝░░░░██║░░░╚██████╔╝
░░░╚═╝░░░╚═╝░░░░░╚═╝░░░╚═════╝░╚═╝░░░╚═╝░░░╚═╝░░░░░╚═╝░░░░╚═════╝░
1. Go to https://toyhou.se/~account/display
2. Click all necessary boxes (recommended: Profile Text)
3. Click "Update WYSIWYG Settings"
4. Reload page that you are editing the code in.
5. Done!
IF YOU DO NOT DO THIS, THE CODE WILL BREAK.
YOU WILL NEED TO START OVER WITH A FRESH COPY.
-->
<!-- @ACP || Ship Meme x3
HANDY WEBSITES
Font Awesome :: https://fontawesome.com/
W3 Schools Bootstrap :: https://www.w3schools.com/bootstrap/
W3 Schools HTML :: https://www.w3schools.com/html/default.asp
Bootstrap Docs :: https://getbootstrap.com/docs/5.1/getting-started/introduction/
Mozilla Docs :: https://developer.mozilla.org/en-US/ (under "References")
Toyhou.se Help Thread :: https://toyhou.se/~forums/16.htmlcss-graphics/48845.-help-thread-ask-your-questions-here-
==================================================================
CHAR 1 ACCENT -------------------- #e4c9a7
CHAR 2 ACCENT -------------------- #873939
COMBINED ACCENT ------------------ #b68170
WHITE TEXT ----------------------- #fff
BLACK TEXT ----------------------- #000
GRAY TEXT ------------------------ text-muted
DEFAULT TEXT --------------------- inherit;
HEX CODE COLOR BLENDER ----------- https://meyerweb.com/eric/tools/color-blend/#:::hex
[ COLOR: #HEXCODE; ] DEFINES TEXT COLOR, FOUND INSIDE [ STYLE="" ]
[ COLOR: INHERIT; ] DEFINES A DEFAULT TEXT COLOR, FOUND INSIDE [ STYLE="" ]
[ BACKGROUND-COLOR: #HEXCODE; ] DEFINES BACKGROUND COLOR, FOUND INSIDE [ STYLE="" ]
TEXT-MUTED / TEXT-WHITE / TEXT-DARK WILL BE FOUND INSIDE [ CLASS="" ]
TAKE ADVANTAGE OF CTRL+F AND THE REPLACE FEATURE
EDITING ONE BY ONE WILL TAKE FOREVER 😩
==================================================================
CREDITS
> HTML TH@ACodingPerson
> ship meme layout: https://x.com/Gibb_Arts/status/1231018186255912961 (X@Gibb_Arts)
> yellow flower: https://www.deviantart.com/kiwicide/art/F2U-Rose-Icon-Yellow-And-White-742598842 (DA@Kiwicide)
> red flower: https://www.deviantart.com/kiwicide/art/F2U-Rose-Icon-Red-and-White-472502324 (DA@Kiwicide)
> placeholder images: https://unsplash.com/
> inspirations:
- https://toyhou.se/9632987.f2u-all-about-us (TH@Sealkitty)
- https://toyhou.se/14948703.20questionnaire-f2u (TH@Leporidebug)
- https://toyhou.se/14686665.7-our-story (TH@ChiiAka)
- https://toyhou.se/23908043.otp (TH@Codigo)
THIS CODE WAS NOT TESTED IN CIRCLEJOURNEY.
THIS CODE MAY BREAK WHEN USED OFFSITE.
THIS CODE WILL BREAK WHEN USED WITH WYSIWYG.
reminder to read my tos :3 -> https://toyhou.se/~bulletins/491483.global-tos
leave a comment!! <33 -> https://toyhou.se/~forums/16.htmlcss-graphics/245374.the-codes-of-a-person-acp-s-coding-thread
THANK YOU FOR USING <3
---------------------------->
<!-- CODE BEGINS (YAY!!!!!!!!!!!!) -->
<!-- ADD BACKGROUND-IMAGE AND/OR BACKGROUND-COLOR IF WANTED -->
<div class="p-lg-5 p-3" style="
background-color: rgba(0,0,0,0);
background-image: url(
#
);">
<div class="row">
<!-- =========================================
------
CHARACTER 1 INFORMATION (LEFT COLUMN)
------
========================================== -->
<div class="col-md-3 order-md-1">
<div class="sticky-top py-2" style="min-height: 100vh;">
<div class="align-items-center justify-content-center flex-column">
<!-- CHARACTER 1 HEADER |-----------|-->
<div class="row no-gutters align-items-end w-100 mb-2">
<div class="col" style="font-family: Century gothic; font-size: 23px;"><a
href="PUT_LINK_TO_CHARACTER_HERE"
style="color: #e4c9a7; text-decoration: none;" target="_blank">
Name.
</a><hr class="w-100 m-0" style="border-width: 2px;"></div>
<div class="col-auto pl-2">
<!-- ICON ( change [ fal fa-seedling ] )-->
<i class="
fal fa-seedling
mb-n2" style="color: #e4c9a7;"></i></div>
</div>
<!--|-----------| END CHARACTER 1 HEADER -->
<!-- CHARACTER 1 AVATAR |-----------|-->
<!-- ( change the link to the image address of character ) -->
<div class="card rounded-0 w-100 align-items-center justify-content-center mt-3" style="min-height: 240px; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);">
<!-- decor --> <div style="position: absolute; top: 0; left: 0;"><div class="card bg-transparent rounded-0 border-bottom-0 border-right-0 m-2" style="height: 25px; width: 25px; border-color: #fff;"></div></div>
</div>
<!--|-----------| END CHARACTER 1 AVATAR -->
<!-- CHARACTER 1 DECOR |-----------|-->
<div class="card d-flex rounded-0 border-0 bg-transparent w-100">
<div class="row no-gutters flex-fill my-3 w-100" style="min-height: 30px;">
<!-- rectangle 1 --> <div class="col-1"><div class="h-100" style="background-color: #e4c9a7;"></div></div>
<!-- rectangle 2 --> <div class="col-2 pl-2"><div class="h-100" style="background-color: #e4c9a7;"></div></div>
<!-- IMAGE --> <div class="col-9 pl-2">
<div class="card rounded-0 h-100" style="background-image: url(
https://images.unsplash.com/photo-1470329232586-be87fbad2e0b?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
); background-size: cover; background-position: center center;"></div> <!-- (replace link ) -->
</div>
</div>
</div>
<!--|-----------| END CHARACTER 1 DECOR -->
<!-- ----------------------------
CHARACTER 1 INFO BLOCK
----------------------------- -->
<div class="w-100" style="overflow: none;">
<div class="card rounded-0 bg-transparent p-2">
<div class="card rounded-0 w-100 p-3" style="scrollbar-width: none; height: 250px; overflow-y: auto;">
<div class="tab-content h-100">
<!-- TAB 1 +++++++++++++++++++++++ -->
<div class="tab-pane fade active show h-100" id="c-one_one">
<!-- icon --> <div class="m-2" style="position: absolute; top: 0; left: 0;"><i class="fal fa-quote-left fa-3x" style="opacity: 0.5; color: #e4c9a7;"></i></div>
<div class="mx-auto h-100 justify-content-center align-items-center font-italic text-muted text-center small" style="width: 70%; letter-spacing: 1px;">
<!-- QUOTE -->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti cupiditate quis possimus porro natus quidem accusantium temporibus earum autem suscipit!
</div>
<!-- icon --> <div class="m-2" style="position: absolute; bottom: 0; right: 0;"><i class="fal fa-quote-right fa-3x" style="opacity: 0.5; color: #e4c9a7;"></i></div>
</div>
<!-- ------------------- END TAB 1 -->
<!-- TAB 2 +++++++++++++++++++++++ -->
<div class="tab-pane fade h-100" id="c-one_two">
<!-- copy-paste the following:
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
INFO
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
-->
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
Pet Names
</div>
<div class="col-8 pl-3 text-right">
content, content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
Orientation
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
Gender
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
Pronouns
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #e4c9a7; font-variant: small-caps;">
Demeanor
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<!-- ADD MORE ABOVE THIS LINE -->
</div>
<!-- ------------------- END TAB 2 -->
<!-- TAB 3 +++++++++++++++++++++++ -->
<div class="tab-pane fade pb-3" id="c-one_three">
<div style="letter-spacing: 0.5px; font-size: 13px;">
<!-- CHARACTER INFORMATION BLURB -->
<p><span class="font-weight-bold" style="color: #e4c9a7; font-size: 18px; font-family: Century gothic;"><!-- first letter -->L</span><span style="color: #e4c9a7;"><!-- text in color -->orem ipsum dolor sit amet consectetur</span><!-- rest of text --> adipisicing elit. Tempora aperiam, veniam officiis natus architecto pariatur, delectus vel harum consequuntur repellat ratione libero labore, maiores doloribus eveniet in consectetur ea esse!</p>
<!-- ADD MORE ABOVE THIS LINE -->
<!-- copy paste the following if you want more information:
<p> [] </p>
-->
</div>
</div>
<!-- ------------------- END TAB 3 -->
</div>
</div>
</div>
</div>
<!-- ////// END CHARACTER 1 INFO BLOCK ------------- -->
<!-- NAV ---- --> <div class="row no-gutters mt-3 w-100">
<ul class="nav flex-row w-100 row no-gutters">
<li class="nav-item col"><div class="card rounded-0 h-100" style="background-color:#e4c9a7;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-one_one" data-toggle="tab" class="px-2" style="color:#e4c9a7;"><i class="fal fa-1"></i></a></li>
<li class="nav-item col-auto"><div class="card rounded-0 h-100 px-2" style="background-color:#e4c9a7;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-one_two" data-toggle="tab" class="px-2" style="color:#e4c9a7;"><i class="fal fa-2"></i></a></li>
<li class="nav-item col-auto"><div class="card rounded-0 h-100 px-2" style="background-color:#e4c9a7;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-one_three" data-toggle="tab" class="px-2" style="color:#e4c9a7;"><i class="fal fa-3"></i></a></li>
<li class="nav-item col"><div class="card rounded-0 h-100" style="background-color:#e4c9a7;"></div></li>
</ul>
</div> <!-- ---- END NAV -->
</div>
</div>
</div>
<!-- ======== END CHARACTER 1 INFORMATION ========= -->
<!---------------------------------------------------->
<!-- =========================================
------
CHARACTER 2 INFORMATION (RIGHT COLUMN)
------
========================================== -->
<div class="col-md-3 order-md-3 pt-lg-0 pt-5">
<div class="sticky-top py-2" style="min-height: 100vh;">
<div class="align-items-center justify-content-center flex-column">
<!-- CHARACTER 2 HEADER |-----------|-->
<div class="row no-gutters align-items-end w-100 mb-2">
<div class="col" style="font-family: Century gothic; font-size: 23px;"><a
href="PUT_LINK_TO_CHARACTER_HERE"
style="color: #873939; text-decoration: none;" target="_blank">
Name.
</a><hr class="w-100 m-0" style="border-width: 2px;"></div>
<div class="col-auto pl-2">
<!-- ICON ( change [ fal fa-trillium ] )-->
<i class="
fal fa-trillium
mb-n2" style="color: #873939;"></i></div>
</div>
<!--|-----------| END CHARACTER 2 HEADER -->
<!-- CHARACTER 2 AVATAR |-----------|-->
<!-- ( change the link to the image address of character ) -->
<div class="card rounded-0 w-100 align-items-center justify-content-center mt-3" style="min-height: 240px; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);">
<!-- decor --> <div style="position: absolute; top: 0; left: 0;"><div class="card bg-transparent rounded-0 border-bottom-0 border-right-0 m-2" style="height: 25px; width: 25px; border-color: #fff;"></div></div>
</div>
<!--|-----------| END CHARACTER 2 AVATAR -->
<!-- CHARACTER 2 DECOR |-----------|-->
<div class="card d-flex rounded-0 border-0 bg-transparent w-100">
<div class="row no-gutters flex-fill my-3 w-100 flex-row-reverse" style="min-height: 30px;">
<!-- rectangle 1 --> <div class="col-1"><div class="h-100" style="background-color: #873939;"></div></div>
<!-- rectangle 2 --> <div class="col-2 pr-2"><div class="h-100" style="background-color: #873939;"></div></div>
<!-- IMAGE --> <div class="col-9 pr-2">
<div class="card rounded-0 h-100" style="background-image: url(
https://images.unsplash.com/photo-1496062031456-07b8f162a322?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
); background-size: cover; background-position: center center;"></div> <!-- (replace link ) -->
</div>
</div>
</div>
<!--|-----------| END CHARACTER 2 DECOR -->
<!-- ----------------------------
CHARACTER 2 INFO BLOCK
----------------------------- -->
<div class="w-100" style="overflow: none;">
<div class="card rounded-0 bg-transparent p-2">
<div class="card rounded-0 w-100 p-3" style="scrollbar-width: none; height: 250px; overflow-y: auto;">
<div class="tab-content h-100">
<!-- TAB 1 +++++++++++++++++++++++ -->
<div class="tab-pane fade active show h-100" id="c-two_one">
<!-- icon --> <div class="m-2" style="position: absolute; top: 0; right: 0;"><i class="fal fa-quote-right fa-3x" style="opacity: 0.5; color: #873939;"></i></div>
<div class="mx-auto h-100 justify-content-center align-items-center font-italic text-muted text-center small" style="width: 70%; letter-spacing: 1px;">
<!-- QUOTE -->
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti cupiditate quis possimus porro natus quidem accusantium temporibus earum autem suscipit!
</div>
<!-- icon --> <div class="m-2" style="position: absolute; bottom: 0; left: 0;"><i class="fal fa-quote-left fa-3x" style="opacity: 0.5; color: #873939;"></i></div>
</div>
<!-- ------------------- END TAB 1 -->
<!-- TAB 2 +++++++++++++++++++++++ -->
<div class="tab-pane fade h-100" id="c-two_two">
<!-- copy-paste the following:
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
INFO
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
-->
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
Pet Names
</div>
<div class="col-8 pl-3 text-right">
content, content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
Orientation
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
Gender
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
Pronouns
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<div class="row no-gutters my-2">
<div class="col-4 font-weight-bold text-lowercase" style="color: #873939; font-variant: small-caps;">
Demeanor
</div>
<div class="col-8 pl-3 text-right">
content
</div>
</div><hr class="mx-n3">
<!-- ADD MORE ABOVE THIS LINE -->
</div>
<!-- ------------------- END TAB 2 -->
<!-- TAB 3 +++++++++++++++++++++++ -->
<div class="tab-pane fade pb-3" id="c-two_three">
<div style="letter-spacing: 0.5px; font-size: 13px;">
<!-- CHARACTER INFORMATION BLURB -->
<p><span class="font-weight-bold" style="color: #873939; font-size: 18px; font-family: Century gothic;"><!-- first letter -->L</span><span style="color: #873939;"><!-- text in color -->orem ipsum dolor sit amet consectetur</span><!-- rest of text --> adipisicing elit. Tempora aperiam, veniam officiis natus architecto pariatur, delectus vel harum consequuntur repellat ratione libero labore, maiores doloribus eveniet in consectetur ea esse!</p>
<!-- ADD MORE ABOVE THIS LINE -->
<!-- copy paste the following if you want more information:
<p> [] </p>
-->
</div>
</div>
<!-- ------------------- END TAB 2 -->
</div>
</div>
</div>
</div>
<!-- ////// END CHARACTER 1 INFO BLOCK ------------- -->
<!-- NAV ---- --> <div class="row no-gutters mt-3 w-100">
<ul class="nav flex-row w-100 row no-gutters">
<li class="nav-item col"><div class="card rounded-0 h-100" style="background-color:#873939;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-two_one" data-toggle="tab" class="px-2" style="color:#873939;"><i class="fal fa-1"></i></a></li>
<li class="nav-item col-auto"><div class="card rounded-0 h-100 px-2" style="background-color:#873939;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-two_two" data-toggle="tab" class="px-2" style="color:#873939;"><i class="fal fa-2"></i></a></li>
<li class="nav-item col-auto"><div class="card rounded-0 h-100 px-2" style="background-color:#873939;"></div></li>
<li class="nav-item m-1 col-auto"><a href="#c-two_three" data-toggle="tab" class="px-2" style="color:#873939;"><i class="fal fa-3"></i></a></li>
<li class="nav-item col"><div class="card rounded-0 h-100" style="background-color:#873939;"></div></li>
</ul>
</div> <!-- ---- END NAV -->
</div>
</div>
</div>
<!-- ======== END CHARACTER 2 INFORMATION ========= -->
<!---------------------------------------------------->
<!-- =================== -->
<!-- =========================================
------
MAIN CONTENT (MIDDLE COLUMN)
------
========================================== -->
<div class="col-md-6 order-md-2 pt-lg-0 pt-5">
<!-----------------------
HEADER SECTION
------------------------>
<div>
<!----------------- SHIP NAME ------------------>
<div class="mt-lg-5 text-center" style="font-size: 40px; font-family: Century gothic;">
<span style="color: #873939;">ship</span>
<span style="color: #e4c9a7;">name</span>
</div>
<!----------------- RELATIONSHIP STATUS ------------------>
<div class="text-muted small text-center text-uppercase" style="letter-spacing: 0.5px;">
relationship status
</div>
</div>
<!-------------- END HEADER SECTION ------------------>
<!-----------------------
THOUGHTS SECTION
------------------------>
<div class="pt-3">
<!-----------------
CHARACTER 1'S THOUGHTS ON CHARACTER 2 ------------------>
<div class="p-3 my-3 mr-lg-4" style="
color: #000; /* text color */;
background-color: #e4c9a7; /* background color */;
font-size: 12.5px; letter-spacing: 1px; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 75%, 15% 100%, 25% 75%, 0% 75%);"><div class="mb-5">
<!-- WRITE HERE -->
<p>Can be IC or OOC. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente nisi odio consectetur libero doloremque provident similique, aliquam numquam laborum consequatur et rem qui dolores fuga corrupti non minima cum ipsam?</p>
<!-- remember to always use <p>[text]</p> when starting a new paragraph -->
</div></div>
<!-- END -->
<!-----------------
CHARACTER 2'S THOUGHTS ON CHARACTER 1 ------------------>
<div class="p-3 my-3 ml-lg-4" style="
color: #fff; /* text color */;
background-color: #873939; /* background color */;
font-size: 12.5px; letter-spacing: 1px; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 85% 100%, 50% 75%, 0% 75%);"><div class="mb-5">
<!-- WRITE HERE -->
<p>Can be IC or OOC. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sapiente nisi odio consectetur libero doloremque provident similique, aliquam numquam laborum consequatur et rem qui dolores fuga corrupti non minima cum ipsam?</p>
<!-- remember to always use <p>[text]</p> when starting a new paragraph -->
</div></div>
<!-- END -->
</div>
<!-------------- END THOUGHTS SECTION ------------------>
<!-----------------------
LOVE LANGUAGES
------------------------>
<div class="row no-gutters mx-n2 mt-4 mb-3 pb-lg-0 pb-3">
<!-- CHARACTER 1 LOVE LANGUAGE --------------------------->
<div class="col-lg-6 px-2 pb-lg-0 pb-2">
<p class="pl-2 m-0 small w-100 text-left">
<!-- HEADER -->
LOVE LANGUAGE
</p>
<div class="card bg-faded rounded-0 px-4 py-2 text-center" style="color: #e4c9a7; font-weight: 500;">
<!-- EDIT THIS -->
love language
</div>
</div>
<!-- END -->
<!-- CHARACTER 2 LOVE LANGUAGE --------------------------->
<div class="col-lg-6 px-2">
<p class="pr-2 m-0 small w-100 text-right">
<!-- HEADER -->
LOVE LANGUAGE
</p>
<div class="card bg-faded rounded-0 px-4 py-2 text-center" style="color: #873939; font-weight: 500;">
<!-- EDIT THIS -->
love language
</div>
</div>
<!-- END -->
</div>
<!-------------- END LOVE LANGUAGES SECTION ------------------>
<!-----------------------
AGE DIFFERENCE
------------------------>
<div class="row no-gutters mx-n2 mt-3 mb-3 align-items-center pb-lg-0 pb-3">
<!-- CHARACTER 1 AGE --------------------------->
<div class="col-lg-4 px-2 pb-lg-0 pb-2">
<p class="pl-2 m-0 small">
<!-- HEADER -->
AGE
</p>
<div class="card rounded-0 px-4 py-2 text-center" style="color: #e4c9a7; font-weight: 500;">
<!-- EDIT HERE -->
age
</div>
</div>
<!-- END -->
<!-- DIFFERENCE ------------------->
<div class="col px-2 pb-lg-0 pb-2">
<p class="pl-2 m-0 small text-center">
<!-- HEADER -->
dif.
</p>
<div class="card rounded-0 px-4 py-2 text-center" style="color: #b68170; font-weight: 500;">
<!-- EDIT HERE -->
...
</div>
</div>
<!-- END -->
<!-- CHARACTER 2 AGE --------------------------->
<div class="col-lg-4 px-2">
<p class="pr-2 m-0 small w-100 text-right">
<!-- HEADER -->
AGE
</p>
<div class="card bg-faded rounded-0 px-4 py-2 text-center" style="color: #873939; font-weight: 500;">
<!-- EDIT HERE -->
age
</div>
</div>
<!-- END -->
</div>
<!-------------- END AGE DIFFERENCE SECTION ------------------>
<!-----------------------
HEIGHT DIFFERENCE
------------------------>
<div class="row no-gutters mx-n2 mt-3 mb-2 align-items-center">
<!-- CHARACTER 1 HEIGHT --------------------------->
<div class="col-lg-5 px-2 pb-lg-0 pb-2">
<p class="pl-2 m-0 small">
<!-- HEADER -->
HEIGHT
</p>
<div class="card rounded-0 px-4 py-2 text-center" style="color: #e4c9a7; font-weight: 500;">
<!-- EDIT HERE -->
height
</div>
</div>
<!-- END -->
<!-- DIFFERENCE ------------------->
<div class="col px-2 pb-lg-0 pb-2">
<p class="pl-2 m-0 small text-center">
<!-- HEADER -->
dif.
</p>
<div class="card rounded-0 px-4 py-2 text-center" style="color: #b68170; font-weight: 500;">
<!-- EDIT HERE -->
...
</div>
</div>
<!-- END -->
<!-- CHARACTER 2 HEIGHT --------------------------->
<div class="col-lg-5 px-2">
<p class="pr-2 m-0 small w-100 text-right">
<!-- HEADER -->
HEIGHT
</p>
<div class="card bg-faded rounded-0 px-4 py-2 text-center" style="color: #873939; font-weight: 500;">
<!-- EDIT HERE -->
height
</div>
</div>
<!-- END -->
</div>
<!-------------- END HEIGHT SECTION ------------------>
<!-----------------------
------------------
BAR GRAPHS
SECTION
------------------
------------------------>
<div class="pt-4">
<div class="row no-gutters w-100 mx-n2 flex-lg-row flex-column align-items-center">
<!-- HORNY LEVEL -------------------------->
<div class="col-4 px-lg-2 pb-lg-0 pb-3">
<div class="flex-row align-items-end justify-content-center" style="height: 200px;">
<!-- CHARACTER 1 LVL --> <div class="card rounded-0 mx-2" style="background-color: #e4c9a7;
height: 50%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
<!-- CHARACTER 2 LVL --> <div class="card rounded-0 mx-2" style="background-color: #873939;
height: 75%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
</div>
<div class="card bg-transparent rounded-0 mt-2 border-right-0 border-left-0 border-bottom-0 p-2 text-center" style="letter-spacing: 1px;">
<!-- HEADER -->
HORNY LEVEL
</div>
</div>
<!-- END HORNY LEVEL --------------------->
<!-- AWKWARDNESS LEVEL -------------------------->
<div class="col-4 px-lg-2 pb-lg-0 pb-3">
<div class="flex-row align-items-end justify-content-center" style="height: 200px;">
<!-- CHARACTER 1 LVL --> <div class="card rounded-0 mx-2" style="background-color: #e4c9a7;
height: 40%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
<!-- CHARACTER 2 LVL --> <div class="card rounded-0 mx-2" style="background-color: #873939;
height: 85%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
</div>
<div class="card bg-transparent rounded-0 mt-2 border-right-0 border-left-0 border-bottom-0 p-2 text-center" style="letter-spacing: 1px;">
<!-- HEADER -->
AWKWARDNESS
</div>
</div>
<!-- END AWKWARDNESS LEVEL --------------------->
<!-- JEALOUSY LEVEL -------------------------->
<div class="col-4 px-lg-2 pb-lg-0 pb-3">
<div class="flex-row align-items-end justify-content-center" style="height: 200px;">
<!-- CHARACTER 1 LVL --> <div class="card rounded-0 mx-2" style="background-color: #e4c9a7;
height: 100%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
<!-- CHARACTER 2 LVL --> <div class="card rounded-0 mx-2" style="background-color: #873939;
height: 70%; /* edit the number */;
width: 30px;"></div>
<!-- / -->
</div>
<div class="card bg-transparent rounded-0 mt-2 border-right-0 border-left-0 border-bottom-0 p-2 text-center" style="letter-spacing: 1px;">
<!-- HEADER -->
JEALOUSY LEVEL
</div>
</div>
<!-- END JEALOUSY LEVEL --------------------->
<!-- ADD MORE ABOVE THIS LINE -->
<!-- copy paste this:
<div class="col-4 px-lg-2 pb-lg-0 pb-3">
<div class="flex-row align-items-end justify-content-center" style="height: 200px;">
<div class="card rounded-0 mx-2" style="background-color: #e4c9a7;
height: 50%; /* edit the number | char 1 */;
width: 30px;"></div>
<div class="card rounded-0 mx-2" style="background-color: #873939;
height: 50%; /* edit the number | char 2 */;
width: 30px;"></div>
</div>
<div class="card bg-transparent rounded-0 mt-2 border-right-0 border-left-0 border-bottom-0 p-2 text-center" style="letter-spacing: 1px;">
____ LEVEL
</div>
</div>
-->
</div>
</div>
<!-----------------------------------------------
------------- END GRAPHS SECTION ----------------
------------------------------------------------>
<!-----------------------
------------------
DYNAMICS
SECTION
------------------
------------------------>
<div class="pt-4">
<!-- IF YOU DON'T WANT IMAGES
replace every CHARACTER 1 image with:
<i class="
fas fa-circle
"
style="position: absolute; height: 15px; width: 15px; border-radius: 50%;
left: 20%; /* change value */;
color: [ACCENT_COLOR];
margin-bottom: -2px;"></i>
replace every CHARACTER 2 image with:
<i class="
fas fa-circle
"
style="position: absolute; height: 15px; width: 15px; border-radius: 50%;
right: 80%; /* change value */;
color: [ACCENT_COLOR];
margin-bottom: -2px;"></i>
you can change the icon to anything you'd like.
-->
<!-- BIG SPOON / LITTLE SPOON ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
BIG SPOON
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
LITTLE SPOON
</div>
</div>
<!----------------- ///// ------------------>
<!-- LENDS CLOTHES / BORROWS CLOTHES ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #b68170; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
LENDS CLOTHES
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 80%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: inherit; /* color of the text below */;
font-weight: 400; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
BORROWS CLOTHES
</div>
</div>
<!----------------- ///// ------------------>
<!-- LOVES PET NAMES / HATES PET NAMES ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
LOVES PET NAMES
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 80%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 80%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
HATES PET NAMES
</div>
</div>
<!----------------- ///// ------------------>
<!-- CONFESSES FIRST / WAITS FOR CONFESSION ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
CONFESSES FIRST
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
WAITS FOR CONFESSION
</div>
</div>
<!----------------- ///// ------------------>
<!-- BURNS DOWN KITCHEN / MAKES DINNER ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
BURNS DOWN KITCHEN
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
MAKES DINNER
</div>
</div>
<!----------------- ///// ------------------>
<!-- DESIGNATED DRIVER / CRASHES CAR ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
DESIGNATED DRIVER
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
CRASHES CAR
</div>
</div>
<!----------------- ///// ------------------>
<!-- HISSES AND SCRATCHES / DESIGNATED PDA GIVER ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
HISSES AND SCRATCHES
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
DESIGNATED PDA-GIVER
</div>
</div>
<!----------------- ///// ------------------>
<!-- WEAK FOR PARTNER / RESOLUTE ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
WEAK FOR PARTNER
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
RESOLUTE
</div>
</div>
<!----------------- ///// ------------------>
<!-- INTENSE / COULDN'T CARE LESS ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
INTENSE
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
COULDN'T CARE LESS
</div>
</div>
<!----------------- ///// ------------------>
<!-- PARANOID / CHILL ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
PARANOID
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
CHILL
</div>
</div>
<!----------------- ///// ------------------>
<!-- INTROVERT / EXTROVERT ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
INTROVERT
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
EXTROVERT
</div>
</div>
<!----------------- ///// ------------------>
<!-- MORE RELATIONSHIP EXPERIENCE / NO RELATIONSHIP EXPERIENCE ------------------>
<div class="row no-gutters align-items-center w-100 my-4" style="letter-spacing: 0.8px;">
<div class="col-3 text-uppercase text-center" style="
color: #e4c9a7; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
MORE RELATIONSHIP EXP.
</div>
<div class="col-6 px-2">
<div class="card bg-transparent rounded-0 border-top-0 border-bottom-0 align-items-center justify-content-center" style="height: 30px;">
<!-- line --> <div class="card bg-transparent p-0 w-100 rounded-0 border-left-0 border-right-0"></div>
<!-- CHARACTER 1 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890198_ORhMlM0AL5FuNJI.png"
style="
position: absolute; height: 35px;
left: 20%; /* change value | this will move the image to the right */;
">
<!-- END CHARACTER 1 IMAGE -->
<!-- CHARACTER 2 IMAGE -->
<!-- change the link inside the [ src="" ] -->
<img
src="https://f2.toyhou.se/file/f2-toyhou-se/images/83890195_vsY4eC1URm5xBqu.png"
style="position: absolute; height: 35px;
right: 20%; /* change value | this will move the image to the left */;
">
<!-- END CHARACTER 2 IMAGE -->
</div>
</div>
<div class="col-3 text-uppercase text-center" style="
color: #873939; /* color of the text below */;
font-weight: 500; /* 500 is bold, 400 is not bold */;
">
<!-- EDIT THIS IF NEEDED -->
NO RELATIONSHIP EXP.
</div>
</div>
<!----------------- ///// ------------------>
<!-- ADD MORE ABOVE THIS LINE | COPY PASTE ONE OF THE ABOVE -->
</div>
<!-----------------------------------------------
----------- END DYNAMICS SECTION ----------------
------------------------------------------------>
<!-----------------------
------------------
PLAYLIST
SECTION
------------------
------------------------>
<div class="pt-4">
<div class="card bg-transparent rounded-0 p-3">
<!-- MUSIC ------------------>
<div class="card rounded-0 border-bottom-0 w-100 text-center" style="overflow: hidden;">
<i class="fa-thin fa-compact-disc fa-7x fa-spin" style="color: #b68170; margin-top: -0.5em;"></i>
<!-------
replace ( PUT_EMBED_HERE ) with YouTube ID of song ( found after https://www.youtube.com/watch?v= )
keep ( ?controls=0 ) at the end
------->
<iframe
src="https://www.youtube.com/embed/PUT_EMBED_HERE?controls=0"
frameborder="0" style="position: absolute; opacity: 0; height: 2000px; width: 2000px; z-index: 420;"></iframe>
<div class="p-4">
<div class="pt-2" style="font-family: Century gothic; font-size: 25px; font-weight: 600; color: #b68170;">
SONG NAME
</div>
<div class="text-lowercase pb-2" style="font-variant: small-caps;">
artist
</div>
</div>
</div>
<!----------------- END MUSIC -->
<!-- button --> <a class="btn btn-secondary py-1 border-0 h-100 w-100 text-center" data-toggle="collapse" href="#collapse_playlist" aria-expanded="false" style="
color: #fff;
background: linear-gradient(to right, #e4c9a7 50%, #873939 50%);
border-radius: 0;">
<i class="far fa-angle-down"></i>
</a> <!-- /button -->
</div>
<!-- LIST OF SONGS ------------------>
<div class="collapse" id="collapse_playlist">
<div class="card rounded-0 border-top-0 p-3 mx-2">
<!-- 1 -------------------------->
<div class="row no-gutters">
<div class="col-1">
<a
href="LINK_HERE"> <!-- CHANGE LINK -->
<i class="fal fa-play-pause" style="color: #b68170;"></i></a>
</div>
<div class="col px-2">
SONG TITLE
<span class="pl-2 small faded">
artist
</span>
</div>
</div> <!-- END -->
<hr class="w-100">
<!-- 2 -------------------------->
<div class="row no-gutters">
<div class="col-1">
<a
href="LINK_HERE"> <!-- CHANGE LINK -->
<i class="fal fa-play-pause" style="color: #b68170;"></i></a>
</div>
<div class="col px-2">
SONG TITLE
<span class="pl-2 small faded">
artist
</span>
</div>
</div> <!-- END -->
<hr class="w-100">
<!-- 3 -------------------------->
<div class="row no-gutters">
<div class="col-1">
<a
href="LINK_HERE"> <!-- CHANGE LINK -->
<i class="fal fa-play-pause" style="color: #b68170;"></i></a>
</div>
<div class="col px-2">
SONG TITLE
<span class="pl-2 small faded">
artist
</span>
</div>
</div> <!-- END -->
<!-- ADD MORE ABOVE THIS LINE
> | BE SURE TO HAVE [ <hr class="w-100"> ] AFTER UNLESS IT'S THE LAST ONE -->
<!-- copy paste:
<div class="row no-gutters">
<div class="col-lg-1">
<a
href="LINK_HERE">
<i class="fal fa-play-pause" style="color: #b68170;"></i></a>
</div>
<div class="col px-2">
SONG TITLE
<span class="pl-2 small faded">artist</span>
</div>
</div>
<hr class="w-100">
-->
</div>
</div>
<!----------------- END LIST OF SONGS -->
</div>
<!-----------------------------------------------
----------- END PLAYLIST SECTION ----------------
------------------------------------------------>
<!-----------------------
------------------
PREFERENCES
SECTION
------------------
------------------------>
<div class="pt-5">
<!-- LIKES ------------------>
<div class="row no-gutters mx-n2 my-1">
<!--
CHARACTER 1 LIKES
-->
<div class="col-lg-6 p-2 pr-lg-3 pr-2 row no-gutters">
<div class="col-auto pr-3"><div class="card h-100 rounded-0 p-2" style="
background-color: #e4c9a7;
color: #fff;
"><i class="fal fa-heart"></i></div></div>
<div class="col text-justify"><div class="py-1">
<!-- 1 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> FOOD </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 2 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> MUSIC </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 3 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> SEASON </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 4 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> ANIMAL </p>
content.
</div>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE | BE SURE TO REMOVE [ <hr class="w-100"> ] AT THE END -->
</div></div>
</div>
<!------ END CHARACTER 1 LIKES ------->
<!--
CHARACTER 2 LIKES
-->
<div class="col-lg-6 p-2 pl-lg-3 pl-2 row no-gutters">
<div class="col-auto pr-3"><div class="card h-100 rounded-0 p-2" style="
background-color: #873939;
color: #fff;
"><i class="fal fa-heart"></i></div></div>
<div class="col text-justify"><div class="py-1">
<!-- 1 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> FOOD </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 2 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> MUSIC </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 3 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> SEASON </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 4 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> ANIMAL </p>
content.
</div>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE | BE SURE TO REMOVE [ <hr class="w-100"> ] AT THE END -->
</div></div>
</div>
<!------ END CHARACTER 2 LIKES ------->
</div>
<!---------------- END LIKES -->
<!-- DISLIKES ---------------->
<div class="row no-gutters mx-n2 my-1">
<!--
CHARACTER 1 DISLIKES
-->
<div class="col-lg-6 p-2 pr-lg-3 pr-2 row no-gutters">
<div class="col-auto pr-3"><div class="card h-100 rounded-0 p-2" style="
background-color: #e4c9a7;
color: #fff;
"><i class="fal fa-heart-crack"></i></div></div>
<div class="col text-justify"><div class="py-1">
<!-- 1 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> FOOD </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 2 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> MUSIC </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 3 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> SEASON </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 4 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> ANIMAL </p>
content.
</div>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE | BE SURE TO REMOVE [ <hr class="w-100"> ] AT THE END -->
</div></div>
</div>
<!------ END CHARACTER 1 DISLIKES ------->
<!--
CHARACTER 2 DISLIKES
-->
<div class="col-lg-6 p-2 pl-lg-3 pl-2 row no-gutters">
<div class="col-auto pr-3"><div class="card h-100 rounded-0 p-2" style="
background-color: #873939;
color: #fff;
"><i class="fal fa-heart-crack"></i></div></div>
<div class="col text-justify"><div class="py-1">
<!-- 1 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> FOOD </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 2 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> MUSIC </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 3 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> SEASON </p>
content.
</div><hr class="w-100">
<!-- / -->
<!-- 4 -->
<div class="py-2">
<p class="small" style="letter-spacing: 1px;"> ANIMAL </p>
content.
</div>
<!-- / -->
<!-- ADD MORE ABOVE THIS LINE | BE SURE TO REMOVE [ <hr class="w-100"> ] AT THE END -->
</div></div>
</div>
<!------ END CHARACTER 2 DISLIKES ------->
</div>
<!---------------- END DISLIKES -->
</div>
<!-----------------------------------------------
----------- END PREFERENCES SECTION -------------
------------------------------------------------>
<!-----------------------
------------------
Q&A
SECTION
------------------
------------------------>
<div class="pt-1">
<!--------------- BEGIN Q1 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-1"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
How did you meet?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q1 ------------------>
<!--------------- BEGIN Q2 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-2"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
What were your first impressions of each other?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q2 ------------------>
<!--------------- BEGIN Q3 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-3"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
What do you like and dislike the most about each other?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q3 ------------------>
<!--------------- BEGIN Q4 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-4"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
What is your most memorable time together?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q4 ------------------>
<!--------------- BEGIN Q5 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-5"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
What was your first date like?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q5 ------------------>
<!--------------- BEGIN Q6 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-6"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
Do you fight often? Over what?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q6 ------------------>
<!--------------- BEGIN Q7 ----------------->
<div class="py-3">
<!-- QUESTION ============= -->
<div class="row no-gutters" style="font-size: 27px;">
<div class="col-12"><hr class="my-3"></div>
<div class="col-2" style="color: #b68170;">
<i class="fal fa-0"></i><!-- replace the number -->
<i class="fal fa-7"></i><!-- replace the number --> .
</div>
<div class="col pl-2" style="font-family: Century gothic;">
<!-- EDIT HERE -->
Any thoughts for the future?
</div>
<div class="col-12"><hr class="my-3"></div>
</div>
<!-- ============= END QUESTION -->
<!--
====
CHARACTER 1 ANSWER
====
-->
<div class="row no-gutters py-1">
<div class="col-2 pr-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1630874037882-5e7f2a18b209?q=80&w=1780&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-270 mr-n1 mt-4 pt-1" style="color: #e4c9a7;"></i></div>
<div class="col">
<div class="card rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 1 ANSWER ==== -->
<!--
====
CHARACTER 2 ANSWER
====
-->
<div class="row no-gutters flex-row-reverse py-1">
<div class="col-2 pl-3 justify-content-center">
<div class="card justify-content-center align-items-center" style="height: 65px; width: 65px; border-radius: 50%;">
<!-- CHANGE THE LINK BELOW -->
<div style="height: 55px; width: 55px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1439122955805-cbac26b73f3b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
</div>
<div class="col-lg-9 col">
<div class="row no-gutters flex-row-reverse mb-2">
<div class="col-auto"><!-- icon | do not change --><i class="fa-solid fa-triangle fa-rotate-90 ml-n1 mt-4 pt-1" style="color: #873939;"></i></div>
<div class="col">
<div class="card bg-faded rounded-0 p-3 text-justify" style="font-size: 12.5px;">
<!-- EDIT HERE -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia aperiam rerum error praesentium, quo doloremque fuga, magni consectetur similique consequatur quasi recusandae sit ipsum quae et atque reiciendis. Expedita, quisquam!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, consequatur! Suscipit unde delectus similique quis, accusantium sint ratione, vero iste ullam, animi cupiditate eaque earum. Obcaecati delectus accusamus praesentium quibusdam!
</p>
<!-- add more [ <p>...</p> ] above this line -->
</div>
</div>
</div>
</div>
</div>
<!-- ==== END CHARACTER 2 ANSWER ==== -->
</div>
<!---------------- END Q7 ------------------>
<!-- ADD MORE ABOVE THIS LINE | COPY AND PASTE ONE OF THE ABOVE -->
</div>
<!-----------------------------------------------
--------------- END Q&A SECTION -----------------
------------------------------------------------>
<!-----------------------
------------------
MUTUAL RELATIONS
SECTION
------------------
(MUTUAL RELATIONSHIPS)
------------------------>
<div class="pt-4">
<div class="row no-gutters py-2">
<div class="col"><div class="card rounded-0 h-100" style="background-color: #e4c9a7;"></div></div>
<div class="col-auto px-4 text-uppercase" style="font-size: 20px; font-family: Century gothic; font-weight: 600; color: #b68170; letter-spacing: 1px;">
<span style="color: #e4c9a7;">Mutual</span>
<span style="color: #873939;">Relations</span>
</div>
<div class="col"><div class="card rounded-0 h-100" style="background-color: #873939;"></div></div>
</div>
<div class="row no-gutters justify-content-center">
<!-- BEGIN (BIG) RELATION 1 --------------------->
<div class="col-lg-12 p-4 flex-column align-items-center text-center">
<div class="card justify-content-center align-items-center" style="height: 185px; width: 185px; border-radius: 50%;">
<!-- CHANGE LINK BELOW -->
<div style="height: 165px; width: 165px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1612619279623-5b21c6125d12?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
<a class="mt-3" style="
color: #bbb17e; /* changes color of Name. */;
text-decoration: none; font-family: Century gothic; font-weight: 600; font-size: 18px;"
href="LINK_TO_CHARACTER_HERE"
>
Name.
</a>
<p class="mt-0 small text-uppercase text-muted" style="letter-spacing: 0.5px;">
relationship
</p>
<!-- CHARACTER 1'S THOUGHTS ON THIS CHARACTER -->
<div class="card rounded-0 bg-transparent mt-3 mr-lg-5 p-2" style="border-left: 6px solid #e4c9a7;">
<div class="card rounded-0 text-justify p-3" style="font-size: 12.5px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam aliquam maiores unde, quasi corrupti repellat suscipit debitis dolores odit fuga architecto est praesentium quibusdam excepturi quas quia iusto quaerat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam aliquam maiores unde quasi corrupti.
</p>
</div>
</div>
<!-- / -->
<!-- CHARACTER 2'S THOUGHTS ON THIS CHARACTER -->
<div class="card rounded-0 bg-transparent mt-3 ml-lg-5 p-2" style="border-right: 6px solid #873939;">
<div class="card rounded-0 bg-faded text-justify p-3" style="font-size: 12.5px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam aliquam maiores unde, quasi corrupti repellat suscipit debitis dolores odit fuga architecto est praesentium quibusdam excepturi quas quia iusto quaerat!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas laboriosam aliquam maiores unde quasi corrupti.
</p>
</div>
</div>
<!-- / -->
</div>
<!----------------------- END (BIG) RELATION 1 -->
<!-- BEGIN (SMALL) RELATION 2 --------------------->
<div class="col-lg-6 p-4 flex-column align-items-center text-center">
<div class="card justify-content-center align-items-center" style="height: 185px; width: 185px; border-radius: 50%;">
<!-- CHANGE LINK BELOW -->
<div style="height: 165px; width: 165px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1612619279623-5b21c6125d12?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
<a class="mt-3" style="
color: #bbb17e; /* changes color of Name. */;
text-decoration: none; font-family: Century gothic; font-weight: 600; font-size: 18px;"
href="LINK_TO_CHARACTER_HERE"
>
Name.
</a>
<p class="mt-0 small text-uppercase text-muted" style="letter-spacing: 0.5px;">
relationship
</p>
<div class="card rounded-0 bg-transparent flex-grow-1 mt-3 p-2" style="border-top: 6px solid #b68170">
<div class="card rounded-0 bg-faded flex-grow-1 text-justify p-3" style="font-size: 12.5px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam quaerat, libero obcaecati rem molestiae nulla accusantium quia dicta consequuntur culpa eius odio nobis reprehenderit omnis. Magni, at? Mollitia, aliquid! Quod?
</div>
</div>
</div>
<!----------------------- END RELATION 2 -->
<!-- BEGIN (SMALL) RELATION 3 --------------------->
<div class="col-lg-6 p-4 flex-column align-items-center text-center">
<div class="card justify-content-center align-items-center" style="height: 185px; width: 185px; border-radius: 50%;">
<!-- CHANGE LINK BELOW -->
<div style="height: 165px; width: 165px; border-radius: 50%; background-size: cover; background-position: center center; background-image: url(
https://images.unsplash.com/photo-1612619279623-5b21c6125d12?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
);"></div>
</div>
<a class="mt-3" style="
color: #bbb17e; /* changes color of Name. */;
text-decoration: none; font-family: Century gothic; font-weight: 600; font-size: 18px;"
href="LINK_TO_CHARACTER_HERE"
>
Name.
</a>
<p class="mt-0 small text-uppercase text-muted" style="letter-spacing: 0.5px;">
relationship
</p>
<div class="card rounded-0 bg-transparent flex-grow-1 mt-3 p-2" style="border-top: 6px solid #b68170">
<div class="card rounded-0 bg-faded flex-grow-1 text-justify p-3" style="font-size: 12.5px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</div>
</div>
<!----------------------- END RELATION 3 -->
<!-- ADD MORE ABOVE THIS LINE | COPY PASTE EITHER BIG RELATION OR SMALL RELATION -->
</div>
</div>
<!-----------------------------------------------
--------- END MUTUAL RELATIONS SECTION ----------
------------------------------------------------>
<!-- -------------------------- CREDITS -------------------------- -->
<div class="mt-3">
<div class="row no-gutters align-items-center" style="letter-spacing: 0.5px;">
<div class="col"><hr class="w-100"></div>
<div class="col-auto px-2"><a class="small text-muted" data-toggle="collapse" href="#collapse_credits" aria-expanded="false" style="text-decoration: none; font-family: Century gothic; letter-spacing: 2px;">CREDITS</a></div>
<div class="col"><hr class="w-100"></div>
</div>
<div class="collapse" id="collapse_credits">
<div class="row no-gutters mx-n2" style="letter-spacing: 1px;">
<div class="col-lg-6 p-2"><div class="card rounded-0 p-1 small text-center"><a href="ACodingPerson" class="text-muted" style="text-decoration: none;" target="_blank">HTML by ACP</a></div></div>
<div class="col-lg-6 p-2"><div class="card bg-faded rounded-0 p-1 small text-center"><a href="https://x.com/Gibb_Arts/status/1231018186255912961" class="text-muted" style="text-decoration: none;" target="_blank">SHIP MEME LAYOUT by H.L. Gibby</a></div></div>
<div class="col-lg-6 p-2"><div class="card bg-faded rounded-0 p-1 small text-center"><a href="https://toyhou.se/9632987.f2u-all-about-us" class="text-muted" style="text-decoration: none;" target="_blank">CODE INSPIRATION 1 (Sealkitty)</a></div></div>
<div class="col-lg-6 p-2"><div class="card bg-faded rounded-0 p-1 small text-center"><a href="https://toyhou.se/14948703.20questionnaire-f2u" class="text-muted" style="text-decoration: none;" target="_blank">CODE INSPIRATION 2 (Leporidebug)</a></div></div>
<div class="col-lg-6 p-2"><div class="card bg-faded rounded-0 p-1 small text-center"><a href="https://toyhou.se/14686665.7-our-story" class="text-muted" style="text-decoration: none;" target="_blank">CODE INSPIRATION 3 (ChiiAka)</a></div></div>
<div class="col-lg-6 p-2"><div class="card bg-faded rounded-0 p-1 small text-center"><a href="https://toyhou.se/23908043.otp" class="text-muted" style="text-decoration: none;" target="_blank">CODE INSPIRATION 4 (Codigo)</a></div></div>
<!-- BELOW THIS LINE, YOU CAN EDIT -->
<!-- ABOVE THIS LINE, YOU CAN EDIT -->
<!-- TO ADD YOUR OWN:
<div class="col-12 p-2"><div class="card rounded-0 p-1 small text-center"><a
href="CREDIT_LINK_HERE"
class="text-muted" style="text-decoration: none;" target="_blank">
[TYPE] BY [PERSON]
</a></div></div>
-- OR --
<div class="col-6 p-2"><div class="card rounded-0 p-1 small text-center"><a
href="CREDIT_LINK_HERE"
class="text-muted" style="text-decoration: none;" target="_blank">
[TYPE] BY [PERSON]
</a></div></div>
-->
</div>
</div>
</div>
<!-- ---------------------- END CREDITS -------------------------- -->
</div>
<!-- ======== END MAIN CONTENT ========= -->
<!---------------------------------------------------->
<!-- =================== -->
</div>
</div>
<!-- "SHIP MEME X3" CODE ENDS -->
