Purple Pixels

Tags: simple, dark, purple, black

Description:

Layout based on the design of my blog, simple and monochromatic with a gradient background. Customization instructions provided in code, just ensure that you follow the format of the default values. Changing fonts requires a small amount of manual editing of the code, as setting my fonts through a variable isn't possible. otherwise, all colors and border styles are customizable through variables

EDIT: Added CRT effect, remove code below footer {background-color: var(--bgcolor); color: var(--textcolor);} to disable

EDIT: set h1 and h4 font-weight to normal

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by UmJammerRammy (https://layouts.spacehey.com/layout?id=23147) -->

<iframe id="ytplayer" width="0" height="0" src="https://www.youtube.com/embed/t-iL_4_nTDo?autoplay=1&controls=0&fs=0&loop=1&playlist=t-iL_4_nTDo" frameborder="0" allowfullscreen="">
</iframe>
<!-- NOTE: Change video ID after [/embed/] and [playlist=] to change music, or remove line to disable -->

<style>
  :root {
    --bgimage:        url(https://b.catgirlsare.sexy/zKsThIJdt-D3.gif); /* NOTE: Link to page background image */
    --gradienttop:    rgba(0, 0, 0, 0.9); /* NOTE: Beginning color for background gradient, transparent */
    --gradientbottom: rgba(50, 0, 100, 0.4); /* NOTE: Bottom color for background gradient, transparent */
    --bgcolor:        #0a000f; /* NOTE: Color of profile text area */
    --textcolor:      #ffffff; /* NOTE: Color of text */
    --color1:         #643cdd; /* NOTE: First color, links, header */
    --color2:         #b366ff; /* NOTE: Second color, titles */
    --border1:        double #643cdd 4px; /* NOTE: Border of whole avatar area, [border-style #RRGGBB width] */
    --border2:        double #b366ff 4px; /* NOTE: Border of inner boxes, format same as above */
    --border3:        solid #643cdd 1px; /* NOTE: Border of inner boxes, format same as above */
  }
  @font-face {font-family: 'Text'; src: url(https://b.catgirlsare.sexy/-jZqkIzSGBH2.woff2) format('woff2');}
  @font-face {font-family: 'Title'; src: url(https://b.catgirlsare.sexy/EIeC3AtPypcE.woff2) format('woff2');}
  body {
    background: linear-gradient(var(--gradienttop), var(--gradientbottom)),
    var(--bgimage) repeat top left; margin: 20px; background-attachment: fixed;
    font-smooth: never!important;
    -webkit-font-smoothing : none!important;
  }
  main {
    background-color: var(--bgcolor); color: var(--textcolor);
    font-family: "Text"; font-size: 16px!important;
  }
  .top, nav .links {background-color: var(--color1)!important;}
  .container {outline: var(--border1); background-color: var(--bgcolor);}
  .profile-info, .inner h3 {margin: 0; padding: 0px 5px; justify-content: flex-end;}
  h1 {font-family: "Title"; font-size: 2em!important; color: var(--color2); font-weight: normal!important;}
  a {color: var(--color1)}
  a:hover, .person p:hover  {background-color: var(--textcolor)!important; color: var(--color1);}
  main p {font-size: 16px!important;}
  h4 {color: var(--color2)!important; font-size: 1.1em!important; font-weight: normal!important;}
  .heading {background-color: var(--color2)!important;}
  .heading h4, .more {color: var(--textcolor)!important;}
  .profile .contact, .profile .url-info, .profile .table-section, .blurbs, .friends {border: var(--border2);}
  td {background: none!important;}
  .details-table td:first-child {color: var(--color2);}
  .person p, .count {color: var(--color1)!important;}
  #comments {margin-top: 20px;}
  .comments-table, .comments-table td, .comment-replies {border: none; outline:none;}
  .comments-table, .comments-table td, .comment-replies {border: var(--border3)!important;}
  footer {background-color: var(--bgcolor); color: var(--textcolor);}
  @keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }
  @keyframes textShadow {
    0% {
      text-shadow: 0.8389924193300864px 0 1px rgba(100,100,100,0.4), -0.8389924193300864px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    5% {
      text-shadow: 1.6px 0 1px rgba(100,100,100,0.4), -1.6px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    10% {
      text-shadow: 0.04956275843481219px 0 1px rgba(100,100,100,0.4), -0.04956275843481219px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    15% {
      text-shadow: 0.80218538552878136px 0 1px rgba(100,100,100,0.4), -0.80218538552878136px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    20% {
      text-shadow: 2px 0 1px rgba(100,100,100,0.4), -2px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    25% {
      text-shadow: 1.2125630401149584px 0 1px rgba(100,100,100,0.4), -1.2125630401149584px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    30% {
      text-shadow: 0.7015590085143956px 0 1px rgba(100,100,100,0.4), -0.7015590085143956px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    35% {
      text-shadow: 1.4px 0 1px rgba(100,100,100,0.4), -1.4px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    40% {
      text-shadow: 0.9px 0 1px rgba(100,100,100,0.4), -0.9px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    45% {
      text-shadow: 0.6px 0 1px rgba(100,100,100,0.4), -0.6px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    50% {
      text-shadow: 0.08084290417898504px 0 1px rgba(100,100,100,0.4), -0.08084290417898504px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    55% {
      text-shadow: 2px 0 1px rgba(100,100,100,0.4), -2px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    60% {
      text-shadow: 0.8px 0 1px rgba(100,100,100,0.4), -0.8px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    65% {
      text-shadow: 1px 0 1px rgba(100,100,100,0.4), -1px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    70% {
      text-shadow: 0.48874025155497314px 0 1px rgba(100,100,100,0.4), -0.48874025155497314px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    75% {
      text-shadow: 0.8948491305757957px 0 1px rgba(100,100,100,0.4), -0.8948491305757957px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    80% {
      text-shadow: 0.0833037308038857px 0 1px rgba(100,100,100,0.4), -0.0833037308038857px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    85% {
      text-shadow: 0.09769827255241735px 0 1px rgba(100,100,100,0.4), -0.09769827255241735px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    90% {
      text-shadow: 0.443339761481782px 0 1px rgba(100,100,100,0.4), -0.443339761481782px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    95% {
      text-shadow: 0.1841838852799786px 0 1px rgba(100,100,100,0.4), -0.1841838852799786px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
    100% {
      text-shadow: 0.6208764473832513px 0 1px rgba(100,100,100,0.4), -0.6208764473832513px 0 1px rgba(100,100,100,0.4), 0 0 3px;
    }
  }
  body::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker 0.15s infinite;
  }
  body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.4) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
  }
  body {
    animation: textShadow 1.6s infinite;
  }
</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 215 comments ( View all | Add Comment )

miikke	1733109644 usingg!! x3 Report Comment
Lau	1732589186 Using!! Report Comment
xXsn4keeyesXx	1732408583 using :3 Report Comment
Ozzytherat	1731187609 using Report Comment
𝓯𝓻𝓮𝓪𝓴𝔂 lia	1730753917 using Report Comment
rara (revamp)	1730410855 using Report Comment
﹒⇆﹒★ . DaNa !﹒ᶻz	1730065859 Using Report Comment
soraissdead	1729642806 using Report Comment
Abril	1728988253 Using <333 >.< Report Comment
majus.fm☣	1728179797 using!! Report Comment
Kaitlyn	1727746440 Using!!!! Report Comment
✩°｡⦻MIKEY⦻🦑🐇	1726003128 USINGG! Report Comment
miauk17	1725423929 using! Report Comment
𝕽𝖆𝖋𝖆𝖊𝖑	1724437421 The theme is a bit heavy because of the animations, but nothing that gets in the way. Congratulations on your work! Report Comment
Chaotic_Goblin	1724286858 Using! Report Comment
renny!! 🎄	1723775315 using! Report Comment
theangel	1723563221 Using!! Thank you! Report Comment
†deian	1723263594 using!! Report Comment
LavenGrey	1722990397 Using Report Comment
ೄྀSilas	1722755485 Using Report Comment