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

Yixso	1785071254 using Report Comment
･῾ ᵎ⌇ ⁺◦ 💮 ✧.	1781900082 USANDO XD Report Comment
𖤐𝕯𝖊𝖘𝖎𝖗𝖆𝖊𖤐	1780540726 Using! <3 Report Comment
Charlie_ss	1775049414 usingg Report Comment
beachibunni	1772002059 using!!! :D Report Comment
SEXBEZSMS	1771614953 SO COOL!!!! Report Comment
katehasissues	1767920113 USINGG Report Comment
S4lty0c3an2316	1767132175 USING ITTTT Report Comment
Esmetan	1767083253 gonna use ty Report Comment
Hirushka	1766799257 usingg))) Report Comment
Axter	1766449718 USING! TYSM! Report Comment
Frank	1764187697 Using Report Comment
maoonxn	1763600181 using Report Comment
𐔌 𓏵 ⋆ . Sora͟ 𓂃 𐦯	1762435220 Usando ! Report Comment
SamTheHam	1760800520 using!! tnx! Report Comment
_XKayoo222X_	1759601707 Using! Report Comment
Marciano	1759206439 Usando! Report Comment
Cherri	1759161123 I forgot to comment when I first used this. This is a baller layout! ദ്ദി/ᐠ｡‸｡ᐟ\ Report Comment
Aubrey	1759021818 Using! Looks so cool! :D Report Comment
M1dn1ght_Mob1an!	1758395454 Usin' :D Report Comment