Underground

CuckooHoopoe

Info

Created: 2 years, 6 months ago
Creator: https://toyhou.se/CuckooHoopoe
Favorites: 559

Profile

Underground [f2u]

Hello, this is the first code I'm sharing. No one asked but I thought I'd put it out there lol. I never intended to share my codes but after I made this one for Charlie I didn't want it to go to waste
(also check out Carlie's profile if you want to see filled out example)

So it's supposed to look like a punk rock concert poster, but it can be used as any kind of poster.

IMPORTANT NOTES

I tried to comment out the important bits but I would still reccomend that you have some HTML knowledge
Please don't remove the credits
Turn off WYSIWYG
Feel free to frankenstein with other codes (but make sure to leave in all the credits)
A comment would be appreciated, I'd like to see it!

Mobile Friendly

Custom Colours

Character

Code


<!-- =================================================================
COLOURS
  » highlight the numbers i have written below
  » hit ctrl f
  » hit the plus sign 
  » put in your new colour (use hex codes)
  » click the "all" button - this automatically replaces all the colours
  
35ddcc          accent colour
fefefe          text & outer border
111111          background & name
================================================================== -->
<div class="container mx-auto p-2" style="max-width:800px; font-family:courier; color:#fefefe;background:#fefefe">
  <div class="card rounded-0 p-1 text-center" style="background:#111111; border:6px solid #35ddcc">
    <div class="mx-auto w-75 mt-1" style="background:#35ddcc; clip-path: polygon(0 0, 98% 0, 100% 88%, 2% 100%);">
      <!-- NAME -->
      <span style="color:#111111; font-size:30pt; font-weight:800; font-family:monospace">Character Name</span>
    </div>
    <!-- FLAVOUR TEXT -->
    <p class="m-1"><span style="background:#35ddcc;color:#111111;">title or whatever</span></p>
    <div class="row no-gutters">
      <div class="col-sm-4 p-1 order-sm-2">
        <div class="card bg-transparent rounded-0 h-100 p-1" style="border:2px solid #35ddcc">
          <!-- CHARACTER ICON -->
          <div class="card rounded-0 border-0 h-100" style="background:url(IMAGE_LINK) center;background-size:cover;min-height:100px"></div>
        </div>
      </div>
      <div class="col-sm-4 p-1 order-sm-1">
        <!-- FONT AWESOME ICON -->
        <i class="fas fa-guitar-electric fa-3x mb-2" style="color:#35ddcc"></i>
        <div class="card bg-transparent rounded-0" style="border:2px solid #35ddcc">
          <!-- LEFT INFO COLUMN -->
          <div class="justify-content-between px-1">
            <span>NAME</span>
            <span>unknown</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>GENDER</span>
            <span>unknown</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>PRONOUNS</span>
            <span>unknown</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>AGE</span>
            <span>unknown</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>BIRTHDAY</span>
            <span>unknown</span>
          </div>
          <!-- ADD MORE ABOVE - copy + paste the following code:
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>TITLE</span>
            <span>unknown</span>
          </div>
          -->
        </div>
      </div>
      <div class="col-sm-4 p-1 order-sm-3">
        <!-- FONT AWESOME ICON -->
        <i class="fas fa-guitar-electric fa-3x mb-2" style="color:#35ddcc"></i>
        <div class="card bg-transparent rounded-0" style="border:2px solid #35ddcc">
          <!-- RIGHT INFO COLUMN -->
          <div class="justify-content-between px-1">
            <span>RACE</span>
            <span>or species</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>ORIENTATION</span>
            <span>unknown</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>R.STATUS</span>
            <span>single/taken</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>L.STATUS</span>
            <span>alive/dead</span>
          </div>
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>OCCUPATION</span>
            <span>unknown</span>
          </div>
          <!-- ADD MORE ABOVE - copy + paste the following code:
          <div class="justify-content-between px-1" style="border-top:2px dashed #35ddcc">
            <span>TITLE</span>
            <span>unknown</span>
          </div>
          -->
        </div>
      </div>
    </div>
    <!-- INFO BOX -->
    <div class="card bg-transparent rounded-0 m-1 p-1" style="border:2px solid #35ddcc">
      <p>Add some info here. It can be their backstory, personality, song lyrics, etc. This part can be as long as you want, the box will stretch with more content. You can add a scroll bar if you want but I personally dont really like them since they're a pain to deal with on mobile.</p>
    </div>
    <!-- INFO BOX END -->
    <div class="row no-gutters">
      <div class="col-sm-4 p-1">
        <div class="card bg-transparent rounded-0 h-100 text-left" style="border:2px solid #35ddcc">
          <div class="px-1 display-4">likes</div>
          <!--LIKES-->
          <div class="px-1" style="border-top:2px dashed #35ddcc">write as much as you want here, the little box will stretch to fit the content and all three boxes remain equal</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc">something they like</div>
          <!-- ADD MORE ABOVE - copy + paste the following code:
          <div class="px-1" style="border-top:2px dashed #35ddcc">content</div>
          -->
        </div>
      </div>
      <div class="col-sm-4 p-1">
        <div class="card bg-transparent rounded-0 h-100 text-left" style="border:2px solid #35ddcc">
          <div class="px-1 display-4">dislikes</div>
          <!-- DISLIKES -->
          <div class="px-1" style="border-top:2px dashed #35ddcc">something they hate</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc">dislike</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc">dislike</div>
          <!-- ADD MORE ABOVE - copy + paste the following code:
          <div class="px-1" style="border-top:2px dashed #35ddcc">content</div>
          -->
        </div>
      </div>
      <div class="col-sm-4 p-1">
        <div class="card bg-transparent rounded-0 h-100 text-left" style="border:2px solid #35ddcc">
          <div class="px-1 display-4">notes</div>
          <!-- NOTES -->
          <div class="px-1" style="border-top:2px dashed #35ddcc">other notes like hobbies, habbits, random trivia, etc.</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc">note</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc">another note</div>
          <!-- ADD MORE ABOVE - copy + paste the following code:
          <div class="px-1" style="border-top:2px dashed #35ddcc">content</div>
          -->
        </div>
      </div>
    </div>
    <div class="card bg-transparent rounded-0 m-1 p-1" style="border:2px solid #35ddcc">
      <div class="row my-auto justify-content-around">
        <!-- RIBBONS - feel free to remove -->
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        <!-- ADD MORE ABOVE - copy + paste the following code:
        <div class="mx-1 tooltipster" title="Ribbon_Title"><img src="IMAGE_LINK"></div>
        -->
      </div>
    </div>
    <div class="row no-gutters">
      <div class="col-sm-2 p-1">
        <div class="card bg-transparent rounded-0 h-100 p-1" style="border:2px solid #35ddcc">
          <!-- LEFT AESTHETIC IMAGE -->
          <div class="card rounded-0 border-0 h-100" style="background:url(IMAGE_LINK) center;background-size:cover;min-height:100px"></div>
        </div>
      </div>
      <div class="col-sm-8 p-1">
        <div class="card bg-transparent rounded-0 h-100 text-left" style="border:2px solid #35ddcc">
          <div class="px-1 display-4">playlist</div>
          <div class="px-1" style="border-top:2px dashed #35ddcc"><a href="SONG_LINK">Song - Artist</a></div>
          <div class="px-1" style="border-top:2px dashed #35ddcc"><a href="SONG_LINK">Song - Artist</a></div>
          <div class="px-1" style="border-top:2px dashed #35ddcc"><a href="SONG_LINK">Song - Artist</a></div>
          <div class="px-1" style="border-top:2px dashed #35ddcc"><a href="SONG_LINK">Song - Artist</a></div>
        <!-- ADD MORE ABOVE - copy + paste the following code:
        <div class="px-1" style="border-top:2px dashed #35ddcc"><a href="SONG_LINK">Song - Artist</a></div>
        -->
        </div>
      </div>
      <div class="col-sm-2 p-1">
        <div class="card bg-transparent rounded-0 h-100 p-1" style="border:2px solid #35ddcc">
          <div class="card rounded-0 border-0 h-100" style="background:url(IMAGE_LINK) center;background-size:cover;min-height:100px"></div>
        </div>
      </div>
    </div>
    <p class="m-1">
      <!-- CREDITS - add more as neccessary -->
      <span style="background:#35ddcc; color:#111111">|
        <a href="https://toyhou.se/13288656.underground-f2u-" style="color:#111111" class="tooltipster" title="code by CuckooHoopoe"><i class="fal fa-code fa-sm"></i></a> |
        <a href="LINK" style="color:#111111" class="tooltipster" title="ribbons"><i class="fal fa-award fa-sm"></i></a> |
        <a href="LINK" style="color:#111111" class="tooltipster" title="images"><i class="fal fa-spray-can fa-sm"></i></a> |
      </span>
    </p>
  </div>
</div>

Character Name
title or whatever

NAME
unknown

GENDER
unknown

PRONOUNS
unknown

AGE
unknown

BIRTHDAY
unknown

RACE
or species

ORIENTATION
unknown

R.STATUS
single/taken

L.STATUS
alive/dead

OCCUPATION
unknown
Add some info here. It can be their backstory, personality, song lyrics, etc. This part can be as long as you want, the box will stretch with more content. You can add a scroll bar if you want but I personally dont really like them since they're a pain to deal with on mobile.
likes
write as much as you want here, the little box will stretch to fit the content and all three boxes remain equal
something they like
dislikes
something they hate
dislike
dislike
notes
other notes like hobbies, habbits, random trivia, etc.
note
another note
playlist
Song - Artist
Song - Artist
Song - Artist
Song - Artist

|
 |
 |
 |

Recent Images

No images.