Dark blue layout

Tags: blue

Description:

Simple dark blue layout with floating profile animation. Made with different 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=33563) -->

<style>
body {
font-family: Courier New, monospace;
background-color: black;
}
.logo {
filter: sepia(100%) hue-rotate(0deg) saturate(0);

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

box-shadow: 0px 0px 10px #262a82;

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

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

box-shadow: 0px 0px 10px #262a82;

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

box-shadow: 0px 0px 10px #262a82;

}

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

box-shadow: 0px 0px 10px #262a82;

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

box-shadow: 0px 0px 10px #262a82;

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

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

box-shadow: 0px 0px 10px #262a82;

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


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


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

box-shadow: 0px 0px 10px #262a82;

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

box-shadow: 0px 0px 10px #262a82;

}

/* 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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}
.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

.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/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/ac0f4740-0a93-4c32-9553-fa4f1e4770fc/d8olxes-fa85a30b-354d-4cd1-aa3a-2cfd2d7c3e39.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2FjMGY0NzQwLTBhOTMtNGMzMi05NTUzLWZhNGYxZTQ3NzBmY1wvZDhvbHhlcy1mYTg1YTMwYi0zNTRkLTRjZDEtYWEzYS0yY2ZkMmQ3YzNlMzkuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.ijsyYMVey2yyAPlAyXDINuSa7Ye0tj7v132dAaa1CXU")
}

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

box-shadow: 0px 0px 10px #262a82;

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

}
footer p {
color #060d94 !important;

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

box-shadow: 0px 0px 10px #262a82;

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

box-shadow: 0px 0px 10px #262a82;

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

Xuma/Void	1750052455 Using! Report Comment
rikcy	1745748579 using ! Report Comment
𝚋𝚎𝚡 𝚊𝚜𝚑𝚋𝚕𝚞𝚏𝚏	1745041906 yoink ... Report Comment
harvey !!	1745005685 using !!! :p Report Comment
𝕸𝖆𝖓𝖚!	1744991567 Usinggg Report Comment
⏝ ͝ᛝ ☆ opheebop 🎤	1743964738 usingg Report Comment
Yuki's Guts	1743636502 usingg :3 ty Report Comment
cythin	1741744641 Using tysm Report Comment
Hypershadow	1740654772 Usiiingg :3 Report Comment
Alani	1740306838 Usinggg Report Comment
JD	1739932339 Using Report Comment
Mel.	1739407844 using Report Comment
arcanepigeon	1738352536 using! Report Comment
lucie	1738018003 usinggggg Report Comment
layanaa	1737936791 Using Report Comment
✬dr0wning✬	1736565913 thos is soooo pretty! im gonna use it :] Report Comment
☆sonic_rox☆	1736459993 using 💙 Report Comment
F4myne	1736137070 Using it :3 Report Comment
s0dabra1n	1735945742 JUST WHAT I NEEDED, THANK YOUUUUUU <333 Report Comment
crystalTears	1735344277 Using Report Comment