Heartslabyul Layout

Tags: heartslabyul, alice in wonderland, twisted wonderland, twst, riddle rosehearts, ace trappola, deuce spade, cater diamond, trey clover

Description:

A layout for fans of Heartslabyul dorm from Disney’s Twisted Wonderland! This layout features an intro gif, animated background and header, customizable interest titles, custom cursor, and autoplayed music! To change the interest titles, just change where it says “Insert topic here” in the code to whatever you want your topics to be! If you want them to stay the same, remove this section of code:

:root {

--topic1: "Insert topic here";

--topic2: "Insert topic here";

--topic3: "Insert topic here";

--topic4: "Insert topic here";

--topic5: "Insert topic here";

--topic6: "Insert topic here";

}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{

color:var(--links) !important;

letter-spacing:normal !important;

text-shadow: 2px 2px black !important;

filter: brightness(95%) !important;

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{

content: var(--topic1);

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{

content: var(--topic2);

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{

content: var(--topic3);

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{

content: var(--topic4);

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{

content: var(--topic5);

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{

content: var(--topic6);

}

To change the music, replace the hashtags in the bottom section of code with the ending of a YouTube video link. For example, if you were to use https://www.youtube.com/watch?v=0jpF82YRrPY , you would take 0jpF82YRrPY and paste it there. If you need any help with anything please let me know! I also make custom userboxes if you want some!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Ashdown the Beloved (https://layouts.spacehey.com/layout?id=21621) -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
p{
   font-family: 'Courgette', cursive;
   font-size: 20px;
   color: #bfac65;

}
h1, h2, h3, h4, h5,{
   font-family: 'Courgette', cursive;
   font-size: 200%;
   color: #bfac65;

}
     body{ background-image: );
background-image:url(https://c.tenor.com/w-yeIrNmK88AAAAC/rose-aesthetic.gif);
Background-size: 100%;
background-color: #a60000;
}

main:before {
   width: auto;
   margin-bottom: 25px;
   border: 1px solid black;
   height: 250px;
   display: block;
   content: " ";
   box-shadow: 0px 0px 5px 1px #a60000;
   background-image: url(https://64.media.tumblr.com/2c378ef588a7b39a6e0cca6b4b06d84f/45c367ea37af0a77-2c/s540x810/4358f5134a71eac56035a5702671ecadd264e03b.gifv);
   background-position: center center;
   background-size: cover;
}

footer{
   color: ;
}

:root {
   --logo-blue: #a60000;
   --darker-blue: #a60000;
   --lighter-blue: #6e0000;
   --even-lighter-blue: ;
   --lightest-blue: ;
   --dark-orange: #bfac65;
   --light-orange: #6e0000;
   --even-lighter-orange: #a60000;
   --green:  #bfac65;
}
main {
    border-radius: 0 0 15px 15px; 
    border: 2px solid rgba(0,0,0,0.7); 
        background-color: #1c1c1c; 
}

.profile h1 {
    font-size: 2em;
    color: #6e0000;
    font-family: 'Courgette', cursive;
    text-shadow: 3px 3px #000000;
}

::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }
.blurbs .inner{

text-align: center !important;

}
:root {

  --topic1: "Insert topic here";
  --topic2: "Insert topic here";
  --topic3: "Insert topic here";
  --topic4: "Insert topic here";
  --topic5: "Insert topic here";
  --topic6: "Insert topic here";


 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}
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/7f1a4de880269a5c7224a69d483c792a/151df089e3f6c571-7b/s400x600/3d0fa4d7910a8abae8dcc6f2db2cfea6f45da861.gifv');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;

}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

}

</style>

<style>* {cursor: url(https://cur.cursors-4u.net/sports/spo-4/spo379.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/02/27/poker-cards.html" target="_blank" title="Poker Cards"><img src="https://cur.cursors-4u.net/cursor.png" alt="Poker Cards" style="position:absolute; top: 0px; right: 0px;"/></a>

<iframe width="0" height="0" src="https://www.youtube.com/embed/######//?&;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>

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