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

xXx_Mikuru_xXx	1758215113 This looks so cool! I'm totally using this! Report Comment
RatQueen	1757739827 ohhh thankies im so using this >:3 Report Comment
⧼ 𝒮𝔥𝔞𝔡𝓎 ⟡ 𝔇𝔞𝔯𝔩𝔦𝔫 ⧽	1757474218 U S I N G <3 Report Comment
shizoneko	1757212274 used Report Comment
englisch ist mein lieblingsfach	1753875812 using Report Comment
TimekeeperCharles!	1753423863 gonna use this :) Report Comment
Kori 🎸	1753400797 using! Report Comment
peter	1753295775 using Report Comment
Mr Snail	1752528194 Using Report Comment
Naruuuu	1752097027 Usando Report Comment
suede!!	1751062902 using Report Comment
DevilSoRRa	1750940499 using Report Comment
Rain	1750881022 usingggg Report Comment
Pb_j	1750820641 use ing Report Comment
Foreign Mammal	1750647060 using! Report Comment
-𖤐𝔒𝔫𝔶𝔵𖤐- [꥟𖤓꥟]	1749760479 Using :) Report Comment
PaulaAnim8z	1749601158 pretty dope ass design. also using lmao Report Comment
Astronomical ☆	1748986182 using!! Report Comment
Kamiss X3	1745767748 usinggg X3 Report Comment
𝓣𝓸𝓷𝓪☆	1744824254 using !! Report Comment