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

deniz_vt	1737822253 Usingg!! Report Comment
Setsuna	1736745598 using !! Report Comment
necr0mantic	1736183645 using! Report Comment
ななwattson~	1734132809 sorry phone users but I'm using it Report Comment
✦ cin	1732875716 using Report Comment
Eraz ♪ ˖ ⊹ ♬˚₊‧	1730263653 using! Report Comment
ᴋɪʀʙʏ୨ৎ	1730091663 usin- Report Comment
dokzai	1729038371 this is such a good idea omg Report Comment
Lucy.	1729017346 using !! Report Comment
⋆˚࿔ 𝐋𝐢𝐱 𝜗𝜚˚⋆	1728227336 USINGGG Report Comment
laika†	1727858826 how can i replace the teal stars with something else, and the white stars in the tables separately? Report Comment
DOOMSURFF!	1726612833 USING Report Comment
ʚ¡ɞ	1726088829 using! Report Comment
nana ꨄ	1725226319 using :))) Report Comment
ANNA	1725215324 using Report Comment
𝓑𝓻𝓸𝓴𝓮𝓷 𝓕𝓲𝓵𝓮𝓼	1724906331 Using Report Comment
arrozdoce	1724344433 usando!! Report Comment
O_o	1724015364 using Report Comment
meli!!	1724007836 using! Report Comment
amber[semi-active]	1723269304 using Report Comment you can find me everywhere by amber[semi-active]; 1723751558; Report