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

𝓣𝓸𝓷𝓪☆	1744824254 using !! Report Comment
olimonflowuck	1743616924 Using!! Report Comment
kami	1742188456 using!! Report Comment
Felix	1741135324 using <3 Report Comment
Cavalo	1741051321 Using! Report Comment
Xx_R@wr.X3_xX	1740750169 Using!!! <3 Report Comment
𝖐𝖞𝖆𝖗𝖆𐙚	1740430118 usando Report Comment
Milow	1739670240 usingggg thx!! Report Comment
๑ Polvo ! ᰍ	1738506054 usingg Report Comment
Ben	1738031665 using! Report Comment
Ben	1738031637 using! Report Comment
eingelofdark'ness	1737004288 using Report Comment
vaudevillechimera	1736613414 using!! Report Comment
Proy	1736612394 USING!!!! Report Comment
Gab Gabu	1736146804 Using!!! Report Comment
Cassandra	1734958848 using!! Report Comment
ETAZO1	1734627711 edited it somewhat, using!! superb Report Comment
Vio	1734527858 using! Report Comment
EnderLaith	1734413277 using! Report Comment
beesilisk	1733891364 using (& customized it a bit, but i love the original too!) Report Comment