Blue calm idk lol

Tags: emo, blue, 2000s, cyber, minimal, black, calm, star

Description:

calm blue layout minimalist kinda layout

Preview:

click on the image for a larger preview

Code:

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

<style>
          /* General font size for the whole page. Every other font size (eg. username) is relative to this value. */
* {
	font-size: 14px !important;}

html {
	filter: blur(0.0-px) sepia(0.0);}

/* Paste your own url to the brackets for a different background. Change "font-family" value for a different font. */
body {
	background-image: url(https://i.pinimg.com/originals/c5/9d/ee/c59dee0e63dd759fc541992e300d089f.gif);
	background-position:center;
	background-attachment: fixed;
	background-size:cover;
	font-family: "Century Gothic";
	filter: opacity(1.0);}

main {
	background:transparent;}

/* normal text */
p, h6 {
	color: #040080;}

/* headers */
h4, h1{
	color: #040080!important;
	font-size: 1.2em!important;}

/* Font color of all the links. */
a, .count, .profile .friends .person p {
	color: #040080;}

/* Font color and text decoration of the links when you hover over them. */
nav .links a:hover, a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
	text-decoration: underline wavy 1.2px;
	color: #000000;}

/* This makes your username BIG */
.profile h1 {
	text-align: center;
	font-size: 2.5em!important;}


img {
	filter: opacity(1)}

/* All the buttons on the page. Change "background", "opacity" and "box-shadow" for of your liking. */
button {
	border:none;
	box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff;
	border-radius: 9px;
	padding: 3px;
	margin: 2px;
	background: #040080;
	filter: opacity(0.9);}
	.logout-btn {box-shadow: none;}

/* Paste your own url to the brackets for a different search bar background.*/
input#q {
	background-image: url(https://i.pinimg.com/236x/8e/af/32/8eaf323a74e23760c19d23d9e8499dbc.jpg);
	background-size: cover;
	border-radius: 10px;
	border:none;
	box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff; 
	margin-top:2px;}

/* Navigation bar on top of the page. Change the background value for of your liking. */
ul.links {
	background: #040080;
	font-variant: all-petite-caps;
	text-align: center;}

/* This bit of code makes the "|" between links wihite. You can change it to any other hex value. */
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
	color: white;}

/* The "boxes" on the profile. You can change the background hex and box-shadow hex if you don't like the black shadow. */
.blurbs, .friends, .comments, .profile .contact, .profile .table-section, .home-actions,
.profile .mood, .general-about .details {
	border-radius: 20px;
	padding: 9px;
	box-shadow: 0 0 1em #00000096;
	background: #000000;}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .profile .profile-info{
	border: 0px solid transparent!important;}

/* Change the align to "left" or "right" if you like. */
.blurbs{
	text-align: center;}

/* Your profile picture. Delete "border-radius" if you don't want it round. */
.general-about .profile-pic img {
	border-radius: 50%;
	height: 200px;
	object-fit: cover;
	margin-left: auto;
	margin-right: auto;
}

.general-about .profile-pic {
	display: flex;
	float: unset;
	height: 160px;
	margin-right: unset;
}

/* Don't delete this one unless you don't want a custom online icon. */
.online{
	visibility: hidden; }

/* Paste your own url to the brackets for a different online icon. */
.online img {
	content: url();
	animation-name: none;
	visibility: visible;
	height: 35px;}

/* This bit hides your url. */
.profile .url-info{
	display:none;}

.profile-info {
	display: none;}

/* Don't change this one or mood will overlap with the interest table. */
.mood {
	margin: 10px 0;}

/* this bit deletes the blue backgrounds. */
td, footer, div.top, div.heading {
	background:transparent!important;}


/* Friends' profile pictures. */
.profile .friends .person img, .comments-table td:first-child img:not(.icon){
	border: #df74b63px dashed;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	object-fit: cover;}

/* comment section. If you don't want it to be in a scroll box, delete "overflow-y" and "height". Change border radius to 0px for sharp corners. */
#comments.friends {
	margin-top: 10px;
	overflow-y: scroll;
	height: 220px;
	border: #ff75bf7px double;
	border-radius: 9px!important;}

/* Border around comments. Don't change the display property. */
.comments-table > tbody:nth-child(1) > tr > td:nth-child(2) {
	border: #ff75bf2px dashed;
	margin-top: 15px;
	display: block;
	border-radius: 5px;}

/* Border around comment replies. */
.comment-reply {
	padding-bottom: 10px;
	border: 2px solid #040080;
	border-radius: 10px;}

/* This bit deletes the weird table look in the comment section. */
.comment-replies{
	border: none;
	margin-top:none !important;}
.comments-table td, table.comments-table {
	border:none}


/* scrollbar for firefox */
* {scrollbar-width: thin; scrollbar-color: #040080#000000;}

/* scrollbar for Chrome, Edge and Safari */
::-webkit-scrollbar {width: 13px;}
::-webkit-scrollbar-thumb {background: #040080;}
::-webkit-scrollbar-track {background: #000000;}
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 0; 
z-index: 100;
background-image: url('https://media1.tenor.com/m/ypc0BGl0zhIAAAAC/domo-pot.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 1s ease 0s 1 normal forwards;
pointer-events: none;}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

/* contact icons */
.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 favorite */
content: "ð¦"

}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "ð¦"

}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward 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 2 group  */
content: "ð¦"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: 
"ð¦"
}
nav img.logo {
 
 content:URL()
body { cursor: url('https://media.discordapp.net/attachments/903364339464044575/1090716216995348480/D9C87293-CC56-4B3E-8B49-654493891642.gif'), auto; }
          </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 13 of 13 comments ( View all | Add Comment )

Lils ⭐️🎸	1736465457 using Report Comment
Iris ♪	1729848691 using Report Comment
Nikki	1711637888 using Report Comment
vexxologyy	1708232549 using Report Comment
Ryzqin	1706624374 using Report Comment
E-nerd	1706570760 Using Report Comment
Dallas	1706153661 using!! Report Comment
XxMoscyxX	1706100876 ☆Using!!☆ Report Comment
Fannia	1706067357 Usando Report Comment
Polentitaaasada!ඞ	1706033367 Using Report Comment
leone	1705856039 usiinngg ^^ Report Comment
leone	1705856038 usiinngg ^^ Report Comment
Scared_Alone111	1705804823 Using Report Comment