Profile
<!--- CODE START!
Use ctrl + f to replace the colors used :
> accent 1 (almost everything) : #aaa
> accent 2 (sidebar buttons, progress bar, small quotes) : #6d6d6d
> relationship 1 accent : #E3D74D
> relationship 2 accent : #6f95ab
This code uses fontmeme , the font is PixelOperatorSC-Bold
> https://fontmeme.com/fonts/pixel-operator-font/
This code also uses icons from FontAwesome
> https://fontawesome.com
It is preffered to edit the code at th.circlejourney.net to see live preview while editing
--->
<div class="container mx-auto" style="max-width: 1000px">
<div class="row no-gutters">
<!--- LEFT SIDE --->
<div class="col-md-auto col-12 p-1 order-1" style="width: 30%">
<div class="sticky-top pt-2 flex-column" style="height: calc(100vh - 20px)">
<!--- DECO CARD --->
<div class="card" style="border-radius: 0px; height: 30px; background-color: #aaa">
</div>
<!--- MAIN CHAR IMAGE --->
<div class="card mt-2 p-2 bg-faded" style="border-radius:0px;">
<!--- REPLACE IMGURL WITH YOUR CHARACTER'S IMAGE ADRESS --->
<div class = "card p-0 mx-auto w-100" style ="height: 200px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;">
</div>
</div>
<!--- QUOTE OR TITLE --->
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;">
QUOTE OR TITLE HERE
</div></div>
</div>
<!--- SONG PLAYER --->
<div class="card mt-2 p-2 flex-grow-1 bg-faded justify-content-center align-items-center" style="border-radius: 0px;">
<!---
SONG TITLE
> this uses a fontmeme generated image
> go to the link above and insert the song title to the preview text box with the color u want
> click generate
> next to the generate button, click the gray pencil, press the embed button and copy the direct image link
> replace the IMGURL with the pasted link
> change width to your liking
--->
<img class="my-2" src="IMGURL" style="width: 200px;">
<!--- SONG ARTIST --->
<div class="text-center text-muted mb-2" style="font-family: 'ms gothic'; font-size: 12px;">
artist name
</div>
<!--- DECORATIVE PLAY BUTTONS --->
<span class="text-muted" style="letter-spacing: 15px;">
<i class="fal fa-backward"></i>
<i class="fas fa-play fa-beat"></i>
<i class="fal fa-forward"></i>
<!---
SONG EMBED
> replace the UTUBEID in the iframe src with your youtube video song id
(you can find it after the https://www.youtube.com/watch?v= in the video url)
--->
<iframe style="opacity: 0.001; height: 30%; width: 15%; position: absolute; bottom: 5px; left: 120px;"
src="https://www.youtube.com/embed/UTUBEID"
></iframe>
</span>
</div>
<!--- CODE CREDITS - DO NOT DELETE !!! --->
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #aaa; font-size: 13px; letter-spacing: 1px;"> code by <a href="https://toyhou.se/Wren_Song">Wren</a> </div></div>
</div>
<!--- ANOTHER DECO BLOCK --->
<div class="card mt-2" style="border-radius: 0px; height: 30px; background-color: #aaa">
</div>
</div>
</div>
<div class="col-md-auto col-12 p-1 order-md-3 order-2" style="width: 10%">
<div class="sticky-top pt-2 flex-column" style="height: calc(100vh - 20px)">
<!--- ANOTHER DECO BLOCK --->
<div class="card hidden-sm-down" style="border-radius: 0px; height: 30px; background-color: #aaa">
</div>
<!--- NAV BUTTONS --->
<ul class="row no-gutters flex-md-grow-1 flex nav mt-2 mt-md-0">
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#basics" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-home"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#personality" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-brain"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#design" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-paint-brush"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#combat" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-dagger"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#backstory" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-book"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#misc" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-question"></i>
</a>
</li>
<li class="col-md-12 col flex-grow-1 mt-2 nav-item">
<a href="#relations" class="btn btn-block btn-outline-warning h-100 align-items-center justify-content-center" style="border-width: 0px; border-radius: 0px; background-color: #6d6d6d; color: white;">
<i class="fal fa-heart"></i>
</a>
</li>
</ul>
<!--- ANOTHER DECO BLOCK --->
<div class="card mt-2" style="border-radius: 0px; height: 30px; background-color: #aaa">
</div>
</div>
</div>
<!--- MIDDLE / MAIN PART --->
<div class="col-md col-12 order-md-2 order-3">
<!--- START OF BASICS PART --->
<div id="basics">
<div class="p-1">
<!---
FULL NAME HEADER THING
> follow the steps in SONG TITLE
> uses the same font
> replace the IMGURL with the generated URL
> tweak the margin-top value so it aligns nicely with the deco cards
--->
<img
src="IMGURL"
style="margin-top: -5px">
</div>
<!--- START OF BASICS INFO --->
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ALIAS </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> AGE </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic';">
content y.o.
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> D.O.B. </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
DD / MM / YY
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> GENDER </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> SEXUALITY </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ALLIANCE </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> JOB </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> SPECIES </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
</div>
</div>
<!--- CHARACTER BLURB --->
<div class="card m-1 bg-faded p-2" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<!---
FIRST LETTER OF PARAGRAPH THING
> also uses fontmeme
> use the same steps as SONG TITLE, etc.
> replace IMGURL with generated link
--->
<span class="float-left card p-3" style="border:none; border-radius: 0px; margin-right: 10px;">
<img src="IMGURL" style="height: 30px;">
</span>
<!--- THE REST OF IT --->
<span style="opacity: 0.8; font-size: 12px;">
orem 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.
</span>
</div>
</div>
</div>
<!--- END OF BASICS PART --->
<!--- START OF PERSONALITY PART --->
<div id="personality">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<div class="row no-gutters">
<div class="col-md-auto col-12 p-1 flex-column" style="width: 65%;">
<div class="card bg-faded p-2" style="border-radius: none; border:none; border-radius:0px;">
<!--- MAIN TRAITS PART --->
<div class="text-center"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;">
TRAIT | TRAIT | TRAIT
</div></div>
</div>
<!--- MORE PERSONALITY DESC. --->
<div class="card bg-faded p-2 mt-2 flex-grow-1" style="border-radius: none; border:none; border-radius:0px;">
<div class="p-1 text-justify">
<span style="opacity: 0.8; font-size: 12px; font-family: 'ms gothic'">
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.
</span>
</div>
</div>
</div>
<div class="col p-1">
<!--- ADDITIONAL INFO --->
<div class="flex-column h-100">
<div class="card bg-faded p-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> STRENGTHS </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-plus"></i></span>
change the fa-plus to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-plus"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-plus"></i></span> cntent </li>
</ul>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> WEAKNESSES </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-minus"></i></span>
change the fa-minus to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-minus"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-minus"></i></span> content </li>
</ul>
</div>
</div>
<div class="card bg-faded p-2 mt-2 flex-grow-1" style="border-radius: none; border:none;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> BIGGEST FLAW </div>
<div class="text-justify text-muted" style="font-family: 'ms gothic'; font-size: 12px;">
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.
</div>
</div>
</div>
</div>
</div>
</div>
<!--- TRIVIA --->
<div class="p-1">
<div class="card bg-faded p-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> TRIVIA </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-question"></i></span>
change the fa-question to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-question"></i></span> CONTENT </li>
<li><span class="fa-li"><i class="fal fa-question"></i></span> CONTENT </li>
</ul>
</div>
</div>
</div>
</div>
<!--- END OF PERSONALITY PART --->
<!--- START OF DESIGN PART --->
<div id="design">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<!---
COLOR PALETTE
> change the #HEXCODE to the desired color code
> copy paste the <div class="col-p-1... to add more
--->
<div class="row no-gutters">
<div class="col-md-6">
<div class="row no-gutters">
<!--- COPY THIS BELOW TO ADD MORE
<div class="col p-1"><div class="card p-1 bg-faded" style="border:none; border-radius: 0px;">
<div style="border-radius: 0px; width: 100%; height: 30px; background-color:
#HEXCODE
;"></div>
</div></div>
--->
<div class="col p-1"><div class="card p-1 bg-faded" style="border:none; border-radius: 0px;">
<div style="border-radius: 0px; width: 100%; height: 30px; background-color:
#HEXCODE
;"></div>
</div></div>
<div class="col p-1"><div class="card p-1 bg-faded" style="border:none; border-radius: 0px;">
<div style="border-radius: 0px; width: 100%; height: 30px; background-color:
#HEXCODE
;"></div>
</div></div>
<div class="col p-1"><div class="card p-1 bg-faded" style="border:none; border-radius: 0px;">
<div style="border-radius: 0px; width: 100%; height: 30px; background-color:
#HEXCODE
;"></div>
</div></div>
<div class="col p-1"><div class="card p-1 bg-faded" style="border:none; border-radius: 0px;">
<div style="border-radius: 0px; width: 100%; height: 30px; background-color:
#HEXCODE
;"></div>
</div></div>
</div>
<!--- ADDITIONAL DESC --->
<div class="card bg-faded p-2 m-1" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> BUILD </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> EYES </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> HAIR </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> STYLE </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<!--- DESIGN NOTES --->
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> DESIGN NOTES </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-paint-brush"></i></span>
change the fa-paint-brush to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-paint-brush"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-paint-brush"></i></span> content </li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card p-2 bg-faded h-100" style="border-radius:0px; border:none;">
<!--- CHARACTER REF IMAGE --->
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 200px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
</div>
</div>
</div>
<!--- END OF DESIGN PART --->
<!--- START OF COMBAT PART --->
<div id="combat">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<!--- STATS --->
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> STRENGTH </div></div>
<div class="col align-items-center">
<!---
PROGRESS BAR
> change the width percentage to the stats percentage
--->
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#6d6d6d;"></div>
</div>
</div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> DEFENSE </div></div>
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#6d6d6d;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> MAGIC </div></div>
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#6d6d6d;"></div>
</div>
</div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> AGILITY </div></div>
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#6d6d6d;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- ADDITIONAL INFO --->
<div class="row no-gutters">
<div class="col-md-5 p-1 flex-column">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> TACTICS </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ATTITUDE </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> WEAPON </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2 flex-grow-1" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> RANGE </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
</div>
<!--- ABILITIES --->
<div class="col-md-7 p-1 flex-column">
<!--- ABILITY 1 - COPY THIS PART BELOW TO ADD MORE --->
<div class="card bg-faded p-2 flex-grow-1" style="border-radius: none; border:none;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ABILITY NAME </div>
<div class="text-justify" style="font-family: 'ms gothic'; font-size: 12px; opacity: 0.8;">
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.
</div>
</div>
</div>
<!--- ABILITY 2 --->
<div class="card bg-faded p-2 mt-2 flex-grow-1" style="border-radius: none; border:none;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ABILITY NAME </div>
<div class="text-justify" style="font-family: 'ms gothic'; font-size: 12px; opacity: 0.8;">
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.
</div>
</div>
</div>
</div>
</div>
</div>
<!--- END OF COMBAT PART --->
<!--- START OF BACKSTORY PART --->
<div id="backstory">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<!--- TLDR AND WARNINGS --->
<div class="row no-gutters">
<div class="col-md-8 p-1">
<div class="card bg-faded p-2 h-100" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> TLDR </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-bookmark"></i></span>
change the fa-bookmark to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-bookmark"></i></span>content</li>
<li><span class="fa-li"><i class="fal fa-bookmark"></i></span>content</li>
</ul>
</div>
</div>
</div>
<div class="col-md-4 p-1">
<div class="card bg-faded p-2 h-100" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> WARNINGS </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-exclamation"></i></span>
change the fa-exclamation to another icon if you want to
</li>
<li><span class="fa-li"><i class="fal fa-exclamation"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-exclamation"></i></span> content </li>
</ul>
</div>
</div>
</div>
</div>
<!--- START OF STORY PT.1 > COPY THIS PART TO ADD MORE --->
<div class="card bg-faded p-2 m-1" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> STORY SUBTITLE </div></div>
</div>
<div class="card m-1 mt-2 bg-faded p-2" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<!---
FIRST LETTER OF PARAGRAPH THING
> also uses fontmeme
> use the same steps as SONG TITLE, etc.
> replace IMGURL with generated link
--->
<span class="float-left card p-3" style="border:none; border-radius: 0px; margin-right: 10px;">
<img src="IMGURL" style="height: 30px;">
</span>
<span style="opacity: 0.8; font-size: 12px;">
orem 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.
</span>
</div>
</div>
<!--- END OF STORY PT.1 --->
<!--- START OF STORY PT.2 --->
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> STORY SUBTITLE </div></div>
</div>
<div class="card m-1 mt-2 bg-faded p-2" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<!---
FIRST LETTER OF PARAGRAPH THING
> also uses fontmeme
> use the same steps as SONG TITLE, etc.
> replace IMGURL with generated link
--->
<span class="float-left card p-3" style="border:none; border-radius: 0px; margin-right: 10px;">
<img src="IMGURL" style="height: 30px;">
</span>
<span style="opacity: 0.8; font-size: 12px;">
orem 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.
</span>
</div>
</div>
<!--- END OF STORY PT.2 - PASTE BELOW --->
</div>
<!--- END OF BACKSTORY PART --->
<!--- START OF MISC PART --->
<div id="misc">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<div class="row no-gutters">
<!---
MOODBOARD
> 4 images
> replace IMGURL with the image's address
--->
<div class="col-md-2">
<div class="row no-gutters flex h-100">
<div class="col-md-12 col-4 p-1 flex-grow-1">
<div class="card p-2 bg-faded h-100" style="border-radius:0px; border:none;">
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 50px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
</div>
<div class="col-md-12 col-4 p-1 flex-grow-1">
<div class="card p-2 bg-faded h-100" style="border-radius:0px; border:none;">
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 50px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
</div>
<div class="col-md-12 col-4 p-1 flex-grow-1">
<div class="card p-2 bg-faded h-100" style="border-radius:0px; border:none;">
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 50px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
</div>
<div class="col-md-12 col-4 p-1 flex-grow-1">
<div class="card p-2 bg-faded h-100" style="border-radius:0px; border:none;">
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 50px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
</div>
</div>
</div>
<!--- OTHER INFO --->
<div class="col">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> MBTI </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ALIGN </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
</div>
<div class="col-md-6 p-1">
<div class="card bg-faded p-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> MBTI </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> ALIGN </div></div>
<div class="col align-items-center"><div class="text-muted" style="font-family: 'ms gothic'">
content
</div></div>
</div>
</div>
</div>
</div>
<!--- LIKES AND DISLIKES --->
<div class="card bg-faded p-2 m-1" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> LIKES </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-check"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-check"></i></span> content </li>
</ul>
</div>
</div>
<div class="card bg-faded p-2 m-1 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-justify p-1">
<div class="text-monospace" style="color: #aaa; font-size: 16px; letter-spacing: 1px;"> DISLIKES </div>
<ul style="font-family: 'ms gothic'; font-size: 12px; margin-left: 20px; margin-bottom: -5px;" class="text-muted fa-ul">
<li><span class="fa-li"><i class="fal fa-x"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-x"></i></span> content </li>
<li><span class="fa-li"><i class="fal fa-x"></i></span> content </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--- END OF MISC PART --->
<!--- START OF RELATIONS PART --->
<div id="relations">
<!--- QUOTE BLOCK --->
<div class="row no-gutters my-2">
<div class="col p-1"><hr class="mt-2"></div>
<div class="col-auto text-monospace" style="color: #6d6d6d; letter-spacing: 1px; font-size: 16px;">
" QUOTE "
</div>
<div class="col-auto p-1" style="width: 6%"><hr class="mt-2"></div>
</div>
<!---
RELATIONSHIP 1
> it's better to keep the colors the same throughout this portion
--->
<div class="row no-gutters">
<div class="col-md-4 p-1 flex-column">
<!--- CHARACTER IMAGE --->
<div class="card p-2 bg-faded" style="border-radius:0px; border:none;">
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 160px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
<!--- RELATIONSHIP STATUS --->
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #E3D74D; font-size: 16px; letter-spacing: 1px;"> STATUS </div></div>
</div>
<div class="card bg-faded flex-grow-1 mt-2 align-items-center justify-content-center text-muted p-3 text-center" style="border-radius: 0px; border:none; font-family: 'ms gothic'; font-size: 12px;">
character opinion about the relationship
</div>
</div>
<div class="col">
<div class="p-1">
<!---
CHARACTER NAME AND LINK
> change the CHARACTER LINK to... the character's link
> the name also uses fontmeme so change IMGURL to the generated permalink
--->
<a href="CHARACTER LINK">
<img src="IMGURL">
</a>
</div>
<div class="card bg-faded p-2 mt-2 m-1" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #E3D74D; font-size: 16px; letter-spacing: 1px;"> TRUST </div></div>
<!--- PROGRESS BAR - CHANGE WIDTH TO DESIRED PERCENTAGE --->
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#E3D74D;"></div>
</div>
</div>
</div>
</div>
<div class="card bg-faded p-2 mt-2 m-1" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #E3D74D; font-size: 16px; letter-spacing: 1px;"> CARE </div></div>
<!--- PROGRESS BAR - CHANGE WIDTH TO DESIRED PERCENTAGE --->
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#E3D74D;"></div>
</div>
</div>
</div>
</div>
<div class="card bg-faded p-2 mt-2 m-1" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #E3D74D; font-size: 16px; letter-spacing: 1px;"> LOYALTY </div></div>
<!--- PROGRESS BAR - CHANGE WIDTH TO DESIRED PERCENTAGE --->
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#E3D74D;"></div>
</div>
</div>
</div>
</div>
<div class="card mt-2 bg-faded p-2 m-1" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<!---
FIRST LETTER OF PARAGRAPH THING
> also uses fontmeme
> use the same steps as SONG TITLE, etc.
> replace IMGURL with generated link
--->
<span class="float-left card p-3" style="border:none; border-radius: 0px; margin-right: 10px;">
<img src="IMGURL">
</span>
<span style="opacity: 0.8; font-size: 12px;">
orem 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.
</span>
</div>
</div>
</div>
</div>
<!--- SMALL RELATIONSHIPS --->
<div class="row no-gutters mt-2">
<div class="col-md-6 p-1 pr-2">
<!---
CHARACTER NAME AND LINK
> change the CHARACTER LINK to... the character's link
> the name also uses fontmeme so change IMGURL to the generated permalink
--->
<a href="CHARACTER LINK">
<img src="IMGURL">
</a>
<!--- RELATIONSHIP STATUS --->
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #6f95ab; font-size: 16px; letter-spacing: 1px;">
STATUS
</div></div>
</div>
<div class="card p-2 bg-faded mt-2" style="border-radius:0px; border:none;">
<!--- CHARACTER IMG --->
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 120px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #6f95ab; font-size: 16px; letter-spacing: 1px;"> LIKE </div></div>
<!--- PROGRESS BAR - CHANGE WIDTH TO DESIRED PERCENTAGE --->
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#6f95ab;"></div>
</div>
</div>
</div>
</div>
<div class="card mt-2 bg-faded p-2" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<span style="opacity: 0.8; font-size: 12px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.
</span>
</div>
</div>
</div>
<div class="col-md-6 p-1 pl-2">
<!---
CHARACTER NAME AND LINK
> change the CHARACTER LINK to... the character's link
> the name also uses fontmeme so change IMGURL to the generated permalink
--->
<a href="CHARACTER LINK">
<img src="IMGURL">
</a>
<!--- RELATIONSHIP STATUS --->
<div class="card bg-faded p-2 mt-2" style="border-radius: none; border:none; border-radius:0px;">
<div class="text-center"><div class="text-monospace" style="color: #ab6f79; font-size: 16px; letter-spacing: 1px;">
STATUS
</div></div>
</div>
<div class="card p-2 bg-faded mt-2" style="border-radius:0px; border:none;">
<!--- CHARACTER IMG --->
<div class = "card p-0 mx-auto w-100 h-100" style ="min-height: 120px;
background:url(IMGURL);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
border-radius: 0px;
border-radius: 0px; border:none;">
</div>
</div>
<div class="card bg-faded p-2 mt-2" style="border-radius: 0px; border:none;">
<div class="row no-gutters">
<div class="col-5 pl-1"><div class="text-monospace" style="color: #ab6f79; font-size: 16px; letter-spacing: 1px;"> LIKE </div></div>
<!--- PROGRESS BAR - CHANGE WIDTH TO DESIRED PERCENTAGE --->
<div class="col align-items-center">
<div class="progress mr-1 w-100" style="height:5px; border-radius: 0px;"><div class="progress-bar" style="
width:50%;
background-color:#ab6f79;"></div>
</div>
</div>
</div>
</div>
<div class="card mt-2 bg-faded p-2" style="border-radius: none; border:none;">
<div class="text-justify p-1" style="font-family: 'ms gothic';">
<span style="opacity: 0.8; font-size: 12px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus.
</span>
</div>
</div>
</div>
</div>
<!--- END OF RELATIONS TAB --->
</div>
</div>
</div>
</div>
Recent Images
No images.