Add to Favorites
View Layouts
View Profile
Report Layout
Tags:
Description:
<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=4343) -->
<style>
/* font */
@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Carattere&display=swap');
:root{
--gray: #000; /*background color*/
--logo-blue: black; /*nav*/
--darker-blue:#FF9AE4; /*a links */
--lighter-blue: black; /* nav links background */
--lightest-blue: rgba(0,0,0,0.5); /*sidebar background */
--even-lighter-orange: rgba(0,0,0,0.9); /* comments table second child background */
--borders: 2px dotted plum;
}
body{
background-color: var(--gray);
background-image: url('https://i.imgur.com/0GwHp6Y.gif');
background-size: 10%;
font-family: 'Carattere', cursive;
text-align: center;
font-weight: 1;
}
.icon{
font-size:12px;
}
a, p, b, nav label{
font-size:18px!important;
}
h2,h3,h4,h5{
font-size:16px!important;
}
a{
color: var(--darker-blue);
}
a:hover{
color: hotpink;
text-decoration: underline;
}
nav{
color: var(--darker-blue);
text-align: center;
}
nav .top{
background: var(--logo-blue);
}
/* 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: hotpink;
}
nav .links a{
color: var(--darker-blue);
}
nav .links a:hover{
color: hotpink;
}
/* this is where you edit your blog entry */
.blog-entry .comments .heading{
border-top: 2px solid #fff;
}
.blog-entry .title{
padding:10px;
background-color: rgba(0,0,0,0.8);
color: plum;
border: var(--borders);
font-family: 'Fleur De Leah', cursive;
font-size: 50px;
font-weight: 1;
}
.blog-entry .content{
padding: 5px;
background-color: black;
border: var(--borders);
margin-top:10px;
}
/* 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(89%) sepia(20%) saturate(4382%) hue-rotate(283deg) brightness(106%) contrast(109%) !important;
max-width: 120px;
}
/* the search wrapper and button */
.search-wrapper input[type=text] {
background-color: transparent !important;
border: var(--borders)!important;
color: var(--darker-blue) !important;
}
button{
border: 0px solid var(--darker-blue) !important;
background-color: transparent !important;
color: var(--darker-blue)!important;
font-size:16px!important;
font-family: var(--font-family)!important;
}
.count, .kudos{
color: hotpink;
}
main{
background: transparent;
color: #DB7093;
}
footer{
color: #DB7093;
background: rgba(0,0,0,0.8);
border: var(--borders);
}
/* side bar with your profile image */
.edit-info{
background: var(--lightest-blue);
border: var(--borders);
}
.edit-info img{
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.edit-info:after{
display: block;
content: "";
height:80px;
width:140px;
background-image: url(https://media.giphy.com/media/s8PI1O6Ud8lHWSBZWq/giphy.gif);
background-size: contain;
background-repeat: no-repeat;
background-color: black;
background-position: center center;
position: absolute;
z-index: -1;
}
.kudos{
background: var(--logo-blue);
border: var(--borders);
}
.blog-entry .comments .heading{
border-top: 2px dotted hotpink; /* this is the line that appears under the kudos */
}
/* comments table */
.comment-replies{
border: 2px dashed #F741BA;
}
.comment-reply:not(:first-child){
border-top: 2px dashed var(--darker-blue);
}
table.comments-table{
border: none;
background-color: transparent;
border-spacing: 7px;
}
.comments-table td{
border: var(--borders);
color: #F741BA;
}
.comments-table td:first-child{
background: none;
border: none;
filter: drop-shadow(-2px 4px 3px deeppink);
}
.comments-table td:first-child img{
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
/* mobile code DON'T DELETE */
@media(max-width: 600px){
.edit-info:after{
display: none;
}
button{
font-family: var(--font-family)!important;
font-size: 16px!important;
}
body{
background-size: 40%!important;
}
}
</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 0 of 0 comments ( View all | Add Comment )