What a Mess

CuckooHoopoe

Info

Created: 2 years, 3 months ago
Creator: https://toyhou.se/CuckooHoopoe
Favorites: 928

Profile

What A Mess [f2u]

I have a certian chracter profile that i re-code every month, the codes are good, its just never good enough. I thought I might as well share them so my time isn't wasted.

This is supposed to look cluttered, with space for a lot of pictures and notes. Getting everything to fit without scroll bars and making it look good on mobile literally fried my brain. But if I did miss something or it looks wonky on your device please let me know ಥ_ಥ

Examples of this code in use: Schooner, Blaise (slightly modified) and Davorin (slightly modified)

Features

Mobile Friendly
Custom colours
Not beginner friendly

IMPORTANT NOTES

I reccomend not messing with the image and columns unless you really know what you're doing
Don't forget to credit the images used! Each image is clickable to lead to the source, all you have to do is paste the right link!
A comment would be appreciated, I'd like to see it!
Don't use WYSIWYG

Code Rules

Sample Character

Code


<!--
NOTES: 
  » please dont forget to link back to the original image, I made it as easy as possible
  » dont play around with the columns or placements unless you know what you are doing
  » dont remove my credit

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
  
    FF0000              accent
    EDEDED              text
    000000              background
      
    IMG_LINK            image adress
    IMG_SOURCE          credit source if image

-->


<div class="container px-0" style="color:#EDEDED; background:#000000; box-shadow:0 0 4px black">
  <div class="row no-gutters">
    <div class="col-sm-1">

      <!-- left image bar -->
      <div class="h-100" style="background-size:cover; min-height:100px;
        background:url(IMG_LINK) center; ">
        <!-- image credit -->
        <a class="stretched-link" href="IMG_SOURCE"></a>

      </div>
    </div>
    <div class="col-sm-3">
      <div class="card border-0 rounded-0 bg-transparent h-100">

        <!-- character image -->
        <div style="height:100%;min-height:400px;background-size:cover;background-repeat:no-repeat;background-position:top center; 
          background-image:url(IMG_LINK);">
          <!-- image credit -->
          <a class="stretched-link" href="IMG_SOURCE"></a>

        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="card border-0 rounded-0 bg-transparent h-100">
        <div class="card border-0 rounded-0 py-1 px-3" style="background:#FF0000;">

          <!-- name or title -->
          <p class="display-4 text-center" style="font-size:30px">Title</p>
        </div>
          <div class="px-2 py-1">
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>NAME</span>
              <span class="text-right">name
              </span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>SPECIES</span>
              <span class="text-right">spacies or race</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>GENDER</span>
              <span class="text-right">gender || pronouns
              </span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>AGE</span>
              <span class="text-right">age</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>BIRTHDAY</span>
              <span class="text-right">date or sign
              </span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>RESIDENCE</span>
              <span class="text-right">where they live</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>OCCUPATION</span>
              <span class="text-right">what they do</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>ALIGNMENT</span>
              <span class="text-right">DnD alignment</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>OBTAINED</span>
              <span class="text-right">created, trade, etc</span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>CREATOR</span>
              <span class="text-right"><a href="creator_link" style="color:#FF0000">who made them</a></span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>THEME</span>
              <span class="text-right"><a href="youtube_link" style="color:#FF0000">or favourtie song</a></span>
            </div>
            <!-- -->
            <div class="d-flex justify-content-between m-1">
              <span>VALUE</span>
              <span class="text-right">how much they are worth</span>
            </div>
            <!-- ADD MORE ABOVE - DONT REMOVE MY CREDIT-->
            <div class="d-flex justify-content-between m-1">
              <span>CODE</span>
              <span class="text-right"><a href="https://toyhou.se/14388714.what-a-mess" style="color:#FF0000">CuckooHoopoe</a></span>
            </div>
            <!-- -->

          </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="row no-gutters h-100">
        <div class="col-12">
          <div class="card border-0 rounded-0 bg-transparent h-100">

            <!-- image above quote -->
            <div style="height:100%;width:100%;min-height:60px;background-size:cover;background-repeat:no-repeat;background-position:center; 
              background-image:url(IMG_LINK);">
              <!-- image credit -->
              <a class="stretched-link" href="IMG_SOURCE"></a>

            </div>
          </div>
        </div>
        <div class="col-4">
          <div class="card border-0 rounded-0 bg-transparent h-100">

            <!-- image beside quote -->
            <div style="height:100%;width:100%;min-height:200px;display:inline-block;background-size:cover;background-repeat:no-repeat;background-position:center; 
              background-image:url(IMG_LINK);">
              <!-- image credit -->
              <a class="stretched-link" href="IMG_SOURCE"></a>

            </div>
          </div>
        </div>
        <div class="col-8">
          <div class="h-100 justify-content-center">

            <!-- quote - add <br> if you want a line break -->
            <p class="text-center lead font-italic my-auto">
              quote line 1 <br>
              optional line 2
            </p>

          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-7">
      <div class="row no-gutters h-100">
        <div class="col-10">
          <div class="card border-0 rounded-0 bg-transparent">
            <div class="card border-0 rounded-0 py-1 px-3" style="background:#FF0000;">
    
              <!-- notes title - change to whatever -->
              <p class="display-4" style="font-size:30px">Notes / Ideas</p>
            </div>
    
            <!-- note 1 -->
            <blockquote class="m-2 p-0 pl-2" style="font-size:.9rem;border-color:#FF0000">note one</blockquote>
    
            <!-- note 2 -->
            <blockquote class="m-2 p-0 pl-2" style="font-size:.9rem;border-color:#FF0000">note two</blockquote>
    
            <!-- note 3 -->
            <blockquote class="m-2 p-0 pl-2" style="font-size:.9rem;border-color:#FF0000">note three</blockquote>
    
            <!-- note 4 -->
            <blockquote class="m-2 p-0 pl-2" style="font-size:.9rem;border-color:#FF0000">note four</blockquote>
    
            <!-- note 5 -->
            <blockquote class="m-2 p-0 pl-2" style="font-size:.9rem;border-color:#FF0000">note five</blockquote>
    
          </div>
        </div>
        <div class="col-2">

          <!-- Image between notes and likes -->
          <div class="h-100" style="background-size:cover; min-height:100px; background-position:center;
            background-image:url(IMG_LINK);">
            <!-- image credit -->
            <a class="stretched-link" href="IMG_SOURCE"></a>
    
          </div>
        </div>
        <div class="col-12">

          <!-- Image below notes -->
          <div class="h-100" style="background-size:cover; min-height:60px; background-position:center;
            background-image:url(IMG_LINK);">
            <!-- image credit -->
            <a class="stretched-link" href="IMG_SOURCE"></a>

          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-5 h-100">
      <div class="card border-0 rounded-0 bg-transparent h-100">

        <!-- image above likes -->
        <div class="h-100" style="background:url(IMG_LINK) center; background-size:cover; min-height:100px">
          <!-- image credit -->
          <a class="stretched-link" href="IMG_SOURCE"></a>

        </div>
        <div class="card border-0 rounded-0 py-1 px-3" style="background:#FF0000;">
          <p class="display-4" style="font-size:30px">Likes</p>
        </div>

        <!-- likes list -->
        <ul class="mt-1" style="list-style-type: circle">
          <li>like</li>
          <li>like</li>
          <li>like</li>
          <!-- add more <li> tags above-->
        </ul>

        <div class="card border-0 rounded-0 py-1 px-3" style="background:#FF0000;">
          <p class="display-4" style="font-size:30px">Dislikes</p>
        </div>

        <!-- dislikes list-->
        <ul class="mt-1" style="list-style-type: circle">
          <li>dislike</li>
          <li>dislike</li>
          <li>dislike</li>
          <!-- add more <li> tags above-->
        </ul>
      </div>
    </div>

  </div><!-- master row end -->
</div><!-- container end -->

MaXie pad

NAME maxwell

SPECIES woofer

GENDER male || he/him

AGE 2 old

BIRTHDAY scorpio

RESIDENCE ur moms basement

OCCUPATION fuckface

ALIGNMENT chaotic evil

OBTAINED my brain

CREATOR me bitch

THEME helldog

VALUE some bones and a penny

CODE CuckooHoopoe

get the fuck up
wake the fuck up
wipe the system
and back the fuck up

Notes / Ideas

Write out ideas or headcannons. or their story idk do what you want.

write as much as you want anywhere in this code, shit will stretch, and by shit i mean the images so they might look super zoomed in if u write too much

I cannot take this anymore I'm saying everything I've said before. All these words they make no sense I find bliss in ignorance. Less I hear the less you'll say, but you'll find that out anyway just like before

I just really like drawing doberman heads on humanoid bodies. Sometimes he have human feet, sometimes paws on human legs, sometimes full anthro legs

Dear diary, I don't know what's going on, but something's up. The dog won't stop barking, and I think my TV is bust. Every channel is the same, it's sending me insane, and earlier somebody bit me, what a fucking day

all the edgy sentences/quotes are from linkin park and BMTH

Likes

hell yeah
fuckfuckfuckfuckfuckufkck
bloody hell man

Dislikes

fuck that sjit
yikes
aaaaaaAAAAAAAhhh

Recent Images

No images.