♱ THE BASICS

created by:Praying
HTMLCustom ColorsMixed ColorsCharacter
Line Count: 124
Difficulty:
Copy
<!-- ✦✦ 【F2U】THE BASICS by diadem

❥ Code Terms of Use: https://toyhou.se/32638528.

=============== ✧✧  Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~

୨୧ BG: #e9e9e9
୨୧ Text/borders: #4c4c4c

୨୧ Font: Tahoma
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
                      main container
------------------------------------------------------------->
<div class="col-md-3 container p-1" style="background-color:#e9e9e9; border:2px solid #4c4c4c">
<div class="col w-100 h-100 p-0 pt-1 pb-0" style="border:1px solid #4c4c4c">

<!------------------ [01 :: character img ] -------------->
<div class="col-auto text-center mb-2">
    <img src="https://i.pinimg.com/736x/b1/86/ff/b186ffd37ccf3a2d1e8288fe33a03dba.jpg" style="max-height:200px; border:4px solid #4c4c4c">
</div>

<!------------------------------------------------------------
                         INFO ROW
------------------------------------------------------------->
<!------------------ [01 ::  Name ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Name:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content content content
    </div>
</div>

<!------------------ [02 ::  Age ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Age:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [03 ::  Gender ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Gender:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [04 ::  Pronouns ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Pronouns:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        pro/noun
    </div>
</div>

<!------------------ [05 ::  Sexuality ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Sexuality:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [06 ::  Species ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Species:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [07 ::  TAROT ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#4c4c4c; font-family:tahoma; font-size:16px">
        <b>Tarot:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#4c4c4c; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<div class="col p-0 pl-0 pr-0 mb-1 my-auto">
    <hr class="my-1" style="border-color: #4c4c4c">
</div>
<!------------------------------------------------------------
                        Simple Sentence
              does not scroll :: don't make too long
------------------------------------------------------------->
<div class="col p-1 mb-1">
    <p class="text-center" style="color:#4c4c4c; font-family: tahoma; font-size:13px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

<!------------------ [02 :: moodboard img ] -------------->
<div class="col-auto text-center mb-2">
    <img src="https://i.pinimg.com/736x/6b/a4/89/6ba489c5da2f7befbebb458917b2a710.jpg" style="max-height:200px; border:4px solid #4c4c4c">
</div>
<!------------------------------------------------------------
                         end of code 
------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------
                           Credits
                    [ do not remove ]
------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" class="text-muted" style="text-decoration:none;font-size:9px; font-family:monospace">✦✦✦</a></p>
Copy
<!-- ✦✦ 【F2U】THE BASICS by diadem

❥ Code Terms of Use: https://toyhou.se/32638528.

=============== ✧✧  Colours used:
TIP!: use CTRL+F [WIN] / CMD+F [MAC] to quickly find the colour and replace it ~

୨୧ Text/borders: #e1e1e1

୨୧ Font: Tahoma
✦✦ ============ feel free to change the icons of course
------>
<!------------------------------------------------------------
                      main container
------------------------------------------------------------->
<div class="col-md-3 container p-1 bg-dark" style="border:2px solid #e1e1e1">
<div class="col w-100 h-100 p-0 pt-1 pb-0" style="border:1px solid #e1e1e1">

<!------------------ [01 :: character img ] -------------->
<div class="col-auto text-center mb-2">
    <img src="https://i.pinimg.com/736x/b1/86/ff/b186ffd37ccf3a2d1e8288fe33a03dba.jpg" style="max-height:200px; border:4px solid #e1e1e1">
</div>

<!------------------------------------------------------------
                         INFO ROW
------------------------------------------------------------->
<!------------------ [01 ::  Name ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Name:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content content content
    </div>
</div>

<!------------------ [02 ::  Age ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Age:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [03 ::  Gender ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Gender:</b>
    </div>
         <div class="col-auto p-0 pr-2 my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [04 ::  Pronouns ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Pronouns:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        pro/noun
    </div>
</div>

<!------------------ [05 ::  Sexuality ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Sexuality:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [06 ::  Species ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Species:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<!------------------ [07 ::  TAROT ] ------------------>
<div class="row no-gutters justify-content-between">
    <div class="col-auto p-0 pl-2 mb-0" style="color:#e1e1e1; font-family:tahoma; font-size:16px">
        <b>Tarot:</b>
    </div>
         <div class="col-auto p-0 pr-2  my-auto" style="color:#e1e1e1; font-family:tahoma; font-size:13px">
        content
    </div>
</div>

<div class="col p-0 pl-0 pr-0 mb-1 my-auto">
    <hr class="my-1" style="border-color: #e1e1e1">
</div>
<!------------------------------------------------------------
                        Simple Sentence
              does not scroll :: don't make too long
------------------------------------------------------------->
<div class="col p-1 mb-1">
    <p class="text-center" style="color:#e1e1e1; font-family: tahoma; font-size:13px">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
</div>

<!------------- [02 :: moodboard/normal img ] -------------->
<div class="col-auto text-center mb-2">
    <img src="https://i.pinimg.com/736x/6b/a4/89/6ba489c5da2f7befbebb458917b2a710.jpg" style="max-height:200px; border:4px solid #e1e1e1">
</div>
<!------------------------------------------------------------
                         end of code 
------------------------------------------------------------->
</div>
</div>
<!------------------------------------------------------------
                           Credits
                    [ do not remove ]
------------------------------------------------------------->
<p class="text-center" style="margin-top:-7px"><a href="/diadem" target="_BLANK" title="code by beel" data-toggle="tooltip" class="text-muted" style="text-decoration:none;font-size:9px; font-family:monospace">✦✦✦</a></p>

Password (optional)

Users must enter a password before unlocking this specific version. Please note that this password will only apply to this version.