TOJI/JJK MANGA THEMED LAYOUT!!

Tags:

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!" ^^)

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by J3m🦇 (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 18 of 18 comments ( View all | Add Comment )

riri >_<	1730877853 using ^^ Report Comment
d0ckerystr33t	1730523134 using <3 Report Comment
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
freakazoid 👾	1719131221 Using:3 Report Comment
Kanne	1718868825 Using Report Comment
vivi	1718568494 using!!!!!!! Report Comment
bong water	1718234830 using Report Comment
Nyko_ .ᐟ .ᐟ .ᐟ	1717565527 using! Report Comment
zen (>ᴗ•)	1716284832 using!!! Report Comment