← Back to Layouts
Homestuck Trollian

Name: FriendRewind
Author: FriendRewind
Author: zaftigArthropod
Category: 2000s
Created: June 6, 2026
Comments (2)

Suki 07/11/2026 1:16 PM
I love this! :3
zaftigArthropod 07/13/2026 10:30 PM
Thank you]:)
You must log in to comment.
CSS Code

<style>
<!-- (c) Layout created by hubert breast (https://layouts.spacehey.com/layout?id=21638) -->

<style>
  /*
    TROLLIAN THEME
    LAYOUT MADE BY https://spacehey.com/sigmundfreud
    V1.0 May 11 2022
  */
  @import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&family=VT323&display=swap');
  @font-face {font-family: 'header';src: url('https://external-media.spacehey.net/media/smPo_RcgKw6ohoWFs5gvUAFyiNe_1fW3lSRa0eldvH40=/https://file.garden/X1htvgJ0DEp_tp-Z/MSPFA%20other/fontstuck.ttf');}
  /*HEMO2PECTRUM COLOR GUIDE
    RED:#FF0000, RU2T: #a00103, BRONZE: #a25203, GOLD: #a1a100, LIIME: #678900, OLIIVE: #416600, JADE: #078446, TEAL: #008282, CERULEAN: #004182, IINDIIGO:#0021bc, PURPLE: #440a7f, VIIOLET:#6a006a, FU2CHIIA: #99004a
  */
  /*WHAT COLOR II2 YOUR BLOOD TYPE IIT THE HEX CODE IIN THE LIINE AFTER THII2 COMMENT*/
  :root{--blood-color: #0021bc;}

  :root {
      --logo-blue: #d20000;
      --lighter-blue: black;
      --darker-blue: #820000;
      --light-orange: var(--logo-blue);
      --dark-orange: black;
  }

  /*changes spacehey logo with pesterchum logo*/
  img.logo{
      content: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/d2088517-f55c-4148-a27e-3f86a088d9a8/d6kbqgq-a9b912fb-2889-4af5-bf00-6f301fe091ba.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2QyMDg4NTE3LWY1NWMtNDE0OC1hMjdlLTNmODZhMDg4ZDlhOFwvZDZrYnFncS1hOWI5MTJmYi0yODg5LTRhZjUtYmYwMC02ZjMwMWZlMDkxYmEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.52KZA1rVvBEtsy7u3vRenXP28lUswtbQJWISkM1FLxY");
      width: 63px !important;
      height: 63px !important;
  }
  .top{ padding-bottom: 5px !important; padding-top: 8px !important;}

  /*general shennanigans*/
  .container{ width: 100%; }
  main{ padding-left: 10px;padding-right: 10px;}
  body, main, footer{background-color: black !important;}

  /*left side*/
  h1{
      font-family: 'Goldman', monospace !important;
      font-size: 3em !important;
      color: #323232;
      text-transform: uppercase;
      font-style: italic;
      text-shadow: 3px 0px 0 gray;
  }

  .col.left, .links, .top{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
  }

  .links{text-align: center;}

  nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
      content: " ▪ ";
      color: white;
  }

  .col.left{
      width: 30%;
      border: 3px solid var(--darker-blue);
      background-color: var(--logo-blue);
  }

  .col.left a{color: white;}

  .details{padding-bottom: 60px;}

  .details, .mood, .contact, .url-info, .table-section{
      margin-bottom: 10px;
      border: 3px solid var(--darker-blue) !important;
      background-color: black;
      color: white;
  }

  .w-40.left:after {
    display: block;
    content: "";
    background-image: url("https://64.media.tumblr.com/9283c60f44bb5480ab5c20176f0bceda/tumblr_npdr1iLioV1uxvldxo1_400.gifv");
    background-repeat: no-repeat;
    background-size: cover;
    height: 291px;
    background-color: var(--darker-blue);
    background-position: center;
    border: medium var(--darker-blue) solid !important;
  }

  .profile-pic img{
      margin: 20px;
  }

  .online img{
      max-width: 15px;
      max-height: 15px;
      content: url("https://static.wikia.nocookie.net/mspaintadventures/images/e/eb/SburbAlpha_Logo.svg/revision/latest/scale-to-width-down/512?cb=20200130061041")
  }

  .online{color: var(--logo-blue);}

  .links{
      background-color: var(--darker-blue)!important;
  }

  .details-table {background-color: var(--darker-blue);}
  .details-table td, .details-table td:first-child, .details-table a, .details-table p{
      background-color: #B2B2B2;
      color: black !important;
  }
  .details-table td:first-child{
      text-transform: uppercase;
      text-align: center;
      width: 50px;
  }

  /*right side*/
  .col.right{
      background-color: #4d4d4d;
      font-family: Courier, monospace;
      font-size: 1.25em;
  }

  .right .inner{
      background-color: white;
      border: 3px solid var(--darker-blue);
  }

  .blog-preview{padding-left: 10px;}

  .profile-info .inner, .blog-preview{background-color: #B2B2B2; border: 3px solid var(--darker-blue);}

  .right .heading{
      font-family: 'VT323', monospace;
      font-size: 1.25em;
      border-top-left-radius: 20px 20px; border-top-right-radius: 20px 20px;
      background: linear-gradient(90deg, var(--logo-blue) 50%, var(--darker-blue) 100%) !important;
  }

  .right .inner, .count{
      color: gray !important;
  }

  .blurbs p{
    color: var(--blood-color) !important;
    font-weight: bold;
  }
  /*THIS WAS MADE BY https://spacehey.com/sigmundfreud*/
  .profile-info{
      padding: 0px;
      border: none;
  }

  .profile-info .inner{
      padding-right: 35%;
      padding-left: 35%;
  }

  /*comments*/
  .comments-table td, .comments-table td:first-child{background-color:white;}
  .comments-table td:first-child {width: 90px;}
  #comments{margin-top: 30px;}
  .comment-replies{
      border: none;
      padding-top: 0;
      margin-left: 20px;
      margin-top: 0;
    }
  small, .comment-reply b{font-size: 10px !important;}
  table.comments-table{
      display: block;
      height: 400px!important;
      overflow-y: scroll;
  }

  button {
    border: none;
    background-color: rgba(0,0,0, .25);
  }
</style></style>