Starry Night Layout

Tags: van gogh, starry night, blue, tan, bela

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.
✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

Background Image Credits —

⇘ Navigation: https://i.imgur.com/uHNt1vm.gif

⇘ Comments Table: https://i.imgur.com/pf80xth.jpg

Layout Preview:

Preview:

click on the image for a larger preview

Code:

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

<style>
/* font family */
@import url('https://fonts.googleapis.com/css2?family=Kavivanar&display=swap');

/* where colors come from */
:root {
    --headers: tan;
    --links: tan;
    --text: steelblue;
    --names: tan;
    --font-family: 'Kavivanar', cursive;
    --curve: 0px;
}
h2, h3, h4, h5, .url-info b {color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, h2{color: var(--text) !important;} /* color of text */
.count, .friends a p{color: var(--names) !important;} 
nav label{color: var(--headers) !important;} /* color of search */
.section h4{var(--text)!important;text-align:center!important;} /* aboutme & want2meet headings */
.section{color: var(--text) !important;} /* aboutme & want2meet text */

h1, h2, h3, h4, h5, a, p, nav label, .section { 
    font-family: var(--font-family) !important;	
    text-transform:none !important;
    padding-left:5px !important;
}

h1{ 
    color:var(--headers)!important;
    padding:10px;
    text-align: center;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: 5px double lightsteelblue !important;
}

body {
    background-image: var(--background_image) !important;
    background-size: auto;
    background-color:black !important;
}   

/* online text color and icon */
.online{
    color: var(--links) !important;
    margin: auto!important;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(5766%) 
    hue-rotate(314deg) brightness(84%) contrast(95%) !important;
}

.heading, .url-info, .blurbs, .mood, .blog-preview, 
.friends, .contact, .table, .table-section, footer{
    background-color:transparent!important;
    border-radius: var(--curve) !important;
    padding: 2px !important;
    border: var(--borders) !important;
}
.table-section {
    border:none !important;
    background-color:transparent!important;
    border-radius: var(--curve) !important;}
.heading {
    background:none !important;
    padding-bottom:0px !important;
    text-align:center!important;
}
.profile-pic img {
    outline:none !important;
    border-radius: var(--curve) !important;
    clip-path: polygon(0% 0%, 60% 0, 90% 51%, 60% 100%, 0% 100%);
}
.friends-grid img:not(.icon){
    outline:none !important;
    filter: opacity(90%) !important;
    border-radius: var(--curve) !important;
    padding-right: 2px;
    padding-top: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    background-color: tan;
}
.inner img{
    outline:none !important;
    border-radius: var(--curve) !important;
}
.comments-table {
    display: block;
    height: 800px!important;
    overflow-y: scroll;
    border: 0px double tan !important;
    outline: none !important;
    border-spacing: 10px;
}
.comments-table td:first-child{
    padding: 15px;
}
.comments-table td:first-child img {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: var(--text);
}
.comments-table td{
    background-image: url('https://i.imgur.com/pf80xth.jpg');
    background-size: cover;
}
.comments-table td *{
    color:var(--text)!important;
}

/* navigation */
nav:before {
    width: 100%;
    height: 400px;
    display: block;
    content: "";
    background-image: url('https://i.imgur.com/uHNt1vm.gif');
    background-position: center center;
    background-size: cover;
}
@media only screen and (max-width: 600px) {
nav:before {
    height: 200px;
}
}
nav {
    background-color: transparent !important;
    border-radius: 0px 0px var(--curve); !important;
}
nav .top{
    color: var(--text);
}
nav .top, nav .links{
    background:none !important;
    background-color:rgba(0, 0, 0, 0.0); !important;
    text-align: center;
}
nav img.logo{
    filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(5766%) 
    hue-rotate(314deg) brightness(84%) contrast(95%) !important;
}
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
 content: " | ";
 color: var(--text);
}
.url-info{display:none !important;}
td {
    background-color: transparent!important;
    border-radius: var(--curve) !important;}
main{
    border-radius: var(--curve) !important;
    background-color: transparent !important;}
.friends th, tr, .friends td, th, #comments, .comments-table, 
.friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, 
.blurbs, .blog-preview, .details, .profile-pic img {
    border: 5px double lightsteelblue !important;
    outline: none !important;
    border-radius: var(--curve);
}
.details{
    padding-bottom: 20px;
    text-align: right;
    padding-right:5px;
}
.blog-preview{text-align:center;}
.icon{border:none !important;outline:none!important;}
.mood{margin-bottom:10px !important;text-align:center;}
.blurbs{margin-top:10px !important;}
.friends{margin-top:10px !important;text-align:center;}
.profile-info{border-radius: var(--curve) !important;}
.comments-table{border-radius: var(--curve) !important;border:none !important;}
.comment-replies{border:5px dotted #557D9E;}
.table-section{padding-bottom:2px !important;}

.search-wrapper input[type=text] {
    background-color: rgba(0, 0, 0, 0.0) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: var(--curve) !important;
}
button{
    border-radius:var(--curve)!important;
    border: 0px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(0, 0, 0, 0.0) !important;
    color:var(--headers) !important;
}
.blurbs .heading{
    display:none !important;
}
.profile-info {
	background: var(--profileInfo);
	background-size: cover;
	background-position: center;
	box-shadow: -7px 8px 0 #0006;
	color: #FFF;
}
footer{
    line-height: 1px;
}
</style>

<style>
::-webkit-scrollbar {
    width: 5px;
    height: 5px;}
::-webkit-scrollbar-track {
    border-radius: 0px;
    width: 2px;
    border: 1px dotted tan;}
::-webkit-scrollbar-thumb {
    background: var(--text);
    border-radius: 0px;}
::-webkit-scrollbar-thumb:hover {
    background: tan;}
</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 7 of 7 comments ( View all | Add Comment )

blueliker	1687749655 using, thank you 💙🌼 Report Comment
Venti🍃	1677221333 beautiful. using for my group! Report Comment
Hauptey	1677187330 adorable... using ! <3 Report Comment
Seren	1673158615 Using! ^^ Report Comment
julian	1670734923 amaizng!! Using!! Report Comment
Merzcock	1664235341 Wow, this is great! Report Comment
poutriste	1636842080 cute! Report Comment