Windows Themed Layout

Tags: layout, windows, old web, webcore

Description:

Windows Themed layout with gray gradient boxes, a stars overlay (over entire profile, can be changed), custom online icon, custom font, and code that I tried to organize as best as possible. The Profile Link is hidden in this layout but code can be removed. Just comment if using! !UPDATE Added song code

Preview:

click on the image for a larger preview

Code:

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

<style>
/*font stuff*/
@import url('https://fonts.googleapis.com/css2?family=Handjet&family=Slabo+27px&display=swap');
body{font-family: 'Handjet', slabo;}
body, h1, h2, h3, h4{font-family: 'Handjet', slabo; font-size: 19px}
.mood p{font-family: 'Handjet', slabo; font-size: 20px}
.top, .top a{font-family: 'Handjet', slabo; font-size: 18px!important;}
a, .friends, .table-section td{font-family: 'Handjet', slabo; font-size: 18px}
.links{font-family: 'Handjet', slabo; font-size: 20.9px}
.logout-btn{font-family: 'Handjet', slabo!important; font-size: 18px!important;}

.heading{       
    background: linear-gradient(to bottom, #0033cc 0%, #6699ff 100%)!important;   
border-radius: 5px 5px 0 0 !important; 
border: 1px ridge #0033cc!important;
    }
body{        
    background-image: url('https://d7hftxdivxxvm.cloudfront.net/?quality=80&resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=910')  !important;
background-size: cover;
    background-attachment: FIXED !important;
    background-repeat: REPEAT !important;
    background-position: CENTER  !important;        
    }
 main{
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;        
    }
 .top{       
    background: linear-gradient(to bottom, #0033cc 0%, #6699ff 100%)!important;
border-radius: 5px 5px 0 0 !important; 
border: 1px ridge #0033cc!important;     
    }
.links{        
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border: 1px ridge #0033cc!important;
border-radius: 0 0 5px 5px;       
    }
.top input{      
    background-color: Color!important; 
    }
h1{      
    background-color: color!important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    }
.online{content: url("http://www.myspacegens.com/images/online_now/311.gif") !important;}
.general-about .profile-pic img{
border-radius: 100px;
border: 1px ridge #0033cc!important;
}
.general-about{     
        background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border: 1px ridge #0033cc!important;
border-radius: 5px   
    }
.mood{       
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border: 1px ridge #0033cc!important;
border-radius: 5px   
    }
 .contact{       
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border: 1px ridge #0033cc!important;
border-radius: 5px !important;
    }
 table.details-table{ 
background-color: #CED8E0!important;       
border: 0px solid #CED8E0!important;   
    }
    .profile .details-table td{     
    background-color:#CED8E0;
border: 1px solid black !important;   
border-radius: 5px 5px 0 0 !important;  
    }
.table-section {
border-radius: 5px;
border: 1px ridge #0033cc!important;
}
.blog-preview{        
    background-color: COLOR !important;   
    }
 .blurbs{    
    color: black!important;
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border-radius: 5px 5px 5px 5px !important; 
border: 1px ridge #0033cc!important;
    }
.friends{        
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border-radius: 5px 5px 5px 5px !important;
border: 1px ridge #0033cc!important;
    }
.comments-table td{        
    background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border-radius: 5px 5px 5px 5px !important;
border: 1px ridge #0033cc!important;
    }
footer{
   background: linear-gradient(to bottom right, #ced8e0 0%, #9fadb9 100%);
border-radius: 5px 5px 5px 5px;   
border: 1px ridge #0033cc!important;      }

/*url hiding code*/
.url-info{display: none !important;}

/*text colors*/
.friends .heading{color: white!important;}
.blurbs {font-color: black!important;}
.blurbs .heading{color: white!important;}
.profile .blurbs .section h4{color: black!important;}
.profile .friends .person img:not(.icon){border: 1px ridge #0033cc!important;  border-radius: 100px;}
.profile .friends .person p{color: black!important;}

/*stars overlay*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://bestanimations.com/media/stars/2003945031lemat-colorful-stars-falling-gif.gif);
  background-size: 200px !important;
  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%) }
}
/*stars overlay end*/

>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/dGdiOL2VH0M/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>

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

♪ COSMO/OREL ♪	1712843482 using Report Comment
Mali	1711239129 using >< Report Comment
Luchi!! ⁠☆	1709283558 usandooo Report Comment
gumball [profile is a wip]	1708107833 using!! Report Comment
SmurtshBox !	1706379287 using :p Report Comment
sug4rfxngs	1702561983 Using Report Comment
Tord	1701627926 might use later! Report Comment
fag	1698610867 Using Report Comment
Eppy boi! :3 🎤 ☆ミ	1696297731 usinf!!! Report Comment
⋆ ˚｡⋆୨୧˚ quack u,_u	1695783853 using!! ;3 Report Comment
kaveh ⋆✩	1694923587 using !! Report Comment