lucavi | CODE ✦ WINDOWS.

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;">

<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**);">

<span>WINDOW NAME (TOP)</span>

<span>WINDOW NAME (BOTTOM)</span>

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

</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;">

<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**);">

<span>WINDOW NAME (LEFT)</span>

<span>WINDOW NAME (RIGHT)</span>

<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>
  
  
  </div>
</div>
</div>
</div>
</div>
</raw-code>

CODE ✦ WINDOWS.

HORIZONTAL

VERTICAL

no subject

no subject

no subject