✮ 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 110 comments ( View all | Add Comment )

SKYR4T!!! :3	1757379052 using:D Report Comment
racc	1756638222 using Report Comment
bill_mlXD!	1756009426 Using! Report Comment
gunsnhugs	1755983592 usingggg Report Comment
Lia	1755288913 using‼️‼️ Report Comment
Teyluna!	1755032246 using Report Comment
Ｈｅａｒｔｓ	1753973448 usingg Report Comment
Yur1@ane	1753027666 Using Report Comment
Coco <3	1752348053 Usinggg🫶 Report Comment
alexwqyss	1751484480 using <33 Report Comment
thisisyourfateanddestiny	1749554754 Using Report Comment
thisisyourfateanddestiny	1749554753 Using Report Comment
claraa	1749131231 using <33 Report Comment
SAMUEL:O	1747065268 USINGGG !! Report Comment
tomsgirl4eva	1746793637 using!!! Report Comment
eliot	1746304323 using omg Report Comment
Carolinanunez	1746270974 using Report Comment
ciciss	1745941409 usingg!! Report Comment
丰yana⁴⁸³	1745245761 using Report Comment
丰✮Sage✮丰	1743651333 Using !! Report Comment