F2U Homestuck Code / Template (Code)

<div class="mx-auto" style="max-width: 1000px; font-family: courier new,courier; color: #626262;">

<div class="row no-gutters">

<div class="col-md-8">

<div class="row no-gutters">

<div class="col-md-10">

<div class="row no-gutters">

<!--NAME------------>

<div class="col-md-8 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Name</strong> Name Here</div>

</div>

</div>

<!--AGE------------>

<div class="col-md-4 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Age</strong> X sweeps</div>

</div>

</div>

</div>

<div class="row no-gutters">

<!--BLOOD------------>

<div class="col-md-4 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Blood</strong>

<span style="color: #ff0000;">Color ■</span></div>

</div>

</div>

<!--CLASSPECT------------>

<div class="col-md-6 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Classpect</strong> Class of Aspect</div>

</div>

</div>

<!--MOON------------>

<div class="col-md-2 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Moon</strong>

<div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023975_LBeatLybcUmTl1a.png) center no-repeat; height: 20px; width: 20px; background-size: contain;">

<br>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="col-md-2">

<div class="row no-gutters">

<!--SIGN------------>

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023898_5nAR8IBb8pJjZnU.png) center no-repeat; height: 81px; width: 81px; background-size: contain; margin: auto;">

<br>

</div>

</div>

</div>

</div>

</div>

<!--MODUS------------>

<div class="col-md-8 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-md-12 row no-gutters p-1">

<!--MODUS IMAGE------->

<div class="col-3">

<div style="height: 100px; width: 100px;

background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023927_cS1zT3H81FejURY.png) center no-repeat;

background-size: contain;">

<br>

</div>

</div>

<!--MODUS TEXT------->

<div class="col-9">

<p>Describe how the modus works here.</p>

</div>

</div>

</div>

</div>

<!--STRIFE SPECIBUS------------>

<div class="col-md-4 p-1">

<div class="card p-2" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div style="background: url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023942_ZemMXeh6PrEDRcz.png) center no-repeat; height: 100px; width: 100px; background-size: contain; margin: auto;">

<br>

</div>

</div>

</div>

</div>

</div>

<!--IMAGE------------>

<div class="col-md-4">

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023797_k38Km6BSQjB0lr5.png) center no-repeat; height: 211px; background-size: contain;">

<br>

</div>

</div>

</div>

</div>

</div>

<!--QUIRK------------>

<div class="row no-gutters">

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="card p-1" style="background: #f0ecec;">

<p><strong><span style="color: #000000;">-- </span>exampleName [EN] <span style="color: #000000;">began trolling toyhouseReader [TR] --</span><br>EN: This is a monologue with my quirk</strong>

<br><strong><strong><span style="color: #000000;">-- </span>exampleName [EN]<span style="color: #000000;"> ceased trolling toyhouseReader [TR] --</span></strong></strong>

</p>

</div>

</div>

</div>

</div>

<!--PERSONALITY------------>

<div class="row no-gutters">

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="row no-gutters">

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Strength</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Stamina</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Stability</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Charisma</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Intelligence</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Temper</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Humor</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Creativity</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Kindness</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Anxiety</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Patience</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

<div class="col-md-3 col-sm-12 d-flex justify-content-between p-1"><strong>Hemoloyalty</strong> ⬢⬢⬢⬢⬢⬡⬡⬡⬡⬡</div>

</div>

</div>

</div>

</div>

<div class="row no-gutters">

<!--DREAM SELF------------>

<div class="col-md-4">

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023817_bEZJsnHgaOF1mCz.png) center no-repeat; height: 211px; background-size: contain;">

<br>

</div>

</div>

</div>

</div>

<div class="col-md-4">

<div class="row no-gutters">

<!--PLANET------------>

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Planet</strong> Land of X and Y</div>

</div>

</div>

<!--CONSORTS------------>

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Consorts</strong>Species</div>

</div>

</div>

<!--DENIZEN------------>

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12 d-flex justify-content-between p-1"><strong>Denizen</strong> Name</div>

</div>

</div>

<!--CREDIT DO NOT DELETE------------>

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div class="col-12" style="text-align: center;"><a href="https://toyhou.se/17697187.f2u-homestuck-code-template" id=""><strong>Template</strong></a></div>

</div>

</div>

</div>

</div>

<!--GOD TIER------------>

<div class="col-md-4">

<div class="col-md-12 p-1">

<div class="card p-1" style="background-color: #d8d8d8; border-style: solid; border-color: #898989; border-width: medium;">

<div style="background:url(https://f2.toyhou.se/file/f2-toyhou-se/images/54023839_Gbzflbn4D8HX8qo.png) center no-repeat; height: 211px; background-size: contain;">

<br>

</div>

</div>

</div>

</div>

</div>

</div>