Layout published by Ashdown 🌓🏛️

published 1652238211

Add to Favorites

View Layouts

View Profile

Report Layout

Savanaclaw Layout!

Tags: savanaclaw, the lion king, twisted wonderland, twst, leona kingscholar, jack howl, ruggie bucchi

Description:

A layout for fans of Savanaclaw 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 🌓🏛️ (https://layouts.spacehey.com/layout?id=21623) -->

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

}
h1, h2, h3, h4, h5,{
   font-family: 'Shadows Into Light', cursive;
   font-size: 200%;
   color: #000000;

}
     body{ background-image: );
background-image:url(https://media0.giphy.com/media/5rI56FGk3HTaBTkePi/giphy.gif);
Background-size: 100%;
background-color: #ffc012; 
}

main:before {
   width: auto;
   margin-bottom: 25px;
   border: 1px solid black;
   height: 250px;
   display: block;
   content: " ";
   box-shadow: 0px 0px 5px 1px #ffde82;
   background-image: url(https://i.pinimg.com/originals/5b/3e/f9/5b3ef9c6c08137ed8d4e3a786f2c95ad.gif);
   background-position: center center;
   background-size: cover;
}

footer{
   color: ;
}

:root {
   --logo-blue: #ffd257;
   --darker-blue: #ffd257;
   --lighter-blue: black;
   --even-lighter-blue: ;
   --lightest-blue: ;
   --dark-orange: #ffd257;
   --light-orange: #8c6700;
   --even-lighter-orange: ;
   --green: ;
}
main {
    border-radius: 0 0 15px 15px; 
    border: 2px solid rgba(0,0,0,0.7); 
        background-color: #59513b; 
}

.profile h1 {
    font-size: 2em;
    color: #ffde82;
    font-family: 'Shadows Into Light', 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/62fd98164ed9c73a48a82e619cae5c78/7d29504b79774de1-63/s540x810/a559644e010fe627b2a902b8aabfecfe760ae6c9.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/cursors/cur-4/cur354.ani), url(https://cur.cursors-4u.net/cursors/cur-4/cur354.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/06/18/animated-transparent-chrome-glass-wait.html" target="_blank" title="Animated Transparent Chrome Glass Orange - Wait"><img src="https://cur.cursors-4u.net/cursor.png" alt="Animated Transparent Chrome Glass Orange - Wait" 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 2 of 2 comments ( View all | Add Comment )

Dat_Kitty

1678856095

my fave dorm tbh

Report Comment

Red

1677440787

yes >:}

Report Comment