<!--

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>