sad rainy vibes layout

Tags: sad, rainy, rain, blue, moon, clouds, bela

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.

Background Image Credits —

    ⇘ Rain Image over Profile: http://pngimg.com/uploads/rain/rain_PNG13470.png

    ⇘ Profile: https://cutewallpaper.org/21/dark-aesthetic-wallpaper/iPhone-Wallpaper-Black-Sky-Design-Black-and-white-.jpg

    ⇘ .url-info: https://media.giphy.com/media/vMSXa7KFGx49aeeXhe/giphy.gif

    ⇘ HR line: https://64.media.tumblr.com/d0b80fa44a300d33036271e5e92ab8de/tumblr_inline_oejlx1PJoB1rhh3cu_250.gifv

    ⇘ Image Before the Blog Post: https://media.giphy.com/media/ArS6DkMXotqK5h99Tk/giphy.gif

    ⇘ Comments Table: https://i.pinimg.com/originals/7c/89/42/7c89422c3c1950eec3ef67d26dacea25.jpg

⇘ Layout Preview:

Preview:

click on the image for a larger preview

Code:

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

<style>
html:before {
    animation: grain 8s steps(10) infinite;
    background-image: url('http://pngimg.com/uploads/rain/rain_PNG13470.png'); 
    content: "";
    height: 300%;
    left: -50%;
    opacity:.5;
    position: fixed;
    top: -110%;
    width: 300%;
    pointer-events:none;
}
@keyframes grain {
     0%, 100% { transform:translate(0, 0) }
     10% { transform:translate(-5%, -10%) }
     20% { transform:translate(-15%, 5%) }
     30% { transform:translate(7%, -25%) }
     40% { transform:translate(-5%, 25%) }
     50% { transform:translate(-15%, 10%) }
     60% { transform:translate(15%, 0%) }
     70% { transform:translate(0%, 15%) }
     80% { transform:translate(3%, 35%) }
     90% { transform:translate(-10%, 10%) }
}
</style>

<style>
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Mali:wght@300&display=swap');
@font-face { font-family: "MagicOwlPersonalUse-WyO0O"; src: url('//dl.dropbox.com/s/4s5ohg42sb7hn3h/MagicOwlPersonalUse-WyO0O.otf'); }
</style>

<style>
:root{
    --headers: #87CEEB;
    --text: #8599A2; 
    --names: #ADD8E6;
    --links: #ADD8E6;
    --hover: #00BFFF;
    --borders: 2px dotted #8599A2;
    --font-family: 'Mali', cursive;
    --curve: 20px; /* the higher the number, the rounder the border. (try putting 50 as an example) */
}

/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {display:none;} /* aboutme & want2meet headings */

/* this is where your background image ends up being styled */

body{
    background-image: url('https://cutewallpaper.org/21/dark-aesthetic-wallpaper/iPhone-Wallpaper-Black-Sky-Design-Black-and-white-.jpg');
    background-color: #000;
    background-size: contain;
    background-attachment: fixed;
    color: var(--text)!important;
}
/* this is where your name appears */
h1{
    color: #87CEEB;
    font-family: "MagicOwlPersonalUse-WyO0O";
    font-size:30px !important;
    font-weight: 1;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    border-radius: var(--curve);
    border: var(--borders);
    text-transform: lowercase;
}

/* adjusting images borders and adding styling if you want to */
.profile-pic img {
    margin:10px; 
    border-radius:var(--curve);
    height:120px;
} 
    
/* custom border */ 
.general-about .details{
    text-align: right;
    padding-bottom:100px;
    padding-right: 10px;
    border-left: 2px dotted #8599A2;
    border-right: 2px dotted #8599A2;
    border-top: 2px dotted #8599A2;
    border-radius: 20px 20px 0px 0px;
    background-color: rgba(0,0,0,0.7);
}
.profile .contact{
    border-left: 2px dotted #8599A2;
    border-right: 2px dotted #8599A2;
    border-bottom: 2px dotted #8599A2;
    border-top: 0px dashed gray;
    border-radius: 0px 0px 20px 20px;
    background-color: rgba(0,0,0,0.7);
}
.mood{
    text-align: center;
    margin-top: -6px!important;
    border-left: 2px dotted #8599A2;
    border-right: 2px dotted #8599A2;
    border-top: transparent;
    background-color: rgba(0,0,0,0.7);
}

/* the navigation is adjusted here */
nav{
    background-color: rgba(0,0,0,0.7);
    border: var(--borders);
    border-radius: var(--curve);
}
nav .top{
    background: transparent;
    color:var(--links);
}
nav .top a, nav .links a{
    color: var(--text);
    text-shadow:none;
}
nav .links{
    color: var(--text);
    background-color: transparent;
    border-radius: var(--curve);
    text-align: center;
}

/* 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: " x";
    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(76%) sepia(24%) saturate(632%) hue-rotate(156deg) brightness(101%) contrast(84%)!important;
}

/* the search wrapper and button */

.search-wrapper input[type=text] {
    background-color: transparent !important;
    border: 1px solid var(--links) !important;
    color:var(--links) !important;
    border-radius: var(--curve) !important;
}

button{
    border-radius: var(--curve) !important;
    border: 0px solid var(--links) !important;
    font-family: var(--font-family) !important;
    background-color: transparent !important;
    color:var(--links) !important;
    text-transform: lowercase;
}

/* the online symbol and text */

.online{
    color: var(--links) !important;
    text-transform: lowercase;
    margin: auto;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(76%) sepia(24%) saturate(632%) hue-rotate(156deg) brightness(101%) contrast(84%)!important;
}

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{
    font-family: "MagicOwlPersonalUse-WyO0O"; 
    font-size: 18px!important;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: lowercase;
}
a, p, b, nav label, .section{ 
    font-family: var(--font-family) !important;	
    font-size: 13px!important;
    font-weight: bold;
    text-transform: lowercase;
}
/* the hr code.
the hr is the horizontal line when you want to 
separate important info or add a break in your paragraphs*/

hr{
    height:8px;
    background-image: url('https://64.media.tumblr.com/d0b80fa44a300d33036271e5e92ab8de/tumblr_inline_oejlx1PJoB1rhh3cu_250.gifv');
    background-size: contain;
    border:none;
}

/* this is where you adjust the borders and background */
.blurbs, .friends, .profile .table, .blog-preview, .profile .table-section{
    border-radius: var(--curve) !important;
    border: var(--borders) !important;
    background-color: rgba(0,0,0,0.7)!important;
}

.icon{border:none !important;}
.comment-replies{border:2px dotted #8599A2;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/

/* your interest and comments table row background color */
td{
    background-color: transparent!important;
}

/* the middle section of your profile background color*/
main{
    background: transparent;
    border-radius: var(--curve) !important;
    border: transparent !important;
    outline: none !important;
}

/* the interest table */
.table-section{
    border:none !important;
    background-color:transparent!important;
    border-radius: var(--curve) !important;
}

/* the header section of the boxes */
.heading, .blog-preview h4, .section h4{
    background: none !important;
    text-align: center;
}

/* blog-preview */

.blog-preview :not(:first-child) {
    width: 110px;
    text-align: center;
    display: inline-block;
    padding-right: 15px;
}
.blog-preview :not(:first-child):before {
    content: "";
    display: block;
    width: 96px;
    height: 60px;
    background: url(https://media.giphy.com/media/ArS6DkMXotqK5h99Tk/giphy.gif);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 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: rgba(0,0,0,0.7);
    border: var(--borders) !important;
    border-radius: var(--curve) !important;
}

/* you can remove text-align:center; if you don't want your friends to be centered */
.friends-grid{
    text-align: center;
}
.friends-grid img{
    border-radius: var(--curve) !important;
    filter: brightness(70%);
}
.profile .friends p{
    text-align: center;
}
/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */
.friends, .blog-preview, .blurbs{margin-bottom: 10px!important;}


.url-info{
    background-image: url('https://media.giphy.com/media/vMSXa7KFGx49aeeXhe/giphy.gif');
    background-size: 100%;
    background-repeat: no-repeat;
    height: 173px;
    border: var(--borders)!important;
    border-radius: var(--curve);
}
.url-info p{
    opacity: 0.0;
}

/* this is the comments table scroll code. 
you can delete this if you don't want a scroll box */

.comments-table {
    display: block;
    height: 500px!important;
    overflow-y: scroll;
    border: 0px dotted #000 !important;
    outline: none !important;
    border-radius: var(--curve);
    padding:5px;
    border-spacing: 10px; /* this changes the distance between boxes */
}

/* this styles the first column */
.comments-table td:first-child{
    background-image: url('https://i.pinimg.com/originals/7c/89/42/7c89422c3c1950eec3ef67d26dacea25.jpg');
    background-size: contain;
    background-position: center;
}
.comments-table td:first-child img{
    border-radius: var(--curve);
}
.comments-table td{
    background-image: url('https://i.pinimg.com/originals/7c/89/42/7c89422c3c1950eec3ef67d26dacea25.jpg');
    background-size: contain;
    background-position: center;
    border: 2px dotted #8599A2;
    border-radius: var(--curve);
}

footer{
    background-color: rgba(0,0,0,0.7);
    border: var(--borders);
    border-radius: var(--curve);
    padding:5px;
}

/* hidden things */
.blog-preview p:last-child{display: none;} /* hides last blog entry */
.profile .table-section .heading h4{display:none;}
.profile .contact .heading{display:none;} /* hides contact title */
.details-table td:first-child{display:none;} /* hides general, music, etc titles */
</style>

<style>

.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: "🌧"
} 

/* Scrollbar styles */
::-webkit-scrollbar {
    width: 5px;
    height: 10px;
}
::-webkit-scrollbar-track {
    border-radius: var(--curve);
    border: 1px solid #000;
}
::-webkit-scrollbar-thumb {
    background: #000; 
    border-radius: var(--curve);
}
::-webkit-scrollbar-thumb:hover {
    background: #000;  
}
</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 20 of 31 comments ( View all | Add Comment )

－♪𝐾𝑎𝑖	1724516248 using Report Comment
vic	1722208171 using!! Report Comment
Frodo	1711218771 using Report Comment
Sunky the Eevee	1710087828 using Report Comment
James Reece	1708659945 using Report Comment
keegan	1708202206 using!! :))) Report Comment
Aksh'	1706079897 Using Report Comment
JawnX	1706036975 I'm going to use it! :) Report Comment
Mr.Stutter	1705500732 using! Report Comment
raeny	1704922919 using ! Report Comment
Jordylew	1695698380 Using!!! :3 Report Comment
𝓐𝓫𝓲𝓰𝓪𝓲𝓵	1690925464 I will be using this! Thank you for your work 💙 Report Comment
Ace	1688536059 This is so nice!! definitely using <3 Report Comment
Dusky	1687854528 I Adore this Layout Im using it def!!! Report Comment
terasene	1685719152 I liked the aesthetic of it, so i'm using it. Thank you. Report Comment
Soot <3	1683790895 using this, absolutely love it!! Report Comment
Jamie	1680215713 Thank you! :) Report Comment
seraphim	1679618954 so cute!! Report Comment