Witch's Notes Layout

Tags: cute, kawaii, simple, black, emo, goth, white, dark, grid, anime

Description:

Mostly monochrome with some cyan accents, I just wanted to make something loosely inspired by sticky notes.

Layout features:
-- grid background that changes color with your background's color (You can change this by changing the body tag's background color from "lightgrey" to whatever) -- 1 side gif (mayura)
-- all icons are star pixels
-- custom logo
-- customized buttons

*not made to be viewed on mobile

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by clear (https://layouts.spacehey.com/layout?id=98555) -->

<!-- code start-->
<!-- pic start -->
<div class="mayura"><img height="380px" src="https://media.tenor.com/RCZ5hqAqca0AAAAi/mayura-digital-witch-mayura.gif"/>
</div>
<!-- pic end -->
<div class="uh"><a title="layout by /kento" href="https://spacehey.com/kento"><img src="https://64.media.tumblr.com/tumblr_m2o8k7SHMm1qdlkyg.gif"/></a></div>
<style>
.profile .blurbs .heading h4{
width:100%;
}
.profile .friends .person p{
color:white;
}
nav .top .right button, [type="button"], [type="reset"], [type="submit"]{
border:none;
}
.profile .friends .person p a {
color:white;
}
.profile .friends .person img:not(.icon){
padding:10px;
background:url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center;
}
div.friends .person a{
color:white;
}
div.friends-grid{
background:black;
color:white;
padding:10px;
border:1px solid black;
}
.comment-replies{
background:white;
border:1px solid grey;
}
footer .copyright{
text-decoration:none;
}
footer .copyright::before{
margin-right:20px;
content:"layout by /kento";
text-decoration:none;
}
.logout-btn, .logout-form{
border:none;
}
.logout-btn, .logout-form:hover{
border:none;
}
.count{
color:#008b8b;
}
button, [type="button"], [type="reset"], [type="submit"]{
border:1px solid black;
background:white;
letter-spacing:2px;
}
button:hover{
background:black;
border:1px solid white;
color:white;
text-shadow:0px 0px 10px white;
}
.icon, .award img{
visibility:hidden;
}
.comments-table td, .music-table td{
border:1px solid black;
background:url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') repeat center;
padding:10px;
}
.comments-table td:first-child, .music-table td:first-child{
padding-right:10px;
padding-bottom:0px;
box-shadow:inset 1px 1px 0px white;
border:1px solid black;
background:black;
color:white;
}
.icon.verified{
content:url('0');
margin-right:-15px;
}
table.comments-table{
}
.comments-table td:first-child a {
color:white;
}
.comments-table td:first-child a:hover {
color:white;
text-shadow:0px 0px 10px white;
}
.comments-table td:first-child img:not(.icon){
width:100%;
height:100%;
padding:10px;
background:url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center;
border:1px solid black;
}
.profile .blurbs {
box-shadow:3px 3px 0px black;
}
main .left, main .right {
padding:10px;
}
.profile .blurbs .section p{
border-top:1px dashed black;
padding-top:10px;
}
.profile-info .inner{
width:100%;
background: url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') center repeat;
text-transform:lowercase;
letter-spacing:3px;
}
.profile-info {
border:1px solid black;
background:white;
padding:10px;
margin-bottom:20px;
box-shadow:3px 3px 0px black;
}
.profile .blurbs .heading{
padding:10px;
background:black;
text-align:center;
border-right:1px solid white;
border-top:1px solid black;
border-left:1px solid left;
color:white;
text-transform:lowercase;
letter-spacing:3px;
}
.profile .friends:first-child{
margin-left:40px;
}
a{
color:grey;
}
a:hover{
color:black;
text-shadow:0px 0px 10px black;
}
.mayura{
position:fixed;
left:0px;
bottom:0px;
}
.online img {
content:url('https://64.media.tumblr.com/tumblr_m2vlwmyRdo1qdlkyg.gif');
margin-bottom:-3px;
margin-right:-5px;
height:20px;
}
::-webkit-scrollbar-thumb {
background-color: black;
box-shadow:inset 1px 1px 0px white;
-webkit-border-radius: 0ex;
border: 1px solid black;
}
.online {
color: black;
text-shadow: 0px 0px 5px black;
    font-size: 15px;
}
::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: white;
}
 .friends .heading a.more{
position:absolute;
background:url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') repeat center center;
margin-top:-20px;
color:black;
padding:5px;
border:1px solid black;
box-shadow:3px 3px 0px white;
margin-left:20px;
}
.profile .friends .heading{
margin-top:20px;
text-align:center;
text-transform:lowercase;
border-right:1px solid white;
background:black;
padding:10px;
border-top:1px solid black;
border-left:1px solid black;
border-bottom:1px solid white;
color:white;
}
nav .links .icon{
margin-right:-30px;
}
nav .links .icon img{
visibility: hidden;
}
nav .links img.icon {
visibility: hidden;
}
.profile .friends{
box-shadow:3px 3px 0px black;
}
.profile .friends::before{
content:url('https://64.media.tumblr.com/tumblr_m2o8khRIxM1qdlkyg.gif');
filter:invert(100%);
position:absolute;
margin-left:10px;
margin-bottom:10px;
margin-top:8px;
}
 .profile .friends .inner{
background:white;
border:1px solid black;
padding:10px;
border-right:1px solid white;
border-top:none;
}
.blog-preview h4{
border:1px solid white;
background:url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center center;
padding:10px;
}
.blog-preview p{
border:1px solid white;
background:url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center center;
padding:10px;
}
.blog-preview{
text-transform:lowercase;
text-align:center;
padding-right:10px;
padding-left:10px;
box-shadow:3px 3px 0px black;
background:black;
border-left:1px solid black;
border-top:1px solid black;
border-right:1px solid white;
border-bottom:1px solid white;
}
nav .links li:nth-child(odd)::before{
content:url('https://64.media.tumblr.com/c32195e403a8eb29ffe1686178a849f4/d2a23e6a5b84bc3b-10/s75x75_c1/e78d1305299e6b2101c25d61d874b2ad02d29e1d.gifv');
margin-right:10px;
}
main.right{
margin-left:50px;
}
div.col.right{
margin-left:50px;
padding:20px;
}

nav .links li:nth-child(even)::before{
content:url('https://64.media.tumblr.com/7481610390194d7fe353db47495be5a1/d2a23e6a5b84bc3b-41/s75x75_c1/ba541edb546a371a7b9b20c9f6cd4ebc89812bc6.gifv');
margin-right:10px;
}
nav .links a{
text-transform:lowercase;
color:white;
text-align:center;
}
nav .links a:hover{
color:black;
}
nav .links {
border-top:dashed 1px white;
position:absolute;
margin-left: 15px;
padding-top:20px;
padding-bottom:20px;
border-bottom:dashed 1px white;
font-size:15px;
margin-top:140px;
width:180px;
background:black;
}
nav .center{
position:absolute;
top:0px;
width:200px;
padding:10px;
margin-top:80px;
background:black;
}
nav .top .left{
top:0px;
width:200px;
padding:10px;
position:absolute;
background:black;
}
nav .top .left .logo{
content:url('https://64.media.tumblr.com/d52daa18bb38e4c5870d8ec0fdeb5a21/51bbb40dabc29379-2c/s250x400/f4bb370a7194f4f8580a546c0c140ba10c6272c2.gifv');
}
.profile .blurbs .section{
padding:10px;
background:white;
border:1px solid grey;
}

.profile .blurbs .section:last-child{
margin-bottom:0px;
}
.profile .blurbs .section{
margin-bottom:10px;
}
.profile .blurbs .section h4{
margin-bottom:10px;
text-align:center;
padding:10px;
text-transform:lowercase;
letter-spacing:3px;
color:black;
font-size:15px;
background:url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') repeat center center;
}
.profile .blurbs .inner{
background:white url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center center;
border:1px solid black;
border-right:1px solid white;
border-top:none;
}
main{
background:transparent;
}
nav .top .right {
text-align:center;
}
nav .right{
position:absolute;
margin-top:50px;
text-align:center;
float:none;
width:200px;
background:black;
}
.profile h1::before{
content:url('https://64.media.tumblr.com/851aa3dc901ee725bd9714bebff8de9c/d2a23e6a5b84bc3b-01/s75x75_c1/7be742afaeb5c18fbb2fe5028a080e1e6b61c985.gifv');
width:20px;
margin-right:10px;
}
.row{
margin-top:70px;
margin-left:180px;
width:100%;
}
nav .top{
background:black;
width:100%;
}
nav{
height:100%;
position:fixed;
left:0px;
width:210px;
background:black;
color:white;
}
.container{
background:none;
}
footer .links{
text-align:right;
}
footer{
text-transform:lowercase;
position:absolute;
padding:10px;
left:0px;
font-size:15px;
width:100%;
text-align:right;
margin-top:0px;
background:black;
color:white;
z-index:-1;
}
.details-table td{
background:white;
color:black;
border-bottom:1px dashed grey;
}
.details-table td:nth-child(odd) p::before{
content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/stara16.gif');
margin-right:5px;
}
footer a:hover{
color:white;
text-shadow:0px 0px 5px white;
}
.details-table td:nth-child(even) p::before{
content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/stara17.gif');
margin-right:5px;
}
.details-table td:first-child{
border-bottom:1px dashed white;
background:white;
text-transform:lowercase;
color:black;
}
.profile .url-info{
text-transform:lowercase;
position:absolute;
width:300px;
box-shadow: 2px 2px 0px black;
margin-top:330px;
margin-left:-240px;
background:black;
border-right:1px solid white;
border-bottom:1px solid white;
border-top:1px solid black;
border-left:1px solid black;
color:white;
}
.profile .table-section:last-child{
position:relative;
margin-top:-20px;
margin-left:-150px;
margin-bottom:-20px;
}
.profile .table-section .heading{
letter-spacing:3px;
text-align:center;
color:black;
background:url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') repeat center center;
text-transform:lowercase;
padding:10px;
}
.profile .table-section{
z-index:1;
width:350px;
box-shadow:3px 3px 0px black;
padding:10px;
background:white;
margin-top:400px;
position:relative;
margin-left:-100px;
}
table{
border-spacing:0px;
}
.profile .mood a{
color:grey;
}
.profile .mood a:hover{
color:white;
text-shadow:0px 0px 5px white;
}
.profile .mood{
text-transform:lowercase;
position:absolute;
margin-top:100px;
background:black;
color:white;
margin-left:-320px;
box-shadow: 2px 2px 0px black;
border:1px solid black;
border-bottom:1px solid white;
border-right:1px solid white;
padding:10px;
width:100px;
}
.uh{
width:auto;
height:auto;
position:fixed;
left:10px;
border-radius:100px;
padding:5px;
padding-bottom:2px;
bottom:10px;
z-index:9999999999999999999999999999;
background:white;
border:3px double black;
}
.profile h1 {
z-index:-1;
position:relative;
text-transform:lowercase;
letter-spacing:2px;
font-family:consolas;
margin-left:-210px;
margin-bottom:10px;
text-align:left;
color:black;
text-shadow:3px 3px 0px lightgrey;
font-size:30px;
width:300px;
}
.general-about {
border-top:1px solid black;
border-left:1px solid black;
padding:10px;
position:absolute;
margin-left:-200px;
background:black;
border-right:1px solid white;
border-bottom:1px solid white;
box-shadow:2px 2px 0px black;
}
.general-about .details{
border:1px solid black;
overflow:auto;
height:160px;
width:200px;
background:white;
padding:10px;
text-align:center;
}
.general-about .profile-pic img{
max-width:100%;
border:1px solid black;
max-height:100%;
}
.general-about .profile-pic{
margin-right:10px;
margin-bottom:0px;
margin-top:0px;
margin-left:0px;
padding:10px;
border:1px solid black;
background:url('https://64.media.tumblr.com/55eb2df2ee356ed49e439b7bbe482b40/tumblr_inline_n25gq99idt1qhwjx8.png') repeat center center;
}
.profile .contact a:hover{
}
.profile .contact .heading{
background:url('https://64.media.tumblr.com/92854ade5db7e8d4baf2849625159567/tumblr_inline_n25gqfFi7i1qhwjx8.png') repeat center center;
padding:10px;
text-align:center;
color:black;
}
.profile .contact {
z-index:99999999;
box-shadow: 2px 2px 0px black;
padding:5px;
position:absolute;
margin-left:-240px;
margin-top:200px;
background:white;
border:1px solid black;
width:300px;
}

.profile .contact .heading h4 {
text-transform:lowercase;
text-align:center;
letter-spacing:3px;
}
.profile .contact .inner a {
color:grey;
}
.profile .contact .inner a:hover {
color:black;
text-shadow:0px 0px 5px black;
}
.profile .contact .inner{
text-transform:lowercase;
color:black;
padding:5px;
}
.profile .contact .f-row{
margin:2px;
}
.profile .contact .f-col:nth-child(odd)::before{
content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/stara16.gif');
}
.profile .contact .f-col:nth-child(even)::before{
content:url('http://i122.photobucket.com/albums/o260/mhilka/minigifs/stara17.gif');
}
.profile .contact img.icon{
visibility:hidden;
margin-right:-20px;
color:black;
}
.profile .table-section:last-child img.icon{
content:url('0');
margin-right:-30px;
}
.edit-link.right-side a{
z-index:1;
}
.profile .table-section{
border:1px solid black;
}
body{
font-family:consolas;
background: lightgrey url('https://64.media.tumblr.com/3f8d9d8c9f63a36d4e6d7162c99eea7d/tumblr_nnh0zu3ixz1telelro1_250.png') repeat center center fixed ;
}
</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 47 comments ( View all | Add Comment )

sunny	1714949838 using Report Comment
father	1714896051 meow. Report Comment
𝐗𝐚𝐧𝐭𝐡𝐞ᡣ𐭩	1714742437 have u got the code without the child gif thing at the bottom?? Report Comment
catbacteria	1714458613 usingg thankz Report Comment
esthrela	1714016758 using Report Comment
Dea Amoris	1712972265 using ty !!1 Report Comment
weirdfishes	1712902580 using ^w^ Report Comment
ada 　 ❜	1712743645 using! i'm going to edit it a little bit, though. Report Comment
유이나	1712384133 Using, this is super cute :) Report Comment
janebug (FROM HOMESTUCK!!!)	1711598034 Using ^-^ Report Comment
goa	1711500830 sosososoooo cool! using!! Report Comment
alto clef (or, agent ukulele, rather)	1711393081 awesome using !! Report Comment
nerd !?	1710347305 this is soo cool, using !! Report Comment
Transcendetem	1710332447 usingg Report Comment
𝚟𝚘𝚒𝚍𝚒𝚏𝚢𝚎!(^_−)−☆	1710206567 using :33 Report Comment
mari	1710043109 using!! Report Comment
3D3N	1709936243 Using! Report Comment
moggy	1709580202 might use!! Report Comment
avizzin ☆	1709373469 using !! thx :DDD Report Comment
V/=M	1709285616 Using Report Comment