Red Windows Classic with spiderman background

Tags: red, spiderman, windows, spider-man, retro, 90s, 00s, 2000s

Description:

Original made by Rebecca Jeane https://layouts.spacehey.com/layout?id=24779 I just made it red and added a cool spiderman background

Code:

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

<!-- (c) Layout created by Rebecca Jeane modified by Retro Wonka(https://layouts.spacehey.com/layout?id=24779) -->

<style>   

/*I stole this scrollbar style from here (https://layouts.spacehey.com/layout?id=2016). Lightly edited to fit style.*/

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

/* Track */
::-webkit-scrollbar-track {
    background-color: #e2e2e2;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    border: 2px 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: 2px 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'/>");
}

html {height: 100vh;}

button {
   background-color: #a9a9a9;
   border: 1px outset #d9d9d9;
   text-decoration: none !important;
}

body {
   background-image: url(https://images.alphacoders.com/457/457871.jpg);
}

.container {
   height: 100vh;
   margin: 0 auto 0 !important;
}

main {
   background-color: #d6caa9;
   border-right-style: ridge;
   border-left-style: ridge;
   border-bottom-style: ridge;
   overflow-y: scroll;
   height: 66vh;
}

nav {
   border-right-style: outset;
   border-right-width: 2px;
   border-left-style: outset;
   border-left-width: 2px;
}

nav .top {
   background: linear-gradient(to right, #BB0505, #a9a9a9);
   border-bottom-style: groove;
   border-bottom-width: 1px;
   border-top-style: outset;
   border-top-width: 2px;
}
nav .links {
   background: #a9a9a9 !important;
   padding: 2px;
}

nav .links a {
   color: black;
   text-shadow: none;
   border-style: outset;
   border-width: 1px;
   border-color: #d9d9d9;
   padding: 2px;
   margin: 2px 5px;
}

.links a:hover {
   text-decoration: none !important;
   color: black;
   border: 1px inset #d9d9d9;
}

[title="Notifications"] {
   border: none !important;
}

nav li {
   margin: 2px -5px;
}

nav li:not(last-child)::after {
   content: none !important;
}

h1 {
   font-family: Verdana !important;
   color: white;
   font-size: 20px !important;
   font-weight: normal;
   background: linear-gradient(to right, #BB0505, #a9a9a9);
   border-style: outset !important;
   border-width: 2px;
   padding: 2px 0 0 5px;
}

.general-about, .contact, .url-info, .table-section, .profile-info, .blog-preview, .blurbs, .friends, #comments {
   border: 2px outset #e6e6e6 !important;
   background: #a9a9a9;
}

.general-about {
   padding: 3px;
}

.profile-pic {
   margin: 0 5px 10px 0 !important;
}

.contact a {
   font-family: Verdana;
   color: black;
   font-weight: normal;
}

.contact a:hover {
   text-decoration: none;
}

.heading, .blog-preview h4 {
   background-image: linear-gradient(to right, #BB0505, #a9a9a9) !important;
}

h4 {
   color: white;
   font-weight: normal;
   margin: 0;
}

.f-row {
   margin: 0 !important;
}

.f-col {
   border-style: outset;
   border-width: 1px;
   padding: 2px;
   margin: 5px !important;
}

.f-col:hover {
   border-style: inset;
}

.url-info p:last-child, .table-section td {
   background-color: white;
   border-style: inset;
   border-width: 2px;
   padding: 2px;
}

.table-section td:first-child, td:first-child a:not(.comments-table td a) {
   background: #a9a9a9;
   color: black;
}

table.comments-table {
   display: block;
   border: 2px inset !important;
   overflow-y: scroll !important;
   height: 420px !important;
}

.comments-table td:first-child {
   background-color: #d6caa9 !important;
   border: 1px outset #d6caa9;
}

.comments-table td {
   background-color: white !important;
   border: 1px inset #d6caa9;
}

.comments-table td:first-child a {
   color: black;
   font-weight: normal;
}

.person p, .person p:hover {
   text-decoration: none !important;
   color: black !important;
   font-weight: normal !important;
}

footer {
   margin-bottom: 0;
   background-color: #a9a9a9;
   color: black;
   border: 2px outset #d9d9d9;
}

</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.