Blue Layout

Tags: blue, cyber, black, bela
Description:

For the :before and :after content, you can switch it up to what ever you want to write in there.

If there's any issues let me know lol I feel like something might glitch... I have the blog css layout here

check out my blog for more info or questions or comments ~
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){
.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 4 of 4 comments ( View all | Add Comment )
gramateika	1724519518 using!! Report Comment
Sopick	1715719678 UUUUUUSING!! Report Comment
marsh	1705688115 usinggggg Report Comment
Ciro	1704263202 using Report Comment