<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=3559) --> <style> @import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap'); </style> <style> /* mobile code DO NOT DELETE */ @media (max-width: 600px){ .container{ width:100%!important; } main .left{ padding:0px!important; } main .right{ padding:0px!important; } } </style> <style> :root{ --headers: #5473A7; --text: #5473A7; --names: #5473A7; --links: #5473A7; --font-family: 'Style Script', cursive; } a, p, .section{ font-family: var(--font-family); font-size: 16px!important; letter-spacing: .5px; } h2, h3, h4, h5{ font-family: 'Cookie', cursive; font-size: 20px!important; letter-spacing: 1px; } h2, h3, h4, h5{color: var(--headers)!important;} /* headings*/ a{color: var(--links) !important;} /* color of links */ p, .count {color: var(--text)!important;} /* color of te

Tags:

Description:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
</style>

<style>
    /* mobile code 
DO NOT DELETE */

@media (max-width: 600px){

.container{
    width:100%!important;
}
main .left{
    padding:0px!important;
}
main .right{
    padding:0px!important;
}
    
}
</style>

<style>
:root{
    --headers: #5473A7;
    --text: #5473A7; 
    --names: #5473A7;
    --links: #5473A7;
    --font-family: 'Style Script', cursive;
}
a, p, .section{
    font-family: var(--font-family);
    font-size: 16px!important;
    letter-spacing: .5px;
}
h2, h3, h4, h5{
    font-family: 'Cookie', cursive;
    font-size: 20px!important;
    letter-spacing: 1px;
}

h2, h3, h4, h5{color: var(--headers)!important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, .count {color: var(--text)!important;} /* color of text */
.profile .friends .person p{color: var(--names)!important;} /* color of names, and friends counter */
nav label{color: var(--links)!important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* aboutme & want2meet headings */
.details p:last-child{color: var(--text)!important;} /* where the last login and status appears */
hr{
    height:1px;
    background: var(--links);
    border: none;
}
.icon{font-size:12px;}

.container{
    width:80%;
}
main .left{
    padding:80px;
}
main .right{
    padding:80px;
}

body{
    background-image:url('');
    background-attachment: fixed;
    background-size: contain;
    background-color: black;
}
main {
  background-color: transparent;
}


.search-wrapper input[type=text] {
    background-color: transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 5px double var(--headers);
    color:var(--text);
    border-radius: 0px;
}
button{
    border-radius: 0px;
    border: 0px solid var(--text);
    font-family: var(--font-family);
    background-color: transparent;
    color:var(--text);
}

/* navigation */

nav .top, nav .links{
    background-color: transparent;
    text-align: center;
}
nav .top{
    color: var(--links);
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(47%) sepia(26%) saturate(807%) hue-rotate(179deg) brightness(87%) contrast(92%) !important;
    width:120px!important;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ║";
    color: var(--links);
}

/* left side */

h1{
    color:var(--headers);
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 100px 130px;
    text-align: center;
    padding: 20px;
    font-family: 'Cookie', cursive;
    font-size: 30px!important;
    letter-spacing: 1px;
    margin-bottom: 30px!important;
}
.online{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
.online img{
    filter: brightness(0) saturate(100%) invert(47%) sepia(26%) saturate(807%) hue-rotate(179deg) brightness(87%) contrast(92%) !important;
}
.general-about .details{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding-bottom: 100px;
    margin-bottom:-10px!important;
}
.profile-pic{
    margin-left:27px!important;
    margin-top:27px!important;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.mood{
    background-color: transparent;
    background-image: url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding: 30px;
    margin-bottom: 20px;
}
.contact a{text-transform: lowercase;}
.contact .heading{display:none;}
.contact{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 30px;
    border: none!important;
}

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "დ"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorites */
content: "დ"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "დ"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend */
content: "დ"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "დ"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "დ"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: "დ"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: "დ"

.url-info{display: none;}
.profile .table-section .heading{display:none;}
.table-section td, .table-section td:first-child{background-color:transparent;}
.details-table td:first-child{display:none;} /* hides general, music, etc titles */
.profile .table-section{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding: 30px;
    border: none!important;
}
.profile .left .table-section:last-child {display:none;}

/* right side */

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 100px 130px;
    text-align: center;
    padding: 20px;
}

.blog-preview{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding: 20px;
}

/* blurbs section */

.blurbs .heading{display: none;}
.profile .blurbs .section:nth-child(1){
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:30px;
    margin-bottom:40px;
}
/* who I'd like to meet section */
.profile .blurbs .section:nth-child(2){
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:30px;
    margin-bottom:30px;
}

/* friends section */ 

.profile .friends .heading{
    background-color: transparent;
}
.profile .friends .heading h4:not(.profile #comments .heading h4){
    opacity: 0.0;
    letter-spacing: -100px;
}
/* use a different heading for your friends list */
.profile .friends .heading:not(.profile #comments .heading):after{
    content: "Be My Friend ~";
    color: var(--headers);
    font-family: 'Cookie', cursive;
    font-size:20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}
.profile .friends .person p{
    text-transform: lowercase;
}
.friends{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:10px;
    margin-bottom: 30px;
}
.friends-grid img:not(.icon){
    width: 90px;
    height:90px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* comments section */

.comment-replies{border:2px solid var(--headers);} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in between comment replies*/

#comments{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding:20px;
}
.profile #comments .heading{
    background-color: transparent;
}
#comments > div.inner:nth-child(2) > p:first-child > b:first-child{
    background-color: transparent;
}
.comments-table{
    background-color: transparent;
    padding:6px;
    border:none;
    display: block;
    height: 300px;
    overflow-y: scroll;
}
.comments-table td, .comments-table td:first-child{
    background-color: transparent;
    border: none;
}
.comments-table td:first-child img{
    width: 90px;
    height:90px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* footer */
footer{
    background-color: transparent;
}
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 3px;
    height: 5px;

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 0 of 0 comments ( View all | Add Comment )