Profile
<!---------- CODE START!
Use ctrl f to replace the colors used
> main accent : #afba8a
> accent 1 (main char) : #91bfba
> accent 1 (other char) : #ba8a95
> best to use th.circlejourney.net to edit the code so live preview is viewable
----------->
<div class="container mx-auto" style="max-width: 700px">
<!--- HEADER CARD --->
<div class="card mb-3 p-2 text-monospace" style="border-radius: 0px; border:none; background-color: #afba8a; font-size: 10px;">
<div class="text-monospace ml-1 text-white" style="font-size: 25px; letter-spacing: 2px;">
TITLE.
</div>
</div>
<!--- FIRST SECTION ---->
<div class="card p-2 bg-faded" style="border-radius: 0px;">
<!--- SCENE TITLE --->
<div class="text-monospace ml-1" style="font-size: 18px; letter-spacing: 1px; color: #afba8a;">
SCENE 001.
</div>
<!--- DIVIDER ---> <hr class="w-100 my-1">
<!--- TRIVIA (?) --->
<div class="row no-gutters">
<div class="col-6">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="text-monospace" style="font-size: 11px; letter-spacing: 1px; color: #afba8a; opacity: 0.8"> unlock requirement. </div>
</div>
<div class="col-md-6 p-1 align-items-end text-muted">
<div style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px;">
content
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="text-monospace" style="font-size: 11px; letter-spacing: 1px; color: #afba8a; opacity: 0.8"> characters included. </div>
</div>
<div class="col-md-6 p-1 align-items-end text-muted">
<div style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px;">
<a class="text-muted" href="CHARLINK">char 1</a>, <a class="text-muted" href="CHARLINK">char 2</a>
</div>
</div>
</div>
</div>
</div>
<!--- SCENE DESCRIPTION --->
<div class="p-1 text-justify" style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
scene desc. 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>
<!--- DIALOGUE BOX START --->
<div class="card mt-1 p-3" style="border-radius: 0px;">
<!--- START OF MAIN PERSON DIALOGUE 1 - copy paste this section anywhere inside the dialogue box div --->
<div class="justify-content-start">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 90px; height: 80px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
- best suited if image has a 1:1 ratio
- if not then maybe you can tweak the margins of the img (because changing the width/height will either make it too big or stretched)
- you can also just delete the img entirely and change the 'card h-100' background-image in style to the image you want
--->
<img src="IMGURL" style="margin-top: -22px">
</div>
</div>
</div>
<div class="col pl-md-2 pt-2 pt-md-0 justify-content-end align-items-start flex-column">
<div class="text-monospace" style="font-size: 12.5px; color: #91bfba"> CHARACTER NAME </div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" first text here "
</div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" second text? idk just copy paste this card if u want to add more "
</div>
</div>
</div>
</div>
<!--- END OF MAIN PERSON DIALOGUE 1 --->
<!--- ACTION CARD START - like yk, if u need to describe the scene or something. remove if u want / copy paste this section anywhere inside the dialogue box --->
<div class="card mt-2 p-2 bg-faded text-center text-muted" style="border-radius: 0px; border:none; opacity: 0.8; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px;">
action or scene description
</div>
<!--- ACTION CARD END --->
<!--- START OF OTHER PERSON DIALOGUE 1 - copy paste this section anywhere inside the dialogue box div (if u want like another person speaking, just copy paste this and change color / image --->
<div class="justify-content-end">
<div class="row no-gutters">
<div class="col-auto order-2">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 70px; height: 70px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
- best suited if image has a 1:1 ratio
- if not then maybe you can tweak the margins of the img (because changing the width/height will either make it too big or stretched)
- you can also just delete the img entirely and change the 'card h-100' background-image in style to the image you want
--->
<a class="tooltipster" title=" CHARACTER DESCRIPTION ">
<img src="IMGURL">
</a>
</div>
</div>
</div>
<div class="col order-1 align-items-end flex-column pr-2 pt-2">
<div class="text-monospace" style="font-size: 12.5px; color: #ba8a95"> CHARACTER NAME </div>
<div class="card card-outline-secondary p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 4px 1px 1px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" first text here "
</div>
<!---
DIALOGUE OPTION
- delete this if not needed / copy paste this section anywhere in the other person's dialogue
- can add more dialogues by copy pasting the <li> and changing the href="" content
- always change the href content if u wanna add dialogue, even in entirely different set of options
--->
<div class="card card-outline-secondary p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 4px 1px 1px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
<ul class="nav nav-tabs row card-header-tabs">
<li class="col-12 mb-2"><a class="btn bg-faded btn-outline-secondary active p-1 w-100" data-toggle="tab"
href="#D1"
style="font-size: 10px; letter-spacing: 0.5px; border-radius: 0px;">
"first dialogue option"
</a></li>
<li class="col-12 mb-3"><a class="btn bg-faded btn-outline-secondary p-1 w-100" data-toggle="tab"
href="#D2"
style="font-size: 10px; letter-spacing: 0.5px; border-radius: 0px;">
"second dialogue option"
</a></li>
</ul>
</div>
<!--- END OF DIALOGUE OPTION --->
</div>
</div>
</div>
<!--- END OF OTHER PERSON DIALOGUE 1 --->
<!---
START OF DIALOGUE CHANGES
- it is a set with the dialogue options
- you can delete if you do not have dialogue options
- you can copy paste in dialogue box div if there is corresponding dialogue options
--->
<div class="tab-content">
<!---
START OF DIALOGUE REPLY TO OPTION 1
- copy paste any dialogue from main character / other character inside here
- change the id to the corresponding href of the first option (option 1 with the class="active" is always the first to show up)
--->
<div class="tab-pane fade active show" id="D1" >
<!--- START OF MAIN PERSON DIALOGUE 2 - copy paste this section anywhere inside the dialogue box div --->
<div class="justify-content-start mt-2">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 90px; height: 80px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
--->
<img src="IMGURL" style="margin-top: -22px">
</div>
</div>
</div>
<div class="col pl-md-2 pt-2 pt-md-0 justify-content-end align-items-start flex-column">
<div class="text-monospace" style="font-size: 12.5px; color: #91bfba"> CHARACTER NAME </div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" reply to first dialogue option "
</div>
</div>
</div>
</div>
<!--- END OF MAIN PERSON DIALOGUE 1 --->
</div>
<!---
START OF DIALOGUE REPLY TO OPTION 2
- copy paste any dialogue from main character / other character inside here
- change the id to the corresponding href of the second option (option 2 can be used for option 3,4,etc. as it does not have the active show class)
--->
<div class="tab-pane fade" id="D2" >
<!--- START OF MAIN PERSON DIALOGUE 2 - copy paste this section anywhere inside the dialogue box div --->
<div class="justify-content-start mt-2">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 90px; height: 80px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
--->
<img src="IMGURL" style="margin-top: -22px">
</div>
</div>
</div>
<div class="col pl-md-2 pt-2 pt-md-0 justify-content-end align-items-start flex-column">
<div class="text-monospace" style="font-size: 12.5px; color: #91bfba"> CHARACTER NAME </div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" reply to second dialogue option "
</div>
</div>
</div>
</div>
<!--- END OF MAIN PERSON DIALOGUE 1 --->
</div>
</div>
<!--- END OF DIALOGUE CHANGES --->
</div>
<!--- DIALOGUE BOX END --->
</div>
<!--- FIRST SECTION END --->
<!--- SECOND SECTION START - copy paste or delete this section if needed --->
<div class="card p-2 bg-faded mt-3" style="border-radius: 0px;">
<!--- SCENE TITLE --->
<div class="text-monospace ml-1" style="font-size: 18px; letter-spacing: 1px; color: #afba8a;">
SCENE 002.
</div>
<!--- DIVIDER ---> <hr class="w-100 my-1">
<!--- TRIVIA (?) --->
<div class="row no-gutters">
<div class="col-6">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="text-monospace" style="font-size: 11px; letter-spacing: 1px; color: #afba8a; opacity: 0.8"> unlock requirement. </div>
</div>
<div class="col-md-6 p-1 align-items-end text-muted">
<div style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px;">
content
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="row no-gutters">
<div class="col-md-6 p-1">
<div class="text-monospace" style="font-size: 11px; letter-spacing: 1px; color: #afba8a; opacity: 0.8"> characters included. </div>
</div>
<div class="col-md-6 p-1 align-items-end text-muted">
<div style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px;">
<a class="text-muted" href="CHARLINK">char 1</a>, <a class="text-muted" href="CHARLINK">char 2</a>
</div>
</div>
</div>
</div>
</div>
<!--- SCENE DESCRIPTION --->
<div class="p-1 text-justify" style="font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
scene desc. 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>
<!--- DIALOGUE BOX START --->
<div class="card mt-1 p-3" style="border-radius: 0px;">
<!--- START OF MAIN PERSON DIALOGUE 1 - copy paste this section anywhere inside the dialogue box div --->
<div class="justify-content-start">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 90px; height: 80px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
- best suited if image has a 1:1 ratio
- if not then maybe you can tweak the margins of the img (because changing the width/height will either make it too big or stretched)
- you can also just delete the img entirely and change the 'card h-100' background-image in style to the image you want
--->
<img src="IMGURL" style="margin-top: -22px">
</div>
</div>
</div>
<div class="col pl-md-2 pt-2 pt-md-0 justify-content-end align-items-start flex-column">
<div class="text-monospace" style="font-size: 12.5px; color: #91bfba"> CHARACTER NAME </div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" first text here "
</div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" second text? idk just copy paste this card if u want to add more "
</div>
</div>
</div>
</div>
<!--- END OF MAIN PERSON DIALOGUE 1 --->
<!--- START OF OTHER PERSON DIALOGUE 1 - copy paste this section anywhere inside the dialogue box div (if u want like another person speaking, just copy paste this and change color / image --->
<div class="justify-content-end">
<div class="row no-gutters">
<div class="col-auto order-2">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 70px; height: 70px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
- best suited if image has a 1:1 ratio
- if not then maybe you can tweak the margins of the img (because changing the width/height will either make it too big or stretched)
- you can also just delete the img entirely and change the 'card h-100' background-image in style to the image you want
--->
<a class="tooltipster" title=" CHARACTER DESCRIPTION ">
<img src="IMGURL">
</a>
</div>
</div>
</div>
<div class="col order-1 align-items-end flex-column pr-2 pt-2">
<div class="text-monospace" style="font-size: 12.5px; color: #ba8a95"> CHARACTER NAME </div>
<div class="card card-outline-secondary p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 4px 1px 1px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" first text here "
</div>
<div class="card card-outline-secondary p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 4px 1px 1px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" second text here idkk "
</div>
</div>
</div>
</div>
<!--- END OF OTHER PERSON DIALOGUE 1 --->
<!--- START OF MAIN PERSON DIALOGUE 1 - copy paste this section anywhere inside the dialogue box div --->
<div class="justify-content-start">
<div class="row no-gutters">
<div class="col-md-auto col-12">
<div class="card bg-faded p-1 mt-2" style="border-radius: 0px; width: 90px; height: 80px;">
<div class="card h-100" style="border-radius: 0px; border:none;">
<!---
CHARACTER IMAGE
- best suited if image has a 1:1 ratio
- if not then maybe you can tweak the margins of the img (because changing the width/height will either make it too big or stretched)
- you can also just delete the img entirely and change the 'card h-100' background-image in style to the image you want
--->
<img src="IMGURL" style="margin-top: -22px">
</div>
</div>
</div>
<div class="col pl-md-2 pt-2 pt-md-0 justify-content-end align-items-start flex-column">
<div class="text-monospace" style="font-size: 12.5px; color: #91bfba"> CHARACTER NAME </div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" reply to other person "
</div>
<div class="card p-2 bg-faded mt-1" style="border-radius: 0px; border-width: 1px 1px 1px 4px; font-family: 'ms gothic'; font-size: 10px; letter-spacing: 0.5px; opacity: 0.8">
" second text? idk just copy paste this card if u want to add more "
</div>
</div>
</div>
</div>
<!--- END OF MAIN PERSON DIALOGUE 1 --->
</div>
<!--- DIALOGUE BOX END --->
</div>
<!--- SECOND SECTION END - can copy paste below here --->
<!--- FOOTER CARD + CREDITS - DO NOT DELETE - copy paste above here --->
<div class="card mt-3 p-2 pr-3 text-white text-right text-monospace" style="border-radius: 0px; border:none; background-color: #afba8a; font-size: 10px;">
<p>
CODE BY <a class="text-white" href="https://toyhou.se/Wren_Song">WRENSONG</a>
</p>
</div>
</div>
Recent Images
No images.