Grell Sutcliff | Black Butler

Tags: kuroshitsuji, black butler, grell, sutcliff, red, sound

Description:

Do not fool around with this or it will break. This one does work on mobile without needing to edit. Keep the credit link. You're going to want it if you accidentally break something and need the code again. Includes: GIFs, Pat Benatar's Heartbreaker, Floating Images, and more. If you want another character(s), just comment and I will see if I can get to it. This breaks easily and you'll have text and screwed up images everywhere, so I would rather just make you a nice one than have you spend eight hours trying to guess proportions and percentages.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 粘膜 Lonnie (https://layouts.spacehey.com/layout?id=32322) -->

@@Delete all @'s and whats between them@@
@@ABOUT ME@@
<div style="float:  ; height: 100px; position: fixed; left: 2px; bottom: 88px; z-index: 30;"><img src="https://media.discordapp.net/attachments/1112232481941360721/1116092161864257657/image-removebg-preview.png?width=242&height=242"/></div>
  
<style>
.online{
font-size:0 !important;
}
.online:before{
color:green;
content: "🖤";
font-size:.8rem;
}
.online:after{
color:red;
content: "Reaper Online";
font-size:.8rem;
font-weight:bold;
}
.online{
}
@keyframes blinker {
50% {
opacity: 0.01;
}
}
</style>
 
<style>
/* contact icons */
.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: "✩"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "✩"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "✩"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "✩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "✩"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "✩"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "✩"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "✩"
}   
</style>
 
<style>
 
.logo {
 
content:url("";
 
}
 
</style>
 
 
<style>
 
        body
            {background: url("https://wallpaperset.com/w/full/4/5/1/65753.jpg")
        no-repeat fixed; background-size:cover;
        
        }
 
    nav .top{
        background-image: url('https://64.media.tumblr.com/d3fefcec6a466d1e66bfd4451ddc64c9/tumblr_ozbx86pCdW1w5n1g1o1_540.gif');
        background-color: ;
        border: double black 5px;
        border-radius: 10px;
 
    }
 
    nav .links{
        background-color: gray;
        border: double black 5px;
        border-radius: 10px;
    }
 
    main .left{
        background-image: url('*******');
        border: double black 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
 
    }
 
    .profile .contact{
        border: double 5px;
        border-radius: 5px;
        background-image: url('********');
        box-shadow: 0px 1px 10px black;
    }
    .profile .contact .heading{
        background-color: red;
        border: double white 5px;
    }
 
    .icon{
        display: none;
    }
<style>
 
    .profile .url-info{
        border: double black 5px;
      color: red;
	-webkit-text-stroke: .4px white;
	border-radius: 5px;
	box-shadow: 0px 1px 10px black;
    }
 
    .profile .table-section{
        border: double black 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
    }
 
    nav .top .left .logo{
        display: all;
 
    }
 
    .general-about .profile-pic img{
        border: double black 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
        margin-left: 20px;
    }
 
    [id='q']{
        width: 250px;
        border: double gray 5px;
        border-radius: 5px;
    }
 
    FORM > BUTTON{
        border: double gray 5px;
        border-radius: 5px;
    }
 
    a{
        	color: white;
	font-size: 12px;
	-webkit-text-stroke: 1px red;
    }
 
    .profile h1{
        	color: white;
	font-size: 30px;
	-webkit-text-stroke: 1px red;
	text-align: center;
    }
 
    .profile .blurbs .heading{
        color: black;
        background-color: red;
        border: double white 5px;
        border-radius: 5px;
    }
 
    .profile .mood{
        text-align: center;
    }
 
    .profile .table-section .heading{
        background-color: red;
        border: double white 5px;
    }
 
    .profile .friends .heading{
        color: black;
        background-color: red;
        border: double white 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
    }
 
    .friends-grid{
        display: none;
    }
 
    .profile .blurbs .inner{
        background-image: url(https://www.teahub.io/photos/full/2-21033_heart-wallpaper-background-pink-red-small-big-cute.png);
        border: double black 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
    }
 
    .profile .blurbs .section h4{
        	color: black;
	font-size: 20px;
	-webkit-text-stroke: 1px red;
    text-align: center
 
    }
 
    .details-table td{
        background-color: white;
        border: double 2px red;
        border-radius: 5px;
    }
 
    .details-table td *{
        color:red;
    }
 
    .profile .table-section{
        background-image: url(https://images-ext-2.discordapp.net/external/KJ3b6e_7wyrYHuhAeeIPzTiohU4ztmW4eeDXiY07CxE/https/e1.pxfuel.com/desktop-wallpaper/200/28/desktop-wallpaper-pin-on-%25E8%25AE%25BE%25E8%25AE%25A1-black-butler-grell-thumbnail.jpg?width=230&height=410);
    }
    .count{
        color: red;
    }
 
    .comments-table td{
        background-image: url('https://t3.ftcdn.net/jpg/02/50/56/32/360_F_250563245_FvWoSf0UTXNeOEyW3Ow7pGyPfJzU3Uh9.jpg');
        border: double black 5px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px black;
    }
 
    .comments-table td *{
        border-radius: 5px;
    }
 
 
}
 
footer{
    background-image: url('https://images-ext-1.discordapp.net/external/DT-V_URwx02gDmmdTPvO6r-v7ovTc4jl5f-hSTikBKM/https/64.media.tumblr.com/b229407591bbb26565e7e0a4cb38fd8f/6ed233331d7bd817-de/s1280x1920/2a26d12183e1f0ea5ac1890b5bef0fcc70267fbb.gif?width=546&height=253');
    border: double black 5px;
    border-radius: 5px;
}
 
main{
    border: outset white 5px;
    border-radius: 10px;
}
 
.container{
    width: 900px;
}
</style>
 
<style>
    :root {
    --light-orange: ;
       --even-lighter-blue: black;
</style>
 
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body{font-family: 'Fredoka One', cursive;
font-size: 16px;
</style>
 
<style>
 
   a:hover {
     color: black; 
   } 
   a{
     color: white; 
   }
 
   nav .links {
 
}
nav .links a:hover {
color: black;
}
</style>
 
<style>
 
    .friends:after {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 300px;
  background-image: url(https://static.zerochan.net/Grell.Sutcliff.full.1755101.jpg);
  background-repeat: no-repeat;
  background-size: 100%;
  align-content: center;
  margin-bottom: 10px;
  border-radius: 20px;
 
}
 
    main .left:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 200px;
  background-image: url('https://media.discordapp.net/attachments/1112232481941360721/1116075436817002636/156096_1.gif?width=647&height=500');
  background-color: white;
  background-repeat: no-repeat;
  background-size: 100%;
  align-content: center;
  border-radius: 20px;
  border: double 5px;
  box-shadow: 0px 1px 10px black;
 
}

</style>
 
<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
 
    }
 
</style>
 
<style> 
.profile .profile-info {
	background-image: url(https://images-ext-2.discordapp.net/external/KJ3b6e_7wyrYHuhAeeIPzTiohU4ztmW4eeDXiY07CxE/https/e1.pxfuel.com/desktop-wallpaper/200/28/desktop-wallpaper-pin-on-%25E8%25AE%25BE%25E8%25AE%25A1-black-butler-grell-thumbnail.jpg?width=230&height=410);
	border: double;
        border-color: black;
        border-width: 5px;
	border-radius: 5px;
	text-align: center;
	box-shadow: 0px 1px 10px black;
        
}
 
nav .links a{
    text-shadow: 0px 1px 10px black;
}
 
</style> 
 
<style>
.links .special a:link, .links .special a:visited  {
  color: white;
}
 
.links .special a:hover {
  color: white;
}
</style>
 
<style>
             ::-webkit-scrollbar {
    width: 15px;
    height: 10px;
    }
 
    ::-webkit-scrollbar-thumb {
    background-color: gray;
    border: outset 5px;
    }
 
    ::-webkit-scrollbar-track {
    background: white;
    border: inset 5px;
    }
</style>
 
<center><img src="https://64.media.tumblr.com/d03982e71e949d984ec51f7cc5d44a5d/80736941e00346ed-76/s1280x1920/a85207f7d33c067bc94992dd3250147f87165c24.gif"/></center>
<br/>
<center>@@OUR TEXT HERE; DELETE @'s@@<center></center></center>
@
@
@
@
@@MEET@@
<style>
:root{
/* [background color]: header on top */
 --logo-blue:url(URL);
}

nav .links {
    background-image:url(https://www.teahub.io/photos/full/2-21033_heart-wallpaper-background-pink-red-small-big-cute.png);
    padding: 3.5px 16px 5.5px 16px;
}

</style>

<center><img src="https://64.media.tumblr.com/d03982e71e949d984ec51f7cc5d44a5d/80736941e00346ed-76/s1280x1920/a85207f7d33c067bc94992dd3250147f87165c24.gif"/></center>
<br/>
<center>@@OUR TEXT HERE; DELETE @'s@@<center></center></center>
<center><a href="https://layouts.spacehey.com/layout?id=32322">Layout Credit</a></center>


<iframe width="0" height="0" src="https://www.youtube.com/embed/fd_7jIC9180//?&;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>
@
@
@
@
@@GENERAL@@
@@<center>@@YOUR TEXT HERE@@<center></center>
<img src="https://media.discordapp.net/attachments/1112232481941360721/1116080717185687684/image-removebg-preview_4.png?width=242&height=336"/>
@
@
@
@
@@MUSIC@@
<center>@@YOUR TEXT HERE@@<center>
<img src="https://64.media.tumblr.com/d5289346bc63e26f14466ccbf98bcafd/70d585b2a94808cf-7c/s1280x1920/6d8e19c97c9a26c206d24ede6f8ed8d51e6d9fff.gif"/>
@
@
@
@
@@MOVIES@@
<center>@@YOUR TEXT HERE@@<center>
<img src="https://userstyles.org/style_screenshots/119221_after.png"/>
@
@
@
@
@@TV@@
<center>@@YOUR TEXT HERE@@<center>
<img src="https://64.media.tumblr.com/fb6e559f1cc47ac350b4d0fcca5a6b3a/b003b30fbf4db7f1-6e/s1280x1920/37d4897863374bb0ef0ec89d7ed5b67d657935a1.gif"/>
@
@
@
@
@@BOOKS@@
<center>@@YOUR TEXT HERE@@<center>
<img src="https://images-ext-2.discordapp.net/external/kXNm1VFcwAfdeBbXVQj99pFRoLoOPFv-XhOJltjcGwo/%3Fcb%3D20190228061531/https/static.wikia.nocookie.net/all-worlds-alliance/images/a/ab/360.png/revision/latest/scale-to-width-down/250?width=202&height=350"/>
@
@
@
@
@@HEROS@@
<center>@@YOUR TEXT HERE@@<center>
<img src="https://64.media.tumblr.com/9ac49dff6e04ac3a63e217081bb7b198/471348ba63aacb52-b5/s640x960/679d1e1414dc0bf9878b50e83e7c83a22ce317ed.gifv"/></center></center></center></center></center></center></center></center></center></center></center>

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 10 of 10 comments ( View all | Add Comment )

☏ 𝔠𝔦𝔢𝔩 †	1733705496 using 100% Report Comment
Kw33n_@ng3l._.444	1732401129 Using :3 Report Comment
xrqvic4	1726955833 use Report Comment
britishdemon	1720820357 using!! Report Comment
Oracle	1720636101 usinggg Report Comment
♡ Len! ⁠☆	1713386164 USSUIGN Report Comment
𝜗𝜚 ┈ siya ｡	1709366539 oh yes I absolutely did spend hours going through the code (I barely have basic knowledge) I didn't read that far to where you said you may get around to comms lol ;-; Report Comment once I remember my password on PC I’ll gladly do anything you want whenever you want it haha. But it should be easy enough to just add things in. The sizing of things is what gets messed up. Cute PFP!! by 粘膜 Lonnie; 1710868641; Report Oh yeah definitely! I loved your layout even though I change my layout and profile picture frequently Would love to comm and thank you ^^ by 𝜗𝜚 ┈ siya ｡; 1710909919; Report
𝜗𝜚 ┈ siya ｡	1709366297 using!! Report Comment
𝐷𝑟𝑒𝑤♡	1705523579 Definitely using it! Report Comment
Chezburgr_x3 🍔🌈	1686354992 AAAAAAAAAAAAAAAAAAAUHEFOWIHFOWIE FINALLY A BLACK BUTLER FAN!! Report Comment Hahaha I haven't seen it in so long but I love Grell and the shinigami so much yes by 粘膜 Lonnie; 1686357872; Report