Snazzy Black & White Layout

Tags: black, white, black and white, emo, goth, jack noir

Description:

This is a my first layout posted,

It has floating icons and "Shimmy" By SOAD in the background, (you can change the song in the code)

IT ALSO HAS AN OPENNING GIF!!

Preview:

click on the image for a larger preview

Code:

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

<!-- (c) Layout created by Doc (https://spacehey.com/profile?id=1427037) -->

<div class="omori"></div>

<style>* {cursor: url(https://cur.cursors-4u.net/others/oth-8/oth702.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/11/29/knife-7.html" target="_blank" title="Knife"><img src="https://cur.cursors-4u.net/cursor.png" alt="Knife" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
body{
background-image:url(https://i.pinimg.com/736x/eb/67/93/eb6793fbea6014879e3209ec0cb21c6a--iphone-backgrounds-wallpaper-backgrounds.jpg);
background-size: 50% 100%;    
background-attachment: fixed;
text-transform: lowercase;
}
 .online 
display: none;

}
.url-info{
display:none !important;
}
:root 
{
	--logo-blue: ;
 	--darker-blue: ;
	--lighter-blue: ;
	--even-lighter-blue: ;
	--lightest-blue: ;
	--dark-orange: ;
	--light-orange: ;
	--even-lighter-orange: ;
	--turquoise: ;
        
        --table-header:black;
	--table-color: white;
	--link-text: white;
	--main-text: white;
}
.boxHead, .rightHead, h4, .player.box {
color:black;
background-color:white;
 text-transform: lowercase;   
}
.player.box, .boxHead{
border:1px solid black;
}
a {
     animation: changeColor 5s linear infinite;
}
@keyframes changeColor{
    0%{color:white;}
    20%{color: black;}
    40%{color: white;}
    60%{color: black;}
    80%{color: white;}
    100%{color: black;}
}
.tableRight{
background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSr_jShMn8ZVZmeH9GNAydIN-ivtniCnzxy7MQkL-VjX2l_gs5OcUWZD0fiEGcd34GM2Yk&usqp=CAU);
border:1px solid black;
background-size:cover;
}
.tableLeft{
background-color:white;
border:1px solid black;

}
@keyframes blinkingTextWhite {
0% {
    color: black;
}

50% {
    color: white;
}
100% {
    color: black;
}
}
div#header {
    background-color: white;
    background-position: 0px -400px;
text-align: center;
text-transform: lowercase;
    background-size: 100px;
    background-repeat: repeat;
}
div#hSub {
    color: white !important;
    background-color: black;
    text-align: center;
text-transform: lowercase;;
}
 {
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    max-height: 650px;
    overflow-y: scroll;
    padding: 10px;
}
img{
    animation-name: floating;
    animation-duration: 9s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes floating { 
    0% { transform: translate(0,  0px); } 
    50%  { transform: translate(0, 20px); } 
    100%   { transform: translate(0, -0px); } 
}
img{
filter:grayscale(100%)
}
::-webkit-scrollbar {
width: 0px;
}
.friends, person img{
border:1px solid black;
}
img:hover, .friends:hover{
      animation:shake 3s;
      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,1px) rotate(0deg);
    }
}
.comments-table{
display:none;
}
#comments, footer{   
border: solid black;
}

nav .top{
background-color: black;
}
footer{
background-color: 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: "🔲"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🔲"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🔲"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward 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 to Group */
	content: "🔲"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🔲"
}
 div.friends div.inner p b {
color: black;
}
    h1, .count, .friends a p{
    color: black !important;
}
.url-info{display:none !important;}
.icon, .award img {
    content: url(https://cdn.discordapp.com/attachments/894741500313886723/995062186768613508/boo.png);
    display: inline-block;
    height: 2.0em;
    width: 2.0em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
}
.omori{
    background: url(https://cdn.discordapp.com/attachments/894741500313886723/995062186768613508/boo.png) no-repeat;
    background-size: 100%!important;
}
  <a href="https://spacehey.com/zombiecutie">
         <img alt="rex" src="https://scemoboy.carrd.co/assets/images/image12.gif?v=f7728a43"
         width=150" height="20">
</style>

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

<style>
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.125);
}
.container, .main {
  width: 100%;
  max-width: 1024px !important;
  margin: auto;
}
.profile.left {
  width: 100%;
  max-width: 320px !important;
}
.profile.right {
  width: 100%;
  max-width: 600px !important;
}
.profile-pic img {
  border-radius: 100%;
}
.profile {
  margin: auto;
  font-family: 'Alice in Wonderland', Alice in Wonderland, Alice in Wonderland;
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
}
.blurbs, .contact, .url-info, .table-section, .friends {
  margin: 0;
  padding: 1rem;
  background: white !important;
  border: 1px solid darkgray !important;
  border-radius: 11px !important;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.125) !important;
}
.heading {
  margin: 0;
  padding: 1rem;
  font-size: 1.25rem;
  color: black !important;
  background: White !important;
  border-radius: 11px !important;
}
.inner {
  margin: 0;
  margin-top: 0.5rem;
  padding: 1rem;
  background: whiteSmoke;
  border: 1px solid darkgray;
  border-radius: 11px;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.125) inset;
}
</style>


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

<br/>

<iframe width="0" height="0" src="https://www.youtube.com/embed/gcKJMZEGPe8//?&;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>

<style>
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-image: url('https://i.kym-cdn.com/photos/images/original/000/409/384/126.gif');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	animation: yourAnimation 4s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } </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 24 comments ( View all | Add Comment )

˚₊‧꒰ა ♱ ໒꒱ ‧₊˚ Emerald ˚₊‧꒰ა ♱ ໒꒱ ‧₊˚	1706826246 using Report Comment
niceren	1706328246 Using :D Report Comment
Ivycita X_X	1705965312 using!! :3 Report Comment
lizulanity	1705783208 using Report Comment
nue	1704010065 using Report Comment
sophie	1703885122 using!! Report Comment
Orion	1698599748 Using Report Comment
mind_aching	1693382191 using! Report Comment
less404	1687728908 using!! Report Comment
wolfboy231 (jay) ☆	1685618824 ising Report Comment
FELIX	1679526972 using ^_^! Report Comment
mischief <3	1678004738 using !!! <3 Report Comment
Des	1674597889 Usingg Report Comment
Lin <3	1674427607 Usando!!! Es muy lindo el diseño <333 Report Comment
CocoBUTTer	1673556231 Brah this shit is badass Report Comment
V	1666484157 sheeeeeit this is amazing bruh im using Report Comment
merl	1663628025 using, this is so cool dude Report Comment
Devorak	1661620167 Using!!! Im in love with this layout^^ Report Comment
4losers	1661212190 USING!! Report Comment
Royce	1660447133 USING!! Report Comment