Derse Homestuck layout

Tags: homestuck, derse

Description:

Made this because I saw a similar layout that inspired me! Floating animation and rose gif is included, but you can remove the rose gif at the very bottom of the code. Pls comment if used (-: you can change the code however you’d like!

Preview:

click on the image for a larger preview

Code:

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

<style>

.online { visibility: hidden; } .online img { content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dfvadmd-bbdb5505-a03f-4787-8fc3-abb2b5ffbfb9.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4MGNlMzAyLTQwY2QtNGQ4ZC04MWJmLWYzZDQ5MjM3ZmUyNVwvZGZ2YWRtZC1iYmRiNTUwNS1hMDNmLTQ3ODctOGZjMy1hYmIyYjVmZmJmYjkucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.MV2JFBXLHlC_gOKrK2l2Ky_nbauTx-DL787idpU7s-M"); animation-name: none; visibility: visible; height: 80px; width: 100px; }


/* navigation bar at the top/the bar that has navigation links */
nav .links {
background-color: transparent;
}

h1, h2, h3, h4,h5,a, p, nav label, .section {color: white;}


h1, h2, h3, h4, h5, a, p, nav label, .section{ text-transform:lowerercase !important;
}

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

.contact .inner a img:before {
font-size: 1em;
display: block
}

.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")
}
.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}

.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend*/

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}

.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}
.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}
.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/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */

content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/25425fb2-bc94-4349-8d8a-6eabb4d6ccd2/ddik124-f2b36cbb-6a50-428b-a345-d702f074371d.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzI1NDI1ZmIyLWJjOTQtNDM0OS04ZDhhLTZlYWJiNGQ2Y2NkMlwvZGRpazEyNC1mMmIzNmNiYi02YTUwLTQyOGItYTM0NS1kNzAyZjA3NDM3MWQuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.xADluVfhn59H4qL76kBSzBt9Dvxbc26omHaxg1iZUw0")

}

body {
background-image: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_421.png);

}
.profile {
background-image: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_418.png);
background-size: cover;
border-radius: 15px;

}

 .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: #C264FF;
   color: black;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: #C264FF;
   color: black;
}


main:before {
width: auto;
margin-bottom: 1px;
border: 1px rgb(103, 65, 136);
height: 160px;
display: block;
content: "";
box-shadow: 0px 0px 5px 1px rgb(186, 144, 198);
background-image: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_427.png);
background-position: center center;
background-size: cover;
}

footer {
border-radius: 15px;
background-image: url(https://homestuck.net/img/resources/assets/uncategorized-assets/Game%20Construct/Derse/image_432.png);
color: #CBC3E3;

}

table.comments-table td {
color: #CBC3E3;
}

:root {
--logo-blue: #bd85e6;
--darker-blue:#65298f;
--lighter-blue: #ffffff;
--even-lighter-blue: #ffd500;
--lightest-blue: #ffffff;
--dark-orange:#ffd500f;
--light-orange: #ffffff;
--even-lighter-orange:#ffd500;
--green: #ffffff;
}

.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>


<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a80ce302-40cd-4d8d-81bf-f3d49237fe25/dfuypmb-0cc83fd9-810e-457e-9a54-5022d46b3b83.gif?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4MGNlMzAyLTQwY2QtNGQ4ZC04MWJmLWYzZDQ5MjM3ZmUyNVwvZGZ1eXBtYi0wY2M4M2ZkOS04MTBlLTQ1N2UtOWE1NC01MDIyZDQ2YjNiODMuZ2lmIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.7hozGRaOR0DTKhFNVbE0Xaf00VWIzqmbGvB7t78Wu50"/>

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 )

WizzardAttack⋆｡° ✮ 🇩🇿	1751038522 using :) Report Comment
Cloud!	1746609512 I love this !!! Gonna test and use!!! Report Comment
AlyStar	1745631639 Using this! Report Comment
alternativeDestroyer	1745437116 is there any way i can get just the floating profile part? i cant find the code anywhere Report Comment try this and add "< style >" with no space between the word and the ">" } .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); } by WizzardAttack⋆｡° ✮ 🇩🇿; 1751300545; Report
Silas :33	1737920581 using ^_^ Report Comment
joey	1735933732 using! thank you! Report Comment
alex .☘︎ ܁˖	1731217025 using Report Comment
˗ˏˋZillyhoo!ˊˎ˗	1730781975 Using!! Report Comment
hereticalFiction	1730266559 using Report Comment
InvaderSchnitzel	1730223773 using lol Report Comment
kaden	1728090277 using :D Report Comment
Fae/Rose	1727218404 Using this >_< tysm!! Report Comment
SAL <B^3	1726721708 Using :3 Report Comment
xen	1724282843 using ! Report Comment
sillyJester	1723991634 using!! Report Comment
serazpar mullan>:]	1722392266 using:33 Report Comment
gummyfish	1720564356 using!! :] Report Comment
Rose/Mayo	1718443500 Using :] Report Comment
tastelessTraveller	1717925615 using (≡^∇^≡)!! Report Comment