CODE ✦ WINDOWS.

[lucavi]

what happened to the soul —

≡

❑

✕

— that you used to be?

≡

❑

✕

MY GHOST —

WHERE'D YOU GO?

INBOX LINK LINK LINK

not mere potential —

≡

❑

✕

— but rather, a promise.

≡

❑

✕

don't look behind you —

NO FEARS TO FALL TO.

INBOX LINK LINK LINK

A frontnav-style code inspired by a mix of vapourwave and general old Windows 78, Windows XP-era looks.

✓ RESPONSIVE (MOBILE FRIENDLY)
✓ COMMENT FRIENDLY
✓ CUSTOMISABLE
✗ NOT EMAIL-FRIENDLY / EMAIL-TESTED

By default the text area just has two lines of text for whatever you want, but you can really replace it with whatever you'd like within the "TEXT AREA" brackets. If you add a lot of links, they'll also automatically wrap over to the next line. The links aren't default styled, but if the colour doesn't work with your theme, you can add styling to each link. Areas to Ctrl+F and replace for best results are:

✦ **COLOUR_1** (x2)
✦ **COLOUR_2** (x2)
✦ **BACKGROUND_IMG_URL**
✦ window name (both), taglines line 1 & 2.
✦ optional: default is set to max-width:800px; this value can be changed to your leisure.
✦ optional: default is set to font:600 16px/1.25 'MS Gothic', monospace; MS Gothic looks best for emulating the old pixelated text on Windows, but it isn't the most legible font. If you'd like to change out for a different one, replace the 'MS Gothic', monospace to whatever web-safe font you'd like. There are three instances of this code, but you only need to change the one at the very start.

HORIZONTAL

<raw-code> <div style="display:flex; justify-content:center;"> <div style="display:grid; grid-template-columns:10% 1fr 10%; grid-template-rows:200px 100px auto; gap:3px; width:100%; max-width:800px; font:600 16px/1.25 'MS Gothic', monospace;"> <!--- TOP WINDOW START! // ---> <div style="grid-column:1/-1; grid-row:1/3; display:grid; align-items:stretch; background:#ddd;"> <div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;"> <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default; background:#333; background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- TOP WINDOW NAME HERE // ---> <span>WINDOW NAME (TOP)</span> <div style="align-self:start; display:flex; gap:3px; font:16px/1 'MS Gothic', monospace; text-align:center; color:#333; cursor:pointer;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div> <div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="flex:1; border:3px inset #ddd; background:transparent url('**BACKGROUND_IMG_URL**') center no-repeat; background-size:cover;"> </div> </div> </div> <!--- TOP WINDOW END // ---> <!--- :::::::::::::::::::: ---> <!--- BOTTOM WINDOW START! // ---> <div style="align-self:baseline; grid-column:2; grid-row:2/-1; background:#ddd;"> <div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;"> <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default; background:#333; background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- BOTTOM WINDOW NAME HERE // ---> <span>WINDOW NAME (BOTTOM)</span> <div style="align-self:start; display:flex; gap:3px; font:600 16px/1 'Ms Gothic', monospace; text-align:center; color:#333; cursor:pointer;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="padding:25px 15px; font-size:14px; font-weight:300; text-align:center; color:#333;"> <!--- TEXT AREA START! // ---> <div style="font-size:clamp(18px,4.5vw,24px); font-weight:600;"> tagline line 1 </div> <div style="font-size:clamp(24px,4.5vw,35px); font-weight:600;"> tagline line 2 </div> <div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:25px;"> <a href="LINKHERE">INBOX</a> <a href="LINKHERE">LINK</a> <a href="LINKHERE">LINK</a> <a href="LINKHERE">LINK</a> <!--- EXTRA LINKS ABOVE THIS LINE // ---> </div> <!--- TEXT AREA END // ---> </div> </div> </div> </div> </div> </raw-code>

VERTICAL

<raw-code> <div style="display:flex; justify-content:center;"> <div style="display:grid; grid-template-columns:1fr 100px 1fr; grid-template-rows:100px auto 100px; gap:3px; width:100%; max-width:800px; font:600 16px/1.25 'MS Gothic', monospace;"> <!--- LEFT WINDOW START! // ---> <div style="grid-column:1/3; grid-row:1/-1; display:grid; align-items:stretch; background:#ddd;"> <div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;"> <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default; background:#333; background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- LEFT WINDOW NAME HERE // ---> <span>WINDOW NAME (LEFT)</span> <div style="align-self:start; display:flex; gap:3px; text-align:center; color:#333; cursor:pointer; font:16px/1 'Ms Gothic', monospace;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div> <div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="flex:1; border:3px inset #ddd; background:transparent url('**BACKGROUND_IMG_URL**') center no-repeat; background-size:cover;"> </div> </div> </div> <!--- LEFT WINDOW END // ---> <!--- :::::::::::::::::::: ---> <!--- RIGHT WINDOW START! // ---> <div style="align-self:baseline; grid-column:2/-1; grid-row:2; background:#ddd;"> <div style="display:flex; flex-flow:column nowrap; gap:3px; width:100%; padding:3px; border:3px outset #fff; box-sizing:border-box;"> <div style="display:flex; justify-content:space-between; align-items:center; gap:10px; padding:5px 5px 5px 10px; color:#fff; cursor:default; background:#333; background:linear-gradient(45deg, **COLOUR_1**, **COLOUR_2**);"> <!--- ^^^ FALLBACK COLOUR & GRADIENT COLOURS ABOVE // ---> <!--- BOTTOM WINDOW NAME HERE // ---> <span>WINDOW NAME (RIGHT)</span> <div style="align-self:start; display:flex; gap:3px; text-align:center; color:#333; cursor:pointer; font:16px/1 'Ms Gothic', monospace;"><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">≡</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">❑</div><div style="align-self:center; width:20px; aspect-ratio:1; background:#ddd; border:2px outset #fff;">✕</div></div> </div> <div style="padding:25px 15px; font-size:14px; font-weight:300; text-align:center; color:#333;"> <!--- TEXT AREA START! // ---> <div style="font-size:clamp(18px,4.5vw,24px); font-weight:600;"> tagline line 1 </div> <div style="font-size:clamp(24px,4.5vw,35px); font-weight:600;"> tagline line 2 </div> <div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px; padding-top:25px;"> <a href="✦">INBOX</a> <a href="✦">LINK</a> <a href="✦">LINK</a> <a href="✦">LINK</a> </div> <!--- TEXT AREA END // ---> </div> </div> </div> </div> </div> </raw-code>

Comments

HORIZONTAL (COMMENT EXAMPLE)

[lucavi]

WINDOW NAME (TOP)

≡

❑

✕

WINDOW NAME (BOTTOM)

≡

❑

✕

tagline line 1

tagline line 2

INBOX LINK LINK LINK

VERTICAL (COMMENT EXAMPLE)

[lucavi]

WINDOW NAME (LEFT)

≡

❑

✕

WINDOW NAME (RIGHT)

≡

❑

✕

tagline line 1

tagline line 2

INBOX LINK LINK LINK

[depth]

love this! using on this journal. ty!

[wrenchedup]

LOVE this so much!!!! Used it here.

[ex_ghostface110]

this is so sick tysm! using it here

[nowhere]

this is fantastic, thanks so much for sharing!

[peaceout]

hello! this is so cool and i love it! i have a question - i've fiddled with it and i can't seem to figure it out. this looks correct on my entry page, on your journal view, and on one other person's example on this post, but on my journal view and one other person's on this post it's looking like this, with some gaps on one side of the windows. it's like this for me in both firefox and chrome. do you happen to know what the issue might be? thanks in advance for your time, no worries if not.

[thepasteldyke]

Hello! This is really cute, but I'm having some issues with getting it to work. I saw someone else had some sort of trouble but imgur is down so I can't check to see if it's the same. Here is a screenshot of what it looks like in the entry. The frame gets sort of... elongated?

It looks a bit better in the editor but when I view it in the actual entry it looks like the first image.

The entry itself is here. I've tried viewing it in two different versions of firefox and chrome.

The only change I've made is insert an image, I haven't made any other changes to the code. I only know very very little coding myself so I'm not really sure of what to do.