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

CASEY !!	1732247237 using!!!! Report Comment
@ KOIKAIS #	1730157129 Using! Report Comment
DOVE!	1728775897 using i thnk Report Comment
Mellysa (МЕФушек)0)))	1728046173 usinn Report Comment
Jade! <3	1726237619 usin!!! :3 Report Comment
tipsyGnostalgic	1719866622 using!!!! Report Comment
weissluv	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
riker lalonde 🍷	1709155751 usinngg Report Comment
liam	1707681328 using tyy Report Comment
EpicEnby	1707277535 gonna use! Report Comment
jade	1700844334 ushingg Report Comment
lesbian scott the woz	1696300972 using! :3 Report Comment
cyberDecay	1694442095 using ! Report Comment
☾ kasper ⁺ ₊	1693967316 using!! :3 Report Comment
Gumi^^!	1690598023 USING!!! :333 Report Comment
sam﹗	1689731253 using :3 Report Comment