✮ Tokio Hotel: Humanoid Themed Layout ✮

Tags: animation, layout, layouts, blue, tokio hotel, humanoid, music, band

Description:

✮ Free to use and dissect! Comment if you're using this layout. (Optionally, you can give me credit) ✮ This layout includes a cursor, a Spotify embed for the Humanoid album, and plays Humanoid by Tokio Hotel. This layout excludes the blinkies that you see on my profile. Here are some layouts that helped me figure out my code: https://layouts.spacehey.com/layout?id=37450, https://layouts.spacehey.com/layout?id=27071, https://layouts.spacehey.com/layout?id=27365. In my layout, I used the contact box images from this layout: https://layouts.spacehey.com/layout?id=27365 and the online status from this link: https://layouts.spacehey.com/layout?id=31948

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ˚₊‧꒰ა✮𝕾𝖚𝖑𝖑𝖎✮໒꒱‧₊˚ (https://layouts.spacehey.com/layout?id=38759) -->

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/2Cy6CsNbNvnIiOWBnqSskQ?utm_source=generator" width="100%" height="152" frameborder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"> 
//SPOTIFY EMBED ^// 
</iframe>

<iframe width="0" height="0" src="https://www.youtube.com/embed/f3R79Y6S2R0//?&;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">
//MUSIC ^//
</iframe>

<img src="https://i.pinimg.com/originals/33/20/b5/3320b511b6e6ac1a726dc237ece0509d.gif"/>

<style>
   body {
   background: url(https://th.bing.com/th/id/OIP.z1tZ4j0hlJuGQP46IKmlBgAAAA?pid=ImgDet&rs=1) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
//BODY BACKGROUND ^//
   }
main {
   background:transparent;
//PROFILE BACKGROUND ^//
   }
.general-about .details {
   border: 5px solid none;
   padding-bottom: 70px;
   }
.mood {
   border: 5px solid white!important;
   background: transparent;
   padding: 3px;
   margin-bottom: 20px;
   margin-top: 20px;
//MOOD BOX BORDER ^//
   }
.contact {
   border: 5px solid white!important;
   background-image: url(https://66.media.tumblr.com/ca89b93ecfd9866606d48031382610f5/tumblr_p461ubUNgv1qgt1t2o1_400.gif);
   background-position: top;
   background-size: cover;
   background-attachment: scroll;
   width: 300px;
   height:180px;
   color: white;
//CONTACT BOX BORDER/IMAGE ^//
   }
.profile-pic {
   padding: 15px;
   }
a, .profile .friends .person p, p, h1, h2, h3, h4, .count, nav .links a{
   color: white!important;
   text-shadow: 0 0 5px #000000, 0 0 10px #000000, 0 0 10px #000000, 0 0 20px #000000, 0 0 25px #000000;
//TEXT SHADOWS ^//
   }
.table-section {
   height: 40px;
   overflow-y: hidden;
   transition: all 0.3s ease!important;
   border: none!important;
   }
.table-section .heading {
   width: 100%;
   height: 40px;
   border: 5px solid white;
   }
.table-section:nth-of-type(odd) {
   height: 200px;
   overflow-y: auto;
   transition: all 0.3s ease!important;
//INTERESTS TABLE SCROLL FUNCTION ^//
   }
.table-section:nth-of-type(even) {
   height: 90px;
   overflow-y: auto;
   transition: all 0.3s ease!important;
   }
.general-about .details {
   background-image: url(https://thumbs.gfycat.com/CorruptLinearElk-size_restricted.gif);
   border: 5px solid white;
   padding-bottom: 70px;
//GENERAL ABOUT/PFP BACKGROUND ^//
   }
.url-info {
   background: url(https://pm1.narvii.com/7846/4c824e4a959b4f89bfbf2b49c4362f01f62a3be7r1-300-300v2_hq.jpg);
   background-position: front;
   border: 1px white!important;
   background-size: cover;
   font-size: 0px;
   height: 245px;
   width: 100px;
//TOKIO HOTEL HUMANOID IMG ^//
   }
.blog-preview {
   background-image: url(https://cdn.wallpapersafari.com/83/44/FOnoH8.gif);
   border: 5px solid white!important;
//BLOG BORDER/BACKGROUND ^//
   }
nav .top, nav .links {
   background-color: rgb(118,144,168);
   color: black;
   font-weight: bold;
   border: 5px solid white;
//SPACEHEY HEADER ^//
   }
main, footer {
   background-color: transparent;
//TRANSPARENT FOOTER ^//
   }
.comments-table td {
   background-color:black;
   border: 5px solid white!important;
//COMMENTS BOX/BORDER ^//
   }
.table-section td {
   border: 5px solid #7690a8;
//INTERESTS BORDERS ^//
   }
.comment-reply:not(:first-child) {
   border-top: 2px solid none;
   }
.comment-replies {
   border: 5px solid black;
   background-color: black!important;
   }
.friends:not(#comments) {
   margin-bottom: 10px;
   }
.comments-table {
   border: none;
   border-spacing: 5px;
   }
.profile-pic {
   padding: 15px;
   }
.heading {
   background-color: transparent!important;
//TRANSPARENT HEADINGS ^//
   }
td {
   background-color: transparent!important;
//TRANSPARENT INTERESTS/COMMENT BOXES ^//
   }
</style>

<style>
@import url('https://fonts.googleapis.com/css2?family=Vina+Sans&display=swap');
   p,h1,h2,h3,h4,h5{
   font-family: 'Vina Sans', cursive;
//FONT ^//
</style>

<style>
img:hover , .url-info:hover , .online:hover {
   animation: shake 1s;
   animation-iteration-count: infinite;
   }
@keyframes shake {
   0% { transform: translate(1px, 1px) rotate(0deg); }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px, 0px) rotate(1deg); }
   30% { transform: translate(3px, 2px) rotate(0deg); }
   40% { transform: translate(1px, -1px) rotate(1deg); }
   50% { transform: translate(-1px, 2px) rotate(-1deg); }
   60% { transform: translate(-3px, 1px) rotate(0deg); }
   70% { transform: translate(3px, 1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg); }
   90% { transform: translate(1px, 2px) rotate(0deg); }
   100% { transform: translate(1px, -2px) rotate(-1deg); }
   }
//PFP/ONLINE STATUS/PICTURE/GIF/BLINKIE/STAMP SHAKE ^//
</style>

<style>
h1,h2,h3,h4,h5{
   animation: type 3s steps(27);
   color: white;
   font-size: 20px;
   font-family: vina sans;
   white-space: nowrap;
   overflow: hidden;
   }
@keyframes type{
   0%{
   width:0ch;
   }
   100%{
   width:27ch;
   }
}
@keyframes blink{
   0%{opacity:1;}
   50%{opacity:0;}
   100%{opacity:1;}
   }
.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);
   }
//FLOATING PROFILE ^//
</style>

<style>* {
cursor: url(https://cur.cursors-4u.net/mechanics/mec-1/mec94.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/10/01/mec94.html" target="_blank" title="Guitar"><img src="https://cur.cursors-4u.net/cursor.png" alt="Guitar" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>

<style>
//BOX SHADOWS//
.blog-preview {
   box-shadow: 0px 0px 10px 10px black;
   }
.mood {
   box-shadow: 0px 0px 10px 10px black;
   }
.general-about .details {
   box-shadow: 0px 0px 10px 10px black;
   }
.mood {
   box-shadow: 0px 0px 10px 10px black;
   }
.contact {
   box-shadow: 0px 0px 10px 10px black;
   }
.blog-preview {
   box-shadow: 0px 0px 10px 10px black;
   }
nav .top, nav .links {
   box-shadow: 0px 0px 10px 10px black;
   }
.comments-table td {
   box-shadow: 0px 0px 10px 10px black;
   }
.url-info {
   box-shadow: 0px 0px 10px 10px black;
   }
.profile-pic {
   box shadow: 0px 0px 10px 10px black;
   }
.heading {
   box-shadow: 0px 0px 10px 10px black;
   border: 5px solid white;
   }
.logo {
   border: 5px solid white;
   box-shadow: 0px 0px 10px 10px black;
   } 
.friends-grid img {
   box-shadow: 0px 0px 10px 10px black;
   }
.links, .links a, .logout-btn{
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #1a85ff, 0 0 5px #FFFFFF !important
   }
//PFP BOX AND GLOWING NAME//
h1 {
   text-shadow: 1px 1px 5px white;
   box-shadow: 0px 0px 10px 10px black;
   border: 5px solid white;
   color: white; 
   }
</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 20 of 71 comments ( View all | Add Comment )

Ellie!	1733126760 USING :3 Report Comment
丰Emily丰	1731965932 using tysm!! Report Comment
sofix	1731336160 using!! its so cool i love it !! >.< Report Comment
inqimulch	1727191151 using!! >.< tysm..!!! Report Comment
Josefin	1725284285 USING THIS THANK U SM!! Report Comment
Acesulfame	1724707154 Usinggg Report Comment
Acesulfame	1724707149 Usinggg Report Comment
akiire.2323	1723812206 using^^ Report Comment
mimi 丰	1723019333 USINGGG !!!!! Report Comment
mimi 丰	1723019332 USINGGG !!!!! Report Comment
Rina	1722396505 USINGGG Report Comment
1SER11	1721786359 Using !! Report Comment
💋𝒥𝒶𝓎𝓎💋	1721455030 using Report Comment
♫ THATONEDJPON-3 ♬	1721276968 USING Report Comment
ZombiexGutzz	1720984106 Using! Report Comment
bEkaAaA!!	1720039741 using!!! :3 Report Comment
Ela ★	1719257307 using Report Comment
kqulitz	1719153053 using!! Report Comment
SOXI☆X3	1715101955 Using<33 Report Comment Awesome! If you are interested, go and check out version 2! by ˚₊‧꒰ა✮𝕾𝖚𝖑𝖑𝖎✮໒꒱‧₊˚; 1715290784; Report
AvE X3	1714961967 USIMGGG Report Comment I have a second version if you're interested, go check it out! C: by ˚₊‧꒰ა✮𝕾𝖚𝖑𝖑𝖎✮໒꒱‧₊˚; 1715003688; Report