✮ 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 101 comments ( View all | Add 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
Ellie!	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
Eliana	1742449869 usingggggg Report Comment
Ig✰holic	1739074491 using!<3 Report Comment
veryiconic_	1737558826 usandoo Report Comment
fiona	1737313234 using it and oml i love itttt Report Comment
Tokiohotelemolover	1736900761 Using! Report Comment
Tokiohotelemolover	1736900761 Using! Report Comment
+•Cielo•~	1736660474 Using <3 Report Comment
Karla	1735648916 using yayy Report Comment
R3s3t	1735497135 using! Report Comment