Roxy Homestuck layout

Tags: homestuck

Description:

Simple pink and black Roxy lalonde layout! Includes floating profile animation, roxy online symbol, and a roxy gif banner that you can change the background image url at the top of the code to whatever you want! You can change the code however you’d like, comment if used! (-:

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=30708) -->

<style>

main:before {
width: auto;
margin-bottom: 1px;
border: 1px solid black;
height: 165px;
display: block;
content: "";
box-shadow: 0px 0px 10px 1px #ff6fe5;
background-image: url('https://media.tenor.com/5VQY_47VrnAAAAAC/roxy-lalonde-smirk.gif');
background-position: center center;
background-size: cover;
}
</style>


<style>.online { visibility: hidden; } .online img { content: url("https://media.tenor.com/uaynt7hSW1YAAAAi/roxy-lalonde-homestuck.gif"); animation-name: none; visibility: visible; height: 130px; width: 90px; }</style>


<style>
body {
font-family: Courier New, monospace;
background-color: black;
}
.logo {
filter: sepia(100%) hue-rotate(195deg) saturate(110);

}
#q, button {
color: #FF5BD6;
background-color: black;
border: 1px solid #FF5BD6;
font-family: inherit;

box-shadow: 0px 0px 10px #ff6fe5;

}
p, i, b, .count {
color: #FF5BD6 !important;
}
a, .profile .friends .person p, .logout-btn {
color: #FF5BD6 !important;
text-decoration: underline !important;

}
.container {
margin: 0 auto 0;
}
.icon {
display: none;
}
nav, nav .links a {
color: #FF5BD6;
}
nav .top {
margin-top: 2px;
background: none;
background-color: black;
border: 2px dotted #FF5BD6;
border-bottom: none;

box-shadow: 0px 0px 10px #ff6fe5;

}
nav .links {
background-color: black;
border: 2px solid #FF5BD6;

box-shadow: 0px 0px 10px #ff6fe5;

}

main {
background: black;
color: #FF5BD6;
border-left: 2px dotted #FF5BD6;
border-right: 2px dotted #FF5BD6;

box-shadow: 0px 0px 10px #ff6fe5;

}
.heading, .url-info {
color: #FF5BD6 !important;
background: none;
background-color: black !important;
border: 2px solid #FF5BD6 !important;

box-shadow: 0px 0px 10px #ff6fe5;

}
.inner {
color: #FF5BD6 !important;
border: 2px dotted #FF5BD6;
border-top: none;

box-shadow: 0px 0px 10px #ff6fe5;

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

box-shadow: 0px 0px 10px #ff6fe5;

}
.profile-info .inner {
border: none;

box-shadow: 0px 0px 10px #ff6fe5;

}
.friends .inner {
border-bottom: none;

box-shadow: 0px 0px 10px #ff6fe5;

}
#comments {
border-bottom: 2px dotted #FF5BD6;

box-shadow: 0px 0px 10px #ff6fe5;

}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;

box-shadow: 0px 0px 10px #ff6fe5;

}

/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5552cb82-6fb8-4c7f-9d29-a10b2e5daf6c/dbs3spb-59878339-1c7d-4535-a013-3a68531f41dd.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzU1NTJjYjgyLTZmYjgtNGM3Zi05ZDI5LWExMGIyZTVkYWY2Y1wvZGJzM3NwYi01OTg3ODMzOS0xYzdkLTQ1MzUtYTAxMy0zYTY4NTMxZjQxZGQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.5i_S735s_TThb_nNykHO2ARQwlP2Sm1IpX9rmimEOrA")
}

.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #FF5BD6 !important;
}
.details-table {
margin: 2px;
}
.details-table, td {
border: 1px solid #FF5BD6;
border-collapse: collapse;

box-shadow: 0px 0px 10px #ff6fe5;

}
td {
color: #FF5BD6 !important;
background: none;
background-color: black !important;
} 
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 2em;
}
footer {
background: black;
border: 2px dotted #FF5BD6;
box-shadow: 0px 0px 10px #ff6fe5;

}
footer p {
color #FF5BD6 !important;

}
.comments-table {
border: none;
border-collapse: collapse;

box-shadow: 0px 0px 10px #ff6fe5;

}
.comment-replies {
border: 1px solid #FF5BD6;
margin: 2px;

box-shadow: 0px 0px 10px #ff6fe5;

}
nav .info {
background: 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>

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

🍸 Roxy / Arlo 💕	1746657954 Using ! ^^ Report Comment
♰ ρєє gιяℓ ♰ (✴️)	1745628597 Using! Report Comment
HEE HEE	1745197112 using Report Comment
crunxxy	1736067367 usin tyyy ! :3 Report Comment
GENO - SHADZ [WIP]	1734923088 USING !! Report Comment
HAL	1734013904 Using. Report Comment
𝜗𝜚 parker / venus !! ☆	1732247237 using!!!! Report Comment
@ KOIKAIS #	1730157129 Using! Report Comment
JADE!	1728775897 using i thnk Report Comment
Mellysa (МЕФушек)0)))	1728046173 usinn Report Comment
MRDOOMBRINGER!	1726237619 usin!!! :3 Report Comment
tipsyGnostalgic	1719866622 using!!!! Report Comment
Tosia	1716755456 using!! :3 Report Comment
Shrample!	1710315182 USING!!!!! Report Comment
K40R1	1709920306 Using^⁠_⁠^ Report Comment
lesbian scott the woz	1709678664 using thank yew Report Comment
donnie! x_x	1709606621 usinnggg!!! Report Comment
@ ;; VINCENT !!	1709155751 usinngg Report Comment
liam	1707681328 using tyy Report Comment
EpicEnby	1707277535 gonna use! Report Comment