Published by Elliot

published 1750720490
updated 1750791679

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

code of my profile ^_^ (ALL CREDS GO TO !!𖤐Sleepy_Gh0st𖤐!! NONE OF IT IS MiNE !!)

my code for you to use ^_^ THIS IS NOT MINE !! (!!𖤐Sleepy_Gh0st𖤐!!)

Styled Layout with Falling Stars & Audio

<style>

/* FALLING PASTEL STARS */

.star {

position: fixed;

border-radius: 50%;

opacity: 0.6;

animation: fall linear infinite;

z-index: 9999;

}

@keyframes fall {

0% {

transform: translateY(-10px);

}

100% {

transform: translateY(110vh);

}

/* Star instances */

.star1 { left: 10%; top: 0%; width: 8px; height: 8px; background: #f9c6d1; animation-duration: 6s; }

.star2 { left: 25%; top: 10%; width: 10px; height: 10px; background: #c6e2f9; animation-duration: 8s; }

.star3 { left: 40%; top: 20%; width: 6px; height: 6px; background: #f9e6c6; animation-duration: 7s; }

.star4 { left: 55%; top: 5%; width: 9px; height: 9px; background: #d4f9c6; animation-duration: 5s; }

.star5 { left: 70%; top: 15%; width: 7px; height: 7px; background: #e5c6f9; animation-duration: 6.5s; }

.star6 { left: 85%; top: 25%; width: 8px; height: 8px; background: #ffd9ec; animation-duration: 9s; }

/* Hide YouTube player but allow audio */

.hidden-audio {

position: absolute;

left: -9999px;

top: -9999px;

width: 1px;

height: 1px;

opacity: 0;

pointer-events: none;

}

</style>

</iframe>

<style>

p.online {font-size: 0px;}

p.online::after{content: "🩹I'M ONLINE";

color: #ff5ac6;

font-size: 10px;}

</style>

<style>

body {

background-image:url(https://images-ext-1.discordapp.net/external/XRE5xItlqWG0oxRl-hKXF3Vpqlgti2krp_95ocWxtrw/https/i.pinimg.com/236x/fe/56/ab/fe56ab21d27a702f24a8789eaa200fc8.jpg)

}

</style>

<style>

.profile {

background:url(https://i.pinimg.com/236x/5b/fe/36/5bfe363e92028241730b3ec69ac41181.jpg);

color:black;

text-shadow: 0 0 9px White;

}

.profile .contact, .profile .table-section, .profile .url-info, .profile .friends, .profile .blurbs, table.comments-table, DIV.blog-preview {

border-style:Double;

border-width:6px;

border-color:White;

background:#ffbfe9;

}

/* 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: "🦴"

}

footer {

border-radius: 15px;

background-image:

url(https://i.pinimg.com/236x/c3/c0/58/c3c0586ea6dd61ad333d0a87e8032b36.jpg);

color:White;

}

#music {

position: fixed;

bottom: 10px;

left: 10px;

width: 0px;

transition: 0.5s width;

}

#music:hover {

width: 0px;

}

nav .top {

background: url(https://i.pinimg.com/236x/c3/c0/58/c3c0586ea6dd61ad333d0a87e8032b36.jpg);

}

nav { background: black url(""); }

:root {

--logo-blue: #f222b4;

--darker-blue:#f222b4;

--lighter-blue:#f98bd3 ;

--even-lighter-blue:#fc95d8;

--lightest-blue:#fb6ad0;

--dark-orange:#f222b4;

--light-orange:#f98bd3;

--even-lighter-orange:#fb6ad0;

--green:black;

}

iframe.spotify {

width: 100%;

height: 250px;

padding: 10px;

background: rgba(255,255,255,0.2);

border-radius: 10px;

}

div.ah.df.dg.dh {

border-radius: 0 0 10px 10px;

}

div.b4.ah.dx.dy.dz.e0 {

border-radius: 10px 0 0 0;

}

</style>

ㅤ

layout made by !!𖤐Sleepy_Gh0st𖤐!!ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

Put your about me information here!

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ

</div>

<div>

<h4>My Playlist(s):</h4>

https://open.spotify.com/playlist/7CqTCxeKhK9cUNcRzc5UD9

</div>

<style>

.friends .heading{ font-size:0; }

.friends .heading:before{ content: "My Friends!!~.˚𖤐💊"; font-size:.8rem; font-weight:bold;

color:black; }

}

</style>

<style>

.friends#comments .heading{ font-size:0; }

.friends#comments .heading:before{ content: "The Comments!!~.˚𖤐💊"; font-size:.8rem; font-weight:bold;

color:White; }

</style>

<style>

.profile .table-section .heading h4 { font-size:0; }

.profile .table-section .heading h4:before{ content: "My Interests & My Socials!!~.˚𖤐💊"; font-size:.8rem; font-weight:bold;

color:White; }

</style>

<style>

.contact .heading{ font-size:0; }

.contact .heading:before{ content: "Say Hi!!~.˚𖤐💊"; font-size:.8rem; font-weight:bold;

color:White; }

}</style>

<style>

.blurbs .heading{ font-size:0; }

.blurbs .heading:before{ content: "About Me!!~.˚𖤐💊"; font-size:.8rem; font-weight:bold; color:White; }

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://64.media.tumblr.com/bc2c0cef46a8628543a77b208e16e7ff/298b8ef76726265b-75/s640x960/69ab8722a572fc658caaa164584ebf16c4372ab0.gifv');

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;} }

</style>

<style>

@keyframes spin{

from{ transform:rotate(0deg); }

to{ transform:rotate(-360deg); }

}

.general-about .profile-pic img{

border-radius: 50%;

animation: spin 7s infinite linear;

}

</style>

</div>

<style>

@-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>

.general-about .profile-pic img{

-webkit-mask-image: url(https://external-media.spacehey.net/media/sE8UvUVDkz5slrQdP2iQknxXKMhHv9BV0xfHOeIUExYg=/https://cdn.makitatools.com/apps/cms/img/792/d4665776-075a-4503-a292-d6f478652f2a_792377-a_p_1500px.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

animation: rotation 2s infinite linear;

}

@keyframes rotation{

from {transform: rotate(0deg);}

to {transform: rotate(360deg);

}

0 Kudos

Comments

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