⭐| FLY AWAY

Tags: cute, space, purple, sparkle, stars, glitter, animation, simple, loveleo

Description:

if you use this theme, please comment below, add me or add a link back to this page in your profile. you may not use this as a base.

i played around with css for the past two days and whipped this up woowoo

the profile picture does animate and you can plug whatever gif you want in there. it also has additional animations which you can view here

feel free to use this or any other layouts i decide to make in the future but like the header says: i'd really appreciate it if you could comment/add me/credit me somewhere on your profile if you use.

if the code is broken or you just need general help, feel free to DM me, but give me time (at least 24-48hrs). if you're looking for a faster resolve, you might want to check out a YouTube tutorial, ask for help in the comments or a forum, or use one of the links below ↓

some helpful links:
live preview of code while you work/before you upload it to profile: 1 | 2
RGBA color picker w/ transparency options
RGBA color to HEX color code converter
w3schools: HTML & CSS tutorials
codepen; HTML & CSS code snippets & tutorials

Preview:

click on the image for a larger preview

Code:

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

<style>
/* profile background/the image behind the profile box */
body { 
background: url(https://i.gifer.com/76YS.gif);
}
</style>

<style>
/* this is the color of any text that you input */ 
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
.profile .blurbs .section h4{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color: white;
}
</style>

<style> 
/* these are the colors for headers */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
p{
font-family: 'Josefin Sans', sans-serif;
text-transform:lowercase !important;
color:#ffedf9;
}
</style>

<style>
/* this adjusts the size/font of your name */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h1{
font-size: 30px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
}
</style> 

<style> 
/* this changes the color of your name */
.profile h1{
background: -webkit-linear-gradient(#8870ff, #ff70de);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>

<style>
/* this changes the color of your headers */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Paytone+One&display=swap');
h4{
font-size: 16px !important;
font-family: 'Paytone One', sans-serif;	
text-transform:uppercase !important;
padding-left: 2px !important;
/* gradient text, you can replace existing colors with whatever ones you want */
background: -webkit-linear-gradient(#ff97c1, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

}
</style> 

<style>
/* this is what makes the text bold/look bigger */
p{
font-size: 14px !important;
font-weight: bold;
 text-transform:none !important;
}
</style> 

<style>
/* links in the navigation bar @ the top */
nav{ 
font-size: 13px !important;
font-family: 'Paytone One', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>

<style>
/* the color of the number of your friends */
    .count {
        color: #ff00aa;
    }
</style>

<style>
/* link colors when you hover over links */
   a:hover {
     color: white; 
   } 
   a{
     color: #ff9ce0; 
   }
</style>

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('https://cur.cursors-4u.net/games/images4/gam308.png'), auto;
}
* {
 cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym189.png'), auto;
}
</style>


<style>
/* main profile background/the box that has all your text */
/* use https://rgbacolorpicker.com/ to pick a different color and adjust it's opacity */
main {
background: rgba(189, 124, 207, 0.4);
border-radius:15px;
border: 2px dotted rgba(241, 190, 255, 1)
}
</style>


<style>
/* this is the background color for the headings of your blurbs, friend space + comments */
.profile .blurbs .heading, .profile .friends .heading {
color: white;
background-color:rgba(171, 118, 207, 0.4);
text-transform:lowercase !important;
color: white;
border-radius:15px;
border: 3px dotted rgba(218, 165, 255, 0.65)
}
</style>

<style>
/* links to your friends' profiles */
.profile .friends .person p {
color: #ff75d1;  
}
.profile .friends .person p:hover {
color: #ffd6f1;  
}
</style>

<style> 
/* this is the box that says "_'s latest blog entries" */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@700&family=Roboto:wght@700&display=swap');
DIV.blog-preview{
text-align: center;
font-family: 'Josefin Sans', sans-serif;
background-color:rgba(171, 118, 207, 0.4);
text-transform:lowercase !important;
color: white;
border-radius:15px;
border: 5px dotted rgba(218, 165, 255, 0.65)
}
</style>

<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
box-shadow: 1px 0px 7px 2px rgba(254, 120, 180, 0.71);
border: 3px dotted rgba(255, 221, 241, 1)
}
</style>


<style>
/* these are the colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: rgba(171, 118, 207, 0.4);
}
</style>

<style>
/* contacting "_" */
.profile .contact {
background-color: rgba(171, 118, 207, 0.4);
}
</style>

<style>
/* friend comments */
.profile .friends .comments-table td {
background-color: rgba(171, 118, 207, 0.4);
border: 1px solid rgba(255, 161, 207, 0.5);  
}
.comments-table td*{
    
    
}
</style>


<style>
/* colors for interest section */
.profile .table-section .details-table td {
background-color:rgba(223, 162, 210, 0.58);
}
</style>

<style>
/* navigation bar at the top/the bar that has navigation links */
nav .links {
background-color: transparent;
}
nav .links a:hover {
color: rgba(255, 199, 226, 1);
}
</style>

<style>
nav .top{
/* navigation bar at the top/the bar that has the search and spacehey logo */
background-color: transparent;
}
</style>

<style>

@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 5px); }
    100%   { transform: translate(0, -0px); }   
}
/* gif profile picture */
.profile-pic > img { display:none; }
.profile-pic:after { background-image: url("https://i.pinimg.com/originals/61/ee/e5/61eee57480a9223ef1c5f40e47cd2b03.gif"); display: inline-block; content:"" }
.general-about .profile-pic:after { background-size: cover; width: 160px; height: 150px; } 
.profile-pic:after{ 
  border: 2px dashed  rgba(255, 161, 207, 1);  
  box-shadow: 1px 0px 10px 2px rgba(254, 120, 180, 0.46);
 }   
</style>


<style>
/* floating animations */
.profile-pic, .profile .friends .person img:not(.icon), .profile .friends .person p, .profile h1{ 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    margin-left: 0px;
    margin-top: 0px;
}    
</style>


<style>
/* pink dashed borders */
.profile .url-info {
border: 2px dashed  rgba(255, 161, 207, 1);    
}
.profile .contact {
border: 2px dashed  rgba(255, 161, 207, 1);     
}
.profile .table-section {
border: 2px dashed  rgba(255, 161, 207, 1);     
}

</style>

<style>
/* border inside of comments */
table.comments-table {
border: 2px dashed rgba(255, 161, 207, 1);      
}    
</style>

<style>

/* spacehey logo */
nav img.logo{filter: brightness(0) saturate(100%) invert(99%) sepia(73%) saturate(7472%) hue-rotate(280deg) brightness(101%) contrast(100%); !important;}

</style>

<style>
/* 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: "🛰️"
}   
</style>

<style>
footer {
color: white !important;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background-color: rgba(0, 0, 0, 0.82);
  }    
</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 6480 comments ( View all | Add Comment )

𝔏𝔬𝔯𝔯𝔬𝔫𝔞	1771817486 ⠀⠀⠀⢠⡾⠲⠶⣤⣀⣠⣤⣤⣤⡿⠛⠿⡴⠾⠛⢻⡆⠀⠀⠀ ⠀⠀⠀⣼⠁⠀⠀⠀⠉⠁⠀⢀⣿⠐⡿⣿⠿⣶⣤⣤⣷⡀⠀⠀ ⠀⠀⠀⢹⡶⠀⠀⠀⠀⠀⠀⠈⢯⣡⣿⣿⣀⣸⣿⣦⢓⡟⠀⠀ ⠀⠀⢀⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⠉⠹⣍⣭⣾⠁⠀⠀ ⠀⣀⣸⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣸⣷⣤⡀ ⠈⠉⠹⣏⡁⠀⢸⣿⠀⠀⠀⢀⡀⠀⠀⠀⣿⠆⠀⢀⣸⣇⣀⠀ ⠀⠐⠋⢻⣅⣄⢀⣀⣀⡀⠀⠯⠽⠂⢀⣀⣀⡀⠀⣤⣿⠀⠉⠀ ⠀⠀⠴⠛⠙⣳⠋⠉⠉⠙⣆⠀⠀⢰⡟⠉⠈⠙⢷⠟⠉⠙⠂⠀ ⠀⠀⠀⠀⠀⢻⣄⣠⣤⣴⠟⠛⠛⠛⢧⣤⣤⣀⡾ Report Comment
ufo.rxks	1771809393 Using ;) Report Comment
ev	1771797161 usingg!! Report Comment
Lalalixy	1771791768 USING!!!! Report Comment
Lalalixy	1771791768 USING!!!! Report Comment
Kinzie~710	1771752650 how do I add??? Report Comment
°•°∆lice°•°	1771720740 Using^^ Report Comment
Ger@rd XD	1771701048 Using :3 Report Comment
twirxxli	1771663908 using Report Comment
vick xx	1771638518 i cant copypaste allat for some reason it wont work but paswg mention Report Comment
Zadie <3	1771628270 using!! Report Comment
ceecee	1771611511 im using thankkkssss Report Comment
RisaRi └(^o^)┘	1771610499 Using!!!! Report Comment
𝔅𝔬𝔫	1771552377 Using!!! Report Comment
Maxx	1771533201 using Report Comment
Kitsy	1771524462 using Report Comment
Kitsy	1771524458 using Report Comment
yurixo!	1771515982 usingg 1!!! Report Comment
｡𖦹°‧Bay_Bay📎🍒	1771503328 using <3 Report Comment
｡𖦹°‧Bay_Bay📎🍒	1771503309 usingg Report Comment