Kimi ni todoke layout

Tags:
Description:

A layout based on the show Kimi ni todoke. Feel free to edit/reuse code for your own layouts, don't worry about credit!
Code:

<!-- (c) Layout created by ☆人間失格☆ (Akutagawa) 🍮♡🍰 (https://layouts.spacehey.com/layout?id=89684) -->

<style>

/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/109700.png), auto !important}


main:before {
	width: 100%;
	height: 1000px;
	display: block;
border-color: #c8a2c8;
	content: "";
	background-image: url('https://64.media.tumblr.com/e0dc8c5740a83212f304831a6bdc0a4b/1b7ef3f53485000c-47/s640x960/533e69a2d64ea2a89c41504574fcb9807013b627.gifv'), url('https://64.media.tumblr.com/61fa62b33fe86b591e73c88c0bd4d836/1b7ef3f53485000c-5c/s640x960/4e2bb3ca55357a32fb0b127bb49c0d8cb8d20ebe.gifv'), url('https://64.media.tumblr.com/7b2b38cc631cfc5fe82be88b53e324cf/1b7ef3f53485000c-45/s640x960/16da0d65d1c381187feb843e1282d90df155f7e7.gifv');
background-position: top, center, bottom;
background-repeat: no-repeat, no-repeat, no-repeat;
background-color: #fadadd;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}

}

@import url('https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@1,300&display=swap');
  body {
      background-image: url('https://i.pinimg.com/originals/46/f8/c5/46f8c5721769b18d9a4a29c2844086d4.gif');
      background-position: ;
      background-attachment: ;
      background-repeat: ;
      font-family: 'Acme';
border-color: #c8a2c8;
  }

.online { visibility: hidden; } .online img { content: url("https://i.pinimg.com/originals/da/32/f3/da32f31d5c7329eafaed03f496c536bd.gif"); animation-name: none; visibility: visible; height: 50%; width: 50%;}
  main {
      border-style: solid;
border-color: #c8a2c8;
  }
  


  }
 .profile h1 {
      font-family: 'Acme';
      font-size: 30px;
      letter-spacing: 2px;
  }
  
  .profile .blurbs .heading h4,  .profile .friends .heading h4 {
      font-family: 'Acme';
      font-size: 20px;
      letter-spacing: 2px;
      color: white;
border-color: #c8a2c8;
  }
  
  .profile .blurbs:before {
      background-image: url('https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1380416555i/822908.jpg');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 280px;
      background-size: cover;
      margin: 10px 0px;
border-color: #c8a2c8;
  }
  .profile .contact .heading, .profile .table-section .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading {
      background-color: #fadadd;
border-radius: 5px 5px 0px 0px;
border-color: #c8a2c8;
height: 100%;
text-align: center;
  }
  

  
.profile  .contact, .profile .table-section{
      border-style: none;
  }
.profile .contact:after {
      background-image: url('https://64.media.tumblr.com/9c37d19e45f0bf499ca64dd7a8e95204/a6ba06390e2727c3-b6/s1280x1920/7d182814e395bc89f71c78785401758b7e0776ac.jpg');
      display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 400px;
      background-size: cover;
      margin-top: 10px;
  }
 nav .top{
     background-image: url('https://media.tenor.com/M1I9ZFq3Rx8AAAAC/kimi-ni-todoke-couple.gif');
background-repeat: repeat;
     text-align: center;
     font-size: 15px;
border-color: #c8a2c8;
 }
nav .links{
     background-color: #fadadd;
     text-align: center;
     font-size: 15px;
border-color: #c8a2c8;
}
 
 .profile .blurbs .inner, .profile .friends .inner {
     border-style: solid;
border-color: #c8a2c8;
     margin:;
 
 }
 
 .profile .url-info {
     border-color: #C8A2C8;
 }
 
 .profile  .contact .inner, .table-section .inner {
     border-style: solid;
     border-color: #C8A2C8;

 }
 
#comments:before {
     background-image: url('https://64.media.tumblr.com/c2feff0a20dc86b07e0966787db9dd54/a6ba06390e2727c3-5c/s1280x1920/ed945dcecefaa43099c0b2823122844020af29bd.jpg');
     display: block;
      width: 100%;
      background-position: center center;
      content: "";
      height: 600px;
      background-size: cover;
      margin: 10px 0px;
 }
 
 .details-table td:first-child {
     background-color: #fadadd;
     color:white;
 }
 .details-table td {
     background-color: white;
 }
 
 footer {
     background-color: white;
 }

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

.profile .blurbs .section h4 {
    color: #C8A2C8;
}

a, .count {
  color: gray;
}

a:hover {
    text-decoration: linethrough;
    color: white;
}

footer {
  background-color: #fadadd;
      font-family: 'Acme';
      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

   }

/*LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.pinimg.com/originals/61/62/f7/6162f78145f4e40b62fdef56fcd2852a.gif);
        box-shadow: 0px 0px 7px 5px #a82e3c
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}
 
::-webkit-scrollbar {
width: 9px;
height: 9px;
}
 
::-webkit-scrollbar-track {
background: #C8A2C8;
border-radius: 3px;
}
 
::-webkit-scrollbar-thumb {
border-radius: 4px;
background: #fadadd; 
}
 
::-webkit-scrollbar-thumb:hover {
background: #ffcocb;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://64.media.tumblr.com/108ba867bc7f13ed44d19aa644c12093/eaa263787bbf5ae2-dc/s75x75_c1/e975ea3fc135a725f153f88bf4bb45e5e861972b.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/cbde797f66618ac82c8cace23829dc50/eaa263787bbf5ae2-48/s75x75_c1/6cfcb896222502e128de7a5b4a1e9a6de7680981.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/d3b4382da72614428154d66b253dba64/206e46e562e55ccd-a0/s75x75_c1/8b22a0feabdfed73f0c6f5d1636f8e66ee0f1804.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/c0c6d78be3da524e1ff37b73e86690e9/87fa098b1ad36e28-3d/s75x75_c1/9c2bf7b96e959637573915411042192046240120.webp")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://64.media.tumblr.com/f03e6c0a90347ac19adf083024462ace/f7ff660810f8e1f0-c5/s75x75_c1/e3fbae736668f7f1ef4d24dc91ce5c5d734b0f36.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://64.media.tumblr.com/246036ed3d297a921508a3d73cbf40c0/bf9539443eee6547-9b/s75x75_c1/660719da63ca46adf7c8487f40d43527f8e2ef39.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/445e26329a16f15ea182756059521168/9ee3db4b81776661-4b/s75x75_c1/3817ac702539a58239bc0b83f05e46daa5cd182d.gifv")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://64.media.tumblr.com/08704df3c4b1cd8651c62dc176a48da4/96e1a038dc8ce3c8-d0/s75x75_c1/ccd4e859e6f4631dd4f4a47788b0b0ad442bc603.gifv")
}
</style>

<style>

h1{

  animation: type 3s steps(27);

  color: #C8A2C8;

  font-size: 10px;

  font-family: Acme;

  white-space: nowrap;

  overflow: hidden;

 }

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

<style>
 
 .logo {
  
content:url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4fd7dc9f-407c-4677-ac34-ac6fbdad4e5c/dg55bhp-0511f175-72d0-4c33-b4ca-351e9b8f6030.png/v1/fill/w_1280,h_327/388ffee7_7805_4a4d_9e21_b14504b06f6c_by_pickupsomeofmytime_dg55bhp-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MzI3IiwicGF0aCI6IlwvZlwvNGZkN2RjOWYtNDA3Yy00Njc3LWFjMzQtYWM2ZmJkYWQ0ZTVjXC9kZzU1YmhwLTA1MTFmMTc1LTcyZDAtNGMzMy1iNGNhLTM1MWU5YjhmNjAzMC5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.1lRQ9VeNTi8FALzRiAgVL41uE9NPXgnOZgiIQ42R7Y0")

  
  }
  
   </style>


<!-- (c) AUTOPLAY CODE by Vidal (https://blog.spacehey.com/entry?id=97599)-->

<iframe width="0" height="0" src="https://www.youtube.com/embed/hoysCCR2TFA?si=415hBnVwko87A9Bi&;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">
</iframe>

<div class="snowflakes">
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
<div class="snowflake"><img src="https://64.media.tumblr.com/86c242cd78c76112f410de9ed6b21b1e/ee93755d738d1df1-ab/s75x75_c1/6546f79c1127cd1b3960fac6ac272f7d94ebace0.gifv"/></div>
</div>

<style>
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}



</style>

<!-- REPLACE THE URL WITH YOUR UPLOADED GIF --> 
<style>
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.gifer.com/origin/ea/ea85877f9270c8755e6639188502de38_w200.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>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "૮ ˶ᵔ ᵕ ᵔ˶ ა";
  --topic2: "♫⋆｡♪ ₊˚♬ ﾟ.";
  --topic3: "˚ ༘ ⋆｡˚ ✧ ˚ ༘ ⋆｡˚";
  --topic4: "📀☆🎥⋆｡𖦹🎞️°‧★📺";
  --topic5: "✎✧˚ ༘ ⋆｡˚📝";
  --topic6: "₍ᐢ._.ᐢ₎♡ ༘";

 }

.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 black !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>
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 )
Linnea<3
1732655948
This is so cutee!
Report Comment