Windows XP rainbow theme

Tags: #windows #nostalgia

Description:

ever wanted to be silly and web tech? well here's a theme for you! the theme consists of silly goober energy such as rainbows and the windows bg V__V. Sit down and enjoy the grains within the screen as they flow through your screen! don't eat the rainbows though, even though there very crunchy! Enjoy the theme! og theme: https://layouts.spacehey.com/layout?id=6376

Preview:

click on the image for a larger preview

Code:

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

<style>

html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://thumbs.gfycat.com/QuaintOblongChickadee-size_restricted.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
} </style>


<style>


/*Intro GIF Animation (fade out)*/
  body:before {
    content: " ";
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100;
    background-image: url('https://media.tenor.com/7EVJ9daaZ_cAAAAC/windows-xp-loading-screen.gif'); /*gif link here*/
    background-size: cover;
    background-repeat: no-repeat;
    animation: yourAnimation 4s ease 0s 1 normal forwards;
    pointer-events: none;
  }
  @keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*whole body changes*/ 
  body {    
    background-image: url('https://images.hdqwalls.com/download/windows-xp-bliss-4k-lu-2048x1152.jpg');/*background for whole page*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: 'Courier New', monospace;
    height: 100%;
    color: #ffffff;
    h1: #ffffff;
    h2: #ffffff;
    h3: #ffffff;
    h4: #ffffff;
    li: #ffffff;
  }

/*top search bar customisation*/
  .search-wrapper input[type=text] {
    background-color: rgba(21, 23, 26, 0.65) !important;
    border: 1px dotted var(--headers) !important;
    color:var(--names) !important;
    border-radius: 10px !important;
  }
  button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    font-family: var(--font-family) !important;
    background-color:rgba(21, 23, 26, 0.65) !important;
    color:var(--headers) !important;
  }

/*top header customisation*/
  nav{
    background-color:var(--box_color_and_seethru); !important;
    border-radius: 0px 0px var(--curve) var(--curve); !important;
  }
  nav ul{
    background:none !important;
    font-size: 10px;
  }
  nav ul a img, .mood a img{
    display:none !important;
  }
  .top{
    background-image:url("https://i.pinimg.com/originals/e1/9f/c4/e19fc4f92bc65978ceac0213a1abaf65.gif") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(21, 23, 26, 0.65); !important;
  }

/*gets rid of URL info box*/
  .url-info{
    display:none !important;
  }

/*changing color of links in mood box*/
  .mood a{
    color:#f9471a;
  }

/*gets rid of white background behind center of page*/
  main{
    background: rgba(0, 0, 0, 0) !important;
  }

/*changing background of profile & changing general text to white*/
  .profile {
    background:rgba(21, 23, 26, 0.95);
    color: #ffffff;
  }

/*customising contact box*/
  .profile .contact .heading{
    background:#f9471a;
    text-align: center;
  }
  .profile .contact {
    border-radius: 15px;
    border:2px solid rgba(0, 0, 0, 0);
    background-image: url(https://gifdb.com/images/file/rainbow-moving-formation-erpkofl1fn2ly5sp.gif);
    background-position: right top;
    background-repeat: repeat;
    background-attachment: scroll;
    Height:180px;
    color: white;    text-shadow: 1px 1px 2px black, 0 0 25px Blue, 0 0 3px Red;
  }
  .contact a{
    color: #ffffff;
  }
  .contact a:hover{
    color: #b5b5b5;
  }

/*customising interests box*/
  .profile .table-section{
    border:1px solid #f9471a;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#f9471a;
    border: 1px solid #f9471a;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
  .profile .table-section .details-table td:first-child{
    background: rgba(0, 0, 0, 0);
    width: 10%; /*gets rid of interest category column*/
  }
  .profile .table-section .details-table td:first-child p{
    color: rgba(0, 0, 0, 0);
    font-size: 1px; /*gets rid of interest category text*/
  }

/*customising header text for interest titles*/
  .list-heading{
    color:#f9471a;
    font-family: 'Courier New', monospace;
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    text-align:center;
  }

/*getting rid of the blurbs headings cause I dont like them*/
  .profile .blurbs .heading{
    background: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    text-size: 1px;
    height: 2px;
  }
  .col.right .heading h4{
    color:  rgba(0, 0, 0, 0);
    text-size: 1px;
  }
  .profile .blurbs .section h4 {
    display: none;
  }

/*changing font size and centering it for stuff on right side of page*/
  .profile .blurbs .section p {
    font-size: 15px;
    text-align: center;
  }

/*changing color of links on the right side of the page*/
  .col.right a{
    color: #f9471a;
  }    

/*customising friend space heading*/
  .profile .friends .heading{
    background: #f9471a;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 2px black
  }

/*making the comments section have a scroller*/
  .comments-table{
    display: block;
    height: 380px;
    overflow-y: scroll;
    Border-radius: 15px;
    background-color: rgba(21, 23, 26, 1);
  }

/*customising comments section*/
  .comments-table td:first-child{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td:first-child a{
    color: #f9471a;
  }
  .comments-table td:first-child a:hover{
    color: #ffffff;
  }
  .comments-table td{
    background-color: rgba(21, 23, 26, 1);
  }
  .comments-table td a{
    color: #f9471a;
  }
  .comments-table td a:hover{
    color: #ffffff;
  }
  
/*creating 'top 8' section*/
 .top-eight {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  background-color: transparent;
  color: #444;
  margin: 0px;
  width: 100%;
  }
  .top-row{
    grid-column: col 1 / span 4;
    grid-row: row 2;
  }
  .bot-row{
    grid-column: col / span 4;
    grid-row: row 3;
  }

/*customising header for top 8*/
  .top-eight-header {
    grid-column: col 1 / span 4;
    grid-row: row 1;
    background-image: url(https://64.media.tumblr.com/4b6e1a2c4d41a369a02bf475ee4ebf03/4de4240a3de9434c-62/s540x810/c38b9b8bf6b0647ae74269acaf987ba27dc0a002.gif);
    height:100%;
    background-color: rgb(249, 197, 108);
    color: rgb(240, 84, 73);
    font-weight: bold;
    padding: 4px !important;
  }
  .top-eight-header h2 {
    padding-bottom: 0px !important;
    margin-botton: 0px;
    font-family: 'Courier New', monospace;
    color: #d6d6d6;
    text-align: center;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  }

/*customising peoples images for top 8*/
  .profile .top-eight .person img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
  }

/*creating a better layout for social links*/
  .social-logos{
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(4, [col] auto ) ;
    grid-template-rows: repeat(1, [row] auto  );
    background-color: transparent;
    color: #444;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    align-items: center;
    width: 100%;
    grid-column: col 1 / span 4
    grid-row: row 1;
    position: relative;
  }

/*customising images for social links*/
  .social-logos img{
    border-radius: 50%;
    width: 50px;
    height: 50px;
  }

/*making social images get slightly bigger when you hover over them*/
  img.logohover:hover,
  img.logohover:focus{
    width: 53px;
    height: 53px;
    position: abolute;
  }

/*customising the footer of the page*/
  footer{
    background:rgba(21, 23, 26, 0.6);
    a: #ffffff;
    color: #ffffff;
  }
    .online {
        content: url("https://cur.glitter-graphics.net/pub/2880/2880088iu73li7kgw.png");}

/*above is your online icon*/ 

<!--beginning of content for right hand side-->



<p><p> <--main about me text-->
<br/> <!--line break for space-->


</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 6 of 6 comments ( View all | Add Comment )

⭐️wurm⭐️	1711141517 Using! Report Comment
Crabby :3	1708382476 using Report Comment
_SHR1MPIIF0XX_	1704848651 using :3 Report Comment Tysm by INFRARED; 1704857080; Report
Nace	1704739375 using!!!!! Report Comment Thank u by INFRARED; 1704749370; Report
ozi B)	1703898919 usingg!!!! Report Comment Yay! ^^ by INFRARED; 1704197773; Report
joey	1682256060 uses xd Report Comment tysm!! i love it when ppl use my stuff ^__^ by INFRARED; 1682351486; Report