Fluttershy Layout ✿

Tags: mlp, fluttershy, pink, yellow

Description:

fluttershy mlp layout!! includes: floating profile custom contact buttons custom online now icon custom font custom banner custom cursor ty for using (＞。☆)

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
body{font-family: 'Righteous', cursive;;
font-size: 16px;}

.profile .blurbs .section p{
    color: #4b5972;
}


<style>
    img:hover{
          transform: scale(1.1); 
          transition: transform .2s; 
        
    }
    
</style>
<style>* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat1008.ani), url(https://cur.cursors-4u.net/nature/nat-10/nat1008.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/30/fluttershy-working-in-background.html" target="_blank" title="Fluttershy - Working In Background"><img src="https://cur.cursors-4u.net/cursor.png" alt="Fluttershy - Working In Background" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>
nav .top {
        background-image: url('https://1.bp.blogspot.com/-8m7QPMWOmT0/YUzpoZphcxI/AAAAAAADi0c/DeU28__TsX8I48Aed1PLFqHds5p_CCFwwCLcBGAsYHQ/s640/ezgif-3-c2b06ef896a2.gif');
        height: 200px; 
        background-size: 800px;
        background-position: center;
        border-radius: 5px;
        position: relative;
        border: 5px dashed white;
        border-radius: 20px;
        box-shadow: 0px 0px 10px #3c2f2b;
        display: block;
        margin-bottom: 3px
}
</style>
<style>
body {
    background: url(https://media.tenor.com/FGTCOPUU3HMAAAAC/dance-happy.gif);

</style>
<style>
.profile {
    border-radius: 20px;
    border: 4.5px dashed #FFFFFF;
    box-shadow: 0px 0px 10px #bf9d80;
}
<style>

/*Colors*/
     :root {

/*Color of the spacehey logo bar and interests headers*/
        --logo-blue: #f5aeea;

/*Links colors*/
        --darker-blue: #963688;

/*Navigation bar and borders on the left side*/
        --lighter-blue: #f5aeea;


/*Interest box colors*/
<div id="handy">
        --even-lighter-blue: #f5aeea;
        --lightest-blue: #f5aeea;

/*Heading text on the right side*/
        --dark-orange: #963688;

/*Heading box colors and comments on the right side*/
        --light-orange: #963688;

/*Comments box containing text color*/
        --even-lighter-orange: #f5aeea;}



/*Background color containing profile text*/
main {
border-radius: 0 0 0px 0px;
background: 
#ffedfc
  !important;}

/*Text color*/
.profile {
color:#963688;}



<style>

/*Image backgrounds*/

/*Navigation bar image*/
    nav .links {
        background: transparent!important;
        font-size: 11px;}

    nav { background: #ffffff url("https://i.pinimg.com/736x/23/4c/b4/234cb4c78e6cb0bf57401c0e8d67c7ec.jpg");}



/*Add an image to the contact box*/
    .contact {
        font-size: 11px;
        font-family: helvetica;
        border: dotted 0px!important;
        background-image: url("
        background: ;
        border-top: 0px;


/*Image for the edit your profile box*/
    .profile-info{
        border: none;
        background-image: url("https://i.pinimg.com/1200x/2b/22/0f/2b220f581b8931f68ec3ca56c75ca882.jpg");}	


/*Background in the boxes minus interests and comments*/
body {
background:url(''https://i.pinimg.com/736x/fc/3f/00/fc3f0073d4ea4b9964076adf4266e1c6.jpg);
no-repeat fixed; }

/*Background behind everything*/
.profile {
background-image:URL("https://i.pinimg.com/originals/51/19/20/511920ed98b6585bd86f1eda5083efe5.gif");}

/*Footer Background*/
footer {background-content:URL("https://i.pinimg.com/736x/bb/fb/54/bbfb5440c7a1d16f7f9d5e52d6f05ac8.jpg");
background-repeat: none;
border-radius: 0px;}
</style>




<style>
/*Online Now Icon*/
.online{
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/0bedb362-1325-47fe-8fb8-8a1224de0221/devweqp-86955c3b-8bdd-4f20-ba75-1399be39eb2d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzBiZWRiMzYyLTEzMjUtNDdmZS04ZmI4LThhMTIyNGRlMDIyMVwvZGV2d2VxcC04Njk1NWMzYi04YmRkLTRmMjAtYmE3NS0xMzk5YmUzOWViMmQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.QFPGCfnvdO7FtPZTltLA5Z_wa1pYCle5fzDDb_VRetc");}
</style>



<style>
/*Custom 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:URL("https://pixels.crd.co/assets/images/gallery10/69db8a45.gif?v=b3554822");}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorite */
content:url("https://media.discordapp.net/attachments/903364339464044575/1086446758781010021/11089DD9-D017-4717-B3E8-274FE2BB2F2E.gif");}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send a Message */
content:url("https://media.discordapp.net/attachments/903364339464044575/1078060710812188672/1BB3DFF3-6BDA-486A-87F7-6466FED7D8B5.gif");}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Foward to Friend*/
content:url("https://media.discordapp.net/attachments/903364339464044575/1092005741050728569/BE2D430D-C0F2-435C-89DC-4D9266B741A0.gif");}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content:url("https://media.discordapp.net/attachments/903364339464044575/1090719590453084201/FBD1B16C-8542-4B9A-9337-BA5D23413632.gif");}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content:url("https://media.discordapp.net/attachments/903364339464044575/1091791647781703760/92417BEC-7001-41FE-BBED-147521248899.gif");}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group  */
content:url("https://media.discordapp.net/attachments/903364339464044575/1080111958998663278/95E1BCD5-7845-4A43-917D-F67436B8E9C2.gif");}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report */
content:url("https://media.discordapp.net/attachments/903364339464044575/1086450266498408558/F1AD36A8-4B14-44A2-B589-1592070D013D.gif");}
</style>
<style>

.container {
   border-radius: 200px;
}
</style>   

<style>
.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}
</style>

FLUTTER ◜◡◝

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.