random codes by htmled

01. ijoogle web search

700px × 695px

tab title! - this should expand for however long you want it to be

←

→

↻

🔒

https://www.ijoogle.com/search?q=42083jf#jf/

★

⋮

🔍

search field

zyx news

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

zyx news

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

zyx news

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut

site title

http://www.website.com › topic

article | site title

space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco. [...]

site title

http://www.website.com › topic

article | site title

space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore [...]

overview

space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua [...]

born: month d, yyyy. location.

died: month d, yyyy (age ## years)

spouse: first last (m. yyyy)

people also search for...

first last

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:700px;height:695px;background:#fff5f6;font-family:arial,sans-serif;position:relative;box-sizing:border-box;border-radius:16px;border:1px solid #f2e1e3;box-shadow:0 6px 18px rgba(255,204,213,0.3);overflow:hidden;">
  <!-- browser tab bar -->
  <div style="width:100%;height:44px;background:linear-gradient(90deg,#ffead2,#ffccd5);display:flex;align-items:center;padding:0 14px;box-sizing:border-box;">
    <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;margin-right:6px;"></div>
    <div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;margin-right:6px;"></div>
    <div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;margin-right:12px;"></div>
    <div style="background:#fff0f3;border-radius:10px 10px 0 0;height:32px;display:flex;align-items:center;padding:0 12px;">
      <div style="width:11px;height:11px;border-radius:50%;background:#ffccd5;margin-right:8px;"></div>
      <div style="font-size:13px;color:#6d5959;margin-right:10px;">tab title! - this should expand for however long you want it to be</div>
      <div style="font-size:12px;color:#917d7d;">✕</div>
    </div>
    <div style="color:#ffffff;font-size:18px;margin-left:10px;">+</div>
  </div>
  <!-- address bar -->
  <div style="width:100%;height:40px;background:#ffffff;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;border-bottom:1px solid #eedadd;">
    <div style="font-size:14px;color:#917d7d;margin-right:10px;">←</div>
    <div style="font-size:14px;color:#e1dbdd;margin-right:10px;">→</div>
    <div style="font-size:14px;color:#917d7d;margin-right:12px;">↻</div>
    <div style="flex:1;background:#fdf8f9;border-radius:16px;height:26px;display:flex;align-items:center;padding:0 12px;">
      <div style="font-size:11px;color:#ffb3c6;margin-right:8px;">🔒</div>
      <div style="font-size:12px;color:#917d7d;">https://www.ijoogle.com/search?q=42083jf#jf/</div>
    </div>
    <div style="font-size:14px;color:#ffe5b4;margin-left:12px;">★</div>
    <div style="width:20px;height:20px;border-radius:50%;background:#ffccd5;margin-left:12px;"></div>
    <div style="font-size:14px;color:#917d7d;margin-left:10px;">⋮</div>
  </div>
  <!-- main content wrapper -->
  <div style="padding:18px;">
    <div style="width:614px;height:44px;background:#ffffff;border-radius:24px;display:flex;align-items:center;padding:0 18px;box-shadow:0 2px 6px rgba(0,0,0,0.05);margin-bottom:14px;box-sizing:border-box;">
      <div style="color:#ffb3c6;font-size:15px;margin-right:10px;">🔍</div>
      <div style="color:#c9bbc0;font-size:15px;">search field</div>
    </div>
    <div style="display:flex;flex-direction:row;width:100%;">
      <!-- left column -->
      <div style="width:390px;margin-right:18px;flex-shrink:0;text-align:left;">
        <div style="display:flex;margin-bottom:8px;">
          <div style="width:185px;height:135px;background:#ffffff;border-radius:12px;padding:10px;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,0.04);margin-right:8px;position:relative;display:flex;flex-direction:column;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
              <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;margin-right:6px;"></div>
              <div style="font-size:11px;color:#5c5457;font-weight:bold;">zyx news</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-top:5px;flex:1;">
              <div style="font-size:10px;color:#8d8185;line-height:1.4;width:85px;">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
              <img src="https://placehold.co/68x72/ffb7b2/ffffff?text=image" alt="placeholder" style="position:relative;width:68px;height:72px;border-radius:6px;">
            </div>
          </div>
          <img src="https://placehold.co/198x135/ffdac1/ffffff?text=image" alt="placeholder" style="width:198px;height:135px;border-radius:12px;">
        </div>
        <div style="display:flex;margin-bottom:14px;">
          <div style="width:185px;height:143px;background:#ffffff;border-radius:12px;padding:10px;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,0.04);margin-right:8px;position:relative;display:flex;flex-direction:column;justify-content:space-between;">
            <div style="display:flex;align-items:center;">
              <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;margin-right:6px;"></div>
              <div style="font-size:11px;color:#5c5457;font-weight:bold;">zyx news</div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-top:5px;flex:1;">
              <div style="font-size:10px;color:#8d8185;line-height:1.4;width:85px;">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</div>
              <img src="https://placehold.co/68x72/ffc6ff/ffffff?text=image" alt="placeholder" style="position:relative;width:68px;height:72px;border-radius:6px;">
            </div>
          </div>
          <div style="width:198px;height:143px;background:#ffffff;border-radius:12px;padding:10px;box-sizing:border-box;box-shadow:0 2px 5px rgba(0,0,0,0.04);">
            <div style="display:flex;align-items:center;margin-bottom:5px;">
              <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;margin-right:6px;"></div>
              <div style="font-size:11px;color:#5c5457;font-weight:bold;">zyx news</div>
            </div>
            <div style="font-size:10px;color:#8d8185;line-height:1.4;">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</div>
          </div>
        </div>
        <div style="margin-bottom:10px;">
          <div style="display:flex;align-items:center;margin-bottom:3px;">
            <div style="width:21px;height:21px;border-radius:50%;background:#ffb7b2;margin-right:8px;"></div>
            <div>
              <div style="font-size:11px;color:#5c5457;">site title</div>
              <div style="font-size:10px;color:#b2a7a9;">http://www.website.com › topic</div>
            </div>
          </div>
          <div style="font-size:14px;color:#ab83a7;font-weight:bold;margin:4px 0 3px 0;">article | site title</div>
          <div style="font-size:10px;color:#8d8185;line-height:1.5;text-align:justify;">space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco. [...]</div>
        </div>
        <div style="width:100%;height:1px;background:#f0e6e8;margin-bottom:10px;"></div>
        <div>
          <div style="display:flex;align-items:center;margin-bottom:3px;">
            <div style="width:21px;height:21px;border-radius:50%;background:#ffb7b2;margin-right:8px;"></div>
            <div>
              <div style="font-size:11px;color:#5c5457;">site title</div>
              <div style="font-size:10px;color:#b2a7a9;">http://www.website.com › topic</div>
            </div>
          </div>
          <div style="font-size:14px;color:#ab83a7;font-weight:bold;margin:4px 0 3px 0;">article | site title</div>
          <div style="font-size:10px;color:#8d8185;line-height:1.5;text-align:justify;">space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore [...]</div>
        </div>
      </div>
      <!-- right column -->
      <div style="width:221px;flex-shrink:0;text-align:left;">
        <div style="display:flex;height:135px;margin-bottom:14px;">
          <img src="https://placehold.co/104x135/ffccd5/ffffff?text=image" alt="placeholder" style="width:104px;height:135px;border-radius:10px 0 0 10px;margin-right:3px;">
          <div style="display:flex;flex-direction:column;width:114px;">
            <img src="https://placehold.co/114x65/ffccd5/ffffff?text=image" alt="placeholder" style="width:100%;height:65px;border-radius:0 10px 0 0;margin-bottom:3px;">
            <div style="display:flex;">
              <img src="https://placehold.co/56x67/ffccd5/ffffff?text=image" alt="placeholder" style="width:56px;height:67px;margin-right:3px;">
              <img src="https://placehold.co/55x67/ffccd5/ffffff?text=image" alt="placeholder" style="width:55px;height:67px;border-radius:0 0 10px 0;">
            </div>
          </div>
        </div>
        <div style="font-size:18px;color:#6d5959;font-weight:bold;margin-bottom:6px;">overview</div>
        <div style="font-size:10px;color:#8d8185;line-height:1.5;margin-bottom:10px;text-align:justify;">space for 4 lines of text. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua [...]</div>
        <div style="font-size:10px;color:#5c5457;margin-bottom:4px;"><span style="font-weight:bold;color:#ff8fab;">born:</span> month d, yyyy. <span style="color:#a2d2ff;">location.</span></div>
        <div style="font-size:10px;color:#5c5457;margin-bottom:4px;"><span style="font-weight:bold;color:#ff8fab;">died:</span> month d, yyyy (age ## years)</div>
        <div style="font-size:10px;color:#5c5457;margin-bottom:14px;"><span style="font-weight:bold;color:#ff8fab;">spouse:</span> first last (m. yyyy)</div>
        <div style="font-size:16px;color:#6d5959;font-weight:bold;margin-bottom:8px;">people also search for...</div>
        <div style="display:flex;justify-content:space-between;">
          <div style="text-align:center;">
            <img src="https://placehold.co/60x60/b5ead7/ffffff?text=%3a%29" alt="placeholder" style="width:60px;height:60px;border-radius:8px;margin-bottom:4px;">
            <div style="font-size:10px;color:#5c5457;">first last</div>
          </div>
          <div style="text-align:center;">
            <img src="https://placehold.co/60x60/ffdac1/ffffff?text=%3a%29" alt="placeholder" style="width:60px;height:60px;border-radius:8px;margin-bottom:4px;">
            <div style="font-size:10px;color:#5c5457;">first last</div>
          </div>
          <div style="text-align:center;">
            <img src="https://placehold.co/60x60/c7ceea/ffffff?text=%3a%29" alt="placeholder" style="width:60px;height:60px;border-radius:8px;margin-bottom:4px;">
            <div style="font-size:10px;color:#5c5457;">first last</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div></lj-raw>

02. ijoogle image search results

650px × 650px

tab title!

←

→

↻

🔒

https://www.ijoogle.com/search?q=42083jf#jf/

★

⋮

ijoogle

search term

🎤

📸

🔍

‹

all

📷 images

📚 books

▶ videos

📰 news

⋮ more

website

image description

website

image description

website

image description

website

image description

website

image description

related searches

alternate search term top

alternate search term bttm

website

image description

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:650px;height:650px;background:#ffffff;font-family:arial,sans-serif;position:relative;box-sizing:border-box;border-radius:16px;border:1px solid #f2e1e3;box-shadow:0 6px 18px rgba(255,204,213,0.3);overflow:hidden;">
  <!-- browser tab bar -->
  <div style="width:100%;height:44px;background:linear-gradient(90deg,#ffead2,#ffccd5);display:flex;align-items:center;padding:0 14px;box-sizing:border-box;">
    <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;margin-right:6px;"></div>
    <div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;margin-right:6px;"></div>
    <div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;margin-right:12px;"></div>
    <div style="background:#fff0f3;border-radius:10px 10px 0 0;height:32px;display:flex;align-items:center;padding:0 12px;">
      <div style="width:11px;height:11px;border-radius:50%;background:#ffccd5;margin-right:8px;"></div>
      <div style="font-size:13px;color:#6d5959;margin-right:10px;">tab title!</div>
      <div style="font-size:12px;color:#917d7d;">✕</div>
    </div>
    <div style="color:#ffffff;font-size:18px;margin-left:10px;">+</div>
  </div>
  <!-- address bar -->
  <div style="width:100%;height:40px;background:#ffffff;display:flex;align-items:center;padding:0 14px;box-sizing:border-box;border-bottom:1px solid #eedadd;">
    <div style="font-size:14px;color:#917d7d;margin-right:10px;">←</div>
    <div style="font-size:14px;color:#e1dbdd;margin-right:10px;">→</div>
    <div style="font-size:14px;color:#917d7d;margin-right:12px;">↻</div>
    <div style="flex:1;background:#fdf8f9;border-radius:16px;height:26px;display:flex;align-items:center;padding:0 12px;">
      <div style="font-size:11px;color:#ffb3c6;margin-right:8px;">🔒</div>
      <div style="font-size:12px;color:#917d7d;">https://www.ijoogle.com/search?q=42083jf#jf/</div>
    </div>
    <div style="font-size:14px;color:#ffe5b4;margin-left:12px;">★</div>
    <div style="width:20px;height:20px;border-radius:50%;background:#ffccd5;margin-left:12px;"></div>
    <div style="font-size:14px;color:#917d7d;margin-left:10px;">⋮</div>
  </div>
  <!-- search header -->
  <div style="padding:16px 22px 8px 22px;">
    <div style="font-size:26px;font-weight:bold;margin-bottom:10px;">
      <span style="color:#ffb7b2;">i</span><span style="color:#ffdac1;">j</span><span style="color:#ffe5b4;">oo</span><span style="color:#b5ead7;">g</span><span style="color:#c7ceea;">l</span><span style="color:#ffb3c6;">e</span>
    </div>
    <div style="width:100%;height:34px;border:1px solid #f2e1e3;border-radius:18px;display:flex;align-items:center;padding:0 16px;box-sizing:border-box;margin-bottom:10px;">
      <div style="flex:1;font-size:14px;color:#917d7d;">search term</div>
      <div style="font-size:14px;color:#b5ead7;margin-right:10px;">🎤</div>
      <div style="font-size:14px;color:#ffccd5;margin-right:10px;">📸</div>
      <div style="font-size:14px;color:#c7ceea;">🔍</div>
    </div>
    <!-- tabs row -->
    <div style="display:flex;align-items:center;font-size:12px;color:#917d7d;">
      <div style="margin-right:12px;color:#e1dbdd;">‹</div>
      <div style="margin-right:10px;">all</div>
      <div style="background:#fff0f3;color:#ff8fab;border-radius:12px;padding:4px 10px;margin-right:10px;">📷 images</div>
      <div style="border:1px solid #f2e1e3;border-radius:12px;padding:4px 10px;margin-right:10px;">📚 books</div>
      <div style="border:1px solid #f2e1e3;border-radius:12px;padding:4px 10px;margin-right:10px;">▶ videos</div>
      <div style="border:1px solid #f2e1e3;border-radius:12px;padding:4px 10px;margin-right:10px;">📰 news</div>
      <div style="border:1px solid #f2e1e3;border-radius:12px;padding:4px 10px;">⋮ more</div>
    </div>
  </div>
  <div style="width:100%;height:1px;background:#f5ebeb;"></div>
  <!-- image grid -->
  <div style="padding:16px 22px;">
    <div style="display:flex;justify-content:space-between;margin-bottom:14px;">
      <div style="width:144px;">
        <img src="https://placehold.co/144x130/b5ead7/ffffff?text=image" alt="placeholder" style="width:100%;height:130px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
      <div style="width:144px;">
        <img src="https://placehold.co/144x130/ffdac1/ffffff?text=image" alt="placeholder" style="width:100%;height:130px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
      <div style="width:144px;">
        <img src="https://placehold.co/144x130/c7ceea/ffffff?text=image" alt="placeholder" style="width:100%;height:130px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
      <div style="width:144px;">
        <img src="https://placehold.co/144x130/ffb7b2/ffffff?text=image" alt="placeholder" style="width:100%;height:130px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
    </div>
    <div style="display:flex;justify-content:space-between;">
      <div style="width:144px;">
        <img src="https://placehold.co/144x155/ffc6ff/ffffff?text=image" alt="placeholder" style="width:100%;height:155px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
      <div style="width:300px;height:155px;border:1px solid #f2e1e3;border-radius:10px;padding:12px;box-sizing:border-box;">
        <div style="font-size:13px;font-weight:bold;color:#6d5959;margin-bottom:12px;">related searches</div>
        <div style="display:flex;align-items:center;margin-bottom:12px;">
          <div style="width:30px;height:30px;background:#b5ead7;border-radius:6px;margin-right:10px;"></div>
          <div style="font-size:12px;color:#6d5959;">alternate search term top</div>
        </div>
        <div style="display:flex;align-items:center;">
          <div style="width:30px;height:30px;background:#ffccd5;border-radius:6px;margin-right:10px;"></div>
          <div style="font-size:12px;color:#6d5959;">alternate search term bttm</div>
        </div>
      </div>
      <div style="width:144px;">
        <img src="https://placehold.co/144x155/b5ead7/ffffff?text=image" alt="placeholder" style="width:100%;height:155px;border-radius:8px;margin-bottom:5px;">
        <div style="display:flex;align-items:center;margin-bottom:2px;">
          <div style="width:8px;height:8px;border-radius:50%;background:#ffccd5;margin-right:5px;"></div>
          <div style="font-size:11px;font-weight:bold;color:#6d5959;">website</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">image description</div>
      </div>
    </div>
  </div>
</div></lj-raw>

03. pastel phone widgets dashboard

620px × 620px

monday, jan 1

event title

all-day

event title

location name

10a-1p

event title

location name

10a-1p

tomorrow

event title

location name

10a-1p

♡

frequently
played

▶

3hr 33min

♫

me & my dog

boygenius

♫

me & my dog

boygenius

♫

me & my dog

boygenius

♫

me & my dog

boygenius

♫

me & my dog

boygenius

‹albums

select

...

recents

edit

messages

✎

🔍

🎙

name

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:620px;height:620px;background:#fff5f6;display:flex;justify-content:space-between;padding:16px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 6px 18px rgba(255,204,213,0.3);font-family:arial,sans-serif;">
  <!-- left column -->
  <div style="width:286px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;">
    <!-- calendar widget -->
    <div style="width:100%;height:210px;background:#ffffff;border-radius:16px;box-shadow:0 6px 16px rgba(255,182,193,0.15);padding:14px;box-sizing:border-box;">
      <div style="font-size:12px;font-weight:bold;color:#ff8fab;margin-bottom:8px;letter-spacing:0.5px;">monday, jan 1</div>
      <div style="display:flex;align-items:center;height:24px;background:#f0e6ff;border-radius:6px;border-left:4px solid #b19ffb;padding:0 8px;margin-bottom:6px;justify-content:space-between;box-sizing:border-box;">
        <div style="font-size:10px;font-weight:bold;color:#6d5959;">event title</div>
        <div style="font-size:9px;color:#917d7d;">all-day</div>
      </div>
      <div style="display:flex;align-items:center;height:32px;background:#e2f0cb;border-radius:6px;border-left:4px solid #b5ead7;padding:0 8px;margin-bottom:6px;justify-content:space-between;box-sizing:border-box;">
        <div>
          <div style="font-size:10px;font-weight:bold;color:#6d5959;">event title</div>
          <div style="font-size:8px;color:#917d7d;">location name</div>
        </div>
        <div style="font-size:9px;color:#917d7d;">10a-1p</div>
      </div>
      <div style="display:flex;align-items:center;height:32px;background:#e2f0cb;border-radius:6px;border-left:4px solid #b5ead7;padding:0 8px;margin-bottom:6px;justify-content:space-between;box-sizing:border-box;">
        <div>
          <div style="font-size:10px;font-weight:bold;color:#6d5959;">event title</div>
          <div style="font-size:8px;color:#917d7d;">location name</div>
        </div>
        <div style="font-size:9px;color:#917d7d;">10a-1p</div>
      </div>
      <div style="font-size:10px;font-weight:bold;color:#917d7d;margin:8px 0 6px 0;">tomorrow</div>
      <div style="display:flex;align-items:center;height:32px;background:#e2f0cb;border-radius:6px;border-left:4px solid #b5ead7;padding:0 8px;justify-content:space-between;box-sizing:border-box;">
        <div>
          <div style="font-size:10px;font-weight:bold;color:#6d5959;">event title</div>
          <div style="font-size:8px;color:#917d7d;">location name</div>
        </div>
        <div style="font-size:9px;color:#917d7d;">10a-1p</div>
      </div>
    </div>
    <!-- music widget -->
    <div style="width:100%;height:362px;background:#ffffff;border-radius:16px;box-shadow:0 6px 16px rgba(255,182,193,0.15);padding:14px;box-sizing:border-box;overflow:hidden;">
      <div style="display:flex;gap:12px;margin-bottom:14px;align-items:center;">
        <div style="width:70px;height:70px;background:#e8dff5;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 8px rgba(0,0,0,0.03);">
          <div style="font-size:24px;color:#ff8fab;">♡</div>
        </div>
        <div style="flex:1;">
          <div style="font-size:15px;font-weight:bold;color:#6d5959;line-height:1.2;margin-bottom:4px;">frequently<br>played</div>
          <div style="display:flex;align-items:center;gap:6px;">
            <div style="width:16px;height:16px;border-radius:50%;background:#b5ead7;display:flex;align-items:center;justify-content:center;">
              <div style="font-size:8px;color:#ffffff;margin-left:1px;">▶</div>
            </div>
            <div style="font-size:9px;color:#917d7d;">3hr 33min</div>
          </div>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:6px;">
        <div style="display:flex;align-items:center;padding:6px 0;border-bottom:1px solid #fdf8f9;">
          <div style="font-size:14px;color:#917d7d;margin-right:10px;width:16px;text-align:center;">♫</div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:bold;color:#6d5959;">me & my dog</div>
            <div style="font-size:9px;color:#917d7d;">boygenius</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:6px 0;border-bottom:1px solid #fdf8f9;">
          <div style="font-size:14px;color:#917d7d;margin-right:10px;width:16px;text-align:center;">♫</div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:bold;color:#6d5959;">me & my dog</div>
            <div style="font-size:9px;color:#917d7d;">boygenius</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:6px 0;border-bottom:1px solid #fdf8f9;">
          <div style="font-size:14px;color:#917d7d;margin-right:10px;width:16px;text-align:center;">♫</div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:bold;color:#6d5959;">me & my dog</div>
            <div style="font-size:9px;color:#917d7d;">boygenius</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:6px 0;border-bottom:1px solid #fdf8f9;">
          <div style="font-size:14px;color:#917d7d;margin-right:10px;width:16px;text-align:center;">♫</div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:bold;color:#6d5959;">me & my dog</div>
            <div style="font-size:9px;color:#917d7d;">boygenius</div>
          </div>
        </div>
        <div style="display:flex;align-items:center;padding:6px 0;">
          <div style="font-size:14px;color:#917d7d;margin-right:10px;width:16px;text-align:center;">♫</div>
          <div style="flex:1;">
            <div style="font-size:11px;font-weight:bold;color:#6d5959;">me & my dog</div>
            <div style="font-size:9px;color:#917d7d;">boygenius</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- right column -->
  <div style="width:286px;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;">
    <!-- gallery widget -->
    <div style="width:100%;height:362px;background:#ffffff;border-radius:16px;box-shadow:0 6px 16px rgba(255,182,193,0.15);padding:14px;box-sizing:border-box;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
        <div style="display:flex;align-items:center;font-size:12px;color:#a2d2ff;font-weight:bold;">
          <span style="font-size:14px;margin-right:4px;">‹</span>albums
        </div>
        <div style="display:flex;align-items:center;gap:6px;">
          <div style="background:#f2e1e3;color:#ff8fab;font-size:10px;font-weight:bold;padding:3px 10px;border-radius:10px;">select</div>
          <div style="background:#f0e6e8;color:#917d7d;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:bold;line-height:1;">...</div>
        </div>
      </div>
      <div style="font-size:18px;font-weight:bold;color:#6d5959;margin-bottom:12px;">recents</div>
      <div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:6px;height:245px;">
        <img src="https://placehold.co/80x80/ffccd5/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/ffdac1/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/ffe5b4/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/b5ead7/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/c7ceea/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/ffc6ff/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/e2f0cb/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/e8dff5/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
        <img src="https://placehold.co/80x80/fff0f3/ffffff?text=img" alt="pic" style="width:100%;height:100%;border-radius:8px;object-fit:cover;">
      </div>
    </div>
    <!-- messages widget -->
    <div style="width:100%;height:210px;background:#ffffff;border-radius:16px;box-shadow:0 6px 16px rgba(255,182,193,0.15);padding:14px;box-sizing:border-box;">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
        <div style="font-size:12px;color:#a2d2ff;font-weight:bold;">edit</div>
        <div style="font-size:14px;font-weight:bold;color:#6d5959;">messages</div>
        <div style="font-size:14px;color:#a2d2ff;">✎</div>
      </div>
      <div style="background:#fdf8f9;border-radius:10px;height:24px;display:flex;align-items:center;padding:0 8px;margin-bottom:14px;justify-content:space-between;box-sizing:border-box;">
        <div style="display:flex;align-items:center;gap:6px;">
          <div style="font-size:10px;color:#917d7d;">🔍</div>
          <div style="font-size:10px;color:#917d7d;">search</div>
        </div>
        <div style="font-size:10px;color:#917d7d;">🎙</div>
      </div>
      <div style="display:flex;justify-content:space-around;">
        <div style="text-align:center;width:60px;">
          <img src="https://placehold.co/40x40/e8dff5/ffffff?text=u1" alt="avatar" style="width:40px;height:40px;border-radius:50%;margin:0 auto 4px auto;box-shadow:0 2px 6px rgba(0,0,0,0.03);display:block;object-fit:cover;">
          <div style="font-size:10px;color:#917d7d;">name</div>
        </div>
        <div style="text-align:center;width:60px;">
          <img src="https://placehold.co/40x40/ffccd5/ffffff?text=u2" alt="avatar" style="width:40px;height:40px;border-radius:50%;margin:0 auto 4px auto;box-shadow:0 2px 6px rgba(0,0,0,0.03);display:block;object-fit:cover;">
          <div style="font-size:10px;color:#917d7d;">name</div>
        </div>
        <div style="text-align:center;width:60px;">
          <img src="https://placehold.co/40x40/ffe5b4/ffffff?text=u3" alt="avatar" style="width:40px;height:40px;border-radius:50%;margin:0 auto 4px auto;box-shadow:0 2px 6px rgba(0,0,0,0.03);display:block;object-fit:cover;">
          <div style="font-size:10px;color:#917d7d;">name</div>
        </div>
      </div>
    </div>
  </div>
</div></lj-raw>

04. social media stories quad

800px × auto

username

14h

▶ ...

reply to username...

♡ ➤

username

14h

▶ ...

@username

reply to username...

♡ ➤

username

14h

▶ ...

📍

location name

title here

🥰

title here

days

hours

minutes

reply to username...

♡ ➤

username

14h

▶ ...

ask me a question

type something...

song title

artist name

poll example

yes

reply to username...

♡ ➤

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:800px;max-width:100%;margin:20px auto;background:#fff5f6;padding:24px;box-sizing:border-box;border-radius:28px;border:1px solid #eedadd;box-shadow:0 8px 24px rgba(255,204,213,0.3);display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:24px;font-family:'helvetica neue', helvetica, arial, sans-serif;">
  <!-- story 1 (top left: 6-grid image background) -->
  <div style="width:360px;height:640px;border-radius:18px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.08);box-sizing:border-box;display:grid;grid-template-columns:100%;grid-template-rows:100%;">
    <div style="grid-area:1/1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3, minmax(0, 1fr));width:100%;height:100%;min-height:0;overflow:hidden;">
      <img src="https://placehold.co/180x240/a3b899/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
      <img src="https://placehold.co/180x240/c2b2a2/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
      <img src="https://placehold.co/180x240/c0a9bd/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
      <img src="https://placehold.co/180x240/93a8ac/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
      <img src="https://placehold.co/180x240/a3b899/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
      <img src="https://placehold.co/180x240/c2b2a2/ffffff?text=image" alt="placeholder" style="width:100%;height:100%;min-height:0;object-fit:cover;display:block;">
    </div>
    <div style="grid-area:1/1;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;padding:16px 14px;width:100%;height:100%;min-height:0;background:linear-gradient(180deg,rgba(0,0,0,0.45) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 65%,rgba(0,0,0,0.65) 100%);">
      <div>
        <div style="display:flex;gap:4px;width:100%;margin-bottom:10px;">
          <div style="flex:1;height:2px;background:#ffffff;border-radius:2px;"></div>
          <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
          <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
          <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        </div>
        <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
          <div style="display:flex;align-items:center;gap:8px;">
            <div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div>
            <div style="font-size:12px;color:#ffffff;font-weight:bold;">username</div>
            <div style="font-size:12px;color:rgba(255,255,255,0.7);">14h</div>
          </div>
          <div style="display:flex;align-items:center;gap:10px;color:#ffffff;font-size:14px;">
            <span>▶</span>
            <span style="font-weight:bold;letter-spacing:-1px;">...</span>
          </div>
        </div>
      </div>
      <div style="flex:1;"></div>
      <div style="display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;">
        <a href="#" style="flex:1;height:36px;border:1px solid rgba(255,255,255,0.85);border-radius:18px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#ffffff;text-decoration:none;box-sizing:border-box;background:rgba(0,0,0,0.25);">reply to username...</a>
        <div style="font-size:18px;color:#ffffff;display:flex;gap:10px;align-items:center;">
          <span>♡</span>
          <span>➤</span>
        </div>
      </div>
    </div>
  </div>
  <!-- story 2 (top right: shared post) -->
  <div style="width:360px;height:640px;border-radius:18px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.08);background:linear-gradient(180deg,#c2b2a2,#4a443f);box-sizing:border-box;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;">
    <div>
      <div style="display:flex;gap:4px;width:100%;margin-bottom:10px;">
        <div style="flex:1;height:2px;background:#ffffff;border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
        <div style="display:flex;align-items:center;gap:8px;">
          <div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div>
          <div style="font-size:12px;color:#ffffff;font-weight:bold;">username</div>
          <div style="font-size:12px;color:rgba(255,255,255,0.7);">14h</div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;color:#ffffff;font-size:14px;">
          <span>▶</span>
          <span style="font-weight:bold;letter-spacing:-1px;">...</span>
        </div>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;">
      <div style="background:#ffffff;padding:10px;border-radius:14px;box-shadow:0 8px 20px rgba(0,0,0,0.2);">
        <img src="https://placehold.co/240x240/e8dff5/ffffff?text=image" alt="placeholder" style="width:240px;height:240px;border-radius:8px;display:block;object-fit:cover;">
        <div style="font-size:11px;color:#555555;margin-top:8px;font-weight:bold;padding-left:2px;">@username</div>
      </div>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;">
      <a href="#" style="flex:1;height:36px;border:1px solid rgba(255,255,255,0.85);border-radius:18px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#ffffff;text-decoration:none;box-sizing:border-box;background:rgba(0,0,0,0.2);">reply to username...</a>
      <div style="font-size:18px;color:#ffffff;display:flex;gap:10px;align-items:center;">
        <span>♡</span>
        <span>➤</span>
      </div>
    </div>
  </div>
  <!-- story 3 (bottom left: interactive stickers) -->
  <div style="width:360px;height:640px;border-radius:18px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.08);background:#3a3536;box-sizing:border-box;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;">
    <div>
      <div style="display:flex;gap:4px;width:100%;margin-bottom:10px;">
        <div style="flex:1;height:2px;background:#ffffff;border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
        <div style="display:flex;align-items:center;gap:8px;">
          <div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div>
          <div style="font-size:12px;color:#ffffff;font-weight:bold;">username</div>
          <div style="font-size:12px;color:rgba(255,255,255,0.7);">14h</div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;color:#ffffff;font-size:14px;">
          <span>▶</span>
          <span style="font-weight:bold;letter-spacing:-1px;">...</span>
        </div>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;">
      <div style="width:240px;background:#ffffff;border-radius:12px;padding:8px 14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);">
        <div style="color:#b19ffb;font-size:16px;">📍</div>
        <div style="font-size:13px;font-weight:bold;color:#302b2c;">location name</div>
      </div>
      <div style="width:240px;background:#ffffff;border-radius:12px;padding:12px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;box-shadow:0 4px 12px rgba(0,0,0,0.15);gap:6px;">
        <div style="font-size:13px;font-weight:bold;color:#302b2c;text-align:center;">title here</div>
        <div style="display:flex;align-items:center;width:100%;gap:8px;">
          <div style="font-size:18px;">🥰</div>
          <div style="flex:1;height:8px;background:#f0e6e8;border-radius:4px;overflow:hidden;display:flex;">
            <div style="height:100%;width:70%;background:#ffccd5;border-radius:4px;"></div>
          </div>
        </div>
      </div>
      <div style="width:240px;background:#ffffff;border-radius:12px;padding:12px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,0.15);">
        <div style="font-size:11px;font-weight:bold;color:#302b2c;text-align:left;letter-spacing:0.5px;">title here</div>
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <div style="text-align:center;">
            <div style="display:flex;gap:2px;">
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
            </div>
            <div style="font-size:8px;color:#917d7d;margin-top:3px;">days</div>
          </div>
          <div style="font-size:12px;color:#302b2c;font-weight:bold;margin-bottom:10px;">:</div>
          <div style="text-align:center;">
            <div style="display:flex;gap:2px;">
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
            </div>
            <div style="font-size:8px;color:#917d7d;margin-top:3px;">hours</div>
          </div>
          <div style="font-size:12px;color:#302b2c;font-weight:bold;margin-bottom:10px;">:</div>
          <div style="text-align:center;">
            <div style="display:flex;gap:2px;">
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
              <div style="width:16px;height:24px;background:#fdf8f9;border:1px solid #eedadd;border-radius:3px;"></div>
            </div>
            <div style="font-size:8px;color:#917d7d;margin-top:3px;">minutes</div>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;">
      <a href="#" style="flex:1;height:36px;border:1px solid rgba(255,255,255,0.85);border-radius:18px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#ffffff;text-decoration:none;box-sizing:border-box;background:rgba(0,0,0,0.2);">reply to username...</a>
      <div style="font-size:18px;color:#ffffff;display:flex;gap:10px;align-items:center;">
        <span>♡</span>
        <span>➤</span>
      </div>
    </div>
  </div>
  <!-- story 4 (bottom right: q&a, music & poll) -->
  <div style="width:360px;height:640px;border-radius:18px;overflow:hidden;box-shadow:0 5px 15px rgba(0,0,0,0.08);background:#3a3536;box-sizing:border-box;padding:16px 14px;display:flex;flex-direction:column;justify-content:space-between;">
    <div>
      <div style="display:flex;gap:4px;width:100%;margin-bottom:10px;">
        <div style="flex:1;height:2px;background:#ffffff;border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
        <div style="flex:1;height:2px;background:rgba(255,255,255,0.4);border-radius:2px;"></div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
        <div style="display:flex;align-items:center;gap:8px;">
          <div style="width:28px;height:28px;border-radius:50%;background:#ffffff;flex-shrink:0;"></div>
          <div style="font-size:12px;color:#ffffff;font-weight:bold;">username</div>
          <div style="font-size:12px;color:rgba(255,255,255,0.7);">14h</div>
        </div>
        <div style="display:flex;align-items:center;gap:10px;color:#ffffff;font-size:14px;">
          <span>▶</span>
          <span style="font-weight:bold;letter-spacing:-1px;">...</span>
        </div>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:16px;">
      <a href="#" style="text-decoration:none;display:block;width:240px;background:#ffffff;border-radius:12px;padding:12px;box-sizing:border-box;box-shadow:0 4px 12px rgba(0,0,0,0.15);margin-top:14px;text-align:center;">
        <div style="width:30px;height:30px;border-radius:50%;background:#ffb7b2;margin:-25px auto 6px auto;border:2px solid #ffffff;box-sizing:border-box;"></div>
        <div style="font-size:12px;font-weight:bold;color:#302b2c;margin-bottom:6px;">ask me a question</div>
        <div style="background:#f0e6e8;border-radius:6px;height:24px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#917d7d;">type something...</div>
      </a>
      <div style="width:240px;background:#ffffff;border-radius:10px;padding:8px 12px;box-sizing:border-box;display:flex;align-items:center;gap:10px;box-shadow:0 4px 12px rgba(0,0,0,0.15);">
        <div style="width:32px;height:32px;background:#111111;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:2px;flex-shrink:0;">
          <div style="width:2.5px;height:14px;background:#ffffff;border-radius:1px;"></div>
          <div style="width:2.5px;height:9px;background:#ffffff;border-radius:1px;"></div>
          <div style="width:2.5px;height:16px;background:#ffffff;border-radius:1px;"></div>
        </div>
        <div style="flex:1;text-align:left;">
          <div style="font-size:11px;font-weight:bold;color:#302b2c;line-height:1.2;">song title</div>
          <div style="font-size:10px;color:#917d7d;line-height:1.2;">artist name</div>
        </div>
      </div>
      <div style="width:240px;background:#ffffff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.15);display:flex;flex-direction:column;">
        <div style="background:#ff8f72;color:#ffffff;font-size:11px;font-weight:bold;text-align:center;padding:7px 0;letter-spacing:0.5px;">poll example</div>
        <div style="padding:8px;display:flex;flex-direction:column;gap:5px;box-sizing:border-box;">
          <div style="background:#fdf8f9;border-radius:6px;padding:6px 10px;font-size:11px;color:#302b2c;font-weight:bold;text-align:left;">yes</div>
          <div style="background:#fdf8f9;border-radius:6px;padding:6px 10px;font-size:11px;color:#302b2c;font-weight:bold;text-align:left;">no</div>
        </div>
      </div>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;width:100%;gap:10px;">
      <a href="#" style="flex:1;height:36px;border:1px solid rgba(255,255,255,0.85);border-radius:18px;display:flex;align-items:center;padding:0 14px;font-size:11px;color:#ffffff;text-decoration:none;box-sizing:border-box;background:rgba(0,0,0,0.2);">reply to username...</a>
      <div style="font-size:18px;color:#ffffff;display:flex;gap:10px;align-items:center;">
        <span>♡</span>
        <span>➤</span>
      </div>
    </div>
  </div>
</div></lj-raw>

05. phone boarding pass & wallet

320px × 600px

7:00

🔋

wallet

denver

los angeles

den

✈

lax

18:00

fri, june 3

19:30

fri, june 3

terminal

gate

boarding

17:25

boarding pass

flight

sc 333

passenger

imani ayad

seat

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:320px;height:600px;background:#fcf6f7;border:3px solid #332d2f;border-radius:32px;box-shadow:0 10px 25px rgba(90,77,92,0.15);padding:12px;box-sizing:border-box;position:relative;overflow:hidden;font-family:arial,sans-serif;">
  <div style="width:110px;height:18px;background:#332d2f;border-radius:0 0 12px 12px;margin:-12px auto 8px auto;box-sizing:border-box;"></div>
  <div style="display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:12px;padding:0 4px;box-sizing:border-box;">
    <div style="font-size:11px;font-weight:bold;color:#332d2f;">7:00</div>
    <div style="display:flex;align-items:center;gap:4px;">
      <div style="display:flex;align-items:flex-end;gap:2px;height:10px;">
        <div style="width:2px;height:3px;background:#332d2f;border-radius:0.5px;"></div>
        <div style="width:2px;height:5px;background:#332d2f;border-radius:0.5px;"></div>
        <div style="width:2px;height:7px;background:#332d2f;border-radius:0.5px;"></div>
        <div style="width:2px;height:10px;background:#332d2f;border-radius:0.5px;"></div>
      </div>
      <div style="font-size:10px;color:#332d2f;">🔋</div>
      <div style="width:16px;height:8px;border:1px solid #332d2f;border-radius:2px;padding:1px;box-sizing:border-box;display:flex;align-items:center;">
        <div style="width:10px;height:100%;background:#332d2f;border-radius:0.5px;"></div>
      </div>
    </div>
  </div>
  <div style="display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:16px;padding:0 4px;box-sizing:border-box;">
    <div style="font-size:24px;font-weight:bold;color:#332d2f;letter-spacing:-0.5px;">wallet</div>
    <div style="width:24px;height:24px;border-radius:50%;background:#ffb3c6;display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:bold;font-size:14px;cursor:pointer;">+</div>
  </div>
  <div style="display:flex;flex-direction:column;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,0.04);width:100%;box-sizing:border-box;">
    <!-- top section -->
    <div style="background:#c7ceea;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;">
      <div style="display:flex;justify-content:space-between;width:100%;margin-bottom:2px;">
        <div style="font-size:8px;color:rgba(255,255,255,0.7);letter-spacing:0.5px;">denver</div>
        <div style="font-size:8px;color:rgba(255,255,255,0.7);letter-spacing:0.5px;">los angeles</div>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:8px;">
        <div style="font-size:26px;font-weight:300;color:#ffffff;line-height:1;">den</div>
        <div style="font-size:20px;color:#ffffff;transform:rotate(90deg);display:inline-block;line-height:1;">✈</div>
        <div style="font-size:26px;font-weight:300;color:#ffffff;line-height:1;">lax</div>
      </div>
      <div style="display:flex;justify-content:space-between;width:100%;">
        <div>
          <div style="font-size:16px;font-weight:bold;color:#ffffff;line-height:1.1;">18:00</div>
          <div style="font-size:8px;color:rgba(255,255,255,0.7);margin-top:2px;">fri, june 3</div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:16px;font-weight:bold;color:#ffffff;line-height:1.1;">19:30</div>
          <div style="font-size:8px;color:rgba(255,255,255,0.7);margin-top:2px;">fri, june 3</div>
        </div>
      </div>
    </div>
    <!-- middle section -->
    <div style="background:#e8dff5;padding:12px 16px;box-sizing:border-box;">
      <div style="display:flex;justify-content:space-between;width:100%;">
        <div>
          <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">terminal</div>
          <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">1a</div>
        </div>
        <div>
          <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">gate</div>
          <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">2b</div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">boarding</div>
          <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">17:25</div>
        </div>
      </div>
    </div>
    <!-- bottom section -->
    <div style="background:#ffffff;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;">
      <div style="font-size:9px;font-weight:bold;color:#ff8fab;letter-spacing:0.5px;margin-bottom:12px;">boarding pass</div>
      <div style="margin-bottom:10px;">
        <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">flight</div>
        <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">sc 333</div>
      </div>
      <div style="display:flex;justify-content:space-between;width:100%;margin-bottom:14px;">
        <div>
          <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">passenger</div>
          <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">imani ayad</div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:8px;color:#917d7d;margin-bottom:2px;">seat</div>
          <div style="font-size:16px;font-weight:bold;color:#5c4d5c;">6a</div>
        </div>
      </div>
      <!-- barcode -->
      <div style="display:flex;justify-content:center;align-items:stretch;height:36px;width:100%;margin-top:14px;background:#ffffff;box-sizing:border-box;padding:0 20px;">
        <div style="width:2px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:3px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:3px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:4px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:3px;background:#332d2f;margin-right:3px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:4px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:3px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:3px;"></div>
        <div style="width:4px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:3px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:3px;"></div>
        <div style="width:4px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:2px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;margin-right:1px;"></div>
        <div style="width:3px;background:#332d2f;margin-right:2px;"></div>
        <div style="width:1px;background:#332d2f;"></div>
      </div>
    </div>
  </div>
</div></lj-raw>

06. pagesijx celebrity tabloid

600px × 480px

pagesijx

two-line headline to
different article.
read more ›

adorable pastel shop

use code 'cute' for 10% off

keeping up with celebs

xyz joins lollapalooza lineup as headliner

by article author

💬 comments

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:600px;height:480px;background:#ffffff;border:1px solid #eedadd;border-radius:16px;box-shadow:0 10px 30px rgba(90,77,92,0.1);position:relative;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;display:flex;flex-direction:column;box-sizing:border-box;">
  <div style="width:100%;height:56px;background:#111111;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-sizing:border-box;flex-shrink:0;">
    <div style="display:flex;gap:2px;color:#ffffff;font-size:14px;align-items:center;"></div>
    <div style="font-family:impact, sans-serif;font-size:32px;color:#ffffff;letter-spacing:1px;user-select:none;">pagesijx</div>
    <div style="width:0px;height:10px;"></div>
  </div>
  <div style="width:100%;height:4px;background:#f6c333;flex-shrink:0;"></div>
  <div style="width:100%;height:64px;background:#ffffff;display:flex;padding:8px 16px;box-sizing:border-box;border-bottom:1px solid #eedadd;flex-shrink:0;justify-content:space-between;align-items:center;">
    <!-- teaser 1 -->
    <div style="display:flex;align-items:center;gap:8px;width:270px;box-sizing:border-box;">
      <div style="width:60px;height:40px;background-image:url('https://placehold.co/60x40/ffccd5/ffffff?text=image');background-size:cover;background-position:center;border-radius:4px;flex-shrink:0;"></div>
      <div style="font-size:9px;color:#332d2f;line-height:1.2;font-weight:bold;">
        two-line headline to<br>different article.<br>
        <span style="color:#ff8fab;font-size:8px;font-weight:bold;cursor:pointer;">read more ›</span>
      </div>
    </div>
    <div style="width:1px;height:40px;background:#eedadd;flex-shrink:0;"></div>
    <!-- teaser 2 -->
    <div style="display:flex;align-items:center;gap:8px;width:270px;box-sizing:border-box;">
      <div style="width:60px;height:40px;background-image:url('https://placehold.co/60x40/ffdac1/ffffff?text=image');background-size:cover;background-position:center;border-radius:4px;flex-shrink:0;"></div>
      <div style="font-size:9px;color:#332d2f;line-height:1.2;font-weight:bold;">
        two-line headline to<br>different article.<br>
        <span style="color:#ff8fab;font-size:8px;font-weight:bold;cursor:pointer;">read more ›</span>
      </div>
    </div>
  </div>
  <div style="display:flex;flex:1;padding:16px;box-sizing:border-box;gap:16px;overflow:hidden;width:100%;">
    <!-- left column -->
    <div style="width:190px;display:flex;flex-direction:column;gap:4px;flex-shrink:0;box-sizing:border-box;height:100%;">
      <div style="width:190px;height:200px;border-radius:8px;background-image:url('https://placehold.co/190x200/ffccd5/ffffff?text=image');background-size:cover;background-position:center;border:1px solid #eedadd;box-sizing:border-box;flex-shrink:0;"></div>
      <div style="width:100%;height:3px;background:#f6c333;border-radius:1px;flex-shrink:0;"></div>
      <div style="flex:1;background:#fffbf0;border:1px dashed #eedadd;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;box-sizing:border-box;margin-top:2px;">
        <span style="font-size:6px;color:#917d7d;letter-spacing:0.5px;margin-bottom:2px;font-weight:bold;">advertisement</span>
        <div style="font-size:8px;color:#f6c333;font-weight:bold;line-height:1.1;">adorable pastel shop</div>
        <div style="font-size:7px;color:#917d7d;margin-top:2px;line-height:1;">use code 'cute' for 10% off</div>
      </div>
    </div>
    <!-- right column -->
    <div style="flex:1;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;overflow-y:auto;height:100%;padding-right:4px;">
      <div style="background:#f6c333;color:#332d2f;font-weight:bold;font-size:9px;padding:3px 8px;border-radius:4px;display:inline-block;align-self:flex-start;">keeping up with celebs</div>
      <div style="font-size:18px;font-weight:bold;color:#332d2f;line-height:1.2;letter-spacing:-0.5px;">xyz joins lollapalooza lineup as headliner</div>
      <div style="display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;margin-top:2px;">
        <div style="font-size:10px;color:#917d7d;">by <span style="color:#ff8fab;font-weight:bold;">article author</span></div>
        <div style="border:1px solid #ff8fab;border-radius:12px;padding:3px 8px;font-size:9px;color:#ff8fab;display:flex;align-items:center;gap:4px;font-weight:bold;cursor:pointer;background:#ffffff;box-sizing:border-box;">
          <span style="font-size:10px;line-height:1;">💬</span>
          <span>comments</span>
        </div>
      </div>
      <div style="font-size:10px;color:#917d7d;line-height:1.5;text-align:justify;margin-top:4px;box-sizing:border-box;overflow:scroll;">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. quis ipsum suspendisse ultrices gravida. risus commodo viverra maecenas accumsan lacus vel facilisis.</div>
    </div>
  </div>
</div></lj-raw>

07. zoom meeting room

650px × 420px

🔊 zoom name!

img1

📹 🎥

img2

📹 🎥

name3

📹 🎥

img4

📹 🎥

🎥

📹

📞

💬

👥+

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:650px;height:420px;background:#2e2a2c;padding:18px;box-sizing:border-box;border-radius:16px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.15);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="display:flex;align-items:center;gap:8px;width:100%;color:#ffffff;margin-bottom:12px;box-sizing:border-box;flex-shrink:0;">
    <span style="font-size:14px;line-height:1;">🔊</span>
    <span style="font-size:11px;font-weight:bold;letter-spacing:0.5px;">zoom name!</span>
  </div>
  <div style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;flex:1;margin-bottom:16px;box-sizing:border-box;">
    <!-- panel 1 -->
    <div style="width:100%;height:100%;border-radius:8px;border:2px solid #a2d2ff;overflow:hidden;position:relative;background:#111111 url('https://placehold.co/300x150/a2d2ff/ffffff?text=img1') no-repeat center;background-size:cover;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;justify-content:space-between;z-index:1;">
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;font-size:8px;color:#ffffff;font-weight:bold;align-self:flex-start;z-index:2;letter-spacing:0.3px;">img1</div>
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;display:flex;gap:4px;align-self:flex-end;align-items:center;z-index:2;">
        <span style="font-size:10px;line-height:1;color:#ffffff;">📹</span>
        <span style="font-size:10px;line-height:1;color:#ffffff;">🎥</span>
      </div>
    </div>
    <!-- panel 2 -->
    <div style="width:100%;height:100%;border-radius:8px;border:2px solid #ffdac1;overflow:hidden;position:relative;background-image:url('https://placehold.co/300x150/ffdac1/ffffff?text=img2');background-size:cover;background-position:center;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;justify-content:space-between;z-index:1;">
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;font-size:8px;color:#ffffff;font-weight:bold;align-self:flex-start;z-index:2;letter-spacing:0.3px;">img2</div>
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;display:flex;gap:4px;align-self:flex-end;align-items:center;z-index:2;">
        <span style="font-size:10px;line-height:1;color:#ffffff;">📹</span>
        <span style="font-size:10px;line-height:1;color:#ffffff;">🎥</span>
      </div>
    </div>
    <!-- panel 3 -->
    <div style="width:100%;height:100%;border-radius:8px;border:2px solid #b5ead7;overflow:hidden;position:relative;background-image:url('https://placehold.co/300x150/b5ead7/ffffff?text=img3');background-size:cover;background-position:center;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;justify-content:space-between;z-index:1;">
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;font-size:8px;color:#ffffff;font-weight:bold;align-self:flex-start;z-index:2;letter-spacing:0.3px;">name3</div>
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;display:flex;gap:4px;align-self:flex-end;align-items:center;z-index:2;">
        <span style="font-size:10px;line-height:1;color:#ffffff;">📹</span>
        <span style="font-size:10px;line-height:1;color:#ffffff;">🎥</span>
      </div>
    </div>
    <!-- panel 4 -->
    <div style="width:100%;height:100%;border-radius:8px;border:2px solid #e8dff5;overflow:hidden;position:relative;background-image:url('https://placehold.co/300x150/e8dff5/ffffff?text=img4');background-size:cover;background-position:center;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;justify-content:space-between;z-index:1;">
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;font-size:8px;color:#ffffff;font-weight:bold;align-self:flex-start;z-index:2;letter-spacing:0.3px;">img4</div>
      <div style="background:rgba(0,0,0,0.45);border-radius:4px;padding:2px 6px;display:flex;gap:4px;align-self:flex-end;align-items:center;z-index:2;">
        <span style="font-size:10px;line-height:1;color:#ffffff;">📹</span>
        <span style="font-size:10px;line-height:1;color:#ffffff;">🎥</span>
      </div>
    </div>
  </div>
  <div style="display:flex;justify-content:center;align-items:center;gap:12px;width:100%;height:40px;box-sizing:border-box;flex-shrink:0;">
    <div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:12px;cursor:pointer;">🎥</div>
    <div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:12px;cursor:pointer;">📹</div>
    <div style="width:36px;height:36px;border-radius:50%;background:#ff4d4d;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:16px;cursor:pointer;box-shadow:0 2px 6px rgba(255,77,77,0.3);">
      <span style="transform:rotate(135deg);display:inline-block;line-height:1;">📞</span>
    </div>
    <div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:12px;cursor:pointer;">💬</div>
    <div style="width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:12px;cursor:pointer;">👥+</div>
  </div>
</div></lj-raw>

08. live video stream & chat

750px × 500px

shampoo

live

cora

✓

rainy day soft glam & story game cuz im bored

little witch in the woods english

👋react

♡

🔔

★manage your sub

👑gift a sub ›

👤5,782

1:12:36

➦ ...

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:750px;height:500px;background:#ffffff;box-sizing:border-box;border-radius:20px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.1);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="width:100%;height:380px;background-image:url('https://placehold.co/750x380/2e2a2c/ffffff?text=stream');background-size:cover;background-position:center;position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:16px;box-sizing:border-box;flex-shrink:0;">
    <div style="display:flex;align-items:center;gap:8px;box-sizing:border-box;">
      <div style="width:32px;height:32px;border-radius:50%;background:#ff8fab;display:flex;align-items:center;justify-content:center;color:#ffffff;font-weight:bold;font-size:16px;box-shadow:0 2px 6px rgba(0,0,0,0.1);">t</div>
      <div style="background:rgba(0,0,0,0.45);padding:4px 12px;border-radius:12px;color:#ffffff;font-size:9px;font-weight:bold;letter-spacing:0.5px;box-shadow:0 2px 6px rgba(0,0,0,0.1);">shampoo</div>
    </div>
    <div style="width:136px;height:102px;border-radius:10px;background-image:url('https://placehold.co/136x102/ffccd5/ffffff?text=cam');background-size:cover;background-position:center;border:2px solid #ffffff;box-shadow:0 4px 12px rgba(0,0,0,0.15);align-self:flex-start;margin-top:auto;"></div>
  </div>
  <div style="width:100%;height:120px;background:#1e1a1c;border-top:1px solid #eedadd;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;box-sizing:border-box;flex-shrink:0;position:relative;z-index:2;">
    <div style="display:flex;align-items:center;gap:14px;box-sizing:border-box;">
      <div style="position:relative;width:64px;height:64px;flex-shrink:0;box-sizing:border-box;">
        <div style="width:100%;height:100%;border-radius:50%;background-image:url('https://placehold.co/64x64/ff8fab/ffffff?text=cora');background-size:cover;background-position:center;border:2px solid #ff8fab;box-sizing:border-box;"></div>
        <div style="position:relative;margin-top:-14px;margin-left:14px;background:#ff8fab;color:#ffffff;font-size:7px;font-weight:bold;padding:1px 6px;border-radius:4px;display:inline-block;box-shadow:0 1px 4px rgba(0,0,0,0.1);z-index:3;">live</div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;box-sizing:border-box;text-align:left;">
        <div style="display:flex;align-items:center;gap:4px;">
          <span style="font-size:13px;font-weight:bold;color:#ffffff;letter-spacing:-0.3px;">cora</span>
          <div style="width:12px;height:12px;border-radius:50%;background:#a2d2ff;color:#ffffff;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:bold;line-height:1;">✓</div>
        </div>
        <div style="font-size:10.5px;font-weight:bold;color:#ffffff;line-height:1.2;margin:2px 0;">rainy day soft glam & story game cuz im bored</div>
        <div style="display:flex;align-items:center;gap:8px;">
          <span style="font-size:9.5px;color:#ffccd5;font-weight:bold;cursor:pointer;">little witch in the woods</span>
          <span style="background:rgba(255,255,255,0.1);border-radius:10px;padding:2px 8px;font-size:8px;color:rgba(255,255,255,0.7);font-weight:bold;">english</span>
        </div>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;box-sizing:border-box;flex-shrink:0;">
      <div style="display:flex;align-items:center;gap:6px;box-sizing:border-box;">
        <div style="display:flex;align-items:center;gap:3px;font-size:10px;color:rgba(255,255,255,0.8);font-weight:bold;margin-right:6px;">
          <span style="font-size:12px;line-height:1;">👋</span>react
        </div>
        <div style="width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:11px;cursor:pointer;">♡</div>
        <div style="width:24px;height:24px;border-radius:4px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:11px;cursor:pointer;">🔔</div>
        <div style="background:rgba(255,255,255,0.1);border-radius:4px;padding:4px 10px;font-size:9px;font-weight:bold;color:#ffffff;display:flex;align-items:center;gap:4px;cursor:pointer;box-sizing:border-box;">
          <span style="font-size:8px;">★</span>manage your sub
        </div>
        <div style="background:#dfccf1;border-radius:4px;padding:4px 10px;font-size:9px;font-weight:bold;color:#332d2f;display:flex;align-items:center;gap:4px;cursor:pointer;box-shadow:0 2px 6px rgba(223,204,241,0.2);box-sizing:border-box;">
          <span style="font-size:8px;">👑</span>gift a sub ›
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px;box-sizing:border-box;">
        <div style="display:flex;align-items:center;gap:4px;font-size:10px;font-weight:bold;color:#ff4d4d;">
          <span style="font-size:10px;">👤</span>5,782
        </div>
        <div style="font-size:10px;color:rgba(255,255,255,0.6);font-weight:bold;">1:12:36</div>
        <div style="display:flex;gap:8px;font-size:11px;color:rgba(255,255,255,0.8);align-items:center;cursor:pointer;box-sizing:border-box;margin-top:-2px;">
          <span>➦</span>
          <span style="font-weight:bold;letter-spacing:-1px;">...</span>
        </div>
      </div>


<!-- ==================== item 9: peach aesthetic iphone widgets ==================== -->
    <div class="item-card">
      <div class="item-header">
        <div class="item-title"><span class="item-dot"></span>09. peach aesthetic iphone widgets</div>
        <span style="font-size:11px;color:var(--text-muted);">550px × 600px</span>
      </div>
      <div class="preview-stage">
        <!-- live preview -->
        <lj-raw><!-- credit: htmled --><div style="width:550px;height:600px;background:#f7ebd9;background-image:radial-gradient(circle at 70% 30%, #ffcda5 0%, transparent 60%);padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.1);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;position:relative;">
  <div style="text-align:center;font-size:13px;color:#5c4d5c;margin-bottom:16px;letter-spacing:0.5px;">name's iphone.</div>
  <div style="display:flex;gap:18px;width:100%;height:470px;box-sizing:border-box;position:relative;z-index:1;">
    <!-- column 1 (left) -->
    <div style="width:266px;display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;">
      <div style="width:100%;height:260px;border-radius:18px;background-image:url('https://placehold.co/266x260/ffdac1/ffffff?text=photo');background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;box-sizing:border-box;filter:sepia(0.3) contrast(0.9) brightness(0.95);">
        <div style="font-size:11px;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.5);text-align:left;"><span style="font-weight:bold;">janae420</span> too sleepy :(</div>
      </div>
      <div style="width:90%;height:110px;background:linear-gradient(135deg,#fffcf7,#ffdac1);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;border:1px solid #eedadd;margin-top:10px;">
        <div style="display:flex;align-items:center;gap:6px;">
          <div style="width:22px;height:22px;border-radius:50%;background-image:url('https://placehold.co/22x22/ff8fab/ffffff?text=u');background-size:cover;background-position:center;border:1px solid #ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.05);flex-shrink:0;"></div>
          <span style="font-size:10px;font-weight:bold;color:#332d2f;">+ 1 new imessage</span>
        </div>
        <div style="font-size:13.5px;color:#5c4d5c;line-height:1.3;text-align:center;font-style:italic;">hey baby, i'll call you when i'm done, ok? i wanna hear ur voice before u go to bed.</div>
      </div>
      <div style="width:100%;height:75px;background:linear-gradient(135deg,#fffcf7,#ffe5b4);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:8px 12px;box-sizing:border-box;display:flex;align-items:center;gap:10px;border:1px solid #eedadd;margin-top:10px;">
        <div style="width:44px;height:44px;border-radius:8px;background-image:url('https://placehold.co/44x44/ffe5b4/ffffff?text=music');background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,0.08);flex-shrink:0;"></div>
        <div style="display:flex;flex-direction:column;flex:1;text-align:left;">
          <div style="font-size:11px;font-weight:bold;color:#332d2f;line-height:1.2;">bad habit</div>
          <div style="font-size:9px;color:#917d7d;line-height:1.2;margin-top:1px;">steve lacey</div>
          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:4px;gap:6px;">
            <div style="flex:1;height:3px;background:#eedadd;border-radius:1.5px;position:relative;">
              <div style="position:absolute;left:0;top:0;height:100%;width:40%;background:#ff8fab;border-radius:1.5px;"></div>
            </div>
            <div style="font-size:7.5px;color:#917d7d;">3:42</div>
          </div>
        </div>
      </div>
    </div>
    <!-- column 2 (right) -->
    <div style="width:206px;display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;">
      <div style="width:80%;height:160px;background:linear-gradient(135deg,#fffbf0,#ffdac1);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:12px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #eedadd;">
        <div style="display:flex;align-items:center;gap:4px;">
          <span style="font-size:14px;line-height:1;">💛</span>
          <span style="font-size:13px;font-weight:bold;color:#5c4d5c;letter-spacing:-0.5px;">my to-do list:</span>
        </div>
        <div style="display:flex;flex-direction:column;gap:2px;flex:1;margin-top:6px;">
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">use a facemask !!!</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">do your french lessons</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">post photo dump w isaac</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">pack 4 bali trip :d</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">do your french lessons</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;">post photo dump w isaac</div>
        </div>
      </div>
      <div style="width:24px;height:24px;border-radius:50%;background:#ffe5b4;border:1.5px solid #fff5f6;display:flex;align-items:center;justify-content:center;color:#5c4d5c;font-size:9px;font-weight:bold;position:relative;margin-top:10px;margin-bottom:-12px;margin-left:-8px;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,0.05);user-select:none;">+1</div>
      <div style="width:90%;height:280px;border-radius:18px;background-image:url('https://placehold.co/185x280/ffdac1/ffffff?text=story');background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-sizing:border-box;filter:sepia(0.3) contrast(0.9) brightness(0.95);z-index:1;">
        <div style="display:flex;gap:3px;width:100%;margin-bottom:4px;box-sizing:border-box;">
          <div style="flex:1;height:1.5px;background:#ffffff;border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
        </div>
        <div style="font-size:11px;font-weight:bold;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.4);text-align:right;width:100%;margin-top:auto;margin-bottom:6px;">my luver 4ever <3</div>
      </div>
    </div>
  </div>
</div></lj-raw>
      </div>
      <!-- code box -->
      <div class="code-wrapper">
        <div class="code-top-bar">
          <span class="code-label">html / raw code</span>
          <button class="copy-btn" onclick="copySnippet('code9', this)">📋 copy code</button>
        </div>
        <textarea id="code9" class="code-area" readonly><lj-raw><!-- credit: htmled --><div style="width:550px;height:600px;background:#f7ebd9;background-image:radial-gradient(circle at 70% 30%, #ffcda5 0%, transparent 60%);padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.1);display:flex;flex-direction:column;justify-content:flex-start;align-items:center;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;position:relative;">
  <div style="text-align:center;font-size:13px;color:#5c4d5c;margin-bottom:16px;letter-spacing:0.5px;">name's iphone.</div>
  <div style="display:flex;gap:18px;width:100%;height:470px;box-sizing:border-box;position:relative;z-index:1;">
    <!-- column 1 (left) -->
    <div style="width:266px;display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;">
      <div style="width:100%;height:260px;border-radius:18px;background-image:url('https://placehold.co/266x260/ffdac1/ffffff?text=photo');background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:12px;box-sizing:border-box;filter:sepia(0.3) contrast(0.9) brightness(0.95);">
        <div style="font-size:11px;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.5);text-align:left;"><span style="font-weight:bold;">janae420</span> too sleepy :(</div>
      </div>
      <div style="width:90%;height:110px;background:linear-gradient(135deg,#fffcf7,#ffdac1);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:6px;border:1px solid #eedadd;margin-top:10px;">
        <div style="display:flex;align-items:center;gap:6px;">
          <div style="width:22px;height:22px;border-radius:50%;background-image:url('https://placehold.co/22x22/ff8fab/ffffff?text=u');background-size:cover;background-position:center;border:1px solid #ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.05);flex-shrink:0;"></div>
          <span style="font-size:10px;font-weight:bold;color:#332d2f;">+ 1 new imessage</span>
        </div>
        <div style="font-size:13.5px;color:#5c4d5c;line-height:1.3;text-align:center;font-style:italic;">hey baby, i'll call you when i'm done, ok? i wanna hear ur voice before u go to bed.</div>
      </div>
      <div style="width:100%;height:75px;background:linear-gradient(135deg,#fffcf7,#ffe5b4);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:8px 12px;box-sizing:border-box;display:flex;align-items:center;gap:10px;border:1px solid #eedadd;margin-top:10px;">
        <div style="width:44px;height:44px;border-radius:8px;background-image:url('https://placehold.co/44x44/ffe5b4/ffffff?text=music');background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,0.08);flex-shrink:0;"></div>
        <div style="display:flex;flex-direction:column;flex:1;text-align:left;">
          <div style="font-size:11px;font-weight:bold;color:#332d2f;line-height:1.2;">bad habit</div>
          <div style="font-size:9px;color:#917d7d;line-height:1.2;margin-top:1px;">steve lacey</div>
          <div style="display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:4px;gap:6px;">
            <div style="flex:1;height:3px;background:#eedadd;border-radius:1.5px;position:relative;">
              <div style="position:absolute;left:0;top:0;height:100%;width:40%;background:#ff8fab;border-radius:1.5px;"></div>
            </div>
            <div style="font-size:7.5px;color:#917d7d;">3:42</div>
          </div>
        </div>
      </div>
    </div>
    <!-- column 2 (right) -->
    <div style="width:206px;display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;">
      <div style="width:80%;height:160px;background:linear-gradient(135deg,#fffbf0,#ffdac1);border-radius:18px;box-shadow:0 4px 12px rgba(255,182,193,0.1);padding:12px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #eedadd;">
        <div style="display:flex;align-items:center;gap:4px;">
          <span style="font-size:14px;line-height:1;">💛</span>
          <span style="font-size:13px;font-weight:bold;color:#5c4d5c;letter-spacing:-0.5px;">my to-do list:</span>
        </div>
        <div style="display:flex;flex-direction:column;gap:2px;flex:1;margin-top:6px;">
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">use a facemask !!!</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">do your french lessons</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">post photo dump w isaac</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">pack 4 bali trip :d</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;border-bottom:1px solid rgba(92,77,92,0.1);">do your french lessons</div>
          <div style="font-size:9px;color:#5c4d5c;text-align:center;padding:3px 0;">post photo dump w isaac</div>
        </div>
      </div>
      <div style="width:24px;height:24px;border-radius:50%;background:#ffe5b4;border:1.5px solid #fff5f6;display:flex;align-items:center;justify-content:center;color:#5c4d5c;font-size:9px;font-weight:bold;position:relative;margin-top:10px;margin-bottom:-12px;margin-left:-8px;z-index:10;box-shadow:0 2px 4px rgba(0,0,0,0.05);user-select:none;">+1</div>
      <div style="width:90%;height:280px;border-radius:18px;background-image:url('https://placehold.co/185x280/ffdac1/ffffff?text=story');background-size:cover;background-position:center;box-shadow:0 4px 12px rgba(0,0,0,0.05);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-sizing:border-box;filter:sepia(0.3) contrast(0.9) brightness(0.95);z-index:1;">
        <div style="display:flex;gap:3px;width:100%;margin-bottom:4px;box-sizing:border-box;">
          <div style="flex:1;height:1.5px;background:#ffffff;border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
          <div style="flex:1;height:1.5px;background:rgba(255,255,255,0.3);border-radius:1px;"></div>
        </div>
        <div style="font-size:11px;font-weight:bold;color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,0.4);text-align:right;width:100%;margin-top:auto;margin-bottom:6px;">my luver 4ever <3</div>
      </div>
    </div>
  </div>
</div></lj-raw>

10. warm widget smith dashboard

700px × 500px

♡

song

artist

...

0:16

3:37

|<<

>>|

◌

🐦

pictures

15:56

sunday, 15 september

🔍 search

widget smith

70%

grateful or some quote here

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:700px;height:500px;background:#eee7e1;padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.1);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="width:620px;height:430px;background:#faf6f0;border-radius:20px;border:4px solid #f2dac4;box-shadow:0 8px 24px rgba(0,0,0,0.05);padding:18px;box-sizing:border-box;display:flex;justify-content:space-between;position:relative;z-index:1;">
    <!-- left column -->
    <div style="width:280px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;flex-shrink:0;">
      <div style="width:100%;height:110px;background:#ffffff;border-radius:16px;padding:12px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 2px 6px rgba(0,0,0,0.02);border:1px solid #eedadd;">
        <div style="display:flex;justify-content:space-between;align-items:center;width:100%;">
          <span style="font-size:10px;color:#917d7d;cursor:pointer;">♡</span>
          <div style="text-align:center;">
            <div style="font-size:10px;font-weight:bold;color:#917d7d;line-height:1.2;">song</div>
            <div style="font-size:8px;color:#c9bbc0;line-height:1.2;margin-top:1px;">artist</div>
          </div>
          <span style="font-size:10px;color:#917d7d;cursor:pointer;">...</span>
        </div>
        <div style="display:flex;align-items:center;justify-content:space-between;width:100%;gap:6px;">
          <span style="font-size:7px;color:#917d7d;">0:16</span>
          <div style="flex:1;height:3px;background:#f2dac4;border-radius:1.5px;position:relative;">
            <div style="position:absolute;left:15%;top:-2px;width:7px;height:7px;border-radius:50%;background:#ffffff;border:1px solid #eedadd;"></div>
          </div>
          <span style="font-size:7px;color:#917d7d;">3:37</span>
        </div>
        <div style="display:flex;justify-content:center;align-items:center;gap:16px;width:100%;box-sizing:border-box;">
          <span style="font-size:10px;color:#917d7d;cursor:pointer;">|<<</span>
          <div style="width:24px;height:24px;border-radius:50%;border:1.5px solid #f2dac4;display:flex;align-items:center;justify-content:center;color:#f2dac4;font-size:9px;cursor:pointer;font-weight:bold;">||</div>
          <span style="font-size:10px;color:#917d7d;cursor:pointer;">>>|</span>
        </div>
      </div>
      <div style="display:flex;gap:10px;width:100%;box-sizing:border-box;align-items:flex-start;">
        <div style="width:110px;height:110px;display:grid;grid-template-columns:1fr 1fr;gap:8px;box-sizing:border-box;flex-shrink:0;">
          <div style="width:48px;height:48px;background:#f2dac4;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:14px;font-weight:bold;cursor:pointer;user-select:none;">f</div>
          <div style="width:48px;height:48px;background:#f2dac4;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:14px;font-weight:bold;cursor:pointer;user-select:none;">p</div>
          <div style="width:48px;height:48px;background:#f2dac4;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:14px;font-weight:bold;cursor:pointer;user-select:none;">◌</div>
          <div style="width:48px;height:48px;background:#f2dac4;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:14px;font-weight:bold;cursor:pointer;user-select:none;">🐦</div>
        </div>
        <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;">
          <div style="width:110px;height:110px;border-radius:16px;background-image:url('https://placehold.co/110x110/ffdac1/ffffff?text=image');background-size:cover;background-position:center;box-shadow:0 2px 6px rgba(0,0,0,0.02);"></div>
          <span style="font-size:9px;color:#917d7d;font-weight:bold;">pictures</span>
        </div>
      </div>
      <div style="display:flex;gap:10px;width:100%;box-sizing:border-box;align-items:flex-start;">
        <div style="display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;">
          <div style="width:110px;height:110px;border-radius:16px;background-image:url('https://placehold.co/110x110/ffccd5/ffffff?text=image');background-size:cover;background-position:center;box-shadow:0 2px 6px rgba(0,0,0,0.02);"></div>
          <span style="font-size:9px;color:#917d7d;font-weight:bold;">pictures</span>
        </div>
        <div style="width:110px;height:110px;display:grid;grid-template-columns:1fr 1fr;gap:8px;box-sizing:border-box;flex-shrink:0;align-content:center;justify-items:center;padding:11px 0;">
          <div style="width:36px;height:36px;border-radius:50%;background:#f2dac4;box-shadow:0 1px 4px rgba(0,0,0,0.03);"></div>
          <div style="width:36px;height:36px;border-radius:50%;background-image:url('https://placehold.co/44x44/c7ceea/ffffff?text=u1');background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,0.03);"></div>
          <div style="width:36px;height:36px;border-radius:50%;background-image:url('https://placehold.co/44x44/ffccd5/ffffff?text=u2');background-size:cover;background-position:center;box-shadow:0 1px 4px rgba(0,0,0,0.03);"></div>
          <div style="width:36px;height:36px;border-radius:50%;background:#f2dac4;box-shadow:0 1px 4px rgba(0,0,0,0.03);"></div>
        </div>
      </div>
    </div>
    <!-- right column -->
    <div style="width:280px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;flex-shrink:0;">
      <div style="width:100%;height:80px;background:#ffffff;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,0.02);border:1px solid #eedadd;">
        <div style="font-size:24px;font-weight:bold;color:#917d7d;letter-spacing:1px;line-height:1;">15:56</div>
        <div style="font-size:10px;color:#917d7d;font-weight:bold;margin-top:4px;letter-spacing:0.3px;">sunday, 15 september</div>
      </div>
      <div style="width:100%;height:26px;background:#ffffff;border-radius:8px;border:1px solid #eedadd;display:flex;align-items:center;padding:0 10px;font-size:10px;color:#917d7d;gap:6px;box-sizing:border-box;flex-shrink:0;">
        <span style="font-size:9px;line-height:1;">🔍</span>
        <span>search</span>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;box-sizing:border-box;flex-shrink:0;">
        <div style="width:100%;height:110px;border-radius:16px;background-image:url('https://placehold.co/240x110/ffccd5/ffffff?text=widget+smith');background-size:cover;background-position:center;box-shadow:0 2px 6px rgba(0,0,0,0.02);"></div>
        <span style="font-size:9px;color:#917d7d;font-weight:bold;letter-spacing:0.3px;">widget smith</span>
      </div>
      <div style="display:flex;gap:10px;width:100%;box-sizing:border-box;align-items:center;">
        <div style="width:44px;height:100px;background:#ffffff;border-radius:12px;border:1px solid #eedadd;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,0.02);flex-shrink:0;">
          <div style="width:24px;height:24px;border-radius:50%;border:2px solid #b5ead7;display:flex;align-items:center;justify-content:center;box-sizing:border-box;">
            <div style="font-size:8px;font-weight:bold;color:#b5ead7;">70%</div>
          </div>
          <div style="font-size:9px;color:#917d7d;font-weight:bold;margin-top:6px;">70%</div>
        </div>
        <div style="flex:1;height:100px;background:#f2dac4;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(242,218,196,0.15);box-sizing:border-box;">
          <div style="font-family:'georgia', serif;font-style:italic;font-size:22px;color:#ffffff;letter-spacing:-0.5px;user-select:none;margin-top:-4px; text-align:center;">grateful or some quote here</div>
        </div>
      </div>
    </div>
  </div>
</div></lj-raw>

11. photos gallery & album viewer

700px × 500px

‹

monday

00:00 am

edit

♡

album

my albums show all

recents

15.327

my photo stream

411

favorites

244

album name

📄 library

💖 for you

📁 album

🔍 search

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:700px;height:500px;background:#fbf8f3;padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.1);display:flex;justify-content:center;align-items:center;gap:24px;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="width:290px;height:420px;background:#ffffff;border-radius:18px;border:1px solid #eedadd;box-shadow:0 6px 20px rgba(0,0,0,0.05);display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-sizing:border-box;position:relative;overflow:hidden;">
    <div style="display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;flex-shrink:0;">
      <span style="font-size:14px;color:#ff8fab;font-weight:bold;cursor:pointer;">‹</span>
      <div style="text-align:center;">
        <div style="font-size:10px;font-weight:bold;color:#5c4d5c;line-height:1.2;">monday</div>
        <div style="font-size:8px;color:#917d7d;line-height:1.2;margin-top:1px;">00:00 am</div>
      </div>
      <span style="font-size:10px;color:#ff8fab;font-weight:bold;cursor:pointer;">edit</span>
    </div>
    <div style="flex:1;width:100%;margin:10px 0;border-radius:12px;background-image:linear-gradient(rgba(255,255,255,0.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.4) 1px,transparent 1px),url('https://placehold.co/266x290/ffccd5/ffffff?text=photo');background-size:100% 33.3%,33.3% 100%,cover;background-position:0 33.3%,33.3% 0,center;background-repeat:repeat,repeat,no-repeat;border:1px solid #fdf8f9;position:relative;overflow:hidden;box-sizing:border-box;"></div>
    <div style="display:flex;justify-content:space-between;align-items:center;width:100%;padding-top:4px;box-sizing:border-box;flex-shrink:0;">
      <svg style="width:14px;height:16px;fill:none;stroke:#ff8fab;stroke-width:2.2;cursor:pointer;" viewbox="0 0 24 24">
        <rect x="4" y="10" width="16" height="10" rx="2"/>
        <path d="m12,2v12m-4-8l4-4l4,4"/>
      </svg>
      <span style="font-size:12px;color:#ff8fab;cursor:pointer;">♡</span>
      <svg style="width:14px;height:16px;fill:none;stroke:#ff8fab;stroke-width:2.2;cursor:pointer;" viewbox="0 0 24 24">
        <path d="m4,6h16m-2,0v14a2,2 0 0,1-2,2h-8a2,2 0 0,1-2,-2v-14m3,0v-2a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
      </svg>
    </div>
  </div>
  <div style="width:290px;height:420px;background:#ffffff;border-radius:18px;border:1px solid #eedadd;box-shadow:0 6px 20px rgba(0,0,0,0.05);display:flex;flex-direction:column;justify-content:space-between;padding:12px;box-sizing:border-box;position:relative;overflow:hidden;">
    <div style="width:100%;display:flex;flex-direction:column;box-sizing:border-box;flex-shrink:0;">
      <div style="font-size:22px;font-weight:bold;color:#5c4d5c;margin-bottom:6px;letter-spacing:-0.5px;text-align:left;">album</div>
      <div style="display:flex;justify-content:space-between;align-items:flex-end;width:100%;">
        <span style="font-size:13px;font-weight:bold;color:#5c4d5c;">my albums</span>
        <span style="font-size:11px;color:#ff8fab;font-weight:bold;cursor:pointer;">show all</span>
      </div>
    </div>
    <div style="display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;flex:1;margin:12px 0;box-sizing:border-box;">
      <div style="display:flex;flex-direction:column;gap:4px;width:100%;height:100%;box-sizing:border-box;">
        <div style="flex:1;width:100%;border-radius:8px;background-image:url('https://placehold.co/125x105/b5ead7/ffffff?text=recents');background-size:cover;background-position:center;border:1px solid #fdf8f9;"></div>
        <div style="text-align:left;line-height:1.2;">
          <div style="font-size:10px;font-weight:bold;color:#5c4d5c;">recents</div>
          <div style="font-size:8px;color:#917d7d;margin-top:1px;">15.327</div>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;width:100%;height:100%;box-sizing:border-box;">
        <div style="flex:1;width:100%;border-radius:8px;background-image:url('https://placehold.co/125x105/c7ceea/ffffff?text=stream');background-size:cover;background-position:center;border:1px solid #fdf8f9;"></div>
        <div style="text-align:left;line-height:1.2;">
          <div style="font-size:10px;font-weight:bold;color:#5c4d5c;">my photo stream</div>
          <div style="font-size:8px;color:#917d7d;margin-top:1px;">411</div>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;width:100%;height:100%;box-sizing:border-box;">
        <div style="flex:1;width:100%;border-radius:8px;background-image:url('https://placehold.co/125x105/ffdac1/ffffff?text=favorites');background-size:cover;background-position:center;border:1px solid #fdf8f9;"></div>
        <div style="text-align:left;line-height:1.2;">
          <div style="font-size:10px;font-weight:bold;color:#5c4d5c;">favorites</div>
          <div style="font-size:8px;color:#917d7d;margin-top:1px;">244</div>
        </div>
      </div>
      <div style="display:flex;flex-direction:column;gap:4px;width:100%;height:100%;box-sizing:border-box;">
        <div style="flex:1;width:100%;border-radius:8px;background-image:url('https://placehold.co/125x105/e8dff5/ffffff?text=album');background-size:cover;background-position:center;border:1px solid #fdf8f9;"></div>
        <div style="text-align:left;line-height:1.2;">
          <div style="font-size:10px;font-weight:bold;color:#5c4d5c;">album name</div>
          <div style="font-size:8px;color:#917d7d;margin-top:1px;">24</div>
        </div>
      </div>
    </div>
    <div style="display:flex;justify-content:space-around;align-items:center;width:100%;height:44px;border-top:1px solid #eedadd;box-sizing:border-box;padding-top:6px;flex-shrink:0;margin-bottom:-6px;">
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;">
        <span style="font-size:14px;line-height:1;">📄</span>
        <span style="font-size:8px;color:#917d7d;font-weight:bold;">library</span>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;">
        <span style="font-size:14px;line-height:1;">💖</span>
        <span style="font-size:8px;color:#917d7d;font-weight:bold;">for you</span>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;">
        <span style="font-size:14px;line-height:1;color:#ff8fab;">📁</span>
        <span style="font-size:8px;color:#ff8fab;font-weight:bold;">album</span>
      </div>
      <div style="display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;">
        <span style="font-size:14px;line-height:1;">🔍</span>
        <span style="font-size:8px;color:#917d7d;font-weight:bold;">search</span>
      </div>
    </div>
  </div>
</div></lj-raw>

12. retro desktop mail window

600px × 420px

➤ ☰

↩ 📎 ✎ aa ☺ 🗁

to: text here!!

cc: <text here!!>

subject: text here!!!

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:600px;height:420px;background:#e8dff5;display:flex;align-items:center;justify-content:center;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(255,204,213,0.3);box-sizing:border-box;position:relative;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="position:relative;width:520px;height:360px;background:#ffffff;border-radius:12px;box-shadow:0 8px 24px rgba(90,77,92,0.1);border:1px solid #eedadd;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;z-index:1;">
    <div style="height:36px;background:#eae5ed;display:flex;align-items:center;padding:0 12px;box-sizing:border-box;border-bottom:1px solid #eedadd;justify-content:space-between;flex-shrink:0;">
      <div style="display:flex;align-items:center;gap:14px;">
        <div style="display:gap:6px;display:flex;">
          <div style="width:10px;height:10px;border-radius:50%;background:#ffb7b2;"></div>
          <div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;"></div>
          <div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;"></div>
        </div>
        <div style="display:flex;gap:10px;color:#917d7d;font-size:12px;align-items:center;">
          <span style="cursor:pointer;">➤</span>
          <span style="cursor:pointer;font-size:14px;">☰</span>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:12px;color:#917d7d;font-size:12px;">
        <span style="cursor:pointer;font-size:14px;">↩</span>
        <span style="cursor:pointer;font-size:14px;">📎</span>
        <span style="cursor:pointer;">✎</span>
        <span style="cursor:pointer;font-weight:bold;">aa</span>
        <span style="cursor:pointer;font-size:14px;">☺</span>
        <span style="cursor:pointer;font-size:14px;">🗁</span>
      </div>
    </div>
    <div style="padding:10px 14px;display:flex;flex-direction:column;gap:6px;border-bottom:1px solid #eedadd;background:#ffffff;box-sizing:border-box;flex-shrink:0;">
      <div style="font-size:11px;color:#5c4d5c;line-height:1.2;">
        <span style="color:#917d7d;margin-right:6px;">to:</span> text here!!
      </div>
      <div style="width:100%;height:1px;background:#f0e6e8;"></div>
      <div style="font-size:11px;color:#5c4d5c;line-height:1.2;margin-top:2px;">
        <span style="color:#917d7d;margin-right:6px;">cc:</span> <text here!!>
      </div>
      <div style="width:100%;height:1px;background:#f0e6e8;"></div>
      <div style="font-size:11px;color:#5c4d5c;line-height:1.2;margin-top:2px;">
        <span style="color:#917d7d;margin-right:6px;">subject:</span> text here!!!
      </div>
    </div>
    <p style="flex:1;width:100%;border:none;outline:none;padding:14px;box-sizing:border-box;font-size:11px;font-family:'helvetica neue', arial, sans-serif;color:#5c4d5c;line-height:1.5;resize:none;background:#ffffff;text-align:justify;overflow-y:auto;">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div></lj-raw>

13. contact card & quick actions

500px × 500px

contact name

company name

💬 message

📞 call

📹 facetime

✉ mail

$ pay

mobile (123) 456-7891

email emailhere@gmail.com

birthday month d#, yr##

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:500px;height:500px;background:#eee7e1;padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #eedadd;box-shadow:0 10px 30px rgba(90,77,92,0.15);display:flex;align-items:center;justify-content:center;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;position:relative;">
  <div style="width:340px;height:440px;background:#ffffff;border-radius:24px;box-shadow:0 8px 24px rgba(0,0,0,0.05);border:1.5px solid #eedadd;padding:16px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative;z-index:1;">
    <div style="display:flex;flex-direction:column;align-items:center;width:100%;box-sizing:border-box;">
      <div style="width:72px;height:72px;border-radius:50%;background-image:url('https://placehold.co/72x72/ffccd5/ffffff?text=avatar');background-size:cover;background-position:center;border:2px solid #ffffff;box-shadow:0 2px 8px rgba(0,0,0,0.08);margin-bottom:8px;box-sizing:border-box;"></div>
      <div style="font-size:16px;font-weight:bold;color:#5c4d5c;text-align:center;line-height:1.2;letter-spacing:-0.3px;">contact name</div>
      <div style="font-size:10px;color:#917d7d;text-align:center;margin-top:2px;">company name</div>
    </div>
    <div style="display:flex;justify-content:space-between;width:100%;box-sizing:border-box;margin:12px 0;">
      <div style="width:52px;height:42px;background:#ffffff;border:1px solid #eedadd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);cursor:pointer;box-sizing:border-box;">
        <span style="font-size:11px;line-height:1;">💬</span>
        <span style="font-size:7px;font-weight:bold;color:#ff8fab;letter-spacing:0.2px;">message</span>
      </div>
      <div style="width:52px;height:42px;background:#ffffff;border:1px solid #eedadd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);cursor:pointer;box-sizing:border-box;">
        <span style="font-size:11px;line-height:1;">📞</span>
        <span style="font-size:7px;font-weight:bold;color:#ff8fab;letter-spacing:0.2px;">call</span>
      </div>
      <div style="width:52px;height:42px;background:#ffffff;border:1px solid #eedadd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);cursor:pointer;box-sizing:border-box;">
        <span style="font-size:11px;line-height:1;">📹</span>
        <span style="font-size:7px;font-weight:bold;color:#ff8fab;letter-spacing:0.2px;">facetime</span>
      </div>
      <div style="width:52px;height:42px;background:#ffffff;border:1px solid #eedadd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);cursor:pointer;box-sizing:border-box;">
        <span style="font-size:11px;line-height:1;">✉</span>
        <span style="font-size:7px;font-weight:bold;color:#ff8fab;letter-spacing:0.2px;">mail</span>
      </div>
      <div style="width:52px;height:42px;background:#ffffff;border:1px solid #eedadd;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);cursor:pointer;box-sizing:border-box;">
        <span style="font-size:11px;line-height:1;font-weight:bold;color:#ff8fab;">$</span>
        <span style="font-size:7px;font-weight:bold;color:#ff8fab;letter-spacing:0.2px;">pay</span>
      </div>
    </div>
    <div style="display:flex;flex-direction:column;gap:8px;width:100%;box-sizing:border-box;">
      <div style="width:100%;background:#fdf8f9;border:1px solid #eedadd;border-radius:10px;padding:8px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);text-align:left;">
        <span style="font-size:8px;color:#917d7d;font-weight:bold;letter-spacing:0.3px;">mobile</span>
        <span style="font-size:12px;color:#ff8fab;font-weight:bold;">(123) 456-7891</span>
      </div>
      <div style="width:100%;background:#fdf8f9;border:1px solid #eedadd;border-radius:10px;padding:8px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);text-align:left;">
        <span style="font-size:8px;color:#917d7d;font-weight:bold;letter-spacing:0.3px;">email</span>
        <span style="font-size:12px;color:#ff8fab;font-weight:bold;">emailhere@gmail.com</span>
      </div>
      <div style="width:100%;background:#fdf8f9;border:1px solid #eedadd;border-radius:10px;padding:8px 12px;box-sizing:border-box;display:flex;flex-direction:column;gap:1px;box-shadow:0 1.5px 4px rgba(0,0,0,0.02);text-align:left;">
        <span style="font-size:8px;color:#917d7d;font-weight:bold;letter-spacing:0.3px;">birthday</span>
        <span style="font-size:12px;color:#ff8fab;font-weight:bold;">month d#, yr##</span>
      </div>
    </div>
  </div>
</div></lj-raw>

14. berry red music player & lyrics

600px × 480px

playing from playlist
taylor's version

the man

taylor swift

🔀 |<<

>>| 🔁

lyrics

“

when everyone believes ya

what's that like?

i'm so sick of running as fast as i can

wondering if i'd get there quicker

if i was a man

and i'm so sick of them coming at me again

'cause if i was a man

then i'd be the man

filed under womanhood feminism career tag tag tag

html / raw code

<lj-raw><!-- credit: htmled --><div style="width:600px;height:480px;background:#b01d44;background-image:linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);background-size:100% 8px;padding:24px;box-sizing:border-box;border-radius:24px;border:1px solid #ffccd5;box-shadow:0 10px 30px rgba(255,182,193,0.25);display:flex;gap:24px;overflow:hidden;font-family:'helvetica neue', arial, sans-serif;">
  <div style="width:240px;height:100%;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;flex-shrink:0;">
    <div style="text-align:center;color:#ffffff;text-transform:lowercase;font-size:10px;letter-spacing:1px;opacity:0.8;box-sizing:border-box;line-height:1.4;">
      playing from playlist<br>
      <span style="font-weight:bold;">taylor's version</span>
    </div>
    <div style="width:220px;height:220px;border-radius:12px;background-image:url('https://placehold.co/220x220/ff8fab/ffffff?text=album');background-size:cover;background-position:center;border:1.5px solid #ffccd5;box-shadow:0 4px 12px rgba(0,0,0,0.15);align-self:center;flex-shrink:0;"></div>
    <div style="text-align:center;color:#ffffff;text-transform:lowercase;box-sizing:border-box;line-height:1.2;">
      <div style="font-size:16px;font-weight:bold;letter-spacing:0.5px;margin-bottom:2px;">the man</div>
      <div style="font-size:11px;opacity:0.8;">taylor swift</div>
    </div>
    <div style="width:100%;display:flex;align-items:center;height:12px;position:relative;margin:6px 0;box-sizing:border-box;">
      <div style="width:100%;height:3px;background:rgba(255,255,255,0.3);border-radius:1.5px;position:relative;">
        <div style="position:absolute;left:0;top:0;height:100%;width:30%;background:#ffffff;border-radius:1.5px;"></div>
        <div style="position:absolute;left:30%;top:-3.5px;width:10px;height:10px;border-radius:50%;background:#ffffff;box-shadow:0 1px 4px rgba(0,0,0,0.15);"></div>
      </div>
    </div>
    <div style="display:flex;justify-content:space-around;align-items:center;width:100%;color:#ffffff;font-size:14px;box-sizing:border-box;">
      <span style="cursor:pointer;opacity:0.8;font-size:12px;">🔀</span>
      <span style="cursor:pointer;font-weight:bold;">|<<</span>
      <div style="width:36px;height:36px;border-radius:50%;background:#ffffff;display:flex;align-items:center;justify-content:center;color:#b01d44;font-size:12px;font-weight:bold;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);">||</div>
      <span style="cursor:pointer;font-weight:bold;">>>|</span>
      <span style="cursor:pointer;opacity:0.8;font-size:12px;">🔁</span>
    </div>
  </div>
  <div style="width:340px;display:flex;flex-direction:column;justify-content:space-between;height:100%;box-sizing:border-box;flex-shrink:0;">
    <div style="width:80%;height:360px;background:rgba(30,10,15,0.6);border-radius:12px;border:1px solid rgba(255,204,213,0.15);box-sizing:border-box;padding:16px;display:flex;flex-direction:column;overflow:hidden;">
      <div style="font-size:12px;font-weight:bold;color:#ffffff;letter-spacing:1.5px;text-align:center;text-transform:lowercase;margin-bottom:8px;opacity:0.9;">lyrics</div>
      <div style="display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:12px;color:rgba(255,255,255,0.3);font-size:18px;height:12px;box-sizing:border-box;user-select:none;">
        <div style="width:50px;height:1px;background:rgba(255,255,255,0.15);margin-right:12px;"></div>“<div style="width:50px;height:1px;background:rgba(255,255,255,0.15);margin-left:12px;"></div>
      </div>
      <div style="flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;text-align:left;padding:0 4px;box-sizing:border-box;">
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">when everyone believes ya</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">what's that like?</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">i'm so sick of running as fast as i can</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">wondering if i'd get there quicker</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">if i was a man</div>
        <div style="font-size:11px;color:#ff8fab;font-weight:bold;line-height:1.4;">and i'm so sick of them coming at me again</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">'cause if i was a man</div>
        <div style="font-size:11px;color:rgba(255,255,255,0.5);line-height:1.4;">then i'd be the man</div>
      </div>
    </div>
    <div style="display:flex;flex-wrap:wrap;gap:6px;align-items:center;width:100%;box-sizing:border-box;margin-top:10px;">
      <span style="font-size:8px;font-weight:bold;color:rgba(255,255,255,0.6);text-transform:lowercase;letter-spacing:0.5px;margin-right:4px;">filed under</span>
      <span style="background:rgba(255,255,255,0.1);border-radius:10px;padding:3px 10px;font-size:8px;color:#ffffff;font-weight:bold;cursor:pointer;box-sizing:border-box;">womanhood</span>
      <span style="background:rgba(255,255,255,0.1);border-radius:10px;padding:3px 10px;font-size:8px;color:#ffffff;font-weight:bold;cursor:pointer;box-sizing:border-box;">feminism</span>
      <span style="background:rgba(255,255,255,0.1);border-radius:10px;padding:3px 10px;font-size:8px;color:#ffffff;font-weight:bold;cursor:pointer;box-sizing:border-box;">career</span>
      <span style="background:rgba(255,255,255,0.1);border-radius:10px;padding:3px 10px;font-size:8px;color:#ffffff;font-weight:bold;cursor:pointer;box-sizing:border-box;">tag tag tag</span>
    </div>
  </div>
</div></lj-raw>

15. okinawa-bound travel planner

760px × 1040px

pin icon

okinawa-bound.

album art

collaborative playlist

roadtrip 2 the airport

teletubbies roadtrip number #430348 !! also someone remind calum to double-check his things

song

added by

time

21 questions - 50 cent, nate dogg

calum