win95

Tags: retro, green, gray, personal computer

Description:

I've made this laytout dreaming about Windows95.

In my profile i use one background image, if you want it you can download it here, reupload on your favorite image hosting site and add the link to the appropiate section of css.

It surely needs some improovements so leave me a feedback, i really appreciate it!

25/02/2021

As suggested from ☣️Clu☣️
I've implemented the bio like a scrollable window adding an aesthetic scrollbar.
It needs a little fix for the arrow but is quite good for updating the layout.

I'll keep track of code update on my github page.

Preview:

click on the image for a larger preview

Code:

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

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

<style>

:root{
    color: black;
    font-family: MS Sans Serif;
}

body { 
    background-color: #fedde8;
    /* Use this if you want to add one background image 
    background-image: url("< your url here >");
    */
}

footer {
    background-color: transparent;
}

main {
    background-color: #008282; 
}

a {
    color: #d64276;
}

a:hover {
    color: #983a5c;
}


.profile .friends .person p {
    color: #666666;
    font-weight: bold;
    word-break: break-word;
    font-size: 85%;
    text-align: left;
    margin-left: 5px;
}

.profile-pic img {
    border:solid ;
    border-color: #fff  #000 #000 #fff ;
    background-color: #c3c3c3;
    padding: 5px;
}

.profile .blurbs .heading, .profile .friends .heading,
.w-40 .contact .heading, .w-40 .table-section .heading {
    margin: 2px;
    margin-bottom: 5px;
    background-color: #000082;
    color: white;
    padding: 2px 7px;
}

.blurbs, .friends,
.w-40 .contact, .w-40 .table-section , .w-40 .url-info{
    border: 2px solid ;
    border-color: #fff  #000 #000 #fff ;
    background-color: #c3c3c3;
    color: black;
    margin: 5px 0;
}

.blurbs {
    background-color: #c3c3c3;
    padding: 0 5px 5px 5px;
}

.profile .blurbs .inner {
    margin-left: 2px;
    margin-right: 2px;
    background-color: white;
    height: 300px;
    overflow: auto;
}


.details-table td:first-child {
    background: #7f7f7f;
    color: black;
    font-weight: bold;
    width: 33%;
}

.online, .count {
    color: #ffff00;
}


nav .top {
    background: #983a5c;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: black;
}

.comments-table {
    border: none;
}


.comments-table td {
    border: solid;
    border-left: none;
    border-color: #7f7f7f #fff #fff #7f7f7f ;   
    background-color: #bfbfbf;
     
}
.comments-table td:first-child {
    border: solid;
    border-right: none;
    border-color: #7f7f7f #fff #fff #7f7f7f ;   
    background-color: #bfbfbf;
}

.comment-replies {
    border: none;
}

button:hover {
    border: solid;
    border-color: #7f7f7f #fff #fff #7f7f7f ;   
    background-color: #bfbfbf;
}

button {
    border: solid;
    border-color: #fff  #000 #000 #fff ;
    background-color: #c3c3c3;
    color: black;
}

button:focus {
    border: solid;
    border-color: #7f7f7f #fff #fff #7f7f7f ;   
    background-color: #000082;
    color: white;
}

/* width */
::-webkit-scrollbar {
  width: 18px;
}

/* Track */
::-webkit-scrollbar-track {
    background-color: #e2e2e2;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    border: solid;
    border-color: #fff  #000 #000 #fff ;
    background-color: #bfbfbf;
}


::-webkit-scrollbar-button:single-button:vertical {
    height: 15px;
    width: 15px;
    background-position: center;
    background-color: #bfbfbf;
    background-size: 10px;
    background-repeat: no-repeat;
    display: block;

    border: solid;
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    border-color: #fff #000 #000 #fff ;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(0,0,0)'><polygon points='50,00 0,50 100,50'/>");
}
::-webkit-scrollbar-button:single-button:vertical:increment {
    border-color: #fff #000 #000 #fff ;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(0,0,0)'><polygon points='0,0 100,0 50,50'/>");
}

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

mskiey	1748659259 using ! Report Comment
BusinessConglomerate	1745986092 danke schoen. using. Report Comment
vToria ⭕️	1742171338 Usinggg Report Comment
Yadkin_	1741130362 usando Report Comment
Zuzio	1740719530 usingg :D Report Comment
VHS Wiz ｡𖦹	1736974000 Using this! This is such a throwback! Report Comment
literally Hyun-ju (CARL!!)	1736755227 using! Report Comment
ʚ♡ɞ Vanessa ʚ♡ɞ	1736550737 this is awesome, will def be using Report Comment
strictmachine	1736008966 using some elements of it <3 Report Comment
SAINT MAC	1732912611 using Report Comment
Kamb (beektour)	1732703740 using! Report Comment
Guxtuuz	1731734124 using :) Report Comment
crystal	1731326909 using ! Report Comment
bam ♡	1725221384 using :D Report Comment
izak	1720049963 been using since i joined. u a goat! Report Comment
landon	1719729685 using! Report Comment
mugrinaco	1718857802 using! Report Comment
fly-fry 📀🪞🎞️	1717743171 using :) Report Comment
naivara	1717417918 using Report Comment
Chrissy Beans	1715500213 This is neat! I'll be using it ! Report Comment