Bluewave

Tags: blue, cyber, black, bela

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I have the blog version for this layout HERE

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Profile Background: https://images.alphacoders.com/132/1328375.png

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
/* the mobile code, don't delete */
@media(max-width:30em){
body{
    background-size: 100%!important;
}
.general-about{
    padding-bottom:30px!important;
}
.mood{
    margin-top:-3px!important;
}
.mood:after{
    left:260px!important;
}
main{
    width: 100%!important;
    padding:10px!important;
}
.table-section:after{
    margin-top:10px!important;
}
}
</style>

<style>
/* dropbox inmported fonts */
@font-face{font-family: "SpellweaverNodes-JRwXx"; src: url("//dl.dropbox.com/s/0tm4gs9n6ica91k/DecepticonGraffiti-p3wy.ttf");}
@font-face{font-family: "CyberpunkSealion-Mj8p"; src: url("//dl.dropbox.com/s/rzlijqx4xhy94fx/CyberwarRegular-7BX0E.ttf");}
</style>

<style>
/* separate from the other fonts so it loads correcty */
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Share+Tech+Mono&display=swap');
</style>

<style>
body {
    background-color: black;
    background-image: url('https://images.alphacoders.com/132/1328375.png');
    background-attachment: fixed;
    background-size: 100%100%;
}
.container {
    width: 100%;
}
nav .top, nav .links {
    background-color: transparent;
}
nav .links a {
    text-shadow: none;
}
nav .links {
    margin-bottom: 10px;
}
nav img.logo {
    filter: brightness(0) saturate(100%) invert(45%) sepia(67%) saturate(2005%) hue-rotate(200deg) brightness(92%) contrast(100%)!important;
}
main {
    background-color: transparent;
    margin: auto;
    padding: 0px;
    width: 60%;
}

/* fonts and colors */

a, .profile .friends .person p {
    /* links and friends' name */
    color: #3F80EA!important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px!important;
    font-weight: 1;
    text-transform: lowercase;
}
.profile .friends .person p {
    text-shadow: -10px 3px 0px #000066;
}
p, b, nav label, .count, nav .top, button {
    color: DarkViolet!important;
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px!important;
}
.details-table td:first-child p {
    /* the general/music titles */
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -10px 7px 0px #000066;
}
h2, h3, .section h4 {
    color: DarkViolet!important;
    font-family: 'Major Mono Display', monospace;
    font-size: 15px!important;
    font-weight: 1;
}
.icon {
    font-size: 11px!important;
}
button {
    border: none;
    background-color: transparent;
}
[id='q'] {
    background-color: #221144;
    border: none;
    color: #3322cc;
}
.heading {
    background-color: transparent!important;
}
h4:not(.section h4) {
    color: #3F80EA!important;
    font-family: "CyberpunkSealion-Mj8p";
    font-size: 20px!important;
    font-weight: 1!important;
    padding: 8px;
}

/* the general about you section */

h1 {
    background-color: black;
    border-left: 3px solid #3F80EA;
    border-radius: 20px 20px 0px 0px;
    border-right: 3px solid #3F80EA;
    border-top: 3px solid #3F80EA;
    color: #3F80EA!important;
    font-family: "CyberpunkSealion-Mj8p";
    font-size: 20px!important;
    font-weight: 1;
    margin-bottom: -15px!important;
    padding-bottom: 20px;
    padding-top: 10px;
    text-align: center;
    text-shadow: -10px 5px 0px #000066;
}
.general-about {
    background-color: black;
    border-left: 3px solid #3F80EA;
    border-right: 3px solid #3F80EA;
    text-align: center;
    padding-bottom:10px;
    padding-right:10px;
}
.profile-pic {
    padding: 10px;
}
.profile-pic img {
    border-radius: 20px;
    box-shadow: 0px 0px 10px #3F80EA;
}
.online {
    padding-right: 10px;
    text-align: center;
}
.online img {
    filter: brightness(0) saturate(100%) invert(45%) sepia(67%) saturate(2005%) hue-rotate(200deg) brightness(92%) contrast(100%)!important;
}
.mood {
    background-color: black;
    border-bottom: 3px solid #3F80EA;
    border-left: 3px solid #3F80EA;
    border-radius: 0px 0px 20px 20px;
    border-right: 3px solid #3F80EA;
    margin-bottom: 40px;
    margin-top: 0px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-top: 20px;
}
.mood:after {
    content: "`94sf=";
    color: #3F80EA;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    left: 530px;
    letter-spacing: -5px;
    margin-top: -3px;
    padding-left: 15px;
    position: absolute;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}

/* the contact section */

.contact {
    background-color: black;
    border-radius: 20px;
    border:3px solid #3F80EA!important;
    box-shadow: 0px 0px 10px #4D86E8;
    padding-bottom: 10px;
}
.contact:before {
    content: "cs8eiou";
    color: #3F80EA;
    float: right;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    margin-top: -10px;
    padding-right: 15px;
    text-align: right;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}
.contact:after {
    content: "cs8eiou";
    color: #3F80EA;
    float: left;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    margin-top: 0px;
    padding-left: 15px;
    position: absolute;
    text-align: left;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}

/* the url box */

.url-info {
    background-image: url('https://media.giphy.com/media/RGH9u6XcLjvliCCbdK/giphy.gif');
    background-size: 100%100%;
    border-radius: 20px;
    border:3px solid #3F80EA!important;
    box-shadow: 0px 0px 10px #4D86E8;
    height: 170px;
    margin-bottom: 30px!important;
    margin-top: 30px!important;
}
.url-info p {
    opacity: 0;
}

/* the interests table */

.table-section {
    background-color: black;
    border-radius: 20px;
    border:3px solid #3F80EA!important;
    box-shadow: 0px 0px 10px #4D86E8;
    margin-bottom: 40px!important;
    padding-bottom: 20px!important;
    padding: 10px;
}
.details-table {
    background-color: #3F80EA!important;
    border-spacing: 0px 3px;
    border: 1px solid #000066;
}
.details-table td {
    background-color: #221144!important;
    border: none;
}
.table-section:last-child td {
    /* adding padding to the links table */
    padding: 10px;
    text-align: center;
}
.table-section:before {
    content: "cs8eiou";
    color: #3F80EA;
    float: right;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    margin-top: -20px;
    text-align: right;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}
.table-section:after {
    content: "lawlksjhdufebd";
    color: #3F80EA;
    float: left;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    margin-top: 10px;
    padding-left: 15px;
    text-align: left;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}

/* right side */

.profile-info {
    /* blank is your friend or edit profile section */
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    border: none;
    box-shadow: 0px 0px 10px black;
}
.blurbs, .blog-preview, .friends {
    background-color: black;
    border-radius: 20px;
    border:3px solid #3F80EA!important;
    box-shadow: 0px 0px 10px #4D86E8;
    margin-bottom: 40px!important;
    margin-top: 40px!important;
    padding-top:10px;
    padding-bottom:10px;
}
.blurbs:before, .blog-preview:before, .friends:before {
    content: "helqcoadeodbye";
    color: #3F80EA;
    float: right;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    margin-top: -20px;
    padding-right: 15px;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}
.blurbs:after, .blog-preview:after, .friends:after {
    content: "lawlksjhdufebd";
    color: #3F80EA;
    float: left;
    font-family: "SpellweaverNodes-JRwXx";
    font-size: 20px!important;
    letter-spacing: -5px;
    padding-left: 15px;
    text-shadow: -1px 1px 0 #000, 1px 1px 0 #000, 1px -1px 0 #000;
}

/* fixing the padding and margins */
.blog-preview p {
    padding: 5px;
    margin-left: 10px;
}
.blog-preview h4 {
    margin: 0px;
}
.friends-grid{
    text-align: center;
}

/* the comments section */

#comments .inner {
    /* if you don't want a scrollbox just delete the height and overflow */
    height: 600px;
    overflow-y: scroll;
    padding-bottom: 20px;
    padding: 10px;
}
.comments-table {
    background-color: #3F80EA!important;
    border-spacing: 0px 3px;
    border: 1px solid #000066;
}
.comments-table td {
    background-color: #221144!important;
    border: none;
}
.comment-replies {
    border-radius: 20px;
    border: 1px solid #000066;
    margin: 20px;
}
footer {
    background-color: transparent;
}
/* the scrollbar styles */
::-webkit-scrollbar {
    width: 16px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background-color: #000066;
    border-radius:20px;
}
::-webkit-scrollbar-thumb {
    background-color: #001188;
    border-radius: 10px;
    box-shadow: 0px 0px 4px #cc22ff;
}
::-webkit-scrollbar-thumb:hover {
    background: magenta;
    box-shadow: 0px 0px 4px #cc22ff;
}
::-webkit-scrollbar-button {
    background-color: #221144;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    height: 16px;
    width: 10px;
}
/* you can go to https://icons8.com/ for more arrow icons */
::-webkit-scrollbar-button:start:decrement {
    /* the up arrow */
    background-image: url('https://img.icons8.com/fluency-systems-regular/48/C850F2/sort-up.png');
    border-radius: 10px 10px 0px 0px;
}
::-webkit-scrollbar-button:end:increment {
    /* the down arrow */
    background-image: url('https://img.icons8.com/fluency-systems-regular/48/C850F2/sort-down.png');
    border-radius: 0px 0px 10px 10px;
}
</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 5 of 5 comments ( View all | Add Comment )

CosmicMastodon	1767772729 Absolutely love the profile layout and will be using this on top of the blog layout! Report Comment
gramateika	1724519518 using!! Report Comment
Sopick	1715719678 UUUUUUSING!! Report Comment
marsh	1705688115 usinggggg Report Comment
Ciro	1704263202 using Report Comment