lucavi | CODE ✦ DREAMWIDTH NITRO.

for $8000 a month

dickkickem#0000

ABOUT ME

made too many jokes about being sexy and cool n accidentally developed an ego

NOTE

*wii music noise*

Message @dickkickem

cloud nine

pastels#0000

ABOUT ME

i am too soft for this world but i'm only saying that because it hurts my hand to open water bottles

NOTE

Message @pastels

A mock-up that replicates the Discord Nitro user/server profiles. Dreamwidth Nitro is:

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

Due to how grid works with z-index combined with the limitations of z-index in DW comments, the icon area is at the very bottom of the code. A little confusing! Sorry about that. Icon image works best with 100x100 or more for best clarity. Areas to Ctrl+F and replace for best results are:

✦ **COLOUR_1**
✦ **COLOUR_2**
✦ **BACKGROUND_IMG_URL**
✦ **ICON_IMG_URL**
✦ display username, username#0000, about me blurb, note blurb, @username fields.
✦ optional: default is set to max-width:400px; this value can be changed to your leisure.

DARKMODE

<raw-code>
<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px;">
<div style="display:flex; flex-flow:column nowrap; width:100%; max-width:400px; padding:5px; font:14px/1.25 'Hiragino Kaku Gothic ProN', 'Source Sans Pro', Tahoma, sans-serif; color:#fff; border-radius:16px; overflow:hidden; background:#999;
  background:linear-gradient(to bottom, **COLOUR_1**, **COLOUR_2**);">

<div style="grid-column:1/10; grid-row:1/3; background:#00000024 url('**BACKGROUND_IMG_URL**') no-repeat center; background-size:cover;"></div>
  <! --- /// --->

<div style="grid-column:1/10; grid-row:3/5; padding:70px 5% 15px;">
    <div style="padding:15px; background:rgba(0,0,0,0.3); border-radius:11px; font-size:12px;">
      <div style="font-size:21px; font-weight:600;">
        your display username goes here.
      </div>
      <div style="font-size:13px; opacity:0.75;">
        username#0000
      </div>
      <hr style="border-top:1px solid rgba(355,355,355,0.3);" />
      <div style="font-weight:600; text-transform:uppercase;">ABOUT ME</div>
      <p style="opacity:0.75;">
        This is a text blurb about you!
      </p>
      <div style="font-weight:600; text-transform:uppercase;">NOTE</div>
      <p style="opacity:0.75;">
        This is an additional note about you!
      </p>

<div style="padding:10px; border:1px solid rgba(355,355,355,0.3); border-radius:4px; opacity:0.75;">
        Message @username
      </div>
    </div>
  </div>
  <! --- /// --->
  
  <div style="align-self:auto; grid-column:2; grid-row:2; aspect-ratio:1; width:100px; background:transparent url('**ICON_IMG_URL**') center no-repeat; background-size:cover; border-radius:99rem; box-shadow:0 0 6px rgba(0,0,0);"></div>
  
</div>
</div>
</div>
</raw-code>

LIGHTMODE

<raw-code>
<div style="display:flex; flex-flow:row wrap; justify-content:center; gap:10px;">
<div style="display:flex; flex-flow:column nowrap; width:100%; max-width:400px; padding:5px; font:14px/1.25 'Hiragino Kaku Gothic ProN', 'Source Sans Pro', Tahoma, sans-serif; color:#333; border-radius:16px; overflow:hidden; background:#eee;
  background:linear-gradient(to bottom, **COLOUR_1**, **COLOUR_2**);">

<div style="grid-column:1/10; grid-row:1/3; background:#ffffff8c url('**BACKGROUND_IMG_URL**') no-repeat center; background-size:cover;"></div>
  <! --- /// --->

<div style="grid-column:1/10; grid-row:3/5; padding:70px 5% 15px;">
    <div style="padding:15px; background:rgba(355,355,355,0.5); border-radius:11px; font-size:12px;">
      <div style="font-size:21px; font-weight:600;">
        your display username goes here.
      </div>
      <div style="font-size:13px; opacity:0.75;">
        username#0000
      </div>
      <hr style="border-top:1px solid rgba(0,0,0,0.3);" />
      <div style="font-weight:600; text-transform:uppercase;">ABOUT ME</div>
      <p style="opacity:0.75;">
        This is a text blurb about you!
      </p>
      <div style="font-weight:600; text-transform:uppercase;">NOTE</div>
      <p style="opacity:0.75;">
        This is an additional note about you!
      </p>

<div style="padding:10px; border:1px solid rgba(0,0,0,0.3); border-radius:4px; opacity:0.75;">
        Message @username
      </div>
    </div>
  </div>
  <! --- /// --->
  
  <div style="align-self:auto; grid-column:2; grid-row:2;">
    <img src="**ICON_IMG_URL**" style="aspect-ratio:1; object-fit:cover; width:112px; border:6px solid rgba(355,355,355,0.75); border-radius:99rem;" />
  </div>
  
</div>
</div>
</div>
</raw-code>

CODE ✦ DREAMWIDTH NITRO.

DARKMODE

LIGHTMODE

DREAMWIDTH NITRO (COMMENT EXAMPLE)

ty ty!!