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

prisoner x	1701125039 USING!! Report Comment
gott-ist-tot	1694697236 this looks very cool, I'll be using :))) Report Comment
junkkostanz	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
Miss Moss	1619784859 Nice work! It looks great! Report Comment Thank you man by TheTrash; 1620719146; Report
Shann	1614172538 Hey, this is a very cool layout! I'm using this for my partner's profile, how do I change the bio boxes background to white and make em scrollable like you did yesterday? Report Comment For the background i'll update the css in a wile. For the "scrollable" you mean to have the bar for scrolling or the text moving left to right and vice versa? by TheTrash; 1614184047; Report Yes, I meant the scrolling bar sorry XD and thanks!! by Shann; 1614184675; Report Yo, check my profile and give me the feed if now is quite good. If your response is positive, i'll update the post! by TheTrash; 1614206462; Report I love it! :D by Shann; 1614217904; Report Snap! updated the css part! Thank You! by TheTrash; 1614241822; Report
【ｂｒｉｔｔａｎｙ】	1614137666 Thanks for this, looks great! ^_^ Report Comment Thank you for the feedback! :D by TheTrash; 1614183959; Report