rose lalonde/derse spacehey layout

Tags: purple, black, dark, goth, layouts, simple, animation, cursor, homestuck

Description:

this was initially made for a friend, but i haven't seen any rose lalonde lay outs on here, so i thought i should share! feel free to change anything to your liking. credit is appreciated, but there is no obligation to. please comment or add me if you are using, though!

Preview:

click on the image for a larger preview

Code:

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

<style>
body{
color: white;
font-family: serif;
font-size: 14px;
background-image: url(https://cdn.discordapp.com/attachments/1057101158537244733/1142208877199376464/Horrorterror.webp);
background-repeat: no-repeat;
background-size: cover;
text-shadow: 0 0 3px black;
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 4px);
}
100% {
transform: translate(0, -0px);
}
}

p{
color: white;
font-weight: 0;
text-shadow: 0 0 3px black;
font-size: 15px;
}

main:after{
bottom: 13%;
right: 70%;
position:fixed;
pointer-events: none;
content:url(https://cdn.discordapp.com/attachments/1113947346598891711/1142289045695770725/Rose_for_sources_needed_template.png);

}

main{
box-shadow: 0px 0px 4px purple;
height: 650px;
overflow: auto;
background: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_421.png);
background-repeat: no-repeat;
background-size: cover;
}
main:before{
height: 50px;
width: 300px;
display: block;
margin-left: auto;
margin-right: auto;
background-size: cover;
display:block;
 content: " ";
background-image: url();
background-repeat: no-repeat;
border-radius: 2px;
}

@import url('https://fonts.googleapis.com/css2?family=Tangerine&display=swap')

.general-about {
border: 1px solid black;
border-radius: 1px;
padding: 20px;
text-align: left;
color: #ffffff;
background-image: url(https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/dd2382a1-285d-4169-a83e-9e066b29a859/d6dw0m0-3c6cbf60-e102-4ab3-b458-976b738bca5b.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2RkMjM4MmExLTI4NWQtNDE2OS1hODNlLTllMDY2YjI5YTg1OVwvZDZkdzBtMC0zYzZjYmY2MC1lMTAyLTRhYjMtYjQ1OC05NzZiNzM4YmNhNWIucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.Y2emDpjb4JSGIaLNOZcvLH2vGLBRl9Dg2lUWtCN3trk);
background-size: 400px;
box-shadow: 0px 0px 1px #ffffff;
}

h1,h2,h3,h4,h5{
color: white;
font-family:'Tangerine', cursive;
font-size: 18px;
font-weight: 7;
background: url();
text-shadow: 0 0 8px black;
}

footer{
box-shadow: 0px 0px 4px purple;
background: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_198.png);
background-size: cover;
}

:root{
    --logo-blue:#000000;
    --darker-blue:#ffffff ;
    --lighter-blue: #0000;
    --even-lighter-blue:#0000;
    --lightest-blue:#0000;
    --dark-orange:#ffffff;
    --light-orange:#0000;
    --even-lighter-orange:#0000;
    --green: #ffffff;
}

.friends-grid{
text-align:center;
padding:0px!important;
}
.friends .person{
background-color: rgba(255, 255,255, 0.6);
width:90px!important;
display: inline-flex!important;
flex-direction: column-reverse;
margin:5px;
vertical-align: top;
padding-left:5px!important;
padding-top:5px!important;
            box-shadow:0 0 3px purple;
}


.friends .person p{
    text-align: center;
    word-wrap: normal;
}
.profile .friends .person img:not(.icon){
  max-width:80px!important;
transition: transform .5s;
}
.profile .friends .person:nth-of-type(1){
    transform: rotate(-4deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(2){
    transform: rotate(5deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(3){
    transform: rotate(-2deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(4){
    transform: rotate(6deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(5){
    transform: rotate(6deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(6){
    transform: rotate(-1deg); 
transition: transform .5s;
}
.profile .friends .person:nth-of-type(7){
    transform: rotate(3deg);
transition: transform .5s;
}
.profile .friends .person:nth-of-type(8){
    transform: rotate(-3deg);
transition: transform .5s;
}

img:hover {
animation: shake 0.5s;
animation-iteration-count: infinite;

}

@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
20% { transform: translate(-1px, -2px) rotate(-1deg); }
35% { transform: translate(-3px, 0px) rotate(1deg); }
50% { transform: translate(3px, 2px) rotate(0deg); }
70% { transform: translate(1px, -1px) rotate(1deg); }
85% { transform: translate(-1px, 2px) rotate(-1deg); }
100% { transform: translate(-3px, 1px) rotate(0deg); }
}


.profile .friends .person p{
color: purple;
text-shadow:0 0 3px #ffffff;
}


.profile .url-info {
  border: 2px solid #ffffff;
}

.profile .friends .comments-table td {
  background-color: rgba(255, 255, 255, .2);
}

.profile-info{
display: none !important;
}

.blurbs .heading{
display: none !important;
}

.online { 
color: white;
text-shadow:0 0 2px purple;
font-family: 'Tangerine', cursive;
font-size: 15px;
text-transform: lowercase;
 } 

.online img {
content: url("https://cdn.discordapp.com/attachments/1057101158537244733/1142226807941234818/Rose_seething_in_pillow.webp");
animation-name: none; 
visibility: visible; 
height: 45px;
width: 55px;
}

nav .top{
background: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_188.png);
background-size: cover;
background-repeat: no-repeat;
height: 200px;
}

nav .links {
border-bottom: 1px solid #000000;
background:linear-gradient(#5e2390,#b536da 99.5%, #b536da 20% 30%,#b536da);
}

div.profile-pic > img{
box-shadow: 0 0 5px purple;
}

a:link {
color: #ffffff !important;
font-family: bradley hand,cursive;
text-shadow:0 0 2px purple !important;
font-size: 14px;
}

a:hover{
color: #b536da !important;
}

.count {
color: white;
font-family: bradley hand,cursive;
text-shadow:0 0 3px #purple;
font-size: 15px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: rgb(154, 125, 225);
}

::-webkit-scrollbar-thumb {
  background: rgb(101, 29, 209);
box-shadow: 0 0 10px #24c8ff;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(41, 24, 191);
}

.general-about .profile-pic {
position: relative;
transform: rotate(4deg);
margin: 0 20px 8px -5px;
transition: transform .5s;
}

.profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
.blurbs{direction: ltr;}
.friends{direction: ltr;}
.general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
.details-table{direction: ltr;}
.profile .table-section .heading{direction: ltr;}
.details p{direction: ltr;}
.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.url-info{direction: ltr; text-align: left;}
</style>

<style>* {cursor: url(https://ani.cursors-4u.net/cursors/cur-13/cur1149.ani), url(https://ani.cursors-4u.net/cursors/cur-13/cur1149.png), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2018/03/07/purple-electricity-lightning.html" target="_blank" title="Purple Electricity Lightning"><img src="https://cur.cursors-4u.net/cursor.png" alt="Purple Electricity Lightning" style="position:absolute; top: 0px; right: 0px;"/></a>

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

kisa catcat	1734248304 using Report Comment
eye_collector	1732361375 took the friends grid & shake from here, hope you don't mind 👉👈 Report Comment
Neil ciciergia's number 01 defender 🍋☎️ ˶ᵔ ᵕ ᵔ˶	1731805652 uding Report Comment
gyattrizzlerzane12	1721475856 usinh Report Comment
ravi	1712773492 using!! Report Comment
🦔 — 𝐍𝖺𝗇𝗈 ! 🖤	1707959495 Usiiiiing! Report Comment
Yuriii(⁠◍⁠•⁠ᴗ⁠•⁠◍⁠)⁠✧⁠*⁠。💫	1704544848 Usinggg :3 Report Comment
kurt	1704217142 definitely using!! Report Comment
Aurora Borealis	1702243297 Using :33 Report Comment
jade	1700844187 using:D Report Comment
Rose/Nat/Alice	1700676965 Using!! Report Comment
sara :pp	1698301919 USINGG :pp Report Comment
Vertigo	1696861033 using! :3 Report Comment
tomgoes	1696736280 using! Report Comment
stanley!? (ARCHIVED\|\| PLEASE CHECK PROFILE)	1694719516 Gonna use this! Report Comment
HARLEYNE	1694695312 DAWG NONE OF YALL ARE USING IT Report Comment now i am wondering if there is a problem with it! by claude pie; 1695317955; Report there is nothing wrong with the lay out. by claude pie; 1695318075; Report
Bonnie	1694452660 OKAY IM USING THIS GHIS IS SO CUTE TYYY!!! Report Comment
Bonnie	1694452660 OKAY IM USING THIS GHIS IS SO CUTE TYYY!!! Report Comment
mayy y r ,,	1693805255 Usingg Report Comment
@ ;; VINCENT !!	1693519850 using omg its so pretyyyy Report Comment