SynthwaveコピーペーストInspired

Tags: synthwave, retrofuture
Description:

Purple/Pink/Blue hued. Rainbow too.
Animated backgrounds hosted on imgur & imgflip.
Fonts from fontlibrary.
.friends-grid practically untouched apart from text color adjustment.
CSS code may need tightening up for clarity.
How to Use:

Copy the text below including the <style></style> tags.
Paste in your spacehey.com/edit page (the 'About me' section is usually used for this.)
Preview:

click on the image for a larger preview
Code:

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

<style>
  @font-face { /*FONT EXAMPLE LAYOUT:*/
    font-family: '';/*<-how you'll refer to this font*/
    src: url('') format('');
    font-weight: normal;/*bold,bolder,lighter*/
    font-style: normal;/*italic,oblique*/
    font-display: auto;/*block,swap,fallback,optional*/
  }

  @font-face {
    font-family: 'FifteenTwentyRegular';
    src: url('https://fontlibrary.org/assets/fonts/fifteentwenty/04ea6e02d353cdc287833543eb52e0ff/d6dcaa0a604bf91b39fbb5880cc79286/FifteenTwentyRegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'FifteenTwentyOblique';
    src: url('https://fontlibrary.org/assets/fonts/fifteentwenty/04ea6e02d353cdc287833543eb52e0ff/3bce0bc3e96f096bd8d326ce7a6be489/FifteenTwentyOblique.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'FifteenTwentyDemi';
    src: url('https://fontlibrary.org/assets/fonts/fifteentwenty/04ea6e02d353cdc287833543eb52e0ff/9de082a33d3000badd0e0aa86d9e224d/FifteenTwentyDemi.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'FifteenTwentyDemiOblique';
    src: url('https://fontlibrary.org/assets/fonts/fifteentwenty/04ea6e02d353cdc287833543eb52e0ff/fb61f64013eb5d28701a5c47e03571d9/FifteenTwentyDemiOblique.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'XoloniumRegular';
    src: url('https://fontlibrary.org/assets/fonts/xolonium/e00c124f3e1b130e5ec2a7eee2f4f1b8/15f3a5a7a8424c8f843ba6c83bfc360d/XoloniumRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'RabbidHighwaySignIIRegular';
    src: url('https://fontlibrary.org/assets/fonts/rabbid-highway-sign-ii/7433a6ad464133153f375d0238d4b30c/e979d21f3cb66a3ff00092257f7206ac/RabbidHighwaySignIIRegular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'RabbidHighwaySignIIObl';
    src: url('https://fontlibrary.org/assets/fonts/rabbid-highway-sign-ii/7433a6ad464133153f375d0238d4b30c/2715bfb21f30d68345afba97c9a861ec/RabbidHighwaySignIIObl.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @font-face {
    font-family: 'QuinzeRegular';
    src: url('https://fontlibrary.org/assets/fonts/quinze/0271bb7be00ea75dcfa06ef7c7f1054e/4aa59e553c825256d22768d9b9065858/QuinzeRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: auto;
  }

  @keyframes shiftinghues {
    0% {
      background-color: rgba(200,150,50,0.9);
    }
    17% {
      background-color: rgba(185,110,135,0.9);
    }
    33% {
      background-color: rgba(150,50,200,0.9);
    }
    50% {
      background-color: rgba(110,135,185,0.9);
    }
    66% {
      background-color: rgba(50,200,150,0.9);
    }
    83% {
      background-color: rgba(135,185,110,0.9);
    }
    100% {
      background-color: rgba(200,150,50,0.9);
    }
  }

  body {
    background: url('https://i.imgur.com/kYqzRRo.gif') repeat;
  }

  body .container {
    width: 70%;
    border: 20px solid transparent;
    border-image: url(https://i.imgur.com/y53WOCk.png) 5% round;
  }

  body .container nav {
    font-family: 'XoloniumRegular';
    font-size: 1.5em;
    background: url(https://i.imgur.com/y53WOCk.png) no-repeat;
    background-position: center;
    background-size: cover;
  }
  body .container nav .top {
    -webkit-animation: shiftinghues 10s infinite;
    animation: shiftinghues 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
  }
  body .container nav .links{
    background-color: rgba(50,0,50,0.5);
  }
  body .container main {
    background: url('https://i.imgur.com/mt2mSot.jpeg') repeat;
    font-family: 'QuinzeRegular';
    font-size: 1.3em;
  }

  body .container main .profile {
    background: url('https://i.imgflip.com/52rz3s.gif') no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: auto auto;
    opacity: 1.0;
  }

  body > .container > main > .profile > .left > h1,
  body > .container > main > .profile > .left > p,
  body > .container > main > .profile > .left > div,
  body > .container > main > .profile > .right > div {
    background-color: rgba(150,0,100,0.5);
    border-radius: 25px;
    border: 5px solid;
    border-color: #100020;
    color: pink;
    padding: 10px;
  }
  
  body .container main .profile .left > h1{
    font-family: 'RabbidHighwaySignIIRegular';
    text-align: center;
    font-size: 2em;
  }
  body .container main .profile .left .general-about .profile-pic{
    height: 100%;
    margin: 5px;
  }
  body .container main .profile .left .general-about .profile-pic img{
    max-width: max-content;
    max-height: max-content;
    border-radius: 25px;
  }
  
  /*left-column-table as Computer Screen effect attempt*/
  body .container main .profile .left .table-section .inner table.details-table {
    border-collapse: separate;
    background: transparent;
  }
  body .container main .profile .left .table-section .inner table.details-table tbody tr td {
  background-color: rgba(14,41,15,0.9);
  position: relative;
  border: 5px solid transparent;
  border-image-source: url(https://i.imgur.com/y53WOCk.png);
  border-image-slice: 0.5;
  }
  
  body .container main .profile .left .contact .heading,
  body .container main .profile .left .table-section .heading {
    background-color: #3b2d63;
    text-align: center;
    font-family: 'RabbidHighwaySignIIRegular';
    font-size: 1.4em;
    color: white;
  }
  body .container main .profile .right .blurbs .heading,
  body .container main .profile .right .friends .heading,
  body .container main .profile .right .comments .heading {
    -webkit-animation: shiftinghues 10s infinite;
    animation: shiftinghues 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    background: none; /*to override existing animation blocking background*/
    text-align: center;
    font-family: 'RabbidHighwaySignIIRegular';
    font-size: 1.4em;
    color: white;
  }

  
  body .container footer {
    -webkit-animation: shiftinghues 10s infinite;
    animation: shiftinghues 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;

    margin: 0;

    font-family: 'XoloniumRegular';
    font-size: 1.5em;
    color: black;
  }

  body .container main .profile .right .friends .inner .friends-grid .person a p{
    color: white;
  }
  body .container main .profile .left h1 a:link,
  body .container main .profile .left p a:link,
  body .container main .profile .left div a:link,
  body .container main .profile .right div a:link,
  body .container nav .top .right a:link, 
  body .container nav .links li a:link,
  body .container footer p a:link,
  body .container footer ul li a:link {
    color: white;
  }
  body .container main .profile .left h1 a:visited,
  body .container main .profile .left p a:visited,
  body .container main .profile .left div a:visited,
  body .container main .profile .right div a:visited,
  body .container nav .top .right a:visited, 
  body .container nav .links li a:visited,
  body .container footer p a:visited,
  body .container footer ul li a:visited {
    color: lightgray;
  }
  body .container main .profile .left h1 a:hover,
  body .container main .profile .left p a:hover,
  body .container main .profile .left div a:hover,
  body .container main .profile .right div a:hover,
  body .container nav .top .right a:hover,
  body .container nav .links li a:hover,
  body .container footer p a:hover,
  body .container footer ul li a:hover {
    color: black;
  }
    body .container main .profile .left h1 a:active,
  body .container main .profile .left p a:active,
  body .container main .profile .left div a:active,
  body .container main .profile .right div a:active,
  body .container nav .top .right a:active,
  body .container nav .links li a:active,
  body .container footer p a:active,
  body .container footer ul li a:active {
    color: black;
  }
</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 0 of 0 comments ( View all | Add Comment )