TBH Creature Layout

Tags:
Description:

For user Xx_g4rf13ld_xX :3 I couldn't get the custom font to work >~<. Don't know why. Feel free to edit/reuse for your own code, I don't mind! Don't worry about credit or anything.
Code:

<!-- (c) Layout created by ☆人間失格☆ (Akutagawa) 🍮♡🍰 (https://layouts.spacehey.com/layout?id=89681) -->

<style>body { cursor: url('http://www.rw-designer.com/cursor-view/187495.png'), auto; }</style>

<style>
@font-face { font-family: Indie Flower; src: url('https://fonts.google.com/specimen/Indie+Flower?classification=Handwriting'); } 
main:before {
	width: 100%;
	display: block;
	content: "";
	background-image: ;
	background-position: ;
	background-size: ;
background-repeat: ;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}

}

  body {
font-family: Indie Flower;
      background-image: url('https://i.pinimg.com/originals/e4/d2/c1/e4d2c1d0da356797359acd9270bcdd77.gif');
      background-position: ;
      background-attachment: ;
      background-color: white;
      background-repeat: ;
      font-family: 'Indie Flower';
  }

.online { visibility: hidden; } .online img { content: url("https://64.media.tumblr.com/5ae2e0546f574c531ffabd164cb6e863/d2068cef9884c843-cf/s640x960/37ed7d50c9789679cfb53fb9c5870bca33fdb0d7.gifv"); animation-name: none; visibility: visible; }
  main {
      border-style: solid;
background-color: white;
border-color black;
color: black;
  }
  


  }
 .profile h1 {
      font-family: 'Acme';
      font-size: 30px;
      letter-spacing: 2px;
  }
  
  .profile .blurbs .heading h4,  .profile .friends .heading h4 {
      font-family: 'Acme';
      font-size: 20px;
      letter-spacing: 2px;
      color: black;
  }
  
  .profile .blurbs:before {
      background-image: url('https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?fit=476%2C280&ssl=1');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 280px;
      background-size: cover;
      margin: 10px 0px;
  }
  .profile .contact .heading, .profile .table-section .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading {
      background-image: url('https://i.pinimg.com/originals/e4/d2/c1/e4d2c1d0da356797359acd9270bcdd77.gif');
border-radius: 5px 5px 0px 0px;
height: 100%;
text-align: center;
color: black;
background-color: white;
  }
  

  
.profile  .contact, .profile .table-section{
      border-style: none;
  }
.profile .contact:after {
      background-image: url('https://media.tenor.com/sHBPzh4vsKEAAAAC/tisming-out-tisming.gif');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 400px;
      background-size: cover;
      margin-top: 10px;
  }
 nav .top{
     background-image: url('https://i.pinimg.com/originals/e4/d2/c1/e4d2c1d0da356797359acd9270bcdd77.gif');
background-repeat: repeat-x;
     text-align: center;
     font-size: 15px;
background-color: white;
color: black;
 }
nav .links{
     background-color: white;
     text-align: center;
     font-size: 15px;
}
 
 .profile .blurbs .inner, .profile .friends .inner {
     border-style: solid;
     margin:;
 
 }
 
 .profile .url-info {
     border-color: black;
 }
 
 .profile  .contact .inner, .table-section .inner {
     border-style: solid;
     border-color: black;

 }
 
#comments:before {
     background-image: url('https://i.pinimg.com/originals/ca/08/db/ca08dbeee8a7605d1ddc41fb2517193e.gif');
     display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 600px;
      background-size: cover;
      margin: 10px 0px;
 }
 
 .details-table td:first-child {
     background-color: white;
     color:black;
 }
 .details-table td {
     background-color: white;
 }
 
 footer {
     background-color: white;
 }

.comments-table td:first-child {
    background-color: white;
}
.comments-table td {
    background-color: white;
    color: black;
}

.profile .blurbs .section h4 {
    color: black;
}

a, .count {
  color: gray;
}

a:hover {
    text-decoration: linethrough;
    color: black;
}

footer {
  background-color: black;
      font-family: 'Acme';
      font-size: 10px;
      letter-spacing: 2px;
      color: black;
}




<style>.contact .inner a img {
    font-size: 0;
    }
    .contact .inner a img:before {
    font-size: 1em;
    display: block

   }

 
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
 
::-webkit-scrollbar-track {
background: black;
border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: white; 
}
 
::-webkit-scrollbar-thumb:hover {
background: grey;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://64.media.tumblr.com/4b7da20033c138e2b96120fd57ddadb2/bbe3d186496ad8f6-41/s75x75_c1/ab28a241f8004893a15f42c93c28786bb65a9c43.gifv")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://64.media.tumblr.com/b970143743c84511f1ef9bb3f881627e/bf9539443eee6547-c9/s75x75_c1/bc3a0e77d0fbb0b156ba8e550335708d6cb4cb3d.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://64.media.tumblr.com/9b44e8527005dadbd80459df5a8a7d8f/1e9302a0eb9ffa1b-5d/s75x75_c1/87e2d1c2e4838514786dfd48f9623400edc393b7.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://64.media.tumblr.com/c0c6d78be3da524e1ff37b73e86690e9/87fa098b1ad36e28-3d/s75x75_c1/9c2bf7b96e959637573915411042192046240120.webp")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/566c0baa3fd7230a31422f2f1c4757a4/198eca86126a8546-58/s75x75_c1/bdc731ed6def94f5b85ea2e78d6b6d8edd665c51.webp")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/246036ed3d297a921508a3d73cbf40c0/bf9539443eee6547-9b/s75x75_c1/660719da63ca46adf7c8487f40d43527f8e2ef39.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://64.media.tumblr.com/5bd64bf34dca21ae09c914dcc8eaffc8/198eca86126a8546-72/s75x75_c1/ecbd30d2daededca7e3125fb4fce9cfea3a3293b.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/08704df3c4b1cd8651c62dc176a48da4/96e1a038dc8ce3c8-d0/s75x75_c1/ccd4e859e6f4631dd4f4a47788b0b0ad442bc603.gifv")
}
</style>

<style>

h1{

  animation: type 3s steps(27);

  color: black;

  font-size: 10px;

  font-family: Acme;

  white-space: nowrap;

  overflow: hidden;

 }

@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background:

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

</style>
   



<iframe width="0" height="0" src="https://www.youtube.com/embed/jIQ6UV2onyI?si=wZFEDwzC0ai6m9xU&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>



<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://64.media.tumblr.com/fbf092e04ccb71c0f948c2dd7979887b/837d14abd9f23919-07/s640x960/42252a3e6bf95a9ec14a38757a0495d80cd04f37.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 
</style>
Copy and paste this code into the "About me" section of your Profile to use it.
Caution: This Layout was not inspected by SpaceHey — use it at your own risk.
Comments

Displaying 0 of 0 comments ( View all | Add Comment )