mothfa!r!ezz's profile picture

Published by

published

Category: Music

Hii! u can call me M!





















<!-- (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>



0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )