<!-- ------------------------------
JOURNAL (code by jiko, layout by ushiwaka)
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
→ turn ON Code Editor
TIPPY TIPS
→ insert your img links INSIDE or quotation marks!!
MUSIC
→ to change the video, get the string of characters after "https://www.youtube.com/watch?v="
→ for example: https://www.youtube.com/watch?v="""""QZShA_a-5r8""""
→ inside the quatations is what you use
→ the video itself must NOT be from a playlist
→ then below, copy and paste that into where it says, "STRING HERE" ;3
------------------------------- -->
<div class="mx-auto" style="font-size:12.5px; letter-spacing:0.3px; max-width:900px;">
<div id="journalcarousel" class="carousel slide p-3" data-ride="false" data-pause="true">
<!-- ------------------------------
CONTROLS
- the arrows
------------------------------- -->
<div class="row no-gutters">
<div class="mx-auto col-lg-9 col-10">
<div class="row no-gutters">
<!-- PREVIOUS -->
<div class="col-6 p-1">
<a class="left carousel-control btn btn-default rounded-0 border-0 w-100 px-3 p-2"
data-slide="prev" href="#journalcarousel" aria-hidden="true">
<i class="fas fa-angle-left fa-fw"></i>
</a>
</div>
<!-- NEXT -->
<div class="col-6 p-1">
<a class="right carousel-control btn btn-default rounded-0 border-0 w-100 px-3 p-2"
data-slide="next" href="#journalcarousel" aria-hidden="true">
<i class="fas fa-angle-right fa-fw"></i>
</a>
</div>
</div>
</div>
</div>
<!-- ------------------------------
CONTENT - START!
- if you would like a custom-coloured border,
add [background-color: #000000] after [border-radius:25px;] (just below!)
- replace #000000 with any hex code
------------------------------- -->
<div class="card p-1 m-1 mt-2" style="border-radius:25px;">
<div class="card bg-faded p-2 m-1" style="border-radius:20px; height:450px">
<div class="carousel-inner">
<!-- ------------------------------
(1) FIRST SECTION
- the basics
- personality
- stats
- trivia
------------------------------- -->
<div class="carousel-item active">
<div class="px-lg-3 px-1 row no-gutters" style="height:450px; overflow:auto">
<!-- --- (1.1) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- BASICS ------------------------------ -->
<div class="basics row no-gutters">
<!-- PROFILE PICTURE -->
<!-- squared images are recommanded! -->
<div class="col-lg-6 hidden-md-down m-auto order-sm-2 order-1">
<div class="text-center">
<img src="https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png"
class="img-thumbnail p-1 mb-2" style="max-width:140px;">
</div>
</div>
<!-- INFO -->
<div class="col-lg-6 order-sm-1 order-2">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">About</div>
<div class="py-2">
<div class="justify-content-between p-1">
<span class="text-uppercase text-muted text-truncate">name</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-uppercase text-muted text-truncate">alias</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-uppercase text-muted text-truncate">age</span>
<span>content</span>
</div>
<div class="justify-content-between p-1">
<span class="text-uppercase text-muted text-truncate">gender</span>
<span>prn/prn</span>
</div>
</div>
</div>
</div>
<hr>
<!-- --- PERSONITY ------------------------------ -->
<div class="personality">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Personality</div>
<div class="text-muted" style="height:210px; overflow:auto">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Fermentum dui faucibus in ornare quam viverra orci sagittis eu.</p>
</div>
</div>
</div>
<!-- --- (1.2) ------------------------------ -->
<!-- will disappear on mobile view! -->
<div class="col-auto px-2 hidden-xs-down">
<div class="card h-100" style="border-width:0 1px 0 0;"></div>
</div>
<!-- will appear on mobile view! -->
<div class="col-auto px-2 hidden-sm-up w-100">
<hr>
</div>
<!-- --- (1.3) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- STATS ------------------------------ -->
<div class="stats">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Statistics</div>
<div class="px-1 d-flex">
<span class="w-50 p-1 text-truncate text-uppercase text-muted">Power</span>
<div class="w-50 mx-1 progress my-auto" style="height:4px">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
<div class="px-1 d-flex">
<span class="w-50 p-1 text-truncate text-uppercase text-muted">Speed</span>
<div class="w-50 mx-1 progress my-auto" style="height:4px">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
<div class="px-1 d-flex">
<span class="w-50 p-1 text-truncate text-uppercase text-muted">Technique</span>
<div class="w-50 mx-1 progress my-auto" style="height:4px">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
<div class="px-1 d-flex">
<span class="w-50 p-1 text-truncate text-uppercase text-muted">Intelligence</span>
<div class="w-50 mx-1 progress my-auto" style="height:4px">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
<div class="px-1 d-flex">
<span class="w-50 p-1 text-truncate text-uppercase text-muted">Cooperativeness</span>
<div class="w-50 mx-1 progress my-auto" style="height:4px">
<div class="progress-bar" style="width: 50%"></div>
</div>
</div>
</div>
<hr>
<!-- --- TRIVIA ------------------------------ -->
<!-- the [li class="pb-1"] are there for easier readability (imo) but removeable! -->
<div class="trivia">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Trivia</div>
<ul class="text-muted" style="height:200px; overflow:auto">
<li class="pb-1">Fringilla ut morbi tincidunt augue interdum velit. Habitasse platea dictumst vestibulum rhoncus est.</li>
<li class="pb-1">Ut consequat semper viverra nam. At tempor commodo ullamcorper a. Nullam vehicula ipsum a arcu cursus vitae congue mauris.</li>
<li class="pb-1">Egestas tellus rutrum tellus pellentesque eu. Suscipit tellus mauris a diam maecenas. Donec et odio pellentesque diam volutpat commodo sed egestas egestas.</li>
<li class="pb-1">Leo integer malesuada nunc vel risus commodo. Nascetur ridiculus mus mauris vitae ultricies leo integer.</li>
</ul>
</div>
</div>
</div>
</div>
<!-- ------------------------------
(2) SECOND SECTION
- lore (both past and present)
------------------------------- -->
<div class="carousel-item">
<div class="px-3 row no-gutters" style="height:450px; overflow:auto">
<!-- --- (2.1) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- PAST ------------------------------ -->
<div class="past">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Past</div>
<div class="text-justify text-muted" style="height:405px; overflow:auto">
<p>Scelerisque fermentum dui faucibus in ornare quam viverra. Scelerisque in dictum non consectetur a erat nam at lectus. Sit amet justo donec enim diam vulputate. Sagittis orci a scelerisque purus semper eget duis at tellus.</p>
<p>Tellus in hac habitasse platea dictumst vestibulum rhoncus. Dictumst vestibulum rhoncus est pellentesque elit. Nulla posuere sollicitudin aliquam ultrices. Consequat nisl vel pretium lectus quam id leo.</p>
<p>Sed id semper risus in hendrerit gravida rutrum quisque. Id neque aliquam vestibulum morbi blandit cursus. Turpis egestas sed tempus urna et pharetra pharetra massa massa. Nisl nisi scelerisque eu ultrices vitae auctor eu.</p>
<p>Vel elit scelerisque mauris pellentesque pulvinar pellentesque. Donec massa sapien faucibus et molestie ac. Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Eget dolor morbi non arcu risus quis varius quam quisque. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.</p>
<p>Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Nulla aliquet porttitor lacus luctus accumsan tortor posuere. A erat nam at lectus urna.</p>
</div>
</div>
</div>
<!-- --- (2.2) ------------------------------ -->
<!-- will disappear on mobile view! -->
<div class="col-auto px-2 hidden-xs-down">
<div class="card h-100" style="border-width:0 1px 0 0;"></div>
</div>
<!-- will appear on mobile view! -->
<div class="col-auto px-2 hidden-sm-up w-100">
<hr>
</div>
<!-- --- (2.3) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- PRESENT ------------------------------ -->
<div class="present">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Present</div>
<div class="text-justify text-muted" style="height:405px; overflow:auto">
<p>Lectus arcu bibendum at varius. Quis hendrerit dolor magna eget est lorem ipsum. Et malesuada fames ac turpis egestas integer eget aliquet nibh. Morbi tincidunt augue interdum velit euismod.</p>
<p>Feugiat nisl pretium fusce id velit ut. Nisl vel pretium lectus quam id leo in vitae. Phasellus egestas tellus rutrum tellus. Accumsan in nisl nisi scelerisque.</p>
<p>Risus sed vulputate odio ut enim blandit volutpat. Vivamus arcu felis bibendum ut tristique et egestas quis ipsum. Proin fermentum leo vel orci porta non.</p>
<p>Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Vitae congue eu consequat ac felis donec et odio. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Nisi est sit amet facilisis magna etiam. Egestas fringilla phasellus faucibus scelerisque.</p>
<p>Pellentesque dignissim enim sit amet venenatis urna. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Ut morbi tincidunt augue interdum. Vitae sapien pellentesque habitant morbi tristique senectus et netus. In metus vulputate eu scelerisque felis imperdiet proin. Ultrices in iaculis nunc sed augue lacus. Nunc sed velit dignissim sodales ut. </p>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------
(3) THIRD SECTION
- relationships
- playlist
------------------------------- -->
<div class="carousel-item">
<div class="px-3 row no-gutters" style="height:450px; overflow:auto">
<!-- --- (3.1) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- RELATIONSHIPS ------------------------------ -->
<div class="relationships">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Relationships</div>
<div style="height:405px; overflow:auto">
<!-- --- CHARACTER ONE --- -->
<div class="row no-gutters p-1 py-3">
<!-- IMAGE -->
<div class="col-lg-5 hidden-xs-down w-100" style="min-height:100px; border-radius:10px;
/* IMAGE
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!-- DESCRIPTION -->
<div class="col-lg-7 px-lg-3">
<a href="CHARACTER LINK" style="font-size:15px;">Character Name</a>
<br><i>relationship</i>
<hr class="my-2">
<div class="text-justify text-muted" style="max-height:150px; overflow:auto">
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet.</p>
<p>Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.</p>
</div>
</div>
</div>
<!-- --- CHARACTER TWO --- -->
<div class="row no-gutters p-1 py-3">
<!-- IMAGE -->
<div class="col-lg-5 hidden-xs-down w-100" style="min-height:100px; border-radius:10px;
/* IMAGE
====================================== */;
background-image: url(https://file.toyhou.se/images/7745356_UbxFaTbtSE8Egg6.png);
background-size:cover;
background-repeat: no-repeat;
background-position: center;"></div>
<!-- DESCRIPTION -->
<div class="col-lg-7 px-lg-3">
<a href="CHARACTER LINK" style="font-size:15px;">Character Name</a>
<br><i>relationship</i>
<hr class="my-2">
<div class="text-justify text-muted" style="max-height:150px; overflow:auto">
<p>In cursus nisi ac eros convallis, at fringilla purus laoreet.</p>
<p>Morbi pretium gravida lacus, vel tempor libero interdum et. Integer pellentesque pretium dolor vel eleifend. Vestibulum ornare id eros id rutrum.</p>
</div>
</div>
</div>
<!-- add/delete characters above THIS line! -->
</div>
</div>
</div>
<!-- --- (3.2) ------------------------------ -->
<!-- will disappear on mobile view! -->
<div class="col-auto px-2 hidden-xs-down">
<div class="card h-100" style="border-width:0 1px 0 0;"></div>
</div>
<!-- will appear on mobile view! -->
<div class="col-auto px-2 hidden-sm-up w-100">
<hr>
</div>
<!-- --- (3.3) ------------------------------ -->
<div class="col-sm px-2">
<!-- --- PLAYLIST ------------------------------ -->
<div class="playlist">
<div class="pb-1 text-lg-left text-center text-uppercase"
style="letter-spacing:2px; font-size:18px; font-weight: 300">Playlist</div>
<div class="row no-gutters text-muted" style="height:405px; overflow:auto">
<!-- SONG ONE -->
<div class="col-lg-6 p-1 pb-3">
<iframe src="https://www.youtube.com/embed/STRING HERE"
class="flex-fill pb-2"
style="width:100%; min-height:50px;"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>
<div class="text-center">
<em>Song Title</em><br>
<span class="text-uppercase">Band</span>
</div>
</div>
<!-- SONG TWO -->
<div class="col-lg-6 p-1 pb-3">
<iframe src="https://www.youtube.com/embed/STRING HERE"
class="flex-fill pb-2"
style="width:100%; min-height:50px;"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>
<div class="text-center">
<em>Song Title</em><br>
<span class="text-uppercase">Band</span>
</div>
</div>
<!-- SONG THREE -->
<div class="col-lg-6 p-1 pb-3">
<iframe src="https://www.youtube.com/embed/STRING HERE"
class="flex-fill pb-2"
style="width:100%; min-height:50px;"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>
<div class="text-center">
<em>Song Title</em><br>
<span class="text-uppercase">Band</span>
</div>
</div>
<!-- SONG FOUR -->
<div class="col-lg-6 p-1 pb-3">
<iframe src="https://www.youtube.com/embed/STRING HERE"
class="flex-fill pb-2"
style="width:100%; min-height:50px;"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">
</iframe>
<div class="text-center">
<em>Song Title</em><br>
<span class="text-uppercase">Band</span>
</div>
</div>
<!-- add/delete songs above THIS line! -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------------
CREDITS
- dont touch the below,
thanks! c:
------------------------------- -->
<div class="small col-lg-12 p-1 order-lg-4">
<div class="text-right" style="letter-spacing:0.3em;">
<a href="https://toyhou.se/9450410.-f2u-diary" class="tooltipster" title="code by jiko" style="text-decoration: none;">
<i class="far fa-code"></i>
</a> .
<a href="https://toyhou.se/ushiwaka" class="tooltipster" title="layout by ushiwaka" style="text-decoration: none;">
<i class="far fa-lightbulb"></i>
</a>
</div>
</div>
</div>
</div>
