✮ Tokio Hotel: Feel It All/Kings Of Suburbia Themed Layout ✮

Tags: tokio hotel, purple, blue, music
Description:

Feel free to use this layout and dissect it as you need! Be warned that this is a decently flashy profile, if you are sensitive to any kind of flashing lights this might not be the layout for you. BLINKIES ARE INCLUDED Thank you for using my layout! ✮ Currently there is no image, better code organization and picture will be added ✮
Code:

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

<!-- (c) CURSOR CODE CREATED BY FAITH 🍓 (https://layouts.spacehey.com/layout?id=35187) -->
<style>* {
   cursor: url(https://cur.cursors-4u.net/symbols/sym-6/sym600.cur), auto !important;
   }
</style>

<a href="https://www.cursors-4u.com/cursor/2011/01/26/transparent-teal-star.html" target="_blank" title="Transparent Teal Star"><img src="https://cur.cursors-4u.net/cursor.png" alt="Transparent Teal Star" style="position:absolute; top: 0px; right: 0px;"/></a>

<!-- (c) NEON SUNSET BLINKIE -->
<img src="https://blinkies.cafe/b/display/0105-gradientpurple.gif" width="450px"/>

<!-- (c) CITY STARS BLINKIE -->
<img src="https://blinkies.cafe/b/display/0005-citystars.gif" width="450px"/>

<!-- (c) ONLINE STATUS CODE CREATED BY BELA 🔊⬆ (https://layouts.spacehey.com/layout?id=344) --> 
<style>
.online {
    content: url(https://dl.glitter-graphics.com/pub/272/272679lz7b9hcea1.gif);
}
</style>

<!-- (c) LOADING SCREEN CODE CREATED BY KAI X3 (https://layouts.spacehey.com/layout?id=24662) -->
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url(https://i.pinimg.com/originals/7e/2a/eb/7e2aeb1567e91bfc2404cecca6aceecd.gif);
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 8.5s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</style>

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

<!-- (c) FIA POSTER -->
<img src="https://4.bp.blogspot.com/-LM8o_3l0778/VO8EAbGzqHI/AAAAAAADIkE/PRN9OqUU7gg/s1600/1379459_758571577545363_9033723784666857289_n.png"/> 
 

<!-- (c) FAVORITE USERS BOX CODE CREATED BY JASSU (https://layouts.spacehey.com/layout?id=38707) -->
<style>
.R {
      width:90px;
      height:90px;
      float:left;
      clear:left, center, right;
      text-align:center;
      position:static;
      display:block;
      margin-left:5px;
      margin-right:5px;
      margin-bottom:30px;
    }
::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

    ::-webkit-scrollbar-thumb {
    background: violet;}

    ::-webkit-scrollbar-track {
    background: violet;
</style>

<div style="width:100%; height:200px; overflow:scroll; margin:0 auto; border: 2px solid black; padding:2px;">

<h4 style="text-align:center;">Favorite Users</h4>

<br/>

<div class="R"><a href="https://spacehey.com/kltz_strz"><img src="https://cdn.spacehey.net/profilepics/1966999_229f31e44e0c5722f01ba25418ce58be.jpg?token=fa5gWF3p8ptk4yKJxYAZO-swe_TQJ77yqwoxzXBtPUE&expires=1692593028"/><p>✮Jay✮</p></a></div>

<div class="R"><a href="https://spacehey.com/jassumkiddos"><img src="https://cdn.spacehey.net/profilepics/1884953_b4276f850b9cd57cf1d84d6cc0de4aa0.jpg?token=0UabPTHcQiqrKVfMtIKKbxbtimG94dfPTOmAI_G2u2U&expires=1692569735"/><p>Jassu</p></a></div>

<div class="R"><a href="https://spacehey.com/xx_tokio_hotel_xx"><img src="https://cdn.spacehey.net/profilepics/1973041_6b5187666a5d8cc7296cef78f1afb31e.jpg?token=rpAqlFZbH1lJoMxXz57PcfPz1lFtLsjkwD6YDPo7_BU&expires=1692555022"/><p>☆jaxx☆</p></a></div>

<div class="R"><a href="https://spacehey.com/zombieb0y"><img src="https://cdn.spacehey.net/profilepics/1570785_8d37f5ec5aea6a82a052297e597f480d.png?token=9K4pm1CPuOdAFiIrf0iOW82I3PvosanuPa__FlW3zow&expires=1692621864"/><p>ZoMbIe</p></a></div>

</div>

<!-- (c) VIOLET PROFILE TEXT -->
<style>
.profile {
   color: white;
   text-shadow: 1px 1px 10px white
   }
</style>

<!-- (c) FLOATING LAYOUT CODE CREATED BY WESLEY (https://layouts.spacehey.com/layout?id=37450) -->
<style>
h1,h2,h3,h4,h5{
  animation: type 3s steps(27);
  color: white;
  font-size: 30px;
  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);
}
</style>

<!-- (c) BACKGROUND -->
<style>
body {
   background: url(https://media1.tenor.com/images/ffc5c62efe07aa19b3a1aaf03e683c7c/tenor.gif?itemid=16426730) no-repeat center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
   background-size: cover;
   }
</style>

<!-- (c) SEMI-TRANSPARENT PROFILE BACKGROUND -->
<style>
main {
   opacity: 0.9;
   border-radius: 35px
   }
</style>

<!-- (c) GENERAL INFO./PFP SECTION -->
<style>
   .general-about .details {
      border: 5px solid rgb(46,201,232);
      border-style: double;
      border-radius:50px 25px 25px 50px;
      padding-bottom: 23px;
      box-shadow: 0px 0px 10px 7px rgb(46,201,232);
      }
</style>

<!-- (c) ROUNDED PFP CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius: 0 25px 0 25px;
box-shadow: 0px 0px 19px 0px black;
}
</style>


<!-- (c) MOOD SECTION -->
<style>
   .mood {
      border: 5px solid violet!important;
      border-style: double!important;
      background: transparent;
      padding: 3px;
      margin-bottom: 20px;
      margin-top: 20px;
      border-radius: 25px 25px 25px 25px;
      box-shadow: 0px 0px 10px 7px darkviolet;
      }
</style>

<!-- (c) CONTACT SECTION -->
<style>
   .contact {
      border: 5px solid violet!important;
      border-style: double!important;
      border-radius: 25px 25px 25px 25px;
      box-shadow: 0 0 10px 7px darkviolet;
      background: transparent;
      background-position: top;
      background-size: cover;
      background-attachment: scroll;
      width: 300px;
      height:180px;
      color: white;
      }
</style>

<!-- (c) SCROLLING COMMENTS SECTION CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
background-color:transparent!important;
box-shadow: 0px 0px 10px 7px rgb(46,201,232);
display: block;
height: 300px!important;
overflow-y: scroll;
border-radius:15px;
border-color:violet;
border-width: 3px;
}

<!-- (c) CUSTOM SCROLL BAR CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

    ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 1);}

    ::-webkit-scrollbar-track {
    background:#27558D;
}
</style>

<!-- (c) INTEREST SECTION EDITS CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px;}

:root {
  --topic1: "General";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "TV/Video Series";
  --topic5: "Books";
  --topic6: "Favorite Things";}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px white !important;
filter: brightness(95%) !important;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);}
</style>

<!-- (c) SECONDARY BACKGROUND COLOR/GLOW -->
<style>
main {
   background: black; 
   box-shadow: 0px 0px 10px 10px white;
   }
</style>

<!-- (c) INTERESTS DECOR -->
<style>
.table-section .heading {
   width: 100%;
   height: 40px;
   border: 5px solid violet;
   border-style: double;
   border-radius: 25px;
   box-shadow: 0px 0px 10px 7px darkviolet;
   background: transparent!important;
   }
</style>

<!-- (c) TRANSPARENT/BORDERED HEADINGS -->
<style>
.heading {
   background-color: transparent!important;
   border: 5px solid rgb(46,201,232);
   border-radius: 25px;
   border-style: double!important;
   box-shadow: 0px 0px 10px 7px rgb(46,201,232);
   }
</style>

<!-- (c) COLORED INTERESTS/COMMENT BOXES -->
<style>
td {
   background-color: darkviolet!important;
   }
</style>

<!-- (c) PROFILE PIC BOX SHADOW -->
<style>
.profile-pic {
   box-shadow: 0px 0px 10px 7px rgb(46,201,232);
   border: 5px solid rgb(46,201,232);
   border-radius: 50px;
   }
</style>

<!-- (c) WHITE "SEARCH USERS" TEXT -->
<style>
a, .profile .friends .person p, p, h1, h2, h3, h4, .count, nav .links a{
  color: white!important;
   }
</style>

<!-- (c) SPACEHEY HEADING -->
<style>
nav .top, nav .links {
   background-color: black;
   border-radius: 15px;
   box-shadow: 0px 0px 10px 7px white;
   color: white;
   font-weight: bold;
   border: 5px solid white;
   }
</style>

<!-- (c) CLEAR HOME/BROWSE/SEARCH... BAR CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
.links{
     text-align:center;
    background-color: rgb(46,201,232)!important;
    background-image: url('URL') !important;   
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<!-- (c) CONTACT IMAGES CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {font-size:20px;
/* add to friends */
content: "丰"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {font-size:20px;
/* add to favorite */
content: "丰"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {font-size:20px;
/* send a message */
content: "丰"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {font-size:20px;
/* foward to friend*/
content: "丰"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {font-size:20px;
/* instant message */
content: "丰"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {font-size:20px;
/* block user */
content: "丰"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {font-size:20px;
/* add 2 group  */
content: "丰"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {font-size:20px;
/* report */
content: "丰"
}   
</style>

<!-- (c) FRIENDS PFPS CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
border: 5px solid violet;
box-shadow: 0px 0px 10px 7px darkviolet;
}
</style>

<!-- (c) REMOVE BOXES AROUND INTERESTS/LINKS CODE CREATED BY ✭ FREN-Z ✭ (https://layouts.spacehey.com/layout?id=26144) -->
<style>
/*removes boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<!-- (c) PROFILE NAME -->
<style>
h1 {
   text-shadow: 1px 1px 5px white;
   box-shadow: 0px 0px 10px 10px darkviolet;
   border: 5px solid violet;
   border-style: double!important;
   border-radius: 25px;
   color: white; 
   }
</style>

<!-- (c) BLOG ENTRY BOX/BORDER -->
<style>
.blog-preview {
   background-image: URL(https://i.ytimg.com/vi/z9k6MVBxY-0/maxresdefault.jpg); 
   border: 5px solid violet!important;
   border-style: double!important;
   border-radius: 25px;
   box-shadow: 0px 0px 10px 7px darkviolet;
   }
</style>

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

<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
</style>

<!-- (c) Layout created by 🌈☆ ˚˖ (๑òᆺó๑) ˖ ˚ ☆🌸 (https://layouts.spacehey.com/layout?id=37558) -->

<style>html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/17/6f/b5/176fb547189cbdb4f745d425e84167f3.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}
</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 1 of 1 comments ( View all | Add Comment )
crayoncitos
1759212331
Estuvo muy lindo, aunque no son para mí los fondos en movimiento. Me gustaron todas la luces ><
Report Comment