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

mard	1713402576 nice and cool. will be using. Report Comment
je̸̢̧nni	1705978310 loved it! using Report Comment
Yumeyu ( ⚠ Automusic)	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
rraudhatin	1637745465 I am using your layout and it's really awesome! Thank you. Report Comment
Ian Ivy	1636697131 using now Report Comment
Ian Ivy	1636697130 using now Report Comment
ÜSageÜ	1636112539 I love this sm definitely using this :D Report Comment
Berii	1636056478 SO COOL Report Comment
nami	1634088541 Como crean?? yo lo quiero intentar :( Report Comment
flavoredslush	1632186396 This... I love this. （‐＾▽＾‐） Report Comment
bones Ɛ>	1632169273 this looks awesome ^-^ Report Comment