windows 7-ish??????

Tags:

Description:

this took me hours to make even though all i had to do was make the css work with spacehey... it was so much effort oh my god i dont think ive ever spent this much time on a layout. i tried so hard. (and got so far...) i tried to get minimize, restore and close buttons on the headings but i couldnt do that rip anyways this has an optional warning screen (for tws/cws and dnis) and customizable window elements css from https://github.com/khang-nd/7.css/ <333333333 please comment if you use this you dont have to credit me on your profile but it is VERY appreciated and i honestly doubt anyone will use this but who cares im uploading it anyway the code is very shaky youre probably gonna have to edit it to work with your profile you can set the bg image to the default win7 wallpaper if you want url for the image is https://i.ibb.co/YbcYTKg/Img0-Windows-7.jpg

Code:

<!-- (c) Layout created by pico n boyfriend (https://layouts.spacehey.com/layout?id=90947) -->

<!-- warning -->
<div id="profile">
<div class="window active" style="max-width: 500px;left:5px;top:8px;">
    <div class="title-bar">
        <div class="title-bar-text">Warning</div>
        <div class="title-bar-controls"></div>
    </div>
    <div class="window-body warning">
        <center>
<h1> Hello, User!</h1> 
<br/>
<p>This Internet location contains:<br/>
(anything on your page that needs a warning, e.g. flashing lights, blood, etc.)</p>
<br/>
<h1>Do Not Interact</h1>
<p>(dni criteria goes here)
<br/>(also here)
<br/>(and here)</p>
<div class="thanks" style="max-width: 100px;"><a href="#profile">Enter</a></div>
<br/>
<br/>
<div class="thanks" style="max-width: 100px;"><a href="https://spacehey.com/home">Exit</a></div>
        </center>
       </div>
    </div>
 </div>
<!-- warning css -->
<style> 

#profile{
 position: fixed;
 background-image: url('https://i.ibb.co/YbcYTKg/Img0-Windows-7.jpg');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 color: black;
 z-index: 100;
 top: 0; 
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 150%;
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}

#profile > * {
 width: 100%;
 height: 403px;
 max-width: 700px!important;
 max-height: 500px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

</style>

<!-- everything else -->
<p class="bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet, tortor nec molestie interdum, odio urna mollis libero, non sollicitudin lectus magna ac diam. Aliquam in lacus cursus, posuere arcu et, lacinia est. Sed in sollicitudin neque, iaculis feugiat sem. Mauris rhoncus in mi sed interdum. Phasellus et faucibus ipsum, ac interdum lorem. Suspendisse eget mi urna. In vulputate nulla feugiat mi efficitur, sed convallis mauris consectetur. Aenean mattis, nibh ut imperdiet vehicula, ante ante bibendum velit, at lacinia urna ex in ipsum. Morbi rhoncus sit amet lorem nec consequat.</p>
<!-- windows -->
<div class="window active" style="max-width: 500px;left:5px;top:8px;">
    <div class="title-bar">
        <div class="title-bar-text">Window Title</div>
        <div class="title-bar-controls"></div>
    </div>
    <div class="window-body has-space">
        <center>
            <p>Window Content</p>
            <div class="thanks" style="max-width: 100px;">Non-functional Button</div>
        </center>
    </div>
</div>
<!-- second window -->
<div class="window active" style="max-width: 500px;right:19px;bottom:17px;">
    <div class="title-bar">
        <div class="title-bar-text">Window Title</div>
        <div class="title-bar-controls"></div>
    </div>
    <div class="window-body has-space">
        <center>
            <p>Window Content</p>
            <div class="thanks" style="max-width: 100px;">Non-functional Button</div>
        </center>
    </div>
</div>
<!-- window styling -->
<style>
    .window {
        border: 1px solid rgba(0, 0, 0, 0.7);
        border-radius: 6px;
        box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #fffa;
        font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
        position: absolute;
        z-index: 0;
        width: 200px;
        height: 200px;
    }
    .window:before {
        background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
        border-radius: 6px;
        box-shadow: inset 0 0 0 1px #fffd;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }
    .window-body {
        background: #f0f0f0;
        border: 1px solid rgba(0, 0, 0, 0.7);
        box-shadow: 0 0 0 1px #fff9;
        margin: 0 6px 6px;
    }
    .window-body.has-space {
        padding: 40px;
        overflow-y: scroll;
        height: 160px;
    }
.window-body.warning {
        padding: 40px;
        overflow-y: scroll;
        height: 363px;
    }
/* all styling after here is probably useless lol.. sorry */
    .window-body pre {
        margin: -6px;
    }
    .window footer,
    .window-footer {
        background: #f0f0f0;
        border: 1px solid rgba(0, 0, 0, 0.7);
        border-top: 0;
        box-shadow: 0 0.5px 1px 0.5px #fff;
        margin: -7px 6px 6px;
        padding: 10px;
        position: relative;
    }
    .window footer:before,
    .window-footer:before {
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px #fff;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .window.is-bright .window-body {
        background: #fff;
    }
    .window.is-bright .window-footer,
    .window.is-bright footer {
        background: #eee;
        box-shadow: inset 0 1px 3px #ddd, 0 1px 0 #fff9, 1px 1px 0 #fff9, -1px 1px 0 #fff9;
    }
    .window.is-bright .window-footer:before,
    .window.is-bright footer:before {
        content: none;
    }
    .window.glass:before {
        opacity: 0.6;
    }
    .window.glass:after {
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        border: none;
        border-radius: 6px;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -10;
    }
    .window.glass > .title-bar {
        background: linear-gradient(135deg, #fff5 70px, transparent 100px), linear-gradient(225deg, #fff5 70px, transparent 100px),
            linear-gradient(
                    54deg,
                    #0002 0 4%,
                    #6661 6% 6%,
                    #0002 8% 10%,
                    #0002 15% 16%,
                    #aaa1 17% 18%,
                    #0002 23% 24%,
                    #bbb2 25% 26%,
                    #0002 31% 33%,
                    #0002 34% 34.5%,
                    #bbb2 36% 40%,
                    #0002 41% 41.5%,
                    #bbb2 44% 45%,
                    #bbb2 46% 47%,
                    #0002 48% 49%,
                    #0002 50% 50.5%,
                    #0002 56% 56.5%,
                    #bbb2 57% 63%,
                    #0002 67% 69%,
                    #bbb2 69.5% 70%,
                    #0002 73.5% 74%,
                    #bbb2 74.5% 79%,
                    #0002 80% 84%,
                    #aaa2 85% 86%,
                    #0002 87%,
                    #bbb1 90%
                )
                0/100vw 100vh no-repeat fixed;
    }
    .window > .title-bar {
        border: 0;
        box-shadow: inset 0 1px 0 #fffd, inset 1px 0 0 #fffd, inset -1px 0 0 #fffd;
    }
    .window fieldset {
        margin-bottom: 9px;
    }
    .window[role="dialog"] {
        left: 50%;
        opacity: 0;
        position: fixed;
        top: 50%;
        transform: translate(-50%, -50%);
        transition-duration: 0.2s;
        transition-property: visibility, opacity;
        visibility: hidden;
        z-index: 999;
    }
    .window[role="dialog"]:target {
        opacity: 1;
        visibility: visible;
    }
/* non-useless styling yippie */
    .title-bar {
        align-items: center;
        background: linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
        border: 1px solid rgba(0, 0, 0, 0.7);
        border-radius: 6px 6px 0 0;
        box-shadow: inset 0 0 0 1px #fff9;
        display: flex;
        font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
        justify-content: space-between;
        padding: 6px;
    }
    .title-bar-text {
        color: #000;
        letter-spacing: 0;
        line-height: 15px;
        text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
    }
    .thanks {
        background: linear-gradient(180deg, #f2f2f2 45%, #ebebeb 0, #cfcfcf);
        border: 1px solid #8e8f8f;
        border-radius: 3px;
        box-shadow: inset 0 0 0 1px #fffc;
        box-sizing: border-box;
        color: #222;
        font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
        min-height: 23px;
        min-width: 75px;
        padding: 0 12px;
        position: relative;
        text-align: center;
        z-index: 0;
    }
 
</style>
<!-- page styling -->
<style>
/* hides url info, icons in navbar and edit links on your profile. i took out url info cause i couldnt get it styled like everything else, you can add it back if you want, and i took out navbar icons because the new icon next to app makes the navbar overflow */
nav .links .icon, .url-info, .edit-link {display:none;}
/* this is styling for the site header */
div .top {
align-items: center;
background: linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
border-radius: 6px 6px 0 0;
box-shadow: inset 0 0 0 1px #fff9;
display: flex;
font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
justify-content: space-between;
padding: 6px;
}
/* navbar styling */
nav .links {
position: absolute;
top: 58px;
left: 280px;
width: 796px;
}
/* main content styling (space between navbar and footer */
main {
background: #f0f0f0;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0 0 1px #fff9;
margin: 0 6px 6px;
padding: 40px;
height: 935px;
overflow-y: scroll;
}
/* i did this when i tried turning the logo into text, this is absolutely useless feel free to delete it */
.logo {
color: #000;
letter-spacing: 0;
line-height: 15px;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
}
/* first part of turning page elements into windows */
.profile .contact, .profile .blurbs, .profile .table-section, .profile .friends, .profile .blog-preview {
border: 1px solid rgba(0, 0, 0, 0.7);
border-radius: 6px;
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.7), inset 0 0 0 1px #fffa;
font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
}
/* first part of turning page into a window */
.container {
background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
border-radius: 6px;
box-shadow: inset 0 0 0 1px #fffd;
height: 1124px;
}
/* window outline */
.container:before {
content: " ";
border: 1px solid rgba(0,0,0,0.7);
border-radius: 6px;
width: 810px;
position: absolute;
top: 0px;
left: 272px;
height: 1124px;
}
/* second part of turning page elements into windows */
/* backgrounds for contact and interests+links */
.profile .contact, .profile .table-section {
background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
border-radius: 6px;
box-shadow: inset 0 0 0 1px #fffd;
}
/* backgrounds for blog preview, friends and blurbs */
.profile .blog-preview, .profile .friends, .profile .blurbs{
background: linear-gradient(transparent 20%, #ffffffb3 40%, transparent 41%), linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
border-radius: 6px;
box-shadow: inset 0 0 0 1px #fffd;
}
/* title bars for elements */
.heading, .profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading, .profile .friends .heading, .profile .blog-preview h4 {
align-items: center;
background: linear-gradient(90deg, #ffffff66, #0000001a, #ffffff33), #4580c4;
border-radius: 6px 6px 0 0;
box-shadow: inset 0 0 0 1px #fff9;
display: flex;
font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
justify-content: space-between;
padding: 6px;
margin: 0;
}
/* second part of titlebars */
.heading h4, .profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .profile .blog-preview h4 {
color: #000;
letter-spacing: 0;
line-height: 15px;
text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;
font-weight: normal;
}
/* changes inner part of elements */
.profile .blurbs .inner, .profile .friends .inner, .profile .blog-preview p {
background: #f0f0f0;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0 0 1px #fff9;
margin: 0 6px 6px;
padding: 10px;
}
.profile .contact .inner, .profile .table-section .inner {
background: #f0f0f0;
border: 1px solid rgba(0, 0, 0, 0.7);
box-shadow: 0 0 0 1px #fff9;
margin: 0 6px 6px;
padding: 20px;
}
/* this is useless, feel free to delete */
.inner pre {
margin: -6px;
}
/* changes footer */
footer,
footer {
background: #f0f0f0;
border: 1px solid rgba(0, 0, 0, 0.7);
border-top: 0;
box-shadow: 0.5px 0.5px 0.5px #fff;
padding: 10px;
width: 798px;
left: 279px;
position: absolute;
bottom: -438px;
}
footer:before,
footer:before {
content: "";
height: 119px;
left: -2px;
position: absolute;
width: 798px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
top: 1px;
}
/* changes search button in header */
button {
background: linear-gradient(180deg, #f2f2f2 45%, #ebebeb 0, #cfcfcf);
border: 1px solid #8e8f8f;
border-radius: 3px;
box-shadow: inset 0 0 0 1px #fffc;
box-sizing: border-box;
color: #222;
font: 9pt Segoe UI, SegoeUI, Noto Sans, sans-serif;
min-height: 23px;
min-width: 75px;
padding: 0 12px;
position: relative;
text-align: center;
z-index: 0;
}</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 5 of 5 comments ( View all | Add Comment )

boêmio (hater #1 do minimalismo)	1760131607 hi i tried using this but there's a weird overlay(?) thingy that isn't letting me click on anything in my profile... i tried looking at the code but i couldn't find anything that could be causing this... do you have any idea what the problem could be?? ' w ' Report Comment
Mikey (GELP)	1702523844 Using Report Comment
Mikey (GELP)	1702523844 Using Report Comment
xJAMESxMANICx [VV]	1702358553 using :3333 Report Comment
pico n boyfriend	1702349041 also i took a screenshot but i didnt save it because i was stupid for a moment!! preview is here (atleast it should be 🙏) Report Comment