Junji ito layout

Tags: junji ito, manga, creepy

Description:

Junji ito inspired layout with floating profile animation, transparent profile, and a custom online icon. Made with different pieces of code, so change it up however you'd like! Just comment if used

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=36052) -->

<style>

main:before {
width: auto;
margin-bottom: 2px;
border: 2px double black;
height: 165px;
display: block;
content: "";
background-image: url('https://xsmultimedia.com/wp-content/uploads/2022/06/photo_2022-06-21_09-57-44.jpg');
background-position: center center;
background-size: cover;
}

body {
 margin:0;
 background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg2yl5i-cb78d499-e85d-4216-869b-adb69c774ff7.jpg/v1/fill/w_1192,h_670,q_70,strp/junji_ito_art_by_p4ntysh0t_dg2yl5i-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIwIiwicGF0aCI6IlwvZlwvYTgwY2UzMDItNDBjZC00ZDhkLTgxYmYtZjNkNDkyMzdmZTI1XC9kZzJ5bDVpLWNiNzhkNDk5LWU4NWQtNDIxNi04NjliLWFkYjY5Yzc3NGZmNy5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.l8WrL2-yzRYWQm9FkS30EbvvCC7UlobOaIzHrDJGLwc");
background-attachment: fixed;

}


.row.profile{
}


nav .links .special a {
color: white;
}

small {
font-size:100%;
}
 

main{
background: rgb(255,251,113);
background-color: rgba(0, 0, 0, 0.5);
}

.general-about .profile-pic img {
border: 2px double black;

 }   

b {
font-size: 10px;
}

time.ago {
color: white;
}


}

.profile .friends .inner b, .profile .friends .inner a{
color: white;
}

p{
font-size: 10px;
}

.details-table td a {
color: white;
}

.details-table td p {
color: white;
font-size: 10px;
}

  .table-section .heading{ font-size:10px; }

}


}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 9px;
}

.friends p, .friends a {
color: white;
}

.profile .friends .inner{
    text-align: center;
background-image: url("");
border: 2px double black;
background-position: center;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 10px;
color: white;

}

.button {
    background: black;
    color: white;
}

.profile-info{
background:url("") no-repeat fixed; background-size:cover; background-image: center;
border: 2px double black;
}

.profile-info a{
font-size: 10px;
color: white;
}

.profile-info h3{
color: white;
}

.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color: transparent;
}

.profile .blurbs .inner{
background: url("");
border: 2px double black;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: white;
}

.contact .heading h4{
display:none !important;
}

.logo {

    background: transparent;
}

h4 {
font-size: 10px !important;
color: white;
 
 }

p {
 
color: white;
   } 

   a {
font-size: 10px;
     color: white; 
   }


a:hover {
     color: white; 

}
    .count {
        color: white;
    }

.profile .friends .person p {
color: white;  
}
.profile .friends .person p:hover {
color: white;  
}

.blog-preview{
text-align: center;
background-image: url();
color: white;
border: 2px double black;
}

.blog-preview p, .blog-preview a, .blog-preview h4{
background-color: transparent;
}

.contact .heading h4{
font-size:10px;
}

.profile .friends .person img:not(.icon) {
border-style: double;
border-width: 2px black;
border-image: url("") 60 fill round;
}

a, .profile .friends .person p, .logout-btn {
color: white !important;
text-decoration: underline !important;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/23cdf5e3-1f17-439e-9ad7-8b6cb63548bc/ddum3t0-0a4c0a83-8982-4d3b-afed-33bedb2de369.png/v1/fill/w_100,h_150/tomie_pixel_f2u_by_kuroishiori_ddum3t0-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTUwIiwicGF0aCI6IlwvZlwvMjNjZGY1ZTMtMWYxNy00MzllLTlhZDctOGI2Y2I2MzU0OGJjXC9kZHVtM3QwLTBhNGMwYTgzLTg5ODItNGQzYi1hZmVkLTMzYmVkYjJkZTM2OS5wbmciLCJ3aWR0aCI6Ijw9MTAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.2lvadtdN0f9KDpCcDmiLwxuCU-RA7juPaLhqD96we8Q);
height: 130px; width: 90px;
}
  

.profile .contact {
background-color: black;
}
.profile .contact {
border: 2px double black;
background: transparent;
}

.profile .contact a{
font-size: 9px;
}

.f-col{

}

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

/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}


.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: white;
}

.profile .table-section .details-table td {
background:url("");
background-image: center;
border: 2px double black;
}


.profile .friends .comments-table td {
background-image: url("");
position: center;
border: 2px double black;

}
.comments-table td*{


  }
.profile .comments-table .inner {
 

}

.comments-table td:first-child img{
border-style: double;
border-width: 2px black;
border-image: url("") 60 fill round;

}

.comment-replies{
border: 2px double black;
color: white;
}

.general-about .details{
padding: 2px;
background: transparent;
border: 2px double black;
background-image: url("");
background-size:cover;
}

.general-about .details p:not(.online){
color: white !important;
font-size: 10px;
}

.general-about .details a{
color: white !important;
font-size: 10px;
}

nav{ 
color: white;
font-size: 10px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background-color: rgba(0, 0, 0, 0.5);
}

nav .links a:hover {
color: white;
}

nav .top{
background-color: rgba(0, 0, 0, 0.5);
}

nav .top a{
color: white !important;
}

nav .top label{
color: white;
}


.profile .url-info {
border: 2px double black;
color: transparent;
font-size: 0.1px;

}
.profile .table-section {
border: none;
}


nav .links a{
color: white;
font-size: 10px;
}

table.comments-table {
border: 2px double black;
}


footer p{
color: white;
font-size: 100%;
}

footer a{
color: white;
}

footer {
color: white !important;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-color: rgba(0, 0, 0, 0.5);

  }    

.profile h1{
color: white;
font-size: 20px;
text-align: center;
}
    </style>

<style>


.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.url-info{
    background: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dg2yjwh-3e112827-2fb3-4dd0-81c8-2843f53a78a5.jpg/v1/fill/w_1280,h_536,q_75,strp/junji_ito_art_by_p4ntysh0t_dg2yjwh-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTM2IiwicGF0aCI6IlwvZlwvYTgwY2UzMDItNDBjZC00ZDhkLTgxYmYtZjNkNDkyMzdmZTI1XC9kZzJ5andoLTNlMTEyODI3LTJmYjMtNGRkMC04MWM4LTI4NDNmNTNhNzhhNS5qcGciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.UWJQzkUo5lmwn56w8CnCGzJEMzPRjx8gYiKwtI11yhI');
    background-position: center;
    height: 77px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}

</style>

<style>
table.comments-table{
background-color: transparent;
display: block;
height: 300px!important;
overflow-y: scroll;
border-color: 2px double black;

}
</style>



<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

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

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

<style>
    .comments-table td:first-child{
background-color: transparent;

}

.comments-table td{
background-color: transparent;
border: 2px double black;
</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 28 comments ( View all | Add Comment )

εℓɱเ૨αα	1749145756 using ^^ Report Comment
ℂ𝕙𝕖𝕣𝕚🎹⊹ ࣪ ˖	1747095732 using!! Report Comment
thaiaia♱	1742798002 using ^^ Report Comment
Sophie <3	1740341612 using <33 Report Comment
vxl~tine	1738181228 using Report Comment
Ny ✮⋆˙	1737641533 used Report Comment
c4rolll	1736323908 USINGGGG Report Comment
纳迪亚ིྀೄྀ	1736198479 uding Report Comment
Sara 𖹭 ۶ৎ	1727748358 using Report Comment
Short_cat	1727575744 Using 👍✨ Report Comment
Ne ★	1725373593 thank you, using! Report Comment
Dilan the vampire	1721505797 Using! Report Comment
OxyMoron	1721274785 used the splat, thx!! Report Comment
OxyMoron	1721274783 used the splat, thx!! Report Comment
CertifiedxDunce	1717915095 using Report Comment
nata	1717327646 using!! Report Comment
Xanderr	1707995970 im gogin to use thz Report Comment
방탄소년단	1707584818 Usando ^^ Report Comment
Esquizofs	1705874320 Usando Report Comment
dem0npunkK	1703361978 using!!! Report Comment