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 20 comments ( View all | Add 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
slender	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
magz magz magz	1701957131 using :3 Report Comment
Valentine	1700507316 using<33 Report Comment
Lola :]	1698794290 I might use this!!!! :D Report Comment
Lola :]	1698794267 I might use this!!!! :D Report Comment
K3I ☆	1693591623 using! Report Comment
bug	1691776491 using<3 Report Comment
tay	1690189299 using Report Comment
‎‎suu ପ(๑•ᴗ•๑)ଓ ♡	1689788627 I LOVE THIS OMG!!<33 Report Comment