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

Guxtuuz	1731734124 using :) Report Comment
ash/nina	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
phrauiyain	1717743171 using :) Report Comment
naivara	1717417918 using Report Comment
Chrissy Beans	1715500213 This is neat! I'll be using it ! Report Comment
mard	1713402576 nice and cool. will be using. Report Comment
je̸̢̧nni	1705978310 loved it! using Report Comment
Yuih	1705856101 using Report Comment
pester rat	1701125039 USING!! Report Comment
gott-ist-tot	1694697236 this looks very cool, I'll be using :))) Report Comment
local.area.network	1686059049 using!! :) Report Comment
chrissie	1682879217 using it!! thank you ^_^ Report Comment
JOEY	1677728906 using Report Comment
Flynn/Renard	1648395274 will b using this Report Comment
maggie	1647454773 will b using this tysm !! Report Comment
red	1644820870 hey! i was wondering where you can edit your bio in the code? i'm not very familiar with code so i'm a little confused Report Comment Sorry for late answer, you can edit directly in the section about me! I've copy'pasted the style in another section! by TheTrash; 1646221617; Report