TOJI/JJK MANGA THEMED LAYOUT!!

Tags: jjk, black and white, manga, gifs, anime

Description:

i made this layout for my fav!! (if theres something wrong, please tell in the comments! and if your going to use please say "using!" in comments too!, feel free to mess with the images like editing them to a diff character :3) note that I will no longer do any layout request due to struggling with school and coding is really hard and messes up my brain. Plus Im really busy a lot and may forget to do some things ! I'm very sorry to the people I promised to make a layout for but never got it! :(

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Jem.👁️‍🗨️ (https://layouts.spacehey.com/layout?id=105094) -->

<style>

.online{
  content: url(https://images-ext-1.discordapp.net/external/2cAkC95KaXS0P454_boRHlSXsbYlJVjunIkwNJBGfzY/%3Fv%3D5bf8fcf7/https/gifcity.carrd.co/assets/images/gallery85/77459acf.png);
  padding: 1px 0px;
}

.profile .blurbs {
    margin: 20px 0;
}
.blurbs {
    background-image: url(https://i.pinimg.com/564x/60/6a/00/606a0032364010f3267fad86766f0e7a.jpg);
    background-position: center;
    background-size: cover;
    border: 5px inset black;
    overflow-y: visible;
    

}
* {
    box-sizing: border-box;
}
user agent stylesheet
div {
    display: block;
}
main, body {
    font-family: serif;
    color: white;
    filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
    font-size: 98%;
    font-size: 13px text-shadow: -1px 0, 0 1px, 1px 0, 0 -1px, 0 0 5px #fffff;
    text-shadow: 0 0 3px black, 0 0 5px #ffffff;
}
main {
    background: white;
    color: black;
    padding: 6px 0px;
    font-size: 80%;
}
body {
    background-color: #962109;
    background-color: var(--grey);
    font-family: serif;
}
:root {
    --lighter-blue: transparent;
}
:root {
    --light-gray:#222224;
    --gray: #222224;
    --dark-gray: #222224;
    --darker-gray: #6888bd;
    --logo-blue: ##222224;
    --darker-blue: #333333;
    --lighter-blue: #424242;
    --even-lighter-blue: #2e2e2e;
    --lightest-blue: #7d7d7d;
    --red: #363636;
    --dark-orange: #1c1c1c;
    --light-orange: #1c1c1c;
    --even-lighter-orange: #7d7d7d;
    --strange-yellow: #303030;
    --green: #5a5b5c;
    --light-green: #5a5b5c;
    --medium-green: #3a3c3d;
    --dark-green: #3a3c3d;
    accent-color: #333333;
    accent-color: var(--logo-blue);


  body {

text-align: center;

}
</style>


<style>

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
 {
  0% {
    opacity: 0.27861;
  }
  5% {
    opacity: 0.34769;
  }
  10% {
    opacity: 0.23604;
  }
  15% {
    opacity: 0.90626;
  }
  20% {
    opacity: 0.18128;
  }
  25% {
    opacity: 0.83891;
  }
  30% {
    opacity: 0.65583;
  }
  35% {
    opacity: 0.67807;
  }
  40% {
    opacity: 0.26559;
  }
  45% {
    opacity: 0.84693;
  }
  50% {
    opacity: 0.96019;
  }
  55% {
    opacity: 0.08594;
  }
  60% {
    opacity: 0.20313;
  }
  65% {
    opacity: 0.71988;
  }
  70% {
    opacity: 0.53455;
  }
  75% {
    opacity: 0.37288;
  }
  80% {
    opacity: 0.71428;
  }
  85% {
    opacity: 0.70419;
  }
  90% {
    opacity: 0.7003;
  }
  95% {
    opacity: 0.36108;
  }
  100% {
    opacity: 0.24387;
  }
}
@keyframes textShadow {
  0% {
    text-shadow: 0.4389924193300864px 0 1px rgba(0,30,255,0.5), -0.4389924193300864px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  5% {
    text-shadow: 2.7928974010788217px 0 1px rgba(0,30,255,0.5), -2.7928974010788217px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  10% {
    text-shadow: 0.02956275843481219px 0 1px rgba(0,30,255,0.5), -0.02956275843481219px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  15% {
    text-shadow: 0.40218538552878136px 0 1px rgba(0,30,255,0.5), -0.40218538552878136px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  20% {
    text-shadow: 3.4794037899852017px 0 1px rgba(0,30,255,0.5), -3.4794037899852017px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  25% {
    text-shadow: 1.6125630401149584px 0 1px rgba(0,30,255,0.5), -1.6125630401149584px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  30% {
    text-shadow: 0.7015590085143956px 0 1px rgba(0,30,255,0.5), -0.7015590085143956px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  35% {
    text-shadow: 3.896914047650351px 0 1px rgba(0,30,255,0.5), -3.896914047650351px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  40% {
    text-shadow: 3.870905614848819px 0 1px rgba(0,30,255,0.5), -3.870905614848819px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  45% {
    text-shadow: 2.231056963361899px 0 1px rgba(0,30,255,0.5), -2.231056963361899px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 0.08084290417898504px 0 1px rgba(0,30,255,0.5), -0.08084290417898504px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  55% {
    text-shadow: 2.3758461067427543px 0 1px rgba(0,30,255,0.5), -2.3758461067427543px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  60% {
    text-shadow: 2.202193051050636px 0 1px rgba(0,30,255,0.5), -2.202193051050636px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  65% {
    text-shadow: 2.8638780614874975px 0 1px rgba(0,30,255,0.5), -2.8638780614874975px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  70% {
    text-shadow: 0.48874025155497314px 0 1px rgba(0,30,255,0.5), -0.48874025155497314px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  75% {
    text-shadow: 1.8948491305757957px 0 1px rgba(0,30,255,0.5), -1.8948491305757957px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  80% {
    text-shadow: 0.0833037308038857px 0 1px rgba(0,30,255,0.5), -0.0833037308038857px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  85% {
    text-shadow: 0.09769827255241735px 0 1px rgba(0,30,255,0.5), -0.09769827255241735px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  90% {
    text-shadow: 3.443339761481782px 0 1px rgba(0,30,255,0.5), -3.443339761481782px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  95% {
    text-shadow: 2.1841838852799786px 0 1px rgba(0,30,255,0.5), -2.1841838852799786px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  100% {
    text-shadow: 2.6208764473832513px 0 1px rgba(0,30,255,0.5), -2.6208764473832513px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}
body::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}
</style>


<style>

main:before {
    width: auto;
    margin-bottom: 25px;
    border: 1px solid black;
    height: 120px;
    display: block;
    content: "";
    background-image: url(https://i.pinimg.com/564x/0b/de/18/0bde18d793574f2314167f963464cdaf.jpg);   
    background-position: center center;
    background-size: cover;
}

footer {
border-radius: 15px; background-image: url(https://i.pinimg.com/564x/c7/ca/0c/c7ca0ccfcdab90ec699da7839a5ae546.jpg);
background-position: center center;
color: white;
}


</style>

<style>
.profile-info {
 color: white !important;
 background-image: url('https://i.pinimg.com/564x/03/b5/20/03b52049f20d501e03796c14b5c4e8c1.jpg');
 background-size: cover;
 background-position: center;
 border: 0px solid white;
 box-shadow: 0px 0px 10px black;
      height: 100px
}


.friends {
 color: white !important;
 background-color: rgb( 0 0 0 / 50% );
 box-shadow: 0px 0px 10px black;
 font-weight: bold !important;
}
   .friends:not(#comments) {
 background: url('https://i.pinimg.com/564x/ba/3e/54/ba3e54c11a7c6cad111bf96f30d0979b.jpg');
 background-position: center;
 background-size: cover;
 margin-bottom: 20px;
}
   .friends a {
 color: black !important;
 font-weight: bold !important;
}
   .friends a:hover {
 color: white !important;
 text-decoration: none !important;
 font-weight: bolder !important;
 text-shadow: 1px 1px 3px #2e2e2e, 1px 0px 5px white;
}
   .friends .person p{
 color: black!important;
 font-weight: bolder !important;
}
   .profile .friends .person img:not(.icon), .comments-table td:first-child img:not(.icon) {
 box-shadow: 1px 1px 5px black;
 opacity: 0.8;
 max-width: 100%;
 max-height: 200%;
 display: block;
 margin: 0 auto;
}
 .profile .friends .person img:not(.icon):hover, .comments-table td:first-child img:not(.icon):hover {
 opacity: 1;
 box-shadow: 1px 1px 5px white, 0 0 10px white;
}
   .count {
 color: black !important;
 font-weight: bold !important;
}
    .more {
 color: black !important;
 font-weight: bold !important;
}

   .comments-table {
 background-color: rgb( 0 0 0 / 75% ) !important;
 box-shadow: 0px 0px 10px white !important;
}
   .comments-table a {
 color: white;
 font-style: normal;
 text-shadow: 1px 1px 1px black;
}
   .comments-table a:hover {
 text-decoration: none !important;
 text-shadow: 1px 1px 2px white, 1px 0px 5px white;
}
   .comments-table button {
 color: black;
}
   .comments-table td {
 color: white !important;
 background-color: rgb( 0 0 0 / 0% ) !important;
 padding: 5px;
}
   table.comments-table {
 display: block;
 height: 250px !important;
 overflow-y: scroll;
}
   .comment-replies {
 padding: 0 5px;
 border: 1px solid white;
 margin-top: 10px;
}


.contact {
 background-image: url('https://i.pinimg.com/564x/76/97/85/7697859f1b1411a01aa65c254268ed69.jpg');
 background-position: center;
 background-size: cover;
 box-shadow: 0px 0px 10px black;
 border: 1px solid black !important;
 font-weight: bold;
 text-align: left;
 text-decoration: none;
 text-shadow: 1px 1px 5px black;
 margin: 10px auto;
}
    .contact a {
 color: black !important;
 text-decoration: none;
}
    .contact a:hover {
 color: grey !important;
 text-shadow: 1px 1px 2px black, 1px 0px 5px white;
}
 .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 {
 /* Add to Friends */
 content:url("https://64.media.tumblr.com/93aa1f71c2000cf4e8335584313dc8ad/cb6a6e5f526816d6-d2/s75x75_c1/ec7fb46ce99a08e7ce25346f0cd52549c9ae5d27.gif")}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
 /* Add to Favorites */
 content:url("https://64.media.tumblr.com/961f3c3afdad93cbec2175dfd2f1ad94/cb6a6e5f526816d6-ed/s75x75_c1/ee2c02cebda63cee0c83be92d036065ca6321d25.gif")}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
 /* Send Message */
 content:url("https://64.media.tumblr.com/8719e3415315fd9aa2353aef890ffb77/cb6a6e5f526816d6-48/s75x75_c1/319e43a1a722729c241c4e640fafbf433e099b5c.gif")}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
 /* Forward to Friend */
 content:url("https://64.media.tumblr.com/2e1b0f903859f1525b3e7765f5921ccc/cb6a6e5f526816d6-a4/s75x75_c1/a642617fa57a6f7990a6afbc7c0041eb2fc0ae80.gif")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
 /* Instant Message */
 content:url("https://64.media.tumblr.com/b189d5a32d323867f8e672aa20596f85/cb6a6e5f526816d6-0f/s75x75_c1/64538ae2c44264ed571f7498a64992e5999bf229.webp")}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
 /* Block User */
 content:url("https://64.media.tumblr.com/fbb7454cf7cbf635964c550bcd3195ad/cb6a6e5f526816d6-e2/s75x75_c1/60f48a9bd6b63868799ccdb3eeb75d1dcc7307af.webp")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
 /* Add to Group */
 content:url("https://64.media.tumblr.com/2916039d7d5d4443e0a49cb2eb109dff/cb6a6e5f526816d6-58/s75x75_c1/b5b73fd7f2e50f2f73d7e2495e2f529e871529b9.webp")}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
 /* Report Profile */
 content:url("https://64.media.tumblr.com/1e82d3f43ead4fceadc8495229ce766f/cb6a6e5f526816d6-2b/s75x75_c1/36f2687af5b3c71c7ce056a064743284a85719ec.gifv")}

</style>

<style>




img:hover , .url-info:hover , .online:hover {

  animation: shake 1s;

  animation-iteration-count: infinite;

}



@keyframes shake {

  0% { transform: translate(1px, 1px) rotate(0deg); }

  10% { transform: translate(-1px, -2px) rotate(-1deg); }

  20% { transform: translate(-3px, 0px) rotate(1deg); }

  30% { transform: translate(3px, 2px) rotate(0deg); }

  40% { transform: translate(1px, -1px) rotate(1deg); }

  50% { transform: translate(-1px, 2px) rotate(-1deg); }

  60% { transform: translate(-3px, 1px) rotate(0deg); }

  70% { transform: translate(3px, 1px) rotate(-1deg); }

  80% { transform: translate(-1px, -1px) rotate(1deg); }

  90% { transform: translate(1px, 2px) rotate(0deg); }

  100% { transform: translate(1px, -2px) rotate(-1deg); }

}
</style>

<style>* {cursor: url(https://ani.cursors-4u.net/others/oth-9/oth903.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2018/02/08/hypnotize-guitar-pick.html" target="_blank" title="Hypnotize Guitar Pick"><img src="https://cur.cursors-4u.net/cursor.png" alt="Hypnotize Guitar Pick" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>
/*change only notification bell*/
nav .links li .icon{
content: url('https://64.media.tumblr.com/918f51f7f353b35001db8e83ad494cc6/649b431168fc9fa4-f9/s75x75_c1/ebd8caaef03b29dded9e74e51596de602bc09df4.gif');

}



</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 23 comments ( View all | Add Comment )

Wilvy_rightback	1741244925 using!! :) Report Comment
Shalén	1738884782 Hii, im new here in this page and i just wanted to ask if you could make a layout like this but with Nanami Kento PLEASE i would beg you! Report Comment Hii! sorry for late reply, but i can try! js asking if you want it like colored or also a manga version? :> by Jem.👁️‍🗨️; 1738931915; Report You can choose that, i just love the way you make layouts, i'll love it either way! by Shalén; 1739297092; Report
りゃん	1738477032 using!!!! cool af Report Comment
Terra ☆⌒	1737998459 using!!! Report Comment
Rayy🔮	1735801964 Using! Report Comment
himari	1730877853 using ^^ Report Comment
d0ckerystr33t	1730523134 using <3 Report Comment OMG SAME PFP by Laura ୨୧; 1735225390; Report
Kazzy	1729744369 Using!! Report Comment
Miserable Clear Glass	1728132456 Using!!! Report Comment
flynn patrick	1726678799 using :3 Report Comment
𝓣𝓮𝓼𝓼𝓮 // 𝓢𝓪𝓲𝓭𝓮𝓮	1726222681 Using : 33 Report Comment
opeium	1725618378 Using ^^ Report Comment
chan	1724917405 usinggggggg Report Comment
eivør	1723396398 USING!!!1!1!1 Report Comment
NOM NOM ᶻ 𝗓 𐰁 .ᐟ	1723174903 HEHEH USING Report Comment
chikifilapi	1722220883 Using <33 Report Comment
robbie	1720903832 using!! Report Comment
amni	1719131221 Using:3 Report Comment
Kanne	1718868825 Using Report Comment
vivi	1718568494 using!!!!!!! Report Comment