Apparently the “Rosy” color version cannot be accessed, it’s such a shame since it would fit one of my darlings so well ;;;, is there another way i could get the link for that color variant elsewhere? Ty in advance!!!
Amazing code! I changed the background to make it into a pin board, gives the vibes of documenting something! Right now I'm using it for this character, but I'll probably copy my edits to other characters too!
you can totally do this; you just might need some html/css coding knowledge. a super simple way you could break things up is by copy-pasting the whole thing, then cutting out the bottom half of the top copy and the top half of the bottom copy, if that makes sense. the divs with the "col-md-[number]" classes each represent one of the little card things; as long as those are left intact, you can remove, duplicate, move, or otherwise alter them to change the layout. here's a resource with some info about tabs (not mine), if you want to try making a tabbed version on your own! my On File 2.0 code is another paper-themed layout with tabs, if you're looking for something easier. hopefully something here was helpful!
my browser wont let me go to the website with the code, do you have it anywhere else? ^^ preferably the grayscale version
that's a shame; sounds like it may be some kind of web filter. those are pretty common on school wifi, if that's what you're using - though I have no idea why disroot (the website I use) would be blocked. in any case, here's the greyscale code:
<!--
LINED PAPER
profile code
____________
RULES:
- do not remove the credit
- otherwise I do not care what you do
- though it would be cool if you notified me if you used it! you don't have to but it means I get to see other people using my code and that's very nice
NOTES:
- this code uses custom colors, and will look the same across all themes. because it uses a custom background and fancy image border, it will be more challenging to adjust the colors. as such, I have prepared a few color variants! this is the code for the GREYSCALE theme.
- sort of WYSIWYG friendly. WYSIWYG will not break it (!!! this is harder to pull off than you may realize) but some sections will require the code editor to change.
-->
<div class="justify-content-center">
<div class="col-md-7" style="border: 15px transparent solid; border-image: url(https://i.imgur.com/2I4HkLF.png) 15 round; padding: 0px;">
<div class="card" style="padding: 15px; background: url(https://i.imgur.com/mzahd7o.png) #e0e0e0; border: none; color: #333333; border-radius: 0px; ">
<div style="z-index: 1; position: absolute; height: 100%; width: 100%; margin: -15px;">
<div style="height: 100%; border-left: 2px solid #c8c8c8; margin-left: 90px;"></div>
<div class="card" style="height: 30px; width: 30px; border: none; border-radius: 50%; position: absolute; left: 30px; top: 80px;"><div style="height: 30px; width: 30px; border-radius: 50%; background-image: radial-gradient(transparent 50%, rgba(0,0,0,0.3));"></div></div>
<div class="card" style="height: 30px; width: 30px; border: none; border-radius: 50%; position: absolute; left: 30px; top: 35%;"><div style="height: 30px; width: 30px; border-radius: 50%; background-image: radial-gradient(transparent 50%, rgba(0,0,0,0.3));"></div></div>
<div class="card" style="height: 30px; width: 30px; border: none; border-radius: 50%; position: absolute; left: 30px; top: 65%;"><div style="height: 30px; width: 30px; border-radius: 50%; background-image: radial-gradient(transparent 50%, rgba(0,0,0,0.3));"></div></div>
<div class="card" style="height: 30px; width: 30px; border: none; border-radius: 50%; position: absolute; left: 30px; bottom: 80px;"><div style="height: 30px; width: 30px; border-radius: 50%; background-image: radial-gradient(transparent 50%, rgba(0,0,0,0.3));"></div></div>
</div>
<div class="row no-gutters" style="z-index: 5;">
<div class="col-md-12" style="padding: 15px;">
<div class="card-block text-center" style="height: 100%; font-style: italic; font-size: 2.3rem; font-weight: bold; transform: rotate(-1deg);">
character name
</div>
</div>
<div class="col-md-6" style="padding: 15px;">
<div class="card card-block" style="background: #fff; border: none; box-shadow: 0 0 3px rgba(0,0,0,0.25); transform: rotate(-1deg);">
<h1>basics</h1>
<div class="row no-gutters">
<!-- FULL NAME - may or may not contrast with the name at the top of the page. titles can be included! -->
<div class="col-auto">
<b>full name</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- AGE - you know what this is -->
<div class="col-auto">
<b>age</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- PRONOUNS - I could put gender here, but this is more specific and relevant -->
<div class="col-auto">
<b>pronouns</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- ORIENTATION - or sexuality, you know the drill. I often put 'unknown' or 'undecided' here -->
<div class="col-auto">
<b>orientation</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- OCCUPATION - what do they do? literally or metaphorically -->
<div class="col-auto">
<b>occupation</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- BIRTHDAY - pretty obvious, can also be replaced with other information you deem more important, like place of residence or species -->
<div class="col-auto">
<b>birthday</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<!-- ROLE - as in, protagonist, deuteragonist, background character -->
<div class="col-auto">
<b>role</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
</div>
</div>
</div>
<div class="col-md-6" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #e0e0e0; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>appearance</h1>
<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.
</p>
</div>
</div>
<div class="col-md-5" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #c8c8c8; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>statistics</h1>
<!-- NOTE: To adjust the bars, change the percentage of the 'padding-left' element -->
<div class="row no-gutters">
<div class="col-auto">
introverted
</div>
<div class="col"></div>
<div class="col-auto">
extraverted
</div>
<div class="w-100">
<div class="progress-bar bg-faded" style="background: #ededed; width: 100%; height: 10px; border-radius: 5px; margin-top: 5px; padding-left: 97%;"><i class="fa fa-pen" style="position: relative; top: -9px; color: #333333;"></i></div>
</div>
<div class="col-auto">
spontaneous
</div>
<div class="col"></div>
<div class="col-auto">
conscientious
</div>
<div class="w-100">
<div class="progress-bar bg-faded" style="background: #ededed; width: 100%; height: 10px; border-radius: 5px; margin-top: 5px; padding-left: 75%;"><i class="fa fa-pen" style="position: relative; top: -9px; color: #333333;"></i></div>
</div>
<div class="col-auto">
hostile
</div>
<div class="col"></div>
<div class="col-auto">
agreeable
</div>
<div class="w-100">
<div class="progress-bar bg-faded" style="background: #ededed; width: 100%; height: 10px; border-radius: 5px; margin-top: 5px; padding-left: 50%;"><i class="fa fa-pen" style="position: relative; top: -9px; color: #333333;"></i></div>
</div>
<div class="col-auto">
practical
</div>
<div class="col"></div>
<div class="col-auto">
imaginative
</div>
<div class="w-100">
<div class="progress-bar bg-faded" style="background: #ededed; width: 100%; height: 10px; border-radius: 5px; margin-top: 5px; padding-left: 25%;"><i class="fa fa-pen" style="position: relative; top: -9px; color: #333333;"></i></div>
</div>
<div class="col-auto">
stable
</div>
<div class="col"></div>
<div class="col-auto">
neurotic
</div>
<div class="w-100">
<div class="progress-bar bg-faded" style="background: #ededed; width: 100%; height: 10px; border-radius: 5px; margin-top: 5px; padding-left: 1%;"><i class="fa fa-pen" style="position: relative; top: -9px; color: #333333;"></i></div>
</div>
</div>
</div>
</div>
<div class="col-md-7" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #e0e0e0; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>about</h1>
<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>
</div>
</div>
<!-- divider -->
<div class="col-md-12 text-center" style="color: #9f9f9f; padding: 15px;">
<div class="row no-gutters" style="background: #9f9f9f; height: 5px; border-radius: 5px;">
<div class="col-auto">
<i class="fa fa-circle" style="position: relative; top: -9px; color: #333;"></i>
</div>
<div class="col">
<i class="fa fa-circle" style="position: relative; top: -9px; color: #333;"></i>
</div>
<div class="col-auto">
<i class="fa fa-circle" style="position: relative; top: -9px; color: #333;"></i>
</div>
</div>
</div>
<div class="col-md-6" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #e0e0e0; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>background</h1>
<div class="row no-gutters">
<div class="col-auto">
<b>height</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<div class="col-auto">
<b>gender</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<div class="col-auto">
<b>ethnicity</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<div class="col-auto">
<b>social class</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
<div class="col-auto">
<b>education</b>
</div>
<div class="col"></div>
<div class="col-auto">
<i>entry</i>
</div>
<div class="w-100"><p style="font-size: 0em;"><br></p></div>
</div>
<div style="border-bottom: 2px dashed #e0e0e0; margin: 5px;"></div>
<p>
Describe your character's background: the environment they grew up in, and how it affects them. This is a lot more important than some people might think.
</p>
</div>
</div>
<div class="col-md-6" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #e0e0e0; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>relationships</h1>
<p>
<div style="border-bottom: 2px dashed #e0e0e0;"><b>Character Name</b><span class="pull-right font-italic">relationship</span></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="border-bottom: 2px dashed #e0e0e0;"><b>Character Name</b><span class="pull-right font-italic">relationship</span></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div style="border-bottom: 2px dashed #e0e0e0;"><b>Character Name</b><span class="pull-right font-italic">relationship</span></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="col-md-7" style="padding: 15px;">
<div class="card bg-white card-block" style="height: 100%; border: 2px dashed #e0e0e0; box-shadow: 0 0 3px rgba(0,0,0,0.25);">
<h1>story</h1>
<h4>i.</h4>
<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.
</p>
<h4>ii.</h4>
<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>
<h4>iii.</h4>
<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>
</div>
</div>
<div class="col-md-5" style="padding: 15px;">
<div class="card card-block" style="background: #fff; border: none; box-shadow: 0 0 3px rgba(0,0,0,0.25); transform: rotate(1deg);">
<h1>details</h1>
<i>things to remember</i>
<p><br>
<i class="fa fa-paper-plane fa-fw"></i> Lorem ipsum dolor sit amet. <br><br>
<i class="fa fa-paper-plane fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt. <br><br>
<i class="fa fa-paper-plane fa-fw"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<!-- CREDIT - DO NOT REMOVE -->
<a href="https://toyhou.se/architeuthid_codes" title="coded by Architeuthid" style="text-align: right; margin: -5px;"><i class="fa fa-code" style="color: #333333;"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
[FTU] Lined Paper's Comments