<!-------------------------------------------------
Panoramic — Custom Colours version.
(code by jiko, layout by Togo)
------------------------------
RULES
→ Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
→ turn OFF WYSIWYG (in display settings)
→ turn ON Code Editor
------------------------------
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
→ looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------
ACCENTS (you may need to change colour combos depending on the palette)
→ bg + border + links --- #1c6b76
→ bg-faded -------------- #f2eeea
→ text ------------------ #3095a3
→ text-muted ------------ #709e9f
→ progress-bar bg ------- #a4c2c3
use control/command + f to quickly change the colours!
------------------------------------------------->
<div class="mx-auto" style="font-family:avenir; font-weight:500; color:#3095a3; font-size:90%; letter-spacing:0.2px; max-width:850px;">
<div class="row no-gutters">
<!-------------------------------------------------
0 || IMAGE HEADER
------------------------------------------------->
<div class="col-lg-12 p-2">
<div class="rounded w-100 py-2" style="min-height:130px;
/* IMAGE HERE
---------------------------------------- */;
background-image: url(IMG_PNG_HERE);
/* SETTINGS
---------------------------------------- */;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-color:#1c6b76">
<!-------- TEXT --------------------->
<!--
→ deletable if unecessary
→ keep relatively SHORT or else the code will look funky/hard to read on mobile haha
→ feel free to change the shadow colour [#000] to smth else
-->
<div class="col-lg-5 col-sm-8 col-10 py-2">
<div class="card bg-transparent rounded-0" style="border-color:#fff; border-width:0px 1px 0px 0px">
<div class="p-3 py-4 text-md-right text-left font-weight-bold font-italic" style="color:#fff; text-shadow:3px 1px #000; line-height:80%; font-size:29px; font-family:georgia;">
<i class="far fa-stars fa-fw mr-2"></i>
Quote here.
</div>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
1 || RIGHT SIDE: CHARACTER DETAILS
------------------------------------------------->
<div class="mx-auto col-lg-4 col-9 order-1 order-lg-2 p-2">
<!--------------------------------------------
CHARACTER IMAGE
--------------------------------------------->
<!--
→ best if square OR 200x200!
-->
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail p-1"
style="border-width:3px; border-color:#1c6b76; background-color:#f2eeea; margin-top:-40px; object-fit:cover; height:190px; width:190px; z-index:100">
</div>
<!--------------------------------------------
BASIC INFO
--------------------------------------------->
<!--
→ i don't suggest adding more (for display sake) but the option's there if needed!
-->
<div class="card p-3" style="border-width:3px; border-color:#1c6b76; background-color:#f2eeea; margin-top:-30px;">
<div style="padding-top:25px; overflow-y:auto; height:284px;">
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">name</span>
<span>content</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">age</span>
<span>content</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">gender</span>
<span>content</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">pronouns</span>
<span>prn/prns</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">species</span>
<span>or race</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">orientation</span>
<span>content</span>
</div>
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">Demeanor</span>
<span>content</span>
</div>
<!-- add/delete above THIS line! -->
<hr class="w-100" style="opacity:0.2; border-color:#1c6b76">
<div class="py-1 justify-content-between">
<span class="text-uppercase" style="letter-spacing:0.5px; color:#709e9f">code</span>
<span><a href="https://toyhou.se/11793710." class="text-reset">
<i class="far fa-code fa-fw fa-sm"></i> jiko</a>
</span>
</div>
</div>
</div>
</div>
<!-------------------------------------------------
2 || LEFT SIDE: CHARACTER PROFILE
------------------------------------------------->
<div class="col-lg-8 order-2 order-lg-1 p-2">
<div class="row no-gutters">
<!-------------------------------------------------
2.1 || NAVIGATION TABS
------------------------------------------------->
<div class="col-12 order-4">
<ul class="nav row no-gutters">
<!--------------------------------------------
FRONT PROFILE
--------------------------------------------->
<li class="nav-item col mr-2 rounded" style="background-color:#1c6b76">
<a data-toggle="tab" href="#panoramicone" class="active btn btn-outline-secondary w-100 font-weight-bold text-white border-0" style="font-size:15px;">
<i class="fas fa-rainbow"></i>
</a>
</li>
<!--------------------------------------------
SUMMARY
--------------------------------------------->
<li class="nav-item col mx-2 rounded" style="background-color:#1c6b76">
<a data-toggle="tab" href="#panoramictwo" class="btn btn-outline-secondary w-100 text-white border-0" style="font-size:15px;">
<i class="fas fa-cloud"></i>
</a>
</li>
<!--------------------------------------------
NOTES
--------------------------------------------->
<li class="nav-item col mx-2 rounded" style="background-color:#1c6b76">
<a data-toggle="tab" href="#panoramicthree" class="btn btn-outline-secondary w-100 text-white border-0" style="font-size:15px;">
<i class="fas fa-star"></i>
</a>
</li>
<!--------------------------------------------
MUSIC BOX
--------------------------------------------->
<li class="nav-item col ml-2 rounded" style="background-color:#1c6b76">
<a data-toggle="tab" href="#panoramicfour" class="btn btn-outline-secondary w-100 text-white border-0" style="font-size:15px;">
<i class="fas fa-music"></i>
</a>
</li>
</ul>
</div>
<!-------------------------------------------------
2.2 || TAB CONTENT
------------------------------------------------->
<div class="col-12 order-3">
<div class="card tab-content p-3 mb-2 table-responsive" style="height:400px; border-width:3px; border-color:#1c6b76; background-color:#f2eeea;">
<!--------------------------------------------
2.2.1 || FRONT PROFILE
--------------------------------------------->
<div class="tab-pane fade active show" id="panoramicone">
<!-------- HEADER --------------------->
<div class="row no-gutters mb-2">
<div class="col-auto" style="font-size:23px;"><i class="far fa-rainbow fa-fw"></i></div>
<div class="col mx-3"><hr class="mt-3 w-100" style="opacity:0.2; border-color:#1c6b76"></div>
<div class="col-auto text-uppercase" style="font-size:23px; letter-spacing:1px;">ABOUT</div>
</div>
<!-------- ABOUT --------------------->
<div class="about" style="color:#709e9f">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia vel urna blandit lobortis. Morbi sed posuere lorem, id viverra ligula. Etiam libero ante, malesuada sit amet venenatis at, ullamcorper vel sem. Proin sed sollicitudin magna.</p>
</div>
<hr class="w-100" style="opacity:0.2; border-color:#1c6b76">
<!-------- PREFERENCES --------------------->
<!--
→ basically, you can write sentences or plainly write out your characters likes/dislikes without a list element
→ alternatively, you could write about your character's positive/negative traits !!
-->
<div class="row no-gutters">
<!-------- LIKES --------->
<div class="col-12 py-2 row no-gutters">
<div class="col-auto p-4 mr-2 d-flex" style="background-color:#3095a3; color:#f2eeea">
<i class="fas fa-check fa-fw m-auto fa-2x"></i>
</div>
<div class="col">
<div class="text-uppercase" style="letter-spacing:1px; font-size:15px">Likes</div>
<div style="color:#709e9f">
content, content, content, content, content, content, content, content, content, content, content, content, content, content, content.
</div>
</div>
</div>
<!-------- DISLIKES --------->
<div class="col-12 py-2 row no-gutters">
<div class="col-auto p-4 mr-2 d-flex" style="background-color:#3095a3; color:#f2eeea">
<i class="fas fa-times fa-fw m-auto fa-2x"></i>
</div>
<div class="col">
<div class="text-uppercase" style="letter-spacing:1px; font-size:15px">Dislikes</div>
<div style="color:#709e9f">
content, content, content, content, content, content, content, content, content, content, content, content, content, content, content.
</div>
</div>
</div>
</div>
</div>
<!--------------------------------------------
2.2.2 || SUMMARY
--------------------------------------------->
<div class="tab-pane fade" id="panoramictwo">
<!-------- HEADER --------------------->
<div class="row no-gutters mb-2">
<div class="col-auto" style="font-size:23px;"><i class="fas fa-cloud fa-fw"></i></div>
<div class="col mx-3"><hr class="mt-3 w-100" style="opacity:0.2; border-color:#1c6b76"></div>
<div class="col-auto text-uppercase" style="font-size:23px; letter-spacing:1px;">Summary</div>
</div>
<!-------- STATS --------------------->
<!--
→ change [width: 50%;] to any number between 0–100
→ the closer to 100, it moves right
-->
<div class="row no-gutters">
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Polite</span>
<span>Sassy</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color: transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Cautious</span>
<span>Impulsive</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color:transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Social</span>
<span>Reserved</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color:transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Intelligence</span>
<span>Ignorant</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color:transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Emotional</span>
<span>Rational</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color:transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
<div class="col-md-6 p-2">
<div class="text-uppercase justify-content-between" style="letter-spacing:0.5px">
<span>Productive</span>
<span>Lazy</span>
</div>
<div class="progress mt-1 rounded-0" style="height:2px; overflow:visible; background-color:#a4c2c3;">
<div class="progress-bar" style="height:100%;
width: 50%;
background-color:transparent;"></div>
<div style="background-color:#3095a3; height:8px; width:8px; margin:-3px 0 0 -4px; border-radius:70%;"></div>
</div>
</div>
</div>
<hr class="w-100" style="opacity:0.2; border-color:#1c6b76">
<!-------- SUMMARY --------------------->
<!--
→ feel free to extend on their personality or a short version of their background?
-->
<div style="color:#709e9f;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Nunc scelerisque viverra mauris in. In mollis nunc sed id semper risus in hendrerit gravida. Semper quis lectus nulla at volutpat. Arcu dui vivamus arcu felis bibendum ut tristique. Eget est lorem ipsum dolor sit amet consectetur adipiscing elit. Ipsum dolor sit amet consectetur adipiscing elit ut.</p>
</div>
</div>
<!--------------------------------------------
2.2.3 || MISC INFO
--------------------------------------------->
<div class="tab-pane fade" id="panoramicthree">
<!-------- HEADER --------------------->
<div class="row no-gutters mb-2">
<div class="col-auto" style="font-size:23px;"><i class="fas fa-star fa-fw"></i></div>
<div class="col mx-3"><hr class="mt-3 w-100" style="opacity:0.2; border-color:#1c6b76"></div>
<div class="col-auto text-uppercase" style="font-size:23px; letter-spacing:1px;">Notes</div>
</div>
<!-------- DESIGN NOTES --------------------->
<div class="design notes pb-3">
<div class="text-uppercase" style="font-size:15px; letter-spacing:1px">Design Notes</div>
<ul style="list-style:square; color:#709e9f;">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<!-------- TRIVIA --------------------->
<div class="trivia">
<div class="text-uppercase" style="font-size:15px; letter-spacing:1px">trivia</div>
<ul style="list-style:square; color:#709e9f;">
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
</div>
<!--------------------------------------------
2.2.4 || MUSIC BOX
--------------------------------------------->
<div class="tab-pane fade" id="panoramicfour">
<!-------- HEADER --------------------->
<div class="row no-gutters">
<div class="col-auto" style="font-size:23px;"><i class="fas fa-music fa-fw"></i></div>
<div class="col mx-3"><hr class="mt-3 w-100" style="opacity:0.2; border-color:#1c6b76"></div>
<div class="col-auto text-uppercase" style="font-size:23px; letter-spacing:1px;">Music Box</div>
</div>
<!-------- MUSIC --------------------->
<!--
→ **NOTE: YouTube video url must be PUBLIC and must NOT be from any playlist.**
→ to change the music, get the string of characters after "https://www.youtube.com/watch?v="
( for example: https://www.youtube.com/watch?v= → fZ1Jxef2hiE ← )
→ then below, copy and paste that into where it says "STRING_HERE"!
-->
<iframe src="https://www.youtube.com/embed/STRING_HERE"
class="mt-2 w-100 rounded"
style="min-height:250px;"
frameborder="0"></iframe>
<!-------- LYRICS --------------------->
<!--
→ delete if unecessary
→ remember to use [<br>] whenever you want a new paragraph!
-->
<div class="mt-2 mb-0 blockquote font-italic" style="font-size:100%; border-color:#a4c2c3; color:#3095a3">
Insert the lyrics here
<br>
if you want...
</div>
</div>
</div>
</div>
<!-------------------------------------------------
CODE ENDS
------------------------------------------------->
</div></div></div></div>
<!-- end -->
