Yellow and black layout

Tags: yellow

Description:

Simple yellow and black layout with floating profile animation. Made with bits and pieces of 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=31939) -->

<style>
.online { visibility: hidden; }
.online img { content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/b442deab-e4e2-4189-bbcd-ecfb52b409e6/d8k3i18-b34b7f77-a023-46ae-a1bb-0eb87696f40e.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2I0NDJkZWFiLWU0ZTItNDE4OS1iYmNkLWVjZmI1MmI0MDllNlwvZDhrM2kxOC1iMzRiN2Y3Ny1hMDIzLTQ2YWUtYTFiYi0wZWI4NzY5NmY0MGUucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.o2kgaUaFvRAhYnbzd5X5VwRbLx74045Dtr8BkH89RWQ"); 
animation-name: none; 
visibility: visible; 
height: 80px; 
width: 100px; }
</style>


<style>
.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}

.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/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/7ba975e7-9997-4510-9061-f7375cf47405/d1movq9-28963cdf-ad36-4e63-9340-828f1e7ece48.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzdiYTk3NWU3LTk5OTctNDUxMC05MDYxLWY3Mzc1Y2Y0NzQwNVwvZDFtb3ZxOS0yODk2M2NkZi1hZDM2LTRlNjMtOTM0MC04MjhmMWU3ZWNlNDguZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.qjwLQQRUgnBg7jHo9zQk862rd3E3hdh7ypoB88bprWM")
}
</style>


<style>.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>

<style>
/*the username glow and shadow*/
h1
{
	color: /*the username glow and shadow*/
h1
{         color: #BF9000; 
	//text-shadow: 3px 4px #BF9000;

.profile { 
     font-size: 50px; }
	
};
	text-shadow: 2px 2px 3px #BF9000, 0 0 25px #BF9000, 0 0 5px black;
}
h1, h2, h3, h4,h5,a, p, nav label, .section
{
</style>


<style>
main:before {
width: auto;
margin-bottom: 1px;
border: 1px solid black;
height: 20px;
display: block;
content: "";
box-shadow: 0px 0px 5px 1px #FFFF00;
background-image:url('https://media.giphy.com/media/xTk9ZzlvUqB4mnDAyY/giphy.gif');
background-position: center center;
background-size: cover;
}
</style>

<style>.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section,  .url-info, .mood, .blurbs, .blog-preview, .details, 
{
border: 1px curve #000000 !important;
outline: curve !important;
}
img
{
border-radius: 12px;
}
</style>

<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(5deg) saturate(10);
}
#q, button {
color: #FFFF00;
background-color: black;
border: 1px solid #FFFF00;
font-family: inherit;
}
p, i, b, .count {
color: #FFFF00 !important;
}
a, .profile .friends .person p, .logout-btn {
color: #FFFF00 !important;
text-decoration: underline !important;
}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #FFFF00;
}
nav .top {
margin-top: 2px;
background: none;
background-color: black;
border: 2px dotted #FFFF00;
border-bottom: none;
}
nav .links {
background-color: black;
border: 2px solid #FFFF00;
}
main {
background: black;
color: #FFFF00;
border-left: 2px dotted #FFFF00;
border-right: 2px dotted #FFFF00;
}
.heading, .url-info {
color: #FFFF00 !important;
background: none;
background-color: black !important;
border: 2px solid #FFFF00 !important;
}
.inner {
color: #FFFF00 !important;
border: 2px dotted #FFFF00;
border-top: none;
}
.profile-info {
border: 2px solid #FFFF00;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
border-bottom: 2px dotted #FFFF00;
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #FFFF00 !important;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px solid #FFFF00;
border-collapse: collapse;
}
td {
color: #FFFF00 !important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 2em;
}
footer {
background: black;
border: 2px dotted #FFFF00;
}
footer p {
color: #FFFF00 !important;
}
.comments-table {
border: none;
border-collapse: collapse;
}
.comment-replies {
border: 1px solid #FFFF00;
margin: 2px;
}
nav .info {
background: none;
}
</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 35 comments ( View all | Add Comment )

Austin!!!	1759802964 using!! Report Comment
tylertism	1758591671 using Report Comment
🪶 𝙇a𝖐3 .ᐟ	1756905407 USINGGGG but modificating a bit :3 Report Comment
craig	1756900164 using Report Comment
Tav	1751441763 using :) Report Comment
syKret_L0VEva	1749995152 Using :3 Report Comment
wanna smoke?	1746981263 using! Report Comment
:3	1743016279 Using Report Comment
_qqrxz	1742786391 lov this sm!! but is ther a way to remove the "bobbing" effect? Report Comment
CRZY_NICKI	1740682881 I love this layout but it doesn’t show my online icon can someone please help me Report Comment
CRZY_NICKI	1740682617 Usinggg <3 Tysmm Report Comment
astro! ^_-	1736882769 Gunna use :33 Report Comment
Cyn	1733686206 using! Report Comment
๋࣭ ๋⭑⚝ 𝕄𝕒𝕣𝕫 𝔹𝕒𝕣𝕫𝕫 ⚝⭑ ๋࣭	1733070034 using Report Comment
moz/suzie	1729915256 using ^_^ Report Comment
★ ! JUDAS / LOGAN	1723343273 Using!! <3 Report Comment
★ ! JUDAS / LOGAN	1723343272 Using!! <3 Report Comment
Nyami ₊˚⊹⋆	1722255835 using!! Report Comment
Melian :3	1714266127 Using Report Comment
🛸⭐ pluto !!! 🪐🌠	1713674079 using Report Comment