star butterfly layout!! (fluttershy is not included)

Tags: star vs the forces of evil, svtfoe, star butterfly, pink, disney show, layout
Description:

hii there isnt any svtfoe layouts here so i made one myselfff if there is any layouts u want me to do ill try my hardest to make them but i wont guarantee that i will
Code:

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

<style>
.online{
  content: url(https://dl.glitter-graphics.com/pub/3236/3236709w2acn5w0mp.gif);
}
</style>




<img src="https://64.media.tumblr.com/8fb69e50e6b02afe5562e85ce9d43c55/970694227f69eaf0-00/s640x960/fe1eb11e4f8ddbf068d416a00756db49030d7aa7.gifv"/>
<style>


<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

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


<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/973ae11350b60f4dab247fefad2de7b5/dbee55948161dbae-2c/s1280x1920/aef880977673227bdb02aa21ed17432019a330da.gifv'); background-size: cover; background-repeat: no-repeat; background-position:center; animation: yourAnimation 2.25s ease 0s 1 normal forwards; pointer-events: none;} @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } </style>

<style>
main:before {
 width: 100%;
 height: 200px;
 display: block;
 content: "";
 background-image: url('https://i.pinimg.com/originals/a2/84/af/a284af6a1eedb60c973e894c1b1e442e.gif');
 background-position: center center;
 background-size: cover;
 </style>

<style>
main:after {
 width: 100%;
 height: 300px;
 display: block;
 content: "";
 background-image: url('https://i.pinimg.com/564x/7b/76/45/7b7645f7ca50e00d6545280b268b21e0.jpg');
 background-position: center center;
 background-size: cover;
 </style>


<style>


body{
    background: url(https://i.pinimg.com/564x/de/90/7a/de907a3fadd212cd374b67a1f8235972.jpg) no-repeat fixed;
    background-size: cover;
}

nav .top {
    display: flex!important;
    opacity: 1!important;
    margin-top: 15px;
background: url(https://i.pinimg.com/originals/a2/8a/64/a28a64002876033223e240ce0b4d617a.gif);
    background-position-y: center;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 4px 4px 4px #00000075;
}

button, input {
    overflow: visible;
    background: white;
    border: none;
    border-radius: 4px;
    padding-bottom: 3px;
    box-shadow: 3px 3px 5px #00000080;
}

nav .top .left .logo {
    width: 165px;
    height: 42px;
    filter: drop-shadow(3px 3px 1px black);
}

nav .links, footer .links {
    margin: 0;
    list-style: none;
    margin-bottom: 10px;
    margin-top: 10px;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 3px 3px 5px #00000096;
    text-align: center;
    background: #e75cff;
}

nav .links a {
    text-decoration: none;
    color: white;
    text-shadow: 2px 2px 0px black;
    font-size: 0.98em;
    font-size: max(0.98em, 12px);
    font-weight: bold;
}

nav .links a:hover {
    text-decoration: none;
    color: #e75cff;
    font-style: comicsans;
}

main{
background: url(https://i.pinimg.com/originals/a2/8a/64/a28a64002876033223e240ce0b4d617a.gif) no-repeat center;
    background-size: cover;
    text-shadow: 2px 2px 1px black;
    color: white;
    text-align: center;
    border-radius: 8px;
    border: 2px solid white;
    box-shadow: 3px 3px 5px #00000096;
}

.inner{
background: url(https://i.pinimg.com/564x/5a/79/54/5a79546e7a3856e306c9fcf0eba10169.jpg);
    border: 2px solid white;
    border-radius: 0px 0px 8px 8px;
    box-shadow: 3px 3px 5px #00000082;
}

.heading {
    background: #e75cff!important;
    border: 2px solid white;
    border-bottom: none;
    border-radius: 8px 8px 0px 0px;
    color: white!important;
}

.blurbs .inner {
    height: 250px;
    overflow-y: scroll;
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: none;
    margin: 10px 0;
}

.details-table td:first-child {
    background: url(https://i.pinimg.com/564x/07/40/d1/0740d1a64e1579b9d5ef71be4fc075cd.jpg);
    color: white;
    font-weight: bold;
    width: 33%;
    border: 1px solid white;
}

.details-table td:first-child {
    background: url(https://i.pinimg.com/564x/07/40/d1/0740d1a64e1579b9d5ef71be4fc075cd.jpg);
    color: white;
    font-weight: bold;
    width: 33%;
    border: 1px solid white;
}

.details-table td {
    background: url(https://i.pinimg.com/564x/54/ca/2d/54ca2d61a7bc2391d2fc5e6145643ff6.jpg);
    vertical-align: top;
    border: 1px solid white;
}

.comments-table td:first-child, .music-table td:first-child {
    background: url(https://i.pinimg.com/564x/07/40/d1/0740d1a64e1579b9d5ef71be4fc075cd.jpg);
    text-align: center;
    font-weight: bold;
    width: 38%;
}

.comments-table td, .music-table td {
    background: url(https://i.pinimg.com/564x/54/ca/2d/54ca2d61a7bc2391d2fc5e6145643ff6.jpg);
    vertical-align: top;
}

table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    border: transparent;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: white;
}

a {
    color: #cfdde9;
    text-decoration: none;
}

.icon, .award img {
    display: none;
    height: 1.4em;
    width: 1.4em;
    aspect-ratio: 1/1;
    margin: 0 0.05em 0 0.1em;
    vertical-align: -0.3em;
    color: rgba(0,0,0,0);
}

.profile-info .inner {
    font-weight: bold;
    text-align: center;
    background: none;
    border: none;
    box-shadow: none;
}

.profile-info {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
}

}

.awards {
    filter: invert(1);
    text-shadow: none;
}

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: transparent;
    color: white;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: #e75cff;
    text-decoration: none;
    font-style: comicsans;
}

.general-about .profile-pic img {
    max-width: 160px;
    max-height: 160px;
    border: 2px solid white;
    border-radius: 8px;
    box-shadow: 3px 3px 5px #0000007d;
}

.count {
    color: white;
}

.profile .friends .person p {
    color: white;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}
</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 0 of 0 comments ( View all | Add Comment )