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

diork	1728090277 using :D Report Comment
Fae/Rose	1727218404 Using this >_< tysm!! Report Comment
SAL <B^3	1726721708 Using :3 Report Comment
Max	1725776116 using!! this is super cool omgg Report Comment
xen	1724282843 using ! Report Comment
sillyJester	1723991634 using!! Report Comment
BeauTHEKOOLEST	1722392266 using:33 Report Comment
gummyfish	1720564356 using!! :] Report Comment
Rose/Mayo	1718443500 Using :] Report Comment
tastelessTraveller	1717925615 using (≡^∇^≡)!! Report Comment
leon .	1717177814 using Report Comment
tormentedAuxiliatrix [TA]	1717157666 using :00 Report Comment
spades	1707277017 using !! yhis rocks so hard Report Comment
KrisCrossApplesauce	1704471831 using it :33 Report Comment
Max:O	1702314174 using! Report Comment
˗ˋ beneficialDisk´ˎ	1701384652 USING ^^ Report Comment
☾ kasper ⁺ ₊	1700790197 using:3333 Report Comment
clubs deuce	1696714166 im def using thank you for making awesome-ness incarnate :D Report Comment
Acute Angle	1691784083 Swag layout, thank you for making it Report Comment
Goth Biker Boy	1688102869 This is cool, I'll use it. Thanks for still making layouts. Report Comment