Miracle Musical Layout (WIP!)

Tags: miracle musical, tally hall, beach, hawaii, rainbow, liminal space, night, black

Description:

based off the hawaii part ii cover (credit isn't needed but would be cool :))

Preview:

click on the image for a larger preview

Code:

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

<style>

body{
background-image:
url(https://i.imgur.com/LWWzLzP.jpg);
background-color: #b5b5b5
background-attachment: fixed;
background-size: 1000px;
font-family: Courier;
}

nav{ 
  background-color: #000;
  text-color: #fff;
}

main {
  background-color: #111;
  color: #ccc;
}

   .top{
    background-color: #222222 !important;
}

   .links{
     text-align:center;
    background-color: transparent !important;
}

.profile .contact, .profile .table-section, .profile .url-info {
  border: 1px solid #000;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #444;
  color: #bbb;
}

.profile .table-section .details-table td {
  background-image:
 url(https://i.imgur.com/S4PAzLk.png)
  color: #000;
}
</style>

<style>
.profile .blurbs .section h4{
color: white;
}
</style>

<style>
   a:hover {
     color: black; 
   } 
   a{
     color: white; 
   }
</style>

<style>
.profile .blurbs .heading, .profile .friends .heading {
color: black;
background-color:rgba(0, 0, 0, 1);
color: white;
border-radius:10px;
border: 1px dotted rgba(255, 255, 255, 1)
}
</style>

<style>
nav {
    background: #h5h5h5;
    border: var(--borders);

}

{

   .links: #fff
    background: #h5h5h5

}

   {

    .profile-pic {
        border-radius: 500px;
        overflow: hidden;

        border: 5px dotted #FFFFFF;
    }


    .container {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
    }

    footer {
        border-radius: 15px;
        background: rgba(255, 255, 255, 0.94) !important;
        display: block !important;
    }

    table.comments-table td {
        background-color: white !important;
    }

    .comments-table td:first-child {
        width: 80px;
        border-radius: 500px;
    }

    .profile .friends .person img {
        border-radius: 500px;
    }

    .blog-preview p {
        font-size: 1.4rem;
    }

    a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
.profile .blurbs, .profile .friends, .profile .about me{
color: black;
background-color:rgba(0, 0, 0, 1);
color: white;
border-radius:10px;
border: 1px dotted rgba(255, 255, 255, 1)
}

.profile .contact, .profile .table-section, .profile .url-info {
  border: 1px dotted  rgba(255, 255, 255, 1)
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: black;
  color: white;
  }

   .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #999999 !important;

}

    table.details-table{
    background-color: #999999 !important;
    background-image: url('https://cdn.pixabay.com/photo/2020/06/25/11/30/pastel-5339368_1280.jpg') !important;
    background-attachment: SCROLL !important;
    background-repeat: REPEAT !important;
    background-position: CENTER !important;}

    .profile .details-table td{
    background-color: #888888 !important;

}

footer {

   color: #faf;

   background: #000;

   
}



footer .links {

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

   border: 0px;


}



.logo {

   content: url(https://i.imgur.com/ultYD2Y.jpg);

}



</style>

<style>
.online{content:url("https://i.imgur.com/SRvy3Xe.gif");}
</style>



<iframe width="0" height="0" src="https://www.youtube.com/embed/hR5Z-_E1sVc//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style>body { cursor: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/967cfe8c-c6b7-4445-a585-f85a8c14e785/d2jmejc-ee2007b4-5518-4c8e-a4d9-68e1cd920262.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzk2N2NmZThjLWM2YjctNDQ0NS1hNTg1LWY4NWE4YzE0ZTc4NVwvZDJqbWVqYy1lZTIwMDdiNC01NTE4LTRjOGUtYTRkOS02OGUxY2Q5MjAyNjIuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.bytkROsJZqSD52shnHe9qadcfNpV-ztPC7XA1sKuFIQ'), auto; }</style>

<div class="snowflakes">


  <div class="snowflake">


   *


  </div>


  <div class="snowflake">


  .


  </div>


  <div class="snowflake">


  *


  </div>


  <div class="snowflake">


  .


  </div>


  <div class="snowflake">


  *


  </div>


  <div class="snowflake">


  .


  </div>


  <div class="snowflake">


    *


  </div>


  <div class="snowflake">

    .


  </div>


  <div class="snowflake">


    *


  </div>



  </div>


<style>


/* customizable snowflake styling */


.snowflake {


  color: white;


  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>

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 36 comments ( View all | Add Comment )

Nerva	1767000613 id love to use this it looks so rad but im not sure how to paste on mobile into the about me because its only giving me autofill option Report Comment
Thomas	1763950125 dang this is so cool thank you so much for making this, Using! Report Comment
silly applz	1758928507 STOP THIS IS SO AWSOME SAUCE THANKS!!!!!1!1!1! ^3^ Report Comment
SteorraNoNoNoAh( RICK GRIMES' HUSBAND	1756947336 USING! I LOVE IT SO MUCH Report Comment
sir simp	1752864195 using but the background isnt working 3 Report Comment
Xx0mg4xX	1746576499 Using!! :) Report Comment
guii	1743859799 Using!!! Report Comment
🏝🌈 jasper 🔲🔳	1740569925 using x3 Report Comment
💿mre.púrpura꩜༻	1739493973 using!! Report Comment
꒰ ୨୧ ﾉ Dan ໒ . . .꒱	1730058322 WOOOO, USING !!! Report Comment
hamsifalaçata	1724108150 using!! Report Comment
☆ Ｓｐｅｃｔｒｉ ☆	1718973602 using!! Report Comment
dollface4	1718861447 USING :3 Report Comment
Scavvvy	1710105089 Using Report Comment
Tmndoro	1706933547 using x33 Report Comment
➩【徹】｡･:*˚:✰｡	1705610241 Using!! :3 Report Comment
Momonica	1703050840 using!! for some reason the background is not working though :( Report Comment
SADIE	1702680830 ajjfiskfn this is beautiful using :D Report Comment
tronzger	1698602850 Using! 1!! 1 Report Comment
Yours_truly_the_whale	1693379245 Using Report Comment