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

Diana	1766448571 USING Report Comment
Ami	1766117324 USINGGGG Report Comment
Ami	1766117303 Using! Report Comment
Yukadbea_89 :3	1766074936 Usingg Report Comment
Wren	1766010641 using :3 Report Comment
Wren	1766010637 using :3 Report Comment
Jules	1765857414 i have a question does it have a loading screen?? Report Comment
SIN_CITY	1765771223 using tyy Report Comment
afriiko :3	1765719100 usiing, thanks! <3 Report Comment
nine!	1765290257 using! Report Comment
𝓭𝓸𝓵𝓵𝔂𝔁𝔁 .⋆♱	1764397099 Not using (YET) but this is soooo fricking pretty aaah!! Definitely gonna comment if I ever use it tho Report Comment
Gee<3	1763247583 Using! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228148 Using ! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228148 Using ! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228148 Using ! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228148 Using ! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228148 Using ! Report Comment
ִֶָ𓂃 ࣪˖ ִֶָ⋆˚࿔ 𝗻𝗮𝘁𝗮 𝜗𝜚˚⋆ִֶָ𓂃 ࣪˖ ִֶ	1763228137 Using ! Report Comment
♫ \| fawnberry \| ♫	1763131466 i thought this said tokito hotel Report Comment
mika	1762735492 using :p Report Comment