Add to Favorites
View Layouts
View Profile
Report Layout
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 )