Windows 95

Tags: windows 95, retro, nostalgia, tech, microsoft, xp
Description:

Just a Windows 95 layout I made.
If you end up using it, I don't care if you mention me or anything of the sorts (it's the internet, everything is shared). I haven't commented every single aspect of it due to laziness. If you want to change anything about it, just look through the code.
Heavily modifying parts of layouts I want and using the template by meh!! here. I modified it enough that I feel like it is it is my own creation.
https://blog.spacehey.com/entry?id=1254
Preview:

click on the image for a larger preview
Code:

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

<style>
/*----------------------------intro animation-----------------------------------------*/
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/JqnNPpY/gifgit.gif');
	background-size: cover;
	background-repeat: no-repeat;
	animation: yourAnimation 3s ease 0s 1 normal forwards;
	pointer-events: none;
}


/*------------------------------------image above main----------------------------------------*/
main:before { 
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.gifer.com/OK1d.gif');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
opacity:.8;
}
/*-------------for mobile users--------------------------*/
@media only screen and (max-width: 600px){
.class { thing }
}
body, .bodyContent  { /*background and scroll bar*/
	background-color:#000000; /*scroll bar color*/
	/*background image attributes*/
 	background-image:url(https://i.ibb.co/wBLkmMH/e7-L-h-Y0g-Bzi7-A6-HWkn-GZt-Xu-OL29-Oz-KDx-Zq-Wfi-XHjh2o.jpg); 
  /*background-repeat: repeat-y;*/
  background-attachment: scroll;
	background-position:left bottom;
	background-size: 1540px 1070px;
}
/*--------------changes attributes of the main background and footer------------------*/
Main, footer { 
	background-color: rgba(0, 0, 0, 0.0);
}  
/*-----------------profile picture and online-----------------------------------------*/
.profile-pic img{ 
	transform: rotate(0deg) !important;
	border: 2px solid blue;
  outline-style: outset;
  outline-color: purple;
  outline-width: 7px;;
}
/*------online icon-----*/
.online{
	content:url("https://i.ibb.co/84552Sz/ezgif-1-9b71de32f33d.gif");
        /*visibility: hidden;*/
}
.online img { 
	content: url(""); 
	animation-name: none; 
	visibility: hidden; 
	height: 43px; width: 90px; 

}
h1, h2, h3, h4, h5, a, p, nav label, .section { 	
 	text-shadow: 	0.5px 0.5px #FF1493;
 	text-transform: initial;
}
/*---------------------color of names, and friends counter------------------*/
h1, .count, .friends a p{
	color: var(--names) !important;
} 

/*------------------------aboutme & want2meet headings----------------------*/
.section h4 {
	color: var(--names) !important;
} 

.section{color: var(--text) !important;} /* sometimes <p> is broken by embeds maybe. */

/*------------------change the attributes of the nav logo--------------------*/
nav img.logo { 
	filter: brightness(3) saturate(100%) invert(10%) sepia(90%) saturate(5652%) hue-rotate(100deg) brightness(80%) contrast(50%) drop-shadow(1px 1px 2px aqua) !important;
}


h1 { /*attributes of h1 header text*/
 font-size: var(--mynamesize) !important;
 text-transform: none;
 padding-left:10px !important;
}
p {
   font-size: 13px;
}
/*profile info*/
.heading, .url-info, .blurbs, .details, .mood, .friends, .contact, .table, .table-section, footer {
  background-color:var(--box_color_and_seethru) !important; remove comments for transparency
  border-radius: var(--curve) !important; /*box*/
  padding: 8px !important;
  /*! border: var(--borders) !important; */
  /* there's a subtle-ish gradient effect on every box on holmes' page */
  /* it's disabled here so the root transparency works right */
  /*! background-image: linear-gradient(330deg, rgba(90, 90, 90, 0.1), rgba(60,60,60,0.1), rgba(100, 100, 100, 0.1)) !important; */
}

/*--------------------the very nitty gritty of my profile-------------------*/
.contact .inner {
	background-color: rgb(180,180,180);
	border-radius:15px;
	opacity: .80;
	height:90.5px;
	width: 300px;
	height:100px;
	border-style: solid;
}
.blurbs .inner{
	background-color: rgb(180,180,180);
	border-radius:15px;
	opacity: .80;
	border-style: solid;
	text-align:center;
}
.details-table {
	background-color: rgb(180,180,180);
	border-radius:15px;
	opacity: .80;
	width:100px;
	border-style: solid;
}

.friends-grid {
	background-color: rgb(180,180,180);
	border-radius:15px;
	opacity: .80;
	border-style: solid;
}
.blog-preview {
	background-color: rgb(180,180,180);
	border-radius:15px;
	opacity: .80;
	border-style: solid;
	text-align: center;
}
.inner .section {
  padding: 8px !important;
}
/* for anyone reading this that knows CSS is probably cringing, im sorry if this is spaghetti code i legit couldn't combine objects ill fix it eventually*/

/*------------------------hides links, mood, and who i'd like to meet------------------------*/
.profile .mood, .table-section + .table-section, .section + .section { 
	display: none;
}

/*contact, headers, and info table*/
.profile .contact .heading, 
.profile .table-section .heading,
.home-actions .heading {
	padding: 10px;
  text-align: center;
  color: blue;
  font-size: 20px;
	background: rgb(2,0,36);
	border-radius:var(--curve);
}
.heading h4 { /*left column headings*/
	color: black;
}
.profile .blurbs .inner .section h4 { /*heading text right column*/
  text-align: center;
	font-size:15px;
	padding: 8px !important;
  border-radius: 25px;
  padding: 30px;
  height: 40px;
  background: rgb(2,0,36);
  border-style: solid;
	background-color: var(--box_color_and_seethru) !important;
	background-image:url(https://64.media.tumblr.com/8ca4942d54ba905c15db6783affb4ad2/tumblr_mpwb21tqxe1qzgjfco1_500.gif);
}
.friends {
	text-align: center;
	font-size: 15px;
}
.right .friends .heading {
	text-align: center;
	padding: 8px !important;
  border-radius: 25px;
  padding: 30px;
	width: 450px;
	background-image:url(https://64.media.tumblr.com/8ca4942d54ba905c15db6783affb4ad2/tumblr_mpwb21tqxe1qzgjfco1_500.gif);
	border-style: solid;
	color: var(--names);
}
.search-wrapper input[type=text] {
	background-color: rgba(0, 0, 0, 0.5) !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(0, 0, 0, 0.5) !important;
	color:var(--headers) !important;
}
.w-40 .table-section:last-child .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:last-child .heading::after{
  content: var(--mylinks);
font-family: var(--font-family) !important;	
 text-shadow: 	2px 2px black !important;
 text-transform:uppercase !important;color: var(--headers) !important;font-weight: bold !important;}

.w-40 .table-section:nth-last-child(2) .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .table-section:nth-last-child(2) .heading::after{
  content: var(--mytopics);
font-family: var(--font-family) !important;	
 text-shadow: 	2px 2px black !important;
 text-transform:uppercase !important;color: var(--headers) !important; font-weight: bold !important;
}

.w-40 .contact .heading h4{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.w-40 .contact .heading::after{
  content: var(--myactions);
font-family: var(--font-family) !important;	
 text-shadow: 	2px 2px black !important;
 text-transform:uppercase !important;color: var(--headers) !important;font-weight: bold !important;}
.url-info, .profile .blurbs .heading {display:none !important;} /*disappears the url link and blurbs*/


/*----------------------in interests removes default text and replaces it------------------------------------*/
.details-table tr td:first-child p:after{
  color:#; !important;
  letter-spacing:normal !important;
   text-shadow: 	2px 2px black !important;
   filter: brightness(95%) !important;
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content:"Husbandos";!important
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content:""; 
Slowthai - DEMONBOY 
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content:"Click Here For My Steam ---->"; 
check da insta
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content:"Old Web Gifs"; 
Samurai Champloo, The Boondocks, Dragon Ball.
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content:""; 
Full time Nutter
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content:"";
Staffordshire
}

/* the root */
:root {
  --headers: #a31c59:
	--links: indianred:
	--text: darksalmon;
	--names: mediumaquamarine;
	--background_image: url("https://i.imgur.com/EnMApbN.jpeg");
	--font-family: sans-serif;
	--mynamesize: 40px;
	--transparency: 0.33;
	--curve: 15px;
	--hue: 0deg;
	--simple_bg: #ffd2cb;
	--topic1: "Generally":
	--topic2: "";
 	--topic3: "Test";
	--topic4: "Fandoms";
 	--topic5: "Scenes";
 	--topic6: "Writers";
	--myactions: "I just met you and This is crazy, add me maybe?";
 	--mytopics: "Vibe with me";
 	--mylinks: "nice";
	     
	                           /*colors*/
	--logo-blue: #;
 	--darker-blue: #;
  --lighter-blue: #;
  --even-lighter-blue: #;
  --lightest-blue: #;
  --dark-orange: #;
  --light-orange: #;
  --even-lighter-orange: #;
   --green: #;      
	
}
</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 )