Kasane Teto

Tags: red, pink, kasane teto, teto

Description:

For my best friend Atsu :3. Includes loading screen & music.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ロビン 🍮♡🍰 (https://layouts.spacehey.com/layout?id=100618) -->

<!-- font -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&display=swap');
</style>


<!-- main code-->

<style>body { cursor: url('http://www.rw-designer.com/cursor-view/108645.png'), auto; }</style>

<style>
h1 {
text-align: center;
color: #8a1616;
}
</style>

<style>

main:before {
	width: 100%;
	height: 300px;
	display: block;
	content: "";
	background-image: url('https://64.media.tumblr.com/0316657b2e8b9b7e5ce1fabb22b25f8e/d6a20f36e282d5cc-13/s1280x1920/633a03b7f55013ec9824fa8c8e0329d85a94f6a2.png');
	background-size: 100%;
background-repeat: no-repeat;
background-color: white;
border-color: #8a1616;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}

}

  body {
      background-image: url('https://media2.giphy.com/media/AGs4dSQRvbjIwjleF1/giphy.gif');
      background-position: ;
      background-size: ;
      background-repeat: ;
      font-family: 'Arsenal', sans-serif;
  }

.online { visibility: hidden; } .online img { content: url("https://64.media.tumblr.com/f8cafe974c5e0882fff2cc98a1cf1b52/5020337a1f4c7ff8-c6/s400x600/c7ad4c1d8578a80fb78591496bda7124cdabd277.gifv"); animation-name: none; visibility: visible; height: 100%; width: 100%;}
  main {
      border-style: solid;

  }
  


  }
 .profile h1 {
      font-family: 'Arsenal', sans-serif;
      font-size: 30px;
      letter-spacing: 2px;
color: #8a1616;
text-align: center;
  }
  
  .profile .blurbs .heading h4,  .profile .friends .heading h4 {
      font-family: 'Arsenal', sans-serif;
      font-size: 20px;
      letter-spacing: 2px;
      color: white;
  }
  
  .profile .blurbs:before {
      background-image: url('https://64.media.tumblr.com/bb38da58e6a1e6b07fb6c0ed6e5f82c3/d6a20f36e282d5cc-eb/s400x600/a61628b6b4b22d4414c4408170c50b638d5fcf21.png');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 280px;
      background-size: cover;
      margin: 10px 0px;
  }
  .profile .contact .heading, .profile .table-section .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading {
      background-color: #ffbbcd;
border-radius: 5px 5px 0px 0px;
height: 100%;
text-align: center;
  }
  

  
.profile  .contact, .profile .table-section{
      border-style: none;
border-color: #8a1616;
  }
.profile .contact:after {
      background-image: url('https://64.media.tumblr.com/438a2b0bd169bce10201bf7b46232088/d6a20f36e282d5cc-49/s400x600/60a8f245a5ce64125793a01e3f3a6ba4d27580dc.png');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 400px;
      background-size: cover;
      margin-top: 10px;
  }
 nav .top{
background-color: #ffbbcd;
     background-position: right, left;
     font-size: 15px;
 }
nav .links{
     background-color: #8a1616;
     text-align: center;
     font-size: 15px;
}
 
 .profile .blurbs .inner, .profile .friends .inner {
     border-style: solid;
border-color: #8a1616;
     margin:;
 
 }
 
 .profile .url-info {
     border-color: #8a1616;
background-color: rgba(255, 99, 71, 0);
color: white;
height: 100%;
width 100%;
 }
 
 .profile  .contact .inner, .table-section .inner {
     border-style: solid;
     border-color: #8a1616;

 }
 
#comments:before {
     background-image: url('https://64.media.tumblr.com/f70cfe2371cc43b5e996aaa15a6629bd/d6a20f36e282d5cc-06/s400x600/d034d36c8abd9fcaa951dec29b3e59100658c418.png');
     display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 600px;
      background-size: cover;
      margin: 10px 0px;
}
 
 .details-table td:first-child {
background-color: #ffbbcd;
     color:white;
 }
 .details-table td {
     background-color: white;
 }
 
 footer {
     background-color: #ffbbcd;
     background-image: url('https://media.tenor.com/nooZTxe5hgoAAAAj/kasane-teto-teto.gif');
background-size: contain;
background-position: left;
background-repeat: no-repeat;
 }

.comments-table td:first-child {
    background-color: white;
}
.comments-table td {
    background-color: #ffbbcd;
    color: white;
}

.profile .blurbs .section h4 {
    color: #8a1616;
}

a, .count {
  color: #df9fae;
}

a:hover {
    text-decoration: linethrough;
    color: white;
cursor: url('http://www.rw-designer.com/cursor-view/108659.png'), auto;

}

footer {
  background-color: #ffbbcd;
      font-family: 'Arsenal', sans-serif;
      font-size: 10px;
      letter-spacing: 2px;
      color: white;
}

</style>


<style>

.contact .inner a img {
    font-size: 0;
    }
    .contact .inner a img:before {
    font-size: 1em;
    display: block

   }

.friends .inner {
    overflow-y: scroll;
    max-height: 640px;
}

<style>

h1{

  animation: type 3s steps(27);

  color: #8a1616;

  font-size: 10px;

  font-family: 'Arsenal', sans-serif;

  white-space: nowrap;

  overflow: hidden;

  text-align: center;

 }

@keyframes type{

  0%{

    width:0ch;

  }

  

  100%{

    width:27ch;

  }

}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}

body::before {

content: " ";

display: block;

position: fixed;

top: 0;

left: 0;

bottom: 0;

right: 0;

background:

z-index: 2;

background-size: 100% 2px, 3px 100%;

pointer-events: none;

}

.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>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}

</style>
   

<!-- no logo display -->

<style>
 
 .logo{display:none !important;}

</style>

  
  }
  
   


<!-- Music -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/inRXBlYgMGI?si=SloBKlAUAjE8UQFJ&;amp;;autoplay=1&;loop=2&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>




<style>
body{

background-color: red;
}

</style>

<!-- GIF pfp --> 
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExdGR1ZzhiOGQ3bnpqbHR0NW1qZmduNW5lNTR5NDRnbzQybDQ1MWR4NyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/fIU5A44stuX9x7AC0h/giphy.gif"); display: inline-block; content:"" }
.blog-entry .profile-pic:after, .bulletin .profile-pic:after { background-size: cover; width: 110px; height: 110px; } /* blogs, bulletins */
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 160px; } /* profile */ 

</style>




<style>
.friends-grid{display:none !important;} 
</style>

<style>
.friends-grid{display:none !important;} 
</style>

<style>
.general-about{
  position: relative;
  margin-top: 30px;
}
.general-about .profile-pic::before{
  content: '';
  background: url('https://m.media-amazon.com/images/I/612Tw1u5KdL._AC_SY879_.jpg') no-repeat;
  background-size: cover;
  display: block;
  width: 25%;
  height: 25%;
  z-index: 999;
  position: absolute;
  top: 78px;
  left: 240px;
}
</style>


<style>
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://64.media.tumblr.com/223a5c62b8f4907ce0cbae94cebe1388/d8522789ced70494-f0/s75x75_c1/16e7eab5339619fcd6dbda6ca0a73ce36d589c1b.gifv")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://64.media.tumblr.com/1425506efc6ebdf5aee7d3cb653f0c0d/d8522789ced70494-14/s75x75_c1/f0743144751609e6dab162b59870a10b80cb1572.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://64.media.tumblr.com/34c72c4891f2a1b069c0210e01737589/d8522789ced70494-0c/s75x75_c1/9703a41c31152460b178e2de105414ddfd1da160.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://64.media.tumblr.com/a8c062c136418eaaab7af38faaabdab2/4d9ab15404ddfee1-43/s75x75_c1/16c571a37448061624619f804f29a326fe91f1f9.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/08de6dbfb4dc793ad803842487dc689c/b4746bdbb4997815-30/s75x75_c1/e113674abedfb44e71e4ac318415bebb6bc19bd8.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/b204df03f62104cc6f13caf37884cb7b/d8522789ced70494-9c/s75x75_c1/7c4bf235ca8bc8a3931ff911e2ff7cb69294718f.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://64.media.tumblr.com/faba5e957c0cfc5c2aac7dd5f2c91d7a/979aeaa541231801-2a/s75x75_c1/ee3d7cd2fa3e9df6a43b1044ca05fb4e655ed9e3.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/c871270a021b65f056c6ee627a45b31f/b4746bdbb4997815-21/s75x75_c1/984caafe8b5bca3782a595f77db73d252b87d7fc.gifv")
}
</style>

<style>

:not(a) {

color: #8a1616;
}
.contact {
color: white;
}
</style>

<!-- Gif opening -->

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media1.tenor.com/m/c1eaQBWbBH8AAAAC/ghost-and-pals-pathological-facade.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 2s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 
</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 12 of 12 comments ( View all | Add Comment )

EridansMatespirit	1752881482 using!! Report Comment
OLLEY!! ౨ৎ	1751731641 Using Report Comment
༺ღ𝐒𝐮𝐧𝐧𝐲ღ༻	1751255349 using Report Comment
jay ∇(^_^)∇	1745038196 using this! ^_^ thank you for the awesome layout! Report Comment
H4tsune_Luk4	1736817463 Using!! :3 Report Comment
🪖⚰️	1729207751 using Report Comment
Mowwie-kawwaiiヽ(*≧ω≦)ﾉ	1726197405 Usando en mi otra cuenta fanpage :3! Report Comment
𝐚𝐧𝐨𝐧𝐢𝐦 𝐡𝐚𝐧𝐢𝐦	1723596762 using Report Comment
Dizzy Lizzy	1722627673 is it oki if i use this? Report Comment Go for it ^^! by ロビン 🍮♡🍰; 1722637847; Report
Kenzi	1719028607 Usando Report Comment
— akutagawa ˚ ࿔ ⌜ KINNIE ⌝	1710222022 Holap, puedes hacer uno de bsd, o especialmente de dazai osamu? te lo agradeceria mucho Report Comment Hello ^^. I don't really take layout requests, but I might consider it. by ロビン 🍮♡🍰; 1710225831; Report
ᦏ♡᪔ Fuyu 🍰♡🍮	1709348358 YIPPEEEEEEE YIPPPPEEEEEEEEEEEEEEEEEEEEE Report Comment YAYY!! :3 by ロビン 🍮♡🍰; 1709348421; Report SO HAPPIII by ᦏ♡᪔ Fuyu 🍰♡🍮; 1709348597; Report