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

LetsEmmaGHG	1785839506 usingggg Report Comment
⋆.˚✮⨾𝄞🫐丰ℒℯ𝓃𝒶丰🌐𝄞⨾✮˚.⋆	1785416849 Usingg Report Comment
Starlightbabe<3	1784375421 usinggg Report Comment
raven🕷️	1783205552 Using ittt Report Comment
B4ZZZBØi	1781399859 Uusing it d: Report Comment
*ੈ‧₊˚𝕹𝖎𝖐𝖆丰	1773338148 usingg Report Comment
@Xignoo 悲惨な	1772304167 xd Report Comment
Milch.br	1769167453 Using for sure!! Report Comment
gabrielle!	1768887677 usingg Report Comment
cvntyb1tchxx	1768069567 omggg def usinggg xx Report Comment
T1CC1 T0BY	1767962279 USINGGG Report Comment
allison :3	1767868501 omg USING Report Comment
Luc1zn.e	1767753666 ABSOLUTE PEAK IM USING THJS HOLY SHIT Report Comment
★anna☆	1767540086 USINGG AND TYY Report 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