Black and white layout

Tags: white

Description:

Simple black and off-white layout with floating profile animation. Made with bits and pieces of different code, change it up however you’d like! Just comment if used

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=33784) -->

<style>
body {
font-family: Courier New, monospace;
background-color: black;
}

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%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.logo {
filter: sepia(100%) hue-rotate(0deg) saturate(0);

}
#q, button {
color: #c3d9e0;
background-color: black;
border: 1px solid #c3d9e0;
font-family: inherit;

box-shadow: 0px 0px 10px #9dabb0;

}
p, i, b, .count {
color: #c3d9e0 !important;
}
a, .profile .friends .person p, .logout-btn {
color: #c3d9e0 !important;
text-decoration: underline !important;

}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #c3d9e0;
}
nav .top {
margin-top: 2px;
background: none;
background-color: black;
border: 2px dotted #c3d9e0;
border-bottom: none;

box-shadow: 0px 0px 10px #9dabb0;

}
nav .links {
background-color: black;
border: 2px solid #c3d9e0;

box-shadow: 0px 0px 10px #9dabb0;

}

main {
background: black;
color: #c3d9e0;
border-left: 2px dotted #c3d9e0;
border-right: 2px dotted #c3d9e0;

box-shadow: 0px 0px 10px #9dabb0;

}
.heading, .url-info {
color: #c3d9e0 !important;
background: none;
background-color: black !important;
border: 2px solid #c3d9e0 !important;

box-shadow: 0px 0px 10px #9dabb0;

}
.inner {
color: #c3d9e0 !important;
border: 2px dotted #c3d9e0;
border-top: none;

}
.profile-info {
border: 2px solid #c3d9e0;

box-shadow: 0px 0px 10px #9dabb0;

}
.profile-info .inner {
border: none;


}
.friends .inner {
border-bottom: none;


}
#comments {
border-bottom: 2px dotted #c3d9e0;

box-shadow: 0px 0px 10px #9dabb0;

}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;

box-shadow: 0px 0px 10px #9dabb0;

}

/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/4f3e4337-9251-4ef4-b0f7-42ae53f788ac/dcy213r-7f05e9a8-0110-4c34-acea-d47b43c48873.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzRmM2U0MzM3LTkyNTEtNGVmNC1iMGY3LTQyYWU1M2Y3ODhhY1wvZGN5MjEzci03ZjA1ZTlhOC0wMTEwLTRjMzQtYWNlYS1kNDdiNDNjNDg4NzMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.-CGurVQRMZuphUdZOjVccUimip4Swup30jSw8NJlO5k")
}

.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #c3d9e0 !important;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px solid #c3d9e0;
border-collapse: collapse;

box-shadow: 0px 0px 10px #9dabb0;

}
td {
color: #c3d9e0 !important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 2em;
}
footer {
background: black;
border: 2px dotted #c3d9e0;
box-shadow: 0px 0px 10px #9dabb0;

}
footer p {
color #060d94 !important;

}
.comments-table {
border: none;
border-collapse: collapse;

box-shadow: 0px 0px 10px #9dabb0;

}
.comment-replies {
border: 1px solid #c3d9e0;
margin: 2px;

box-shadow: 0px 0px 10px #9dabb0;

}
nav .info {
background: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

.col, main, footer, nav::before, .online, nav .links, nav .top {

animation: float 4s;

animation-iteration-count: infinite;

animation-timing-function: ease-in-out;

}

@keyframes float {

0% { transform: translate(0, 0px);

}

50% {

transform: translate(0, 8px);

}

100% {

transform: translate(0, -0px);

}


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

𐔌 ⋮ grian .ᐟ 🕊️ ꒱	1731888740 using <33 Report Comment
star	1729028692 using!! Report Comment
star	1729028691 using!! Report Comment
star	1729028689 using!! Report Comment
Ace	1728917722 using Report Comment
Mimii🪽	1727554593 Usingg Report Comment
🧪 \| DR. EUGNE!?	1720280438 Using, but how can I make the Notification and Pin icon visible ??? Report Comment
🫧🥄⌒⌒avemp⌒⌒🥛	1707267298 Probs using!! thx ^_^ Report Comment
gabriell3	1707137716 usandoo :)) Report Comment
cigsru	1706252967 using :D Report Comment
nat4liaisboring	1706135607 using! i love it Report Comment
Berrieshere08	1705246000 Usingg Report Comment
Nin_	1705163470 Simple, and easily modifiable, thanks so much, using this (: Feel free to add me. Report Comment
Sacrilegit	1694088492 Using! It's dope! Report Comment
Marko	1692817755 Using Report Comment
valen☆	1690648320 Using Report Comment
Ares	1689515925 Using! Report Comment
Narwhalz	1689258515 Using !! Report Comment
૮ ˙Ⱉ˙ ა	1689145030 Using!! Report Comment
bee	1688773966 this is so good, using! Report Comment