<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=21456) -->
<div class="snowflakes">
<div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="10px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="30px"/></div><div class="snowflake">
<img src="https://i.postimg.cc/3N4x6WvF/sP2Hxvo.png" width="20px"/></div><div class="snowflake">
</div>
</div>
<style>
/* customizable snowflake styling */
.snowflake {color: purple;font-size: 1em;font-family: Arial, sans-serif;text-shadow: 0 0 5px rgba(0, 0, 0, 0.7);}@-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}
</style>
<style>
.fairy {
background: url('https://64.media.tumblr.com/eb0d69b8ac609edcc129d2bbf8c321f7/b62af5340e1fd48a-26/s1280x1920/a050428dce148431300b3abbd4dc955bb10b7659.png');
background-size: 100%!important;
background-repeat: no-repeat;
position: fixed;
right: 50px;
bottom: 0px;
height: 400px;
width: 250px;
z-index: 1000;
opacity: 1;
}
</style>
<div class="fairy"></div>
<style>
/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Kufam&family=Reggae+One&display=swap');
</style>
<style>
:root{
--headers: #206A5D;
--text: #F8E1F4;
--names: #794C74;
--links: #BD9862;
--hover: cyan;
--font-family: 'Kufam', sans-serif;
}
h3, h4, h5, details summary{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover, button:hover{color: var(--hover) !important; text-decoration: none!important;} /* color of links on hover */
.friends a:hover{color: var(--hover) !important; text-decoration: none!important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */
.profile .friends .person p:hover{color: var(--hover) !important;}
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* aboutme & want2meet headings */
.blurbs .heading, .table-section .heading, .contact .heading{display:none;}
h2, h3, h4, h5{
font-family: 'Reggae One', cursive;
font-size: 14px!important;
font-weight: normal;
}
p, b, .section{
font-family: var(--font-family)!important;
font-size: 12px!important;
font-weight: normal;
}
a, nav label{
font-family: 'Caveat', cursive;
font-size: 16px!important;
font-weight: normal;
text-transform: lowercase;
font-variant: small-caps;
}
.heading, .blog-preview h4, .section h4{
background: none !important;
text-align: center;
}
.container{
width: 100%;
}
body{
background-image: url('https://i.postimg.cc/tRnbKsT8/forest.jpg');
background-color: black;
background-size: 100%;
background-attachment: fixed;
background-position: center center;
color: var(--text)!important;
text-align: center;
}
nav .top{
background: transparent;
color:var(--links);
}
nav .top a{
color: var(--text);
}
nav .links{
background-color: transparent;
text-align: center;
margin-bottom: 40px;
}
nav .links a, footer .links a{
color:var(--text);
border:4px ridge #BD9862;
background-color: black;
padding:5px;
text-shadow:none;
}
/* 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);
margin-left:15px;
}
/* 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(60%) sepia(67%) saturate(247%) hue-rotate(356deg) brightness(90%) contrast(94%)!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;
}
button{
border: 0px solid var(--links) !important;
background-color: transparent !important;
color:var(--links) !important;
font-family: 'Caveat', cursive;
font-size: 16px!important;
font-weight: normal;
text-transform: lowercase;
font-variant: small-caps;
}
/* this is where your name appears */
h1{
color: #F8E1F4;
font-family: 'Reggae One', cursive;
font-size: 20px!important;
font-weight: 1;
text-align: center;
border: 10px solid transparent;
padding: 10px;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
border-image-slice: 80;
border-image-repeat: repeat;
border-image-width: 30px;
background-color: rgba(0, 0, 0, 0.8);
margin-bottom: 40px!important;
}
.general-about .details{
border: 10px solid transparent;
padding: 20px;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
border-image-slice: 80;
border-image-repeat: repeat;
border-image-width: 30px;
background-color: rgba(0, 0, 0, 0.8);
padding-bottom: 80px!important;
margin-bottom: 40px!important;
}
.profile-pic img{
padding: 30px;
}
.online { visibility: hidden; }
.online img{
content: url("http://dl6.glitter-graphics.net/pub/701/701136jat79z1ht9.gif");
visibility: visible;
float:right;
}
.mood{
border: 10px solid transparent;
padding: 20px;
border-image-source: url('https://i.postimg.cc/4dXcrvfb/ZENajQ8.png');
border-image-slice: 60;
border-image-repeat: repeat;
border-image-width: 20px;
background-color: rgba(0, 0, 0, 0.8);
margin-bottom: 40px;
}
.profile-info {
border: 10px solid transparent!important;
padding: 20px!important;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
border-image-slice: 80!important;
border-image-repeat: repeat!important;
border-image-width: 30px!important;
background-color: rgba(0, 0, 0, 0.8)!important;
margin-bottom: 40px!important;
}
.profile .blurbs .inner{
padding: 0px!important;
}
.blog-preview, .profile .blurbs .section:first-child, .profile .blurbs .section:nth-child(2), #comments{
border: 10px solid transparent;
padding: 20px;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png");
border-image-slice: 80;
border-image-repeat: repeat;
border-image-width: 30px;
background-color: rgba(0, 0, 0, 0.8);
margin-bottom: 40px;
}
.friends:not(#comments), .contact, .details-table{
border: 10px solid transparent!important;
padding: 20px!important;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
border-image-slice: 80!important;
border-image-repeat: repeat!important;
border-image-width: 30px!important;
background-color: rgba(0, 0, 0, 0.8)!important;
margin-bottom: 40px!important;
}
.profile .left .table-section:last-child {display:none;}
.contact{
text-align: left!important;
}
.icon{
border:none !important;
font-size: 10px!important;
}
.comment-replies{
border:2px solid var(--links); /* 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 */
main{
background: transparent;
border: transparent !important;
width: 60%;
margin:auto!important;
}
/* the interest table */
.table-section{
border:none !important;
background-color:transparent!important;
}
.url-info{
background-image: url('https://storage.googleapis.com/pod_public/1300/181432.jpg');
background-size: 100%100%;
height: 200px;
border: 10px solid transparent!important;
border-image-source: url("https://i.postimg.cc/4dXcrvfb/ZENajQ8.png")!important;
border-image-slice: 80!important;
border-image-repeat: repeat!important;
border-image-width: 30px!important;
background-color: rgba(0, 0, 0, 0.8)!important;
margin-bottom: 40px!important;
margin-top: 40px!important;
}
.url-info p{
opacity: 0.0;
}
.comments-table{
border:none!important;
border-spacing: 0px 20px;
}
.comments-table td{
padding:7px;
}
.comments-table td:first-child{
border-right:none;
}
.comments-table tr{
border: 3px solid #8C328A;
}
footer{
background:none!important;
border:none!important;
}
::-webkit-scrollbar {
width: 2px;
height: 3px;
}
::-webkit-scrollbar-track {
border: 1px solid #000;
}
::-webkit-scrollbar-thumb {
background: #000;
}
</style>
<style>
/* this is the mobile code */
@media (max-width: 600px){
body{
background-size: cover!important;
}
main{
width: 100%!important;
}
.fairy{
display: none;
}
nav .links li{
display:inline-flex;
flex-direction:row;
}
}
</style>
Comments
Displaying 0 of 0 comments ( View all | Add Comment )