random codes by htmled 2

01. deux

your tab title

←→↻

https://www.yoursite.world/☆

⋮

sitename.

your tagline.

submit a tip!

latestnewssightingslifestyleaboutshoppodcastinstagramtiktokapp

latest

your top stories in real time

yoursite exclusive

the title of your article goes here. make it long or short!

subtext goes here.

sep 19, 2026

yoursite exclusive

headline number two goes right here.

a second line of subtext.

sep 18, 2026

yoursite exclusive

your third story title goes in this spot.

third subtext goes here.

sep 17, 2026

yoursite exclusive

story four: write something short and sweet.

fourth subtext goes here.

sep 16, 2026

yoursite exclusive

the last slide holds your fifth headline.

fifth subtext goes here.

sep 15, 2026

html / raw code

<lj-raw>
<!-- credit: htmled -->
<!-- browser window -->
<div style="width:700px;box-sizing:border-box;margin:10px auto;border-radius:14px;overflow:hidden;background:#fff;box-shadow:5px 7px 0 rgba(96,108,72,.35);font-family:'trebuchet ms',verdana,arial,sans-serif !important;color:#111;text-align:left;">

<!-- tab bar: traffic lights + tab + new tab button -->
<div style="height:42px;display:flex;align-items:flex-end;background:#8f9970;padding-left:14px;">
<!-- tab bar: window buttons (pink, yellow, olive) -->
<div style="display:flex;gap:7px;align-items:center;height:36px;margin-right:16px;"><div style="width:14px;height:14px;border-radius:50%;background:#f08a8a;"></div><div style="width:14px;height:14px;border-radius:50%;background:#e8c94a;"></div><div style="width:14px;height:14px;border-radius:50%;background:#a5ae7c;"></div></div>
<!-- tab bar: active tab (edit the tab title) -->
<div style="width:176px;height:34px;box-sizing:border-box;padding:0 10px 0 6px;display:flex;align-items:center;justify-content:space-between;border-radius:10px 10px 0 0;background:#bcc7a6;">
<div style="display:flex;align-items:center;gap:7px;"><div style="width:20px;height:20px;background:#fff;text-align:center;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:11px !important;line-height:20px !important;color:#000;">y.</div><span style="font-size:10px !important;color:#fff;">your tab title</span></div>
<span style="font-size:12px !important;color:#fff;">✕</span></div>
<!-- tab bar: new tab plus -->
<div style="width:36px;height:34px;text-align:center;font-size:20px !important;line-height:34px !important;color:#fff;">+</div>
</div>

<!-- toolbar: back / forward / reload + address bar + profile -->
<div style="height:54px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;background:#bcc7a6;color:#fff;">
<!-- toolbar: back, forward, reload symbols -->
<span style="font-size:20px !important;letter-spacing:12px;line-height:24px !important;margin-right:10px;">←→↻</span>
<!-- toolbar: address bar (edit the web address) -->
<div style="flex:1;height:30px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-radius:15px;background:#93a07a;font-size:12px !important;color:#fff;"><span>https://www.yoursite.world/</span><span style="font-size:15px !important;">☆</span></div>
<!-- toolbar: profile circle + menu dots -->
<div style="display:flex;align-items:center;gap:8px;margin-left:24px;"><div style="width:26px;height:26px;box-sizing:border-box;border-radius:50%;background:#8f9970;border:1px solid #fff;display:flex;flex-direction:column;align-items:center;justify-content:center;"><div style="width:8px;height:8px;border-radius:50%;background:#fff;"></div><div style="width:14px;height:6px;margin-top:1px;border-radius:7px 7px 0 0;background:#fff;"></div></div><span style="font-size:16px !important;">⋮</span></div>
</div>

<!-- site header: logo in the middle, subscribe + submit on the right -->
<div style="height:72px;box-sizing:border-box;padding:0 26px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f0f0;">
<div style="width:150px;"></div>
<!-- site header: logo + tagline (edit) -->
<div style="text-align:center;"><div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:30px !important;letter-spacing:-1px;line-height:32px !important;text-transform:uppercase;">sitename.</div><div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:2px;line-height:12px !important;text-transform:uppercase;">your tagline.</div></div>
<!-- site header: subscribe text + submit button (not clickable) -->
<div style="width:150px;display:flex;align-items:center;justify-content:flex-end;gap:14px;"><span style="font-size:10px !important;color:#111;">subscribe</span><div style="display:block;padding:0 9px;height:26px;box-sizing:border-box;border:1px solid #111;border-radius:3px;font-size:10px !important;line-height:24px !important;color:#111;">submit a tip!</div></div>
</div>

<!-- site menu: words (not clickable) -->
<div style="height:36px;display:flex;justify-content:center;align-items:center;gap:17px;font-size:11px !important;"><span style="color:#111;">latest</span><span style="color:#111;">news</span><span style="color:#111;">sightings</span><span style="color:#111;">lifestyle</span><span style="color:#111;">about</span><span style="color:#111;">shop</span><span style="color:#111;">podcast</span><span style="color:#111;">instagram</span><span style="color:#111;">tiktok</span><span style="color:#111;">app</span></div>

<!-- section heading: big title + small subtitle (edit) -->
<div style="padding-top:24px;text-align:center;">
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:34px !important;letter-spacing:-1px;line-height:38px !important;text-transform:uppercase;">latest</div>
<div style="margin-top:2px;font-size:11px !important;line-height:15px !important;">your top stories in real time</div>
</div>

<!-- slider: shows one slide at a time. arrows and dots jump between slides. copy a slide block to add more (also add a dot) -->
<div style="width:620px;height:264px;margin:22px auto 0 auto;overflow:hidden;">
<!-- slide 1 of 5: anchor target (do not delete) -->
<a name="s1" id="s1" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<!-- slide 1: picture on the left (replace the image url, size 310 x 236) + article text on the right -->
<div style="display:flex;height:236px;">
<!-- slide 1: picture (replace the image url, not clickable) -->
<div style="width:310px;height:236px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#bcc7a6;background-image:url('https://placehold.co/310x236/bcc7a6/ffffff?text=add+photo+here'),linear-gradient(90deg,#bcc7a6,#8f9970);background-size:cover;background-position:center;"></div>
<!-- slide 1: black article panel -->
<div style="width:310px;height:236px;box-sizing:border-box;padding:0 40px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000;color:#fff;">
<!-- slide 1: small tag above the title (edit) -->
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:1px;line-height:12px !important;text-transform:uppercase;">yoursite exclusive</div>
<!-- slide 1: article title (edit the words) -->
<div style="margin-top:8px;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:16px !important;line-height:21px !important;text-transform:uppercase;">the title of your article goes here. make it long or short!</div>
<!-- slide 1: subtext (edit) -->
<div style="margin-top:12px;font-size:10px !important;line-height:13px !important;">subtext goes here.</div>
<!-- slide 1: date (edit) -->
<div style="margin-top:8px;font-size:8px !important;font-style:italic;line-height:11px !important;">sep 19, 2026</div>
</div>
</div>
<!-- slide 1: dots (click = go to that slide). the filled dot marks this slide -->
<div style="height:27px;display:flex;align-items:center;justify-content:center;gap:6px;"><a href="#s1" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:#000;text-decoration:none;"></a><a href="#s2" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s3" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s4" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s5" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a></div>
<!-- slide 1: left arrow, goes to slide 5 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s5" style="display:block;position:relative;left:14px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);margin-left:-5px;"></div></div></a></div>
<!-- slide 1: right arrow, goes to slide 2 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s2" style="display:block;position:relative;left:570px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin-right:-5px;"></div></div></a></div>
<!-- slide 2 of 5: anchor target (do not delete) -->
<a name="s2" id="s2" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<!-- slide 2: picture on the left (replace the image url, size 310 x 236) + article text on the right -->
<div style="display:flex;height:236px;">
<!-- slide 2: picture (replace the image url, not clickable) -->
<div style="width:310px;height:236px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#c9d4b0;background-image:url('https://placehold.co/310x236/c9d4b0/ffffff?text=add+photo+here'),linear-gradient(90deg,#c9d4b0,#8f9970);background-size:cover;background-position:center;"></div>
<!-- slide 2: black article panel -->
<div style="width:310px;height:236px;box-sizing:border-box;padding:0 40px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000;color:#fff;">
<!-- slide 2: small tag above the title (edit) -->
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:1px;line-height:12px !important;text-transform:uppercase;">yoursite exclusive</div>
<!-- slide 2: article title (edit the words) -->
<div style="margin-top:8px;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:16px !important;line-height:21px !important;text-transform:uppercase;">headline number two goes right here.</div>
<!-- slide 2: subtext (edit) -->
<div style="margin-top:12px;font-size:10px !important;line-height:13px !important;">a second line of subtext.</div>
<!-- slide 2: date (edit) -->
<div style="margin-top:8px;font-size:8px !important;font-style:italic;line-height:11px !important;">sep 18, 2026</div>
</div>
</div>
<!-- slide 2: dots (click = go to that slide). the filled dot marks this slide -->
<div style="height:27px;display:flex;align-items:center;justify-content:center;gap:6px;"><a href="#s1" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s2" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:#000;text-decoration:none;"></a><a href="#s3" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s4" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s5" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a></div>
<!-- slide 2: left arrow, goes to slide 1 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s1" style="display:block;position:relative;left:14px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);margin-left:-5px;"></div></div></a></div>
<!-- slide 2: right arrow, goes to slide 3 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s3" style="display:block;position:relative;left:570px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin-right:-5px;"></div></div></a></div>
<!-- slide 3 of 5: anchor target (do not delete) -->
<a name="s3" id="s3" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<!-- slide 3: picture on the left (replace the image url, size 310 x 236) + article text on the right -->
<div style="display:flex;height:236px;">
<!-- slide 3: picture (replace the image url, not clickable) -->
<div style="width:310px;height:236px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#aeb98f;background-image:url('https://placehold.co/310x236/aeb98f/ffffff?text=add+photo+here'),linear-gradient(90deg,#aeb98f,#8f9970);background-size:cover;background-position:center;"></div>
<!-- slide 3: black article panel -->
<div style="width:310px;height:236px;box-sizing:border-box;padding:0 40px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000;color:#fff;">
<!-- slide 3: small tag above the title (edit) -->
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:1px;line-height:12px !important;text-transform:uppercase;">yoursite exclusive</div>
<!-- slide 3: article title (edit the words) -->
<div style="margin-top:8px;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:16px !important;line-height:21px !important;text-transform:uppercase;">your third story title goes in this spot.</div>
<!-- slide 3: subtext (edit) -->
<div style="margin-top:12px;font-size:10px !important;line-height:13px !important;">third subtext goes here.</div>
<!-- slide 3: date (edit) -->
<div style="margin-top:8px;font-size:8px !important;font-style:italic;line-height:11px !important;">sep 17, 2026</div>
</div>
</div>
<!-- slide 3: dots (click = go to that slide). the filled dot marks this slide -->
<div style="height:27px;display:flex;align-items:center;justify-content:center;gap:6px;"><a href="#s1" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s2" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s3" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:#000;text-decoration:none;"></a><a href="#s4" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s5" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a></div>
<!-- slide 3: left arrow, goes to slide 2 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s2" style="display:block;position:relative;left:14px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);margin-left:-5px;"></div></div></a></div>
<!-- slide 3: right arrow, goes to slide 4 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s4" style="display:block;position:relative;left:570px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin-right:-5px;"></div></div></a></div>
<!-- slide 4 of 5: anchor target (do not delete) -->
<a name="s4" id="s4" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<!-- slide 4: picture on the left (replace the image url, size 310 x 236) + article text on the right -->
<div style="display:flex;height:236px;">
<!-- slide 4: picture (replace the image url, not clickable) -->
<div style="width:310px;height:236px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#d6dcc0;background-image:url('https://placehold.co/310x236/d6dcc0/ffffff?text=add+photo+here'),linear-gradient(90deg,#d6dcc0,#8f9970);background-size:cover;background-position:center;"></div>
<!-- slide 4: black article panel -->
<div style="width:310px;height:236px;box-sizing:border-box;padding:0 40px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000;color:#fff;">
<!-- slide 4: small tag above the title (edit) -->
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:1px;line-height:12px !important;text-transform:uppercase;">yoursite exclusive</div>
<!-- slide 4: article title (edit the words) -->
<div style="margin-top:8px;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:16px !important;line-height:21px !important;text-transform:uppercase;">story four: write something short and sweet.</div>
<!-- slide 4: subtext (edit) -->
<div style="margin-top:12px;font-size:10px !important;line-height:13px !important;">fourth subtext goes here.</div>
<!-- slide 4: date (edit) -->
<div style="margin-top:8px;font-size:8px !important;font-style:italic;line-height:11px !important;">sep 16, 2026</div>
</div>
</div>
<!-- slide 4: dots (click = go to that slide). the filled dot marks this slide -->
<div style="height:27px;display:flex;align-items:center;justify-content:center;gap:6px;"><a href="#s1" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s2" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s3" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s4" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:#000;text-decoration:none;"></a><a href="#s5" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a></div>
<!-- slide 4: left arrow, goes to slide 3 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s3" style="display:block;position:relative;left:14px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);margin-left:-5px;"></div></div></a></div>
<!-- slide 4: right arrow, goes to slide 5 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s5" style="display:block;position:relative;left:570px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin-right:-5px;"></div></div></a></div>
<!-- slide 5 of 5: anchor target (do not delete) -->
<a name="s5" id="s5" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<!-- slide 5: picture on the left (replace the image url, size 310 x 236) + article text on the right -->
<div style="display:flex;height:236px;">
<!-- slide 5: picture (replace the image url, not clickable) -->
<div style="width:310px;height:236px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background-color:#9aa47a;background-image:url('https://placehold.co/310x236/9aa47a/ffffff?text=add+photo+here'),linear-gradient(90deg,#9aa47a,#8f9970);background-size:cover;background-position:center;"></div>
<!-- slide 5: black article panel -->
<div style="width:310px;height:236px;box-sizing:border-box;padding:0 40px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#000;color:#fff;">
<!-- slide 5: small tag above the title (edit) -->
<div style="font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:9px !important;letter-spacing:1px;line-height:12px !important;text-transform:uppercase;">yoursite exclusive</div>
<!-- slide 5: article title (edit the words) -->
<div style="margin-top:8px;font-family:'arial black',impact,sans-serif !important;font-weight:bold;font-size:16px !important;line-height:21px !important;text-transform:uppercase;">the last slide holds your fifth headline.</div>
<!-- slide 5: subtext (edit) -->
<div style="margin-top:12px;font-size:10px !important;line-height:13px !important;">fifth subtext goes here.</div>
<!-- slide 5: date (edit) -->
<div style="margin-top:8px;font-size:8px !important;font-style:italic;line-height:11px !important;">sep 15, 2026</div>
</div>
</div>
<!-- slide 5: dots (click = go to that slide). the filled dot marks this slide -->
<div style="height:27px;display:flex;align-items:center;justify-content:center;gap:6px;"><a href="#s1" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s2" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s3" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s4" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:transparent;text-decoration:none;"></a><a href="#s5" style="display:block;width:11px;height:11px;box-sizing:border-box;border-radius:50%;border:1.5px solid #000;background:#000;text-decoration:none;"></a></div>
<!-- slide 5: left arrow, goes to slide 4 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s4" style="display:block;position:relative;left:14px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);margin-left:-5px;"></div></div></a></div>
<!-- slide 5: right arrow, goes to slide 1 -->
<div style="height:0;position:relative;z-index:2;"><a href="#s1" style="display:block;position:relative;left:570px;top:-163px;width:36px;height:36px;text-decoration:none;"><div style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;"><div style="width:14px;height:14px;box-sizing:border-box;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-135deg);margin-right:-5px;"></div></div></a></div>
</div>

<div style="height:26px;"></div>
</div>
</lj-raw>

02. photobooth

▣photo booth − ▫ ×

1 2 3 4

reminder ♥︎

your name :

“ your favorite quote goes right here ”

♥︎

quote here

★

✿

✦

❀

★

✦

song title,

artist name

▶︎

html / raw code

<lj-raw>
<!-- credit: htmled -->
<!-- outer frame: 700px wide, pink background with grid lines -->
<div style="width:700px;height:490px;box-sizing:border-box;margin:10px auto;padding-top:28px;background-color:#f7a8d0;background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(160deg,#f9b6d8 0%,#f48fc0 100%);background-size:40px 40px,40px 40px,auto;border:2px solid #fbc8e0;border-radius:26px;box-shadow:0 10px 30px rgba(220,90,150,.35);font-family:'trebuchet ms',verdana,arial,sans-serif !important;color:#ee5fa5;text-align:left;overflow:hidden;">

<!-- scene: 590px wide, everything below is placed inside it -->
<div style="width:590px;margin:0 auto;">

<!-- row: photobooth window (left) + quote card (right, overlapping) -->
<div style="display:flex;align-items:flex-start;">

<!-- photobooth window: pink chrome, 460px wide -->
<div style="position:relative;z-index:2;width:460px;height:390px;box-sizing:border-box;flex-shrink:0;border-radius:14px;overflow:hidden;background:#f6a2cb;box-shadow:0 0 0 1.5px #ec6fae,4px 8px 18px rgba(190,70,130,.35);">

<!-- window title bar: icon + title on the left, window controls on the right -->
<div style="height:34px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#f37fb5;border-bottom:1.5px solid #ec6fae;color:#fff;">
<!-- title bar: icon + window title (edit the text) -->
<span style="font-size:11px !important;font-weight:bold;letter-spacing:1px;line-height:34px !important;"><span style="font-size:13px !important;margin-right:12px;">▣</span>photo booth</span>
<!-- title bar: minimize / maximize / close symbols -->
<span style="font-size:13px !important;letter-spacing:6px;line-height:34px !important;">− ▫ ×</span>
</div>

<!-- main photo frame: shows one photo at a time. clicking a thumbnail scrolls to that photo -->
<div style="width:460px;height:232px;overflow:hidden;background:#f9c5df;">
<!-- main photo 1: replace the image url (size 460x231) -->
<a name="p1" id="p1" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:231px;background-color:#f8c8dc;background-image:url('https://placehold.co/460x231/f8c8dc/ffffff?text=photo+1');background-size:cover;background-position:center;"></div>
<!-- main photo 2: replace the image url (size 460x231) -->
<a name="p2" id="p2" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:231px;background-color:#c9b6f0;background-image:url('https://placehold.co/460x231/c9b6f0/ffffff?text=photo+2');background-size:cover;background-position:center;"></div>
<!-- main photo 3: replace the image url (size 460x231) -->
<a name="p3" id="p3" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:231px;background-color:#ffe0a8;background-image:url('https://placehold.co/460x231/ffe0a8/ffffff?text=photo+3');background-size:cover;background-position:center;"></div>
<!-- main photo 4: replace the image url (size 460x231) -->
<a name="p4" id="p4" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:231px;background-color:#b8e6f5;background-image:url('https://placehold.co/460x231/b8e6f5/ffffff?text=photo+4');background-size:cover;background-position:center;"></div>
</div>

<!-- camera bar: camera icon (drawn with divs) -->
<div style="height:38px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;background:#f6a2cb;border-top:1.5px solid #ec6fae;border-bottom:1.5px solid #ec6fae;"><div style="width:22px;height:15px;box-sizing:border-box;border:2px solid #fff;border-radius:4px;display:flex;align-items:center;justify-content:center;"><div style="width:7px;height:7px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;"></div></div></div>

<!-- thumbnail strip: 4 clickable pictures. add/remove by copying a thumbnail block + a main photo block -->
<div style="display:flex;height:86px;background:#f37fb5;">
<!-- thumbnail 1: click = shows main photo 1. replace the image url (size 115x86) -->
<a href="#p1" style="display:block;flex:1;height:86px;box-sizing:border-box;text-decoration:none;border-left:2px solid #fff;background-color:#f8c8dc;background-image:url('https://placehold.co/115x86/f8c8dc/ffffff?text=1');background-size:cover;background-position:center;"><span style="display:inline-block;margin:6px 0 0 6px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.85);font-size:9px !important;line-height:14px !important;font-weight:bold;color:#ee5fa5;">1</span></a>
<!-- thumbnail 2: click = shows main photo 2. replace the image url (size 115x86) -->
<a href="#p2" style="display:block;flex:1;height:86px;box-sizing:border-box;text-decoration:none;border-left:2px solid #fff;background-color:#c9b6f0;background-image:url('https://placehold.co/115x86/c9b6f0/ffffff?text=2');background-size:cover;background-position:center;"><span style="display:inline-block;margin:6px 0 0 6px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.85);font-size:9px !important;line-height:14px !important;font-weight:bold;color:#ee5fa5;">2</span></a>
<!-- thumbnail 3: click = shows main photo 3. replace the image url (size 115x86) -->
<a href="#p3" style="display:block;flex:1;height:86px;box-sizing:border-box;text-decoration:none;border-left:2px solid #fff;background-color:#ffe0a8;background-image:url('https://placehold.co/115x86/ffe0a8/ffffff?text=3');background-size:cover;background-position:center;"><span style="display:inline-block;margin:6px 0 0 6px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.85);font-size:9px !important;line-height:14px !important;font-weight:bold;color:#ee5fa5;">3</span></a>
<!-- thumbnail 4: click = shows main photo 4. replace the image url (size 115x86) -->
<a href="#p4" style="display:block;flex:1;height:86px;box-sizing:border-box;text-decoration:none;border-left:2px solid #fff;background-color:#b8e6f5;background-image:url('https://placehold.co/115x86/b8e6f5/ffffff?text=4');background-size:cover;background-position:center;"><span style="display:inline-block;margin:6px 0 0 6px;padding:0 6px;border-radius:8px;background:rgba(255,255,255,.85);font-size:9px !important;line-height:14px !important;font-weight:bold;color:#ee5fa5;">4</span></a>
</div>

</div>

<!-- quote card: white card with pink header, overlapping the window -->
<div style="position:relative;z-index:5;margin:108px 0 0 -70px;width:200px;height:96px;box-sizing:border-box;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 5px 0 #f6b7d6,0 9px 16px rgba(190,70,130,.3);">
<!-- quote card: pink header bar with heart -->
<div style="height:22px;box-sizing:border-box;padding:0 12px;text-align:right;background:#ee6aaa;color:#fff;font-size:11px !important;line-height:22px !important; text-align: center;"> reminder ♥︎</div>
<div style="padding:8px 14px 0 14px;">
<!-- quote card: name (edit) -->
<div style="font-size:9px !important;line-height:12px !important;font-weight:bold;color:#ee5fa5;">your name :</div>
<!-- quote card: quote text (edit) -->
<div style="margin-top:6px;font-size:10px !important;line-height:13px !important;font-weight:bold;font-style:italic;color:#ee5fa5;">“ your favorite quote goes right here ”</div>
<!-- quote card: hashtag mark -->
<div style="text-align:right;font-size:11px !important;line-height:12px !important;font-weight:bold;color:#ee5fa5;">#</div>
</div>
</div>

</div>



<!-- decoration: sticker: big heart -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:150px;top:-180px;width:46px;height:46px; transform: rotate(-30deg);"><div style="width:100%;text-align:center;font-size:40px !important;line-height:44px !important;color:#ff8fc0;text-shadow:-2px -2px 0 #fff,2px -2px 0 #fff,-2px 2px 0 #fff,2px 2px 0 #fff,0 3px 6px rgba(190,70,130,.35);">♥︎</div></div></div>

<!-- decoration: sticker: oval text label (edit the words) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:22px;top:-150px;width:160px;height:44px;"><div style="width:160px;height:44px;box-sizing:border-box;border-radius:50%;background:#ee5fa5;background-image:linear-gradient(#f57cb8,#ea4f9c);border:3px solid #fff;box-shadow:0 4px 8px rgba(190,70,130,.4);transform:rotate(-7deg);text-align:center;font-size:14px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:38px !important;color:#fff;text-shadow:0 1px 2px rgba(150,30,90,.4);">quote here</div></div></div>

<!-- decoration: sticker: smiley face -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:566px;top:-52px;width:36px;height:36px;"><div style="width:36px;height:36px;box-sizing:border-box;border-radius:50%;background:#8fd16a;border:3px solid #fff;box-shadow:0 3px 6px rgba(120,60,100,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;"><div style="display:flex;gap:7px;"><div style="width:4px;height:6px;border-radius:3px;background:#3f6a2f;"></div><div style="width:4px;height:6px;border-radius:3px;background:#3f6a2f;"></div></div><div style="width:14px;height:6px;box-sizing:border-box;margin-top:3px;border-bottom:3px solid #3f6a2f;border-radius:0 0 12px 12px;"></div></div></div></div>

<!-- decoration: star: orange -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:-36px;top:-334px;width:28px;height:28px;"><div style="width:100%;text-align:center;font-size:26px !important;line-height:26px !important;color:#ff9a3d;transform:rotate(-8deg);">★</div></div></div>

<!-- decoration: flower: yellow -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:-34px;top:-200px;width:28px;height:28px;"><div style="width:100%;text-align:center;font-size:26px !important;line-height:26px !important;color:#ffd36b;transform:rotate(0deg);">✿</div></div></div>

<!-- decoration: sparkle: white (top right) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:598px;top:-376px;width:24px;height:24px;"><div style="width:100%;text-align:center;font-size:22px !important;line-height:22px !important;color:#fff;transform:rotate(0deg);">✦</div></div></div>

<!-- decoration: flower: white (right) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:600px;top:-140px;width:28px;height:28px;"><div style="width:100%;text-align:center;font-size:26px !important;line-height:26px !important;color:#fff;transform:rotate(0deg);">❀</div></div></div>

<!-- decoration: star: purple (top) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:168px;top:-408px;width:24px;height:24px;"><div style="width:100%;text-align:center;font-size:22px !important;line-height:22px !important;color:#c8a2f0;transform:rotate(10deg);">★</div></div></div>

<!-- decoration: star: pink (bottom) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:300px;top:10px;width:24px;height:24px;"><div style="width:100%;text-align:center;font-size:20px !important;line-height:20px !important;color:#fff;transform:rotate(-10deg);">★</div></div></div>

<!-- decoration: sparkle: pink (bottom right) -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:500px;top:2px;width:24px;height:24px;"><div style="width:100%;text-align:center;font-size:22px !important;line-height:22px !important;color:#ffe3f0;transform:rotate(0deg);">✦</div></div></div>

<!-- decoration: small circle: purple -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:-40px;top:-90px;width:14px;height:14px;"><div style="width:10px;height:10px;box-sizing:border-box;border:2px solid #c8a2f0;border-radius:50%;"></div></div></div>

<!-- decoration: small circle: white -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:604px;top:-100px;width:14px;height:14px;"><div style="width:10px;height:10px;box-sizing:border-box;border:2px solid #fff;border-radius:50%;"></div></div></div>


<!-- music player card: overlapping the bottom-left of the window. edit song + artist, link goes on the play button -->
<div style="position:relative;z-index:6;margin:-6px 0 0 396px;width:220px;height:64px;box-sizing:border-box;padding:0 14px 0 18px;display:flex;align-items:center;justify-content:space-between;border-radius:18px;background:#fff;box-shadow:0 5px 0 #f6b7d6,0 9px 16px rgba(190,70,130,.3);">
<div>
<!-- music card: song title (edit) -->
<div style="font-size:13px !important;font-weight:bold;letter-spacing:1px;line-height:16px !important;color:#ee5fa5;">song title,</div>
<!-- music card: artist (edit) -->
<div style="font-size:10px !important;line-height:13px !important;color:#b9aab2;">artist name</div>
</div>
<!-- music card: play button (change the link) -->
<a href="linktosonghere" style="display:block;width:34px;height:34px;box-sizing:border-box;border-radius:50%;background:#ee6aaa;background-image:linear-gradient(#f57cb8,#ea4f9c);text-align:center;font-size:12px !important;line-height:34px !important;color:#fff;text-decoration:none;box-shadow:0 3px 6px rgba(190,70,130,.35);">▶︎</a>
</div>

</div>
</div>
</lj-raw>

03. ft contact sheet

caption here if you want it

contact na...

↻

▣

●●●

✆︎

‹

●●●

contact name

+1 000 000 0000

‹

bestie

your thoughts?

obsessed with this

u look so pretty

thank you!

call me later?

always ♥︎

bringing snacks

the good ones??

obviously

imessage

html / raw code


<lj-raw>
<!-- credit: htmled -->
<!-- outer frame: 700px wide, background gradient + dots -->
<div style="width:700px;height:610px;box-sizing:border-box;margin:10px auto;background-color:#eaf7f1;background-image:radial-gradient(#fff 12%,transparent 13%),linear-gradient(160deg,#e6f7ee 0%,#e3f0fb 55%,#eee9fb 100%);background-size:22px 22px,auto;border:2px solid #cfe9dc;border-radius:28px;box-shadow:0 10px 30px rgba(90,150,170,.32);font-family:'trebuchet ms',verdana,arial,sans-serif !important;color:#4e6b5e;text-align:left;overflow:hidden;">

<!-- caption sticker: edit the caption text here -->
<div style="display:flex;justify-content:center;padding-top:18px;height:52px;box-sizing:border-box;">
<div style="height:34px;padding:0 24px;border-radius:17px;background:#fff9d6;border:1.5px dashed #e3d68c;box-shadow:0 3px 8px rgba(200,180,90,.22);transform:rotate(0deg);font-family:georgia,'times new roman',serif !important;font-size:13px !important;font-style:italic;letter-spacing:3px;line-height:31px !important;color:#8a8150;">caption here if you want it</div>
</div>

<!-- scene row: holds video card + contact card + chat window (they overlap on purpose) -->
<div style="display:flex;justify-content:center;align-items:flex-start;padding-top:16px;">

<!-- video call card: background image = big video pic (replace url) -->
<div style="position:relative;z-index:1;margin-top:30px;width:270px;height:470px;box-sizing:border-box;border-radius:30px;border:4px solid #fff;background-color:#cfe3f5;background-image:url('https://placehold.co/270x470/cfe3f5/ffffff?text=video+call+pic');background-size:cover;background-position:center;box-shadow:0 10px 24px rgba(90,150,170,.4);display:flex;flex-direction:column;justify-content:space-between;padding:12px;overflow:hidden;">

<!-- video name chip (top left): avatar = small pic (replace url), text = name -->
<div style="display:flex;">
<div style="display:flex;align-items:center;gap:6px;padding:3px 12px 3px 4px;border-radius:16px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);font-size:10px !important;line-height:14px !important;color:#4e6b5e;"><div style="width:20px;height:20px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#bfe3d0;background-image:url('https://placehold.co/20x20/bfe3d0/bfe3d0');background-size:cover;background-position:center;border:1px solid #fff;box-shadow:0 2px 5px rgba(90,150,170,.3);"></div><span>contact na...</span></div>
</div>

<div style="display:flex;justify-content:space-between;align-items:flex-end;">
<!-- self-view window (bottom left): background image = your pic (replace url); symbol = flip camera -->
<div style="width:92px;height:136px;box-sizing:border-box;border:3px solid #fff;border-radius:20px;background-color:#d9e8fb;background-image:url('https://placehold.co/92x136/d9e8fb/ffffff?text=you');background-size:cover;background-position:center;box-shadow:0 4px 10px rgba(60,110,130,.3);display:flex;align-items:flex-end;padding:0 0 4px 8px;font-size:16px !important;line-height:18px !important;color:#fff;text-shadow:0 1px 3px rgba(60,110,130,.6);">↻</div>
<div style="display:flex;flex-direction:column;gap:10px;">
<!-- call button 1: camera -->
<div style="width:42px;height:42px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.93);color:#5fa98a;box-shadow:0 3px 8px rgba(60,110,130,.28);display:flex;align-items:center;justify-content:center;font-size:17px !important;line-height:20px !important;">▣</div>
<!-- call button 2: mic -->
<div style="width:42px;height:42px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.93);color:#5fa98a;box-shadow:0 3px 8px rgba(60,110,130,.28);display:flex;align-items:center;justify-content:center;font-size:17px !important;line-height:20px !important;"><div style="display:flex;flex-direction:column;align-items:center;"><div style="width:8px;height:13px;border-radius:8px;background:#5fa98a;"></div><div style="width:14px;height:6px;box-sizing:border-box;margin-top:-4px;border:2px solid #5fa98a;border-top:none;border-radius:0 0 10px 10px;"></div><div style="width:2px;height:3px;background:#5fa98a;"></div></div></div>
<!-- call button 3: more -->
<div style="width:42px;height:42px;box-sizing:border-box;border-radius:50%;background:rgba(255,255,255,.35);color:#ffffff;box-shadow:0 3px 8px rgba(60,110,130,.28);display:flex;align-items:center;justify-content:center;font-size:17px !important;line-height:20px !important;border:1px solid rgba(255,255,255,.85);"><span style="font-size:6px !important;letter-spacing:4px;">●●●</span></div>
<!-- call button 4: end call (coral) -->
<div style="width:42px;height:42px;box-sizing:border-box;border-radius:50%;background:#f4788c;color:#fff;box-shadow:0 3px 8px rgba(60,110,130,.28);display:flex;align-items:center;justify-content:center;font-size:17px !important;line-height:20px !important;background-image:linear-gradient(#ffa3b0,#f4788c);"><span style="display:block;transform:rotate(135deg);">✆︎</span></div>
</div>
</div>
</div>

<!-- right column: holds contact card (top) + chat window (bottom) -->
<div style="position:relative;z-index:2;margin-left:-50px;width:350px;display:flex;flex-direction:column;">

<!-- contact card: frosted glass card sitting over the video -->
<div style="position:relative;z-index:3;width:300px;height:204px;box-sizing:border-box;padding:14px 18px;border-radius:26px;background:rgba(232,248,240,.8);background-image:linear-gradient(rgba(255,255,255,.4),rgba(214,236,252,.5));border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 20px rgba(90,150,170,.3); left:30px;">
<div style="display:flex;justify-content:space-between;align-items:flex-start;color:#5fa98a;">
<!-- contact card: back arrow -->
<span style="width:40px;"><span style="font-size:30px !important;line-height:24px !important;">‹</span></span>
<!-- contact card: avatar (replace url in the small image) -->
<div style="width:86px;height:86px;box-sizing:border-box;padding:4px;border-radius:50%;border:1px solid #fff;background:rgba(255,255,255,.4);"><div style="width:76px;height:76px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#bfe3d0;background-image:url('https://placehold.co/76x76/bfe3d0/bfe3d0');background-size:cover;background-position:center;border:3px solid #fff;box-shadow:0 2px 5px rgba(90,150,170,.3);"></div></div>
<!-- contact card: menu dots -->
<span style="width:40px;text-align:right;padding-top:5px;"><span style="font-size:6px !important;letter-spacing:4px;">●●●</span></span>
</div>
<!-- contact card: name -->
<div style="text-align:center;margin-top:5px;font-size:23px !important;line-height:30px !important;color:#3f6a58;text-shadow:0 1px 0 #fff;">contact name</div>
<!-- contact card: phone number -->
<div style="text-align:center;font-size:12px !important;line-height:16px !important;color:#5a7f70;">+1 000 000 0000</div>
</div>

<!-- chat window: 300px wide, 350px tall, pulled up over the contact card -->
<div style="position:relative;z-index:4;margin:-44px 0 0 50px;width:300px;height:350px;box-sizing:border-box;border-radius:22px;border:1px solid #cfe9dc;background:#fff;box-shadow:0 10px 24px rgba(90,150,170,.35);display:flex;flex-direction:column;overflow:hidden; left:30px;">

<!-- chat header: back arrow + avatar + name -->
<div style="height:64px;flex-shrink:0;box-sizing:border-box;padding:8px 14px 0 14px;display:flex;justify-content:space-between;background:#eaf7f1;border-bottom:1px solid #cfe9dc;">
<span style="width:30px;color:#5fa98a;padding-top:6px;"><span style="font-size:30px !important;line-height:24px !important;">‹</span></span>
<div style="display:flex;flex-direction:column;align-items:center;">
<!-- chat header: avatar (replace url) + green status dot -->
<div style="display:flex;"><div style="width:34px;height:34px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#bfe3d0;background-image:url('https://placehold.co/34x34/bfe3d0/bfe3d0');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 2px 5px rgba(90,150,170,.3);"></div><div style="width:10px;height:10px;box-sizing:border-box;margin:-2px 0 0 -9px;border-radius:50%;background:#7fd1a8;border:2px solid #eaf7f1;"></div></div>
<!-- chat header: name -->
<div style="font-size:13px !important;line-height:17px !important;color:#4e8f74;">bestie</div>
</div>
<span style="width:30px;"></span>
</div>

<!-- chat scroll area: scrolls up/down. newest messages sit at the bottom. add more messages inside the inner div -->
<div style="flex:1;min-height:0;box-sizing:border-box;display:flex;flex-direction:column-reverse;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#a9d6bf #f2faf5;">
<div style="flex-shrink:0;padding:12px 12px 12px 12px;">
<!-- chat photo bubble (top of the chat): replace the image url -->
<div style="width:98px;height:104px;box-sizing:border-box;padding:3px;border-radius:16px;background:#eaf7f1;border:1px solid #cfe9dc;"><div style="width:100%;height:100%;border-radius:13px;background-color:#dfe8fb;background-image:url('https://placehold.co/90x96/dfe8fb/ffffff?text=pic');background-size:cover;background-position:center;"></div></div>
<!-- chat text (received) - message 1 -->
<div style="margin-top:8px;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 16px 4px;background:#edf1fd;border:1px solid #dbe3fa;font-size:11px !important;line-height:14px !important;color:#56628a;">your thoughts?</span></div>
<!-- chat text (sent) - message 2 -->
<div style="margin-top:8px;text-align:right;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 4px 16px;background:#cdeedd;border:1px solid #b7e2cb;font-size:11px !important;line-height:14px !important;color:#3f6a58;">obsessed with this</span></div>
<!-- chat text (sent) - message 3 -->
<div style="margin-top:8px;text-align:right;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 4px 16px;background:#cdeedd;border:1px solid #b7e2cb;font-size:11px !important;line-height:14px !important;color:#3f6a58;">u look so pretty</span></div>
<!-- chat text (received) - message 4 -->
<div style="margin-top:8px;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 16px 4px;background:#edf1fd;border:1px solid #dbe3fa;font-size:11px !important;line-height:14px !important;color:#56628a;">thank you!</span></div>
<!-- chat text (sent) - message 5 -->
<div style="margin-top:8px;text-align:right;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 4px 16px;background:#cdeedd;border:1px solid #b7e2cb;font-size:11px !important;line-height:14px !important;color:#3f6a58;">call me later?</span></div>
<!-- chat text (received) - message 6 -->
<div style="margin-top:8px;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 16px 4px;background:#edf1fd;border:1px solid #dbe3fa;font-size:11px !important;line-height:14px !important;color:#56628a;">always ♥︎</span></div>
<!-- chat text (sent) - message 7 -->
<div style="margin-top:8px;text-align:right;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 4px 16px;background:#cdeedd;border:1px solid #b7e2cb;font-size:11px !important;line-height:14px !important;color:#3f6a58;">bringing snacks</span></div>
<!-- chat text (received) - message 8 -->
<div style="margin-top:8px;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 16px 4px;background:#edf1fd;border:1px solid #dbe3fa;font-size:11px !important;line-height:14px !important;color:#56628a;">the good ones??</span></div>
<!-- chat text (sent) - message 9 (newest, shows first) -->
<div style="margin-top:8px;text-align:right;"><span style="display:inline-block;padding:6px 13px;border-radius:16px 16px 4px 16px;background:#cdeedd;border:1px solid #b7e2cb;font-size:11px !important;line-height:14px !important;color:#3f6a58;">obviously</span></div>
</div>
</div>

<!-- chat input bar: plus button + message field + mic -->
<div style="height:48px;flex-shrink:0;box-sizing:border-box;padding:0 12px;display:flex;align-items:center;gap:8px;background:#eaf7f1;border-top:1px solid #cfe9dc;">
<div style="width:26px;height:26px;border-radius:50%;background:#7fc4a4;color:#fff;text-align:center;font-size:20px !important;line-height:25px !important;">+</div>
<div style="flex:1;height:26px;box-sizing:border-box;padding:0 10px 0 12px;display:flex;align-items:center;justify-content:space-between;border-radius:13px;background:#a9b8f0;background-image:linear-gradient(#b7c4f5,#a3b3ee);font-size:11px !important;color:#fff;">
<span>imessage</span><div style="display:flex;flex-direction:column;align-items:center;"><div style="width:6px;height:10px;border-radius:6px;background:#fff;"></div><div style="width:11px;height:5px;box-sizing:border-box;margin-top:-3px;border:2px solid #fff;border-top:none;border-radius:0 0 10px 10px;"></div><div style="width:2px;height:2px;background:#fff;"></div></div>
</div>
</div>

</div>
</div>
</div>
</div>
</lj-raw>

04. livestream 1

▸

livestream.exe− □ ×

◉ live ◈ 1.2k watching

game title

new game
options
credits
exit

◁ ❚❚ ▷▣

playing horror games with my ex ♥︎

channel name

143k subscribers

▲ 3.1k▼

top chat ▾⋮ ×

superfan_sky
$5.00

here's $5 to start yelling like a maniac for no reason.

mochi_maeur so good omg ♥︎

sunnyd4ynah ur so bad

bunnybeani cant watch this im already scared

peachy.pieex is better than u

cloudninehey cammy

starlitxoso when are we playing valorant?

lilacleafdo u play the sims

honeybee22turn the lights off!!

marshmallowthat jumpscare got me ●_●

chat...

▶︎

menu ▲ ✔︎ ♫ ◉ 00:00 00/00/00

html / raw code


<lj-raw>
<!-- credit: htmled -->
<div style="width:780px;height:500px;box-sizing:border-box;margin:10px auto;background:#e9e7f2;background-image:linear-gradient(135deg,rgba(255,255,255,.28) 25%,transparent 25%),linear-gradient(225deg,rgba(255,255,255,.2) 25%,transparent 25%);background-size:60px 60px;border:1px solid #d8d4df;border-radius:8px;box-shadow:0 8px 22px rgba(80,70,90,.12);font-family:verdana,arial,sans-serif !important;color:#5c5760;text-align:left;display:flex;flex-direction:column;overflow:hidden;">

<div style="flex:1;min-height:0;padding:14px 16px 0 16px;display:flex;flex-direction:column;">

<div style="display:flex;justify- content:center;height:26px;margin-bottom:12px;flex-shrink:0;">
<div style="width:320px;height:26px;box-sizing:border-box;display:flex;align-items:center;background:#fbfafc;border:1px solid #cbc5d0;border-radius:4px;box-shadow:2px 3px 8px rgba(70,60,80,.12);overflow:hidden;">
<div style="display:flex;padding-left:11px;">
<div style="width:9px;height:9px;box-sizing:border-box;border:2px solid #9a8aa6;border-radius:50%;"></div>
<div style="width:2px;height:6px;margin:8px 0 0 -2px;background:#9a8aa6;transform:rotate(0deg);"></div>
</div>
<span style="flex:1;padding-left:8px;font-size:10px !important;line-height:24px !important;color:#a69aac;">search</span>
<div style="display:block;width:44px;height:24px;text-align:center;font-size:11px !important;line-height:24px !important;background:#dcebf5;border-left:1px solid #bed0dc;color:#71808d;text-decoration:none;">▸</div>
</div>
</div>

<div style="display:flex;justify-content:space-between;flex:1;min-height:0;margin-bottom:14px;">

<div style="width:430px;box-sizing:border-box;display:flex;flex-direction:column;background:#fbfafc;border:1px solid #cbc5d0;box-shadow:3px 5px 12px rgba(70,60,80,.13);">
<div style="height:24px;flex-shrink:0;box-sizing:border-box;padding:0 9px;display:flex;align-items:center;justify-content:space-between;background:#ece7f0;border-bottom:1px solid #d6cedb;font-size:10px !important;line-height:24px !important;color:#776e7e;"><span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#eebcc5;margin-right:4px;"></span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f1d7a7;margin-right:4px;"></span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#c7d9e6;margin-right:4px;"></span><span style="margin-left:5px;">livestream.exe</span></span><span style="font-size:11px !important;letter-spacing:5px;">− □ ×</span></div>
<div style="padding:8px 8px 0 8px;">
<div style="height:262px;box-sizing:border-box;border:1px solid #cbc5d0;background-color:#a89fb0;background-image:url('https://placehold.co/412x262/a89fb0/a89fb0');background-size:cover;background-position:center;display:flex;flex-direction:column;">
<div style="display:flex;justify-content:space-between;padding:8px;">
<span style="background:#eebcc5;color:#fff;border-radius:3px;padding:0 8px;font-size:9px !important;line-height:17px !important;font-weight:bold;">◉ live</span>
<span style="background:rgba(255,255,255,.78);color:#5c5760;border-radius:3px;padding:0 8px;font-size:9px !important;line-height:17px !important;">◈ 1.2k watching</span>
</div>
<div style="flex:1;min-height:0;display:flex;align-items:center;">
<div style="width:118px;height:84px;box-sizing:border-box;margin-left:16px;flex-shrink:0;border:3px solid #fff;border-radius:3px;background-color:#eebcc5;background-image:url('https://placehold.co/118x84/eebcc5/ffffff?text=webcam');background-size:cover;background-position:center;box-shadow:2px 4px 8px rgba(50,40,60,.35);transform:rotate(0deg);"></div>
<div style="flex:1;text-align:center;padding-right:10px;">
<div style="font-family:georgia,'times new roman',serif !important;font-size:26px !important;font-weight:bold;letter-spacing:4px;line-height:32px !important;color:#fff;text-shadow:2px 2px 0 #eebcc5,3px 3px 0 rgba(50,40,60,.3);margin-bottom:8px;">game title</div>
<div style="font-family:'courier new',monospace !important;font-size:11px !important;letter-spacing:3px;line-height:14px !important;color:#fff;text-shadow:0 1px 3px rgba(50,40,60,.6);"><div style="padding:2px 12px;margin-bottom:3px;border:1px solid #fff;border-radius:3px;background:rgba(255,255,255,.22);">new game</div><div style="padding:2px 12px;margin-bottom:3px;">options</div><div style="padding:2px 12px;margin-bottom:3px;">credits</div><div style="padding:2px 12px;margin-bottom:3px;">exit</div></div>
</div>
</div>
<div style="padding:0 10px 8px 10px;">
<div style="height:4px;background:rgba(255,255,255,.5);display:flex;align-items:center;">
<div style="width:96%;height:4px;background:#eebcc5;"></div>
<div style="width:10px;height:10px;box-sizing:border-box;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid #eebcc5;"></div>
</div>
<div style="margin-top:6px;display:flex;justify-content:space-between;font-size:11px !important;line-height:14px !important;color:#fff;text-shadow:0 1px 2px rgba(50,40,60,.5);">
<span style="letter-spacing:7px;">◁ ❚❚ ▷</span><span>▣</span>
</div>
</div>
</div>
</div>
<div style="padding:9px 12px 0 12px;">
<div style="font-family:georgia,'times new roman',serif !important;font-size:16px !important;font-weight:bold;font-style:italic;line-height:20px !important;color:#5c5760;">playing horror games with my ex ♥︎</div>
<div style="display:flex;align-items:center;gap:9px;margin-top:8px;">
<div style="width:36px;height:36px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#eebcc5;background-image:url('https://placehold.co/36x36/eebcc5/eebcc5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div>
<div style="flex:1;">
<div style="font-size:12px !important;font-weight:bold;line-height:15px !important;color:#5c5760;">channel name</div>
<div style="font-size:9px !important;line-height:12px !important;color:#9a8a94;">143k subscribers</div>
</div>
<a href="https://www.youtube.com/" style="display:block;height:26px;padding:0 13px;background:#f5dce7;background-image:linear-gradient(#fff,#f5dce7);border:1px solid #d6bdc8;border-radius:4px;box-shadow:1px 2px 3px rgba(80,70,85,.15);font-size:10px !important;font-weight:bold;line-height:24px !important;color:#5c5760;text-decoration:none;">subscribe</a>
<div style="display:flex;align-items:center;height:26px;box-sizing:border-box;padding:0 11px;background:#dcebf5;background-image:linear-gradient(#fff,#dcebf5);border:1px solid #bed0dc;border-radius:4px;box-shadow:1px 2px 3px rgba(80,70,85,.15);font-size:10px !important;font-weight:bold;color:#5c5760;">
<span>▲ 3.1k</span><span style="display:block;width:1px;height:12px;background:#bed0dc;margin:0 8px;"></span><span>▼</span>
</div>
</div>
</div>
</div>

<div style="width:300px;box-sizing:border-box;display:flex;flex-direction:column;background:#fffefd;border:1px solid #d4ccd1;box-shadow:3px 5px 12px rgba(70,60,80,.13);overflow:hidden;">
<div style="height:24px;flex-shrink:0;box-sizing:border-box;padding:0 9px;display:flex;align-items:center;justify-content:space-between;background:#f4e8ec;border-bottom:1px solid #e1d5d9;font-size:10px !important;line-height:24px !important;color:#8e747d;"><span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#eebcc5;margin-right:4px;"></span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#f1d7a7;margin-right:4px;"></span><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:#c7d9e6;margin-right:4px;"></span><span style="margin-left:5px;">top chat ▾</span></span><span style="font-size:11px !important;letter-spacing:5px;">⋮ ×</span></div>
<div style="margin:11px 10px 6px 10px;flex-shrink:0;background:#f8e7bd;padding:8px 10px;box-shadow:2px 3px 7px rgba(75,65,70,.13);transform:rotate(0deg);">
<div style="display:flex;align-items:center;gap:8px;"><div style="width:26px;height:26px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#f5dce7;background-image:url('https://placehold.co/26x26/f5dce7/f5dce7');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div>
<div style="font-size:10px !important;line-height:13px !important;font-weight:bold;color:#7c6c5c;">superfan_sky<br><span style="font-weight:normal;color:#9a8874;">$5.00</span></div></div>
<div style="margin-top:6px;font-family:georgia,'times new roman',serif !important;font-size:10px !important;line-height:13px !important;font-style:italic;color:#7c6c5c;">here's $5 to start yelling like a maniac for no reason.</div>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;padding:8px 11px 0 11px;box-sizing:border-box;">
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#eebcc5;background-image:url('https://placehold.co/24x24/eebcc5/eebcc5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">mochi_mae</b>ur so good omg ♥︎</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#f1d7a7;background-image:url('https://placehold.co/24x24/f1d7a7/f1d7a7');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">sunnyd4y</b>nah ur so bad</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#c7d9e6;background-image:url('https://placehold.co/24x24/c7d9e6/c7d9e6');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">bunnybean</b>i cant watch this im already scared</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#cfe6dc;background-image:url('https://placehold.co/24x24/cfe6dc/cfe6dc');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">peachy.pie</b>ex is better than u</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#f5dce7;background-image:url('https://placehold.co/24x24/f5dce7/f5dce7');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">cloudnine</b>hey cammy</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#d5c5da;background-image:url('https://placehold.co/24x24/d5c5da/d5c5da');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">starlitxo</b>so when are we playing valorant?</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#dcebf5;background-image:url('https://placehold.co/24x24/dcebf5/dcebf5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">lilacleaf</b>do u play the sims</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#f8e7bd;background-image:url('https://placehold.co/24x24/f8e7bd/f8e7bd');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">honeybee22</b>turn the lights off!!</div></div>
<div style="display:flex;gap:8px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#bed0dc;background-image:url('https://placehold.co/24x24/bed0dc/bed0dc');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:1px 2px 3px rgba(80,70,85,.18);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c5760;"><b style="color:#9a8aa6;margin-right:5px;">marshmallow</b>that jumpscare got me ●_●</div></div>
</div>
<div style="flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px;background:#f4f0f5;border-top:1px solid #ddd6e0;">
<div style="flex:1;height:26px;box-sizing:border-box;padding-left:9px;background:#fff;border:1px solid #d8d3dc;border-radius:3px;font-size:10px !important;line-height:24px !important;color:#a69aac;">chat...</div>
<div style="width:26px;height:26px;background:#eebcc5;background-image:linear-gradient(#f5cfd6,#eebcc5);border:1px solid #d6a5b0;border-radius:3px;text-align:center;font-size:10px !important;line-height:24px !important;color:#fff;">▶︎</div>
</div>
</div>

</div>
</div>

<div style="height:30px;flex-shrink:0;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 10px;background:#f5f2f6;border-top:1px solid #d7d1da;font-size:10px !important;color:#786f7b;">
<span style="display:block;padding:0 9px;height:20px;line-height:20px !important;background:#e5dbea;border:1px solid #d1c4d7;border-radius:3px;">menu</span>
<span style="font-size:13px !important;letter-spacing:5px;color:#9a8ca0;">▲ ✔︎ ♫ ◉</span>
<span style="font-size:9px !important;color:#817783;">00:00   00/00/00</span>
</div>

</div>
</lj-raw>

05. livestream 2

search ✧ 🔍

game title

new game
options
credits
exit

❚❚ ⏭ ● live

playing horror games with my ex ☁️

channel name

143k subscribers

👍 3.1k👎

top chat ⌄⋮ ✕

superfan_sky
$5.00

here's $5 to start yelling like a maniac for no reason. ✨

mochi_maeur so good omg <3

sunnyd4ynah ur so bad

bunnybeani cant watch this im already scared

peachy.pieex is better than u

cloudninehey cammy

starlitxoso when are we playing valorant?

lilacleafdo u play the sims

honeybee22turn the lights off!!

marshmallowthe jumpscare got me 😭

chat...

➤

html / raw code


<lj-raw>
<!-- credit: htmled -->
<div style="width:750px;height:520px;background:#fff0f3;background-image:linear-gradient(135deg,#fff0f3 0%,#ffe4ec 50%,#f3e8ff 100%);padding:25px;box-sizing:border-box;border-radius:28px;border:2px solid #ffccd5;box-shadow:0 10px 30px rgba(255,182,193,0.35);display:flex;justify-content:center;align-items:center;overflow:hidden;font-family:'trebuchet ms',verdana,arial,sans-serif !important;position:relative;">
<div style="width:700px;height:470px;background:#fff8f9;background-image:radial-gradient(#ffd6de 15%,transparent 16%);background-size:20px 20px;border-radius:20px;border:2px solid #ffb3c6;box-shadow:0 8px 24px rgba(255,182,193,0.25),inset 0 0 0 4px #fff;padding:16px 20px;box-sizing:border-box;position:relative;overflow:hidden;display:flex;flex-direction:column;">

<div style="display:flex;justify-content:center;height:32px;margin-bottom:12px;flex-shrink:0;">
<div style="width:330px;height:32px;box-sizing:border-box;display:flex;background:#fff;border:1.5px solid #ffb3c6;border-radius:16px;overflow:hidden;box-shadow:0 3px 8px rgba(255,150,180,0.25);">
<span style="flex:1;padding-left:14px;font-size:11px !important;line-height:29px !important;color:#b08a9c;">search ✧</span>
<a href="https://www.youtube.com/" style="display:block;width:50px;text-align:center;font-size:13px !important;line-height:29px !important;background:#ffd1dc;border-left:1.5px solid #ffb3c6;text-decoration:none;color:#5c4d5c;">🔍</a>
</div>
</div>

<div style="display:flex;justify-content:space-between;flex:1;min-height:0;">

<div style="width:420px;display:flex;flex-direction:column;">

<div style="width:420px;height:285px;box-sizing:border-box;border:5px solid #fff;border-radius:16px;background-color:#9b8aa8;background-image:url('https://placehold.co/420x285/9b8aa8/9b8aa8');background-size:cover;background-position:center;box-shadow:0 6px 16px rgba(255,150,180,0.4);display:flex;flex-direction:column;overflow:hidden;">
<div style="text-align:center;padding-top:14px;height:76px;box-sizing:border-box;font-family:georgia,'times new roman',serif !important;font-size:36px !important;font-weight:bold;letter-spacing:5px;line-height:44px !important;color:#fff;text-shadow:2px 2px 0 #ff8fab,4px 4px 0 rgba(92,77,92,0.35);">game title</div>
<div style="flex:1;min-height:0;display:flex;align-items:center;">
<div style="width:118px;height:84px;box-sizing:border-box;margin-left:14px;flex-shrink:0;border:3px solid #fff;border-radius:12px;background-color:#ffccd5;background-image:url('https://placehold.co/118x84/ffccd5/ffffff?text=webcam');background-size:cover;background-position:center;box-shadow:0 3px 8px rgba(92,77,92,0.3);"></div>
<div style="flex:1;text-align:center;font-family:'courier new',monospace !important;font-size:12px !important;letter-spacing:3px;line-height:16px !important;color:#fff;text-shadow:0 1px 3px rgba(92,77,92,0.6);padding-right:14px;"><div style="padding:3px 12px;margin-bottom:3px;border:1px solid #fff;border-radius:12px;background:rgba(255,255,255,0.25);">new game</div><div style="padding:3px 12px;margin-bottom:3px;">options</div><div style="padding:3px 12px;margin-bottom:3px;">credits</div><div style="padding:3px 12px;margin-bottom:3px;">exit</div></div>
</div>
<div style="padding:0 12px 9px 12px;">
<div style="height:5px;background:rgba(255,255,255,0.55);border-radius:3px;display:flex;align-items:center;">
<div style="width:96%;height:5px;background:#ff8fab;border-radius:3px;"></div>
<div style="width:11px;height:11px;box-sizing:border-box;margin-left:-5px;border-radius:50%;background:#fff;border:2px solid #ff5c8a;"></div>
</div>
<div style="margin-top:7px;font-size:11px !important;line-height:14px !important;color:#fff;text-shadow:0 1px 2px rgba(92,77,92,0.5);"><span style="letter-spacing:8px;">❚❚ ⏭</span> <span style="margin-left:6px;font-size:9px !important;"><span style="color:#ff5c8a;">●</span> live</span></div>
</div>
</div>

<div style="margin-top:10px;font-size:17px !important;font-weight:bold;line-height:22px !important;color:#5c4d5c;text-shadow:1px 1px 0 #fff;">playing horror games with my ex ☁️</div>

<div style="display:flex;align-items:center;gap:9px;margin-top:8px;">
<div style="width:38px;height:38px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffccd5;background-image:url('https://placehold.co/38x38/ffccd5/ffccd5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div>
<div style="flex:1;">
<div style="font-size:14px !important;font-weight:bold;line-height:16px !important;color:#5c4d5c;">channel name</div>
<div style="font-size:10px !important;line-height:13px !important;color:#9a8a94;">143k subscribers</div>
</div>
<a href="https://www.youtube.com/" style="display:block;height:30px;padding:0 15px;border-radius:15px;background:#ffd1dc;background-image:linear-gradient(160deg,#ffe0e8,#ffc2d1);border:1.5px solid #ffb3c6;box-shadow:0 2px 6px rgba(255,150,180,0.35);font-size:11px !important;font-weight:bold;line-height:27px !important;color:#5c4d5c;text-decoration:none;">subscribe</a>
<div style="display:flex;align-items:center;height:30px;box-sizing:border-box;padding:0 12px;border-radius:15px;background:#ffdac1;background-image:linear-gradient(160deg,#ffe8d8,#ffcfb0);border:1.5px solid #ffb3c6;box-shadow:0 2px 6px rgba(255,190,150,0.35);font-size:11px !important;font-weight:bold;color:#5c4d5c;">
<span>👍 3.1k</span><span style="display:block;width:1px;height:14px;background:#ffb3c6;margin:0 9px;"></span><span>👎</span>
</div>
</div>

</div>

<div style="width:230px;height:100%;box-sizing:border-box;background:#fff;border:1.5px solid #ffb3c6;border-radius:14px;box-shadow:0 8px 20px rgba(255,150,180,0.3);display:flex;flex-direction:column;overflow:hidden;">
<div style="height:28px;flex-shrink:0;box-sizing:border-box;padding:0 10px;display:flex;justify-content:space-between;align-items:center;background:#ffe4ec;border-bottom:1px solid #ffccd5;font-size:10px !important;font-weight:bold;color:#5c4d5c;">
<span>top chat ⌄</span><span style="letter-spacing:8px;color:#b08a9c;">⋮ ✕</span>
</div>
<div style="margin:8px 8px 4px 8px;flex-shrink:0;border-radius:11px;background:#ffdac1;background-image:linear-gradient(160deg,#ffe8d8,#ffcfb0);border:1px solid #ffb3c6;padding:8px 10px;box-shadow:0 3px 8px rgba(255,190,150,0.35);">
<div style="display:flex;align-items:center;gap:7px;"><div style="width:28px;height:28px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffccd5;background-image:url('https://placehold.co/28x28/ffccd5/ffccd5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div>
<div style="font-size:11px !important;line-height:13px !important;font-weight:bold;color:#5c4d5c;">superfan_sky<br><span style="font-size:10px !important;font-weight:normal;color:#8a7078;">$5.00</span></div></div>
<div style="margin-top:6px;font-size:10px !important;line-height:13px !important;color:#5c4d5c;">here's $5 to start yelling like a maniac for no reason. ✨</div>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;padding:8px 10px 0 10px;box-sizing:border-box;">
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffccd5;background-image:url('https://placehold.co/24x24/ffccd5/ffccd5');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">mochi_mae</b>ur so good omg <3</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffdac1;background-image:url('https://placehold.co/24x24/ffdac1/ffdac1');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">sunnyd4y</b>nah ur so bad</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#c7ceea;background-image:url('https://placehold.co/24x24/c7ceea/c7ceea');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">bunnybean</b>i cant watch this im already scared</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#b5ead7;background-image:url('https://placehold.co/24x24/b5ead7/b5ead7');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">peachy.pie</b>ex is better than u</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffd1dc;background-image:url('https://placehold.co/24x24/ffd1dc/ffd1dc');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">cloudnine</b>hey cammy</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#e0c3fc;background-image:url('https://placehold.co/24x24/e0c3fc/e0c3fc');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">starlitxo</b>so when are we playing valorant?</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffe4ec;background-image:url('https://placehold.co/24x24/ffe4ec/ffe4ec');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">lilacleaf</b>do u play the sims</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#ffdac1;background-image:url('https://placehold.co/24x24/ffdac1/ffdac1');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">honeybee22</b>turn the lights off!!</div></div>
<div style="display:flex;gap:7px;align-items:center;margin-bottom:9px;"><div style="width:24px;height:24px;flex-shrink:0;box-sizing:border-box;border-radius:50%;background-color:#c7ceea;background-image:url('https://placehold.co/24x24/c7ceea/c7ceea');background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(255,150,180,0.4);"></div><div style="font-size:10px !important;line-height:13px !important;color:#5c4d5c;"><b style="color:#b08a9c;margin-right:5px;">marshmallow</b>the jumpscare got me 😭</div></div>
</div>
<div style="flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px;background:#fff8f9;border-top:1px solid #ffccd5;">
<div style="flex:1;height:26px;box-sizing:border-box;padding-left:12px;border-radius:13px;background:#ffe4ec;border:1px solid #ffb3c6;font-size:10px !important;line-height:24px !important;color:#b08a9c;">chat...</div>
<div style="width:26px;height:26px;border-radius:50%;background:#ff8fab;background-image:linear-gradient(135deg,#ffb3c6,#ff5c8a);text-align:center;font-size:12px !important;line-height:26px !important;color:#fff;box-shadow:0 2px 5px rgba(255,92,138,0.4);">➤</div>
</div>
</div>

</div>
</div>
</div>
</lj-raw>

06. planner

☾

your name↳planner

≡

welcome to your planner !

activities !

picnic with a friend !

hair routine

go to the supermarket

✦ weekly plan

sep 2026

mon

+ new task

tues

+ new task

wed

+ new task

thurs

+ new task

fri

+ new task

sat

+ new task

sun

+ new task

▶︎

currently playing

song title03:02

artist name

reminder !

drink water !!!

accept decline

✦

your.site.here

html / raw code


<lj-raw>
<!-- credit: htmled -->
<!-- outer frame: 700px wide -->
<div style="width:700px;height:680px;box-sizing:border-box;margin:10px auto;display:flex;flex-direction:column;background:#fff;border:1px solid #dcdcdc;border-radius:8px;box-shadow:0 8px 22px rgba(70,90,60,.18);font-family:'trebuchet ms',verdana,arial,sans-serif !important;color:#6b6f66;text-align:left;overflow:hidden;">

<!-- top bar: moon button + title + user + menu -->
<div style="height:46px;flex-shrink:0;display:flex;background:#ececec;border-bottom:1px solid #d6d6d6;">
<!-- top bar: moon button (green) -->
<div style="width:46px;background:#91d17e;text-align:center;font-size:19px !important;line-height:46px !important;color:#fff;">☾</div>
<!-- top bar: title (edit your name + page name) -->
<div style="flex:1;padding-left:26px;font-size:13px !important;line-height:46px !important;color:#3d3d3d;"><b>your name</b><span style="margin:0 10px;color:#888;">↳</span>planner</div>
<!-- top bar: user button -->
<div style="width:46px;border-left:1px solid #d6d6d6;display:flex;align-items:center;justify-content:center;"><div style="display:flex;flex-direction:column;align-items:center;"><div style="width:7px;height:7px;box-sizing:border-box;border:1.5px solid #555;border-radius:50%;"></div><div style="width:14px;height:6px;box-sizing:border-box;margin-top:2px;border:1.5px solid #555;border-bottom:none;border-radius:8px 8px 0 0;"></div></div></div>
<!-- top bar: menu button -->
<div style="width:46px;border-left:1px solid #d6d6d6;text-align:center;font-size:18px !important;line-height:44px !important;color:#555;">≡</div>
</div>

<!-- canvas: white page with faint grid -->
<div style="flex:1;min-height:0;padding-top:22px;background-color:#fff;background-image:linear-gradient(#eef3ec 1px,transparent 1px),linear-gradient(90deg,#eef3ec 1px,transparent 1px);background-size:20px 20px;">

<!-- welcome banner: green scenic strip with a dark pill (edit the words, replace the image url) -->
<div style="width:300px;height:44px;box-sizing:border-box;margin:0 auto 14px auto;border-radius:10px;border:2px solid #a9cf7f;background-color:#b7d58f;background-image:url('https://placehold.co/300x44/b7d58f/b7d58f');background-size:cover;display:flex;align-items:center;justify-content:center;">
<div style="width:250px;height:28px;border-radius:14px;background:rgba(95,105,88,.78);text-align:center;font-size:12px !important;line-height:28px !important;color:#fff;">welcome to your planner !</div>
</div>

<!-- stage: 640 x 500 area. every piece below is placed by x / y inside it -->
<div style="width:640px;height:500px;margin:0 auto;">

<!-- activities card: dark header + green list -->
<div style="height:0;position:relative;z-index:3;"><div style="position:relative;left:0px;top:24px;width:270px;height:148px;"><div style="width:270px;height:148px;box-sizing:border-box;border-radius:16px;border:2px solid #a9cf7f;background:#c6e2a1;overflow:hidden;box-shadow:0 4px 10px rgba(110,140,80,.25);"><div style="height:44px;box-sizing:border-box;padding:0 18px;background:#6f7469;text-align:right;font-size:19px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:44px !important;color:#a9cf7f;">activities !</div><div style="padding:14px 0 0 24px;"><!-- activity 1: edit the text -->
<div style="display:flex;align-items:center;gap:9px;margin-bottom:11px;"><div style="width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#dcefbf;border:1px solid #b9d999;"></div><span style="font-size:11px !important;line-height:14px !important;color:#6b7f5a;">picnic with a friend !</span></div>
<!-- activity 2: edit the text -->
<div style="display:flex;align-items:center;gap:9px;margin-bottom:11px;"><div style="width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#dcefbf;border:1px solid #b9d999;"></div><span style="font-size:11px !important;line-height:14px !important;color:#6b7f5a;">hair routine</span></div>
<!-- activity 3: edit the text -->
<div style="display:flex;align-items:center;gap:9px;margin-bottom:11px;"><div style="width:13px;height:13px;flex-shrink:0;border-radius:50%;background:#dcefbf;border:1px solid #b9d999;"></div><span style="font-size:11px !important;line-height:14px !important;color:#6b7f5a;">go to the supermarket</span></div>
</div></div></div></div>

<!-- photo card: gingham header + main photo (replace the image url, size 351 x 231) -->
<div style="height:0;position:relative;z-index:4;"><div style="position:relative;left:285px;top:24px;width:355px;height:285px;"><div style="width:355px;height:285px;box-sizing:border-box;border-radius:16px;border:2px solid #a9cf7f;background-color:#c6e2a1;overflow:hidden;box-shadow:0 4px 10px rgba(110,140,80,.25);"><div style="height:50px;background-color:#c6e2a1;background-image:linear-gradient(90deg,rgba(120,160,90,.45) 50%,transparent 50%),linear-gradient(rgba(120,160,90,.45) 50%,transparent 50%);background-size:24px 24px;"></div><div style="height:231px;background-color:#dfe9d3;background-image:url('https://placehold.co/351x231/dfe9d3/ffffff?text=your+photo');background-size:cover;background-position:center;"></div></div></div></div>

<!-- scene card: big picture (replace the image url, size 431 x 201) -->
<div style="height:0;position:relative;z-index:2;"><div style="position:relative;left:205px;top:275px;width:435px;height:203px;"><div style="width:435px;height:203px;box-sizing:border-box;border-radius:16px;border:2px solid #a9cf7f;background-color:#c6e2a1;background-image:url('https://placehold.co/431x201/c6e2a1/ffffff?text=another pic here maybe');background-size:cover;background-position:center;box-shadow:0 4px 10px rgba(110,140,80,.25);"></div></div></div>

<!-- weekly plan window: scrolls up / down. copy a day block to add more days -->
<div style="height:0;position:relative;z-index:5;"><div style="position:relative;left:0px;top:190px;width:290px;height:165px;"><div style="width:290px;height:165px;box-sizing:border-box;border:1.5px solid #a9cf7f;background:#fff;overflow:hidden;box-shadow:0 4px 10px rgba(110,140,80,.22);display:flex;flex-direction:column;"><!-- weekly plan header: title tab + month tab (edit the words) -->
<div style="height:26px;flex-shrink:0;display:flex;background:#e1efc9;border-bottom:1.5px solid #a9cf7f;font-size:10px !important;font-weight:bold;font-style:italic;line-height:25px !important;color:#a9cf7f;"><div style="flex:1;padding-left:10px;">✦ weekly plan</div><div style="width:112px;box-sizing:border-box;padding-left:14px;border-left:1.5px solid #a9cf7f;">sep 2026</div></div><!-- weekly plan scroll area -->
<div style="flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 16px 0 22px;scrollbar-width:thin;scrollbar-color:#a9cf7f #f4f9ee;"><!-- weekly plan day: mon (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">mon</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: tues (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">tues</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: wed (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">wed</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: thurs (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">thurs</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: fri (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">fri</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: sat (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">sat</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
<!-- weekly plan day: sun (edit day name + task text) -->
<div style="margin-bottom:14px;"><div style="font-size:16px !important;font-weight:bold;font-style:italic;letter-spacing:1px;line-height:20px !important;color:#a9cf7f;">sun</div><div style="font-size:10px !important;line-height:14px !important;color:#8d918a;">+ new task</div></div>
</div></div></div></div>

<!-- music player: play symbol + text -->
<div style="height:0;position:relative;z-index:3; margin-top: 30px;"><div style="position:relative;left:0px;top:372px;width:20px;height:20px;"><div style="width:100%;text-align:center;font-size:15px !important;line-height:15px !important;color:#6a6a6a;">▶︎</div></div></div>

<!-- music player: label, song title, time, artist (edit) -->
<div style="height:0;position:relative;z-index:3;"><div style="position:relative;left:24px;top:366px;width:165px;height:60px;"><div style="font-size:8px !important;font-weight:bold;letter-spacing:.5px;line-height:10px !important;color:#a9cf7f;">currently playing</div><div style="display:flex;justify-content:space-between;align-items:baseline;"><span style="font-size:17px !important;font-weight:bold;letter-spacing:1px;line-height:22px !important;color:#9cc971;">song title</span><span style="font-size:10px !important;color:#b6d693;">03:02</span></div><div style="font-size:12px !important;font-style:italic;line-height:15px !important;color:#5f635a;">artist name</div></div></div>

<!-- music player: round album picture (replace the image url, size 84 x 84) -->
<div style="height:0;position:relative;z-index:6;"><div style="position:relative;left:176px;top:388px;width:84px;height:84px;"><div style="width:84px;height:84px;box-sizing:border-box;border-radius:50%;border:3px solid #fff;background-color:#cfe3b4;background-image:url('https://placehold.co/84x84/cfe3b4/ffffff?text=pic');background-size:cover;background-position:center;box-shadow:0 0 0 3px #a9cf7f,0 4px 8px rgba(110,140,80,.35);"></div></div></div>


<!-- reminder popup: dark header + green body. edit the text, links go on accept / decline -->
<div style="height:0;position:relative;z-index:8;"><div style="position:relative;left:420px;top:408px;width:215px;height:88px;"><div style="width:215px;height:88px;box-sizing:border-box;border-radius:14px;border:2px solid #a9cf7f;background:#c6e2a1;overflow:hidden;box-shadow:0 4px 10px rgba(80,100,60,.3);"><!-- reminder: header bar with status dot -->
<div style="height:28px;box-sizing:border-box;padding:0 14px;display:flex;align-items:center;justify-content:space-between;background:#6f7469;font-size:10px !important;font-weight:bold;color:#fff;"><span>reminder !</span><div style="width:11px;height:11px;border-radius:50%;background:#d6f0b0;"></div></div><!-- reminder: message text -->
<div style="text-align:center;padding-top:9px;font-size:10px !important;line-height:13px !important;color:#6b7f5a;">drink water !!!</div><!-- reminder: accept / decline buttons (change the links) -->
<div style="display:flex;justify-content:space-around;padding-top:7px;font-size:9px !important;font-weight:bold;line-height:12px !important;"><a href="https://www.youtube.com/" style="color:#5f7a45;text-decoration:none;">accept</a><a href="https://www.youtube.com/" style="color:#5f7a45;text-decoration:none;">decline</a></div></div></div></div>



<!-- sparkle: soft green -->
<div style="height:0;position:relative;z-index:3;"><div style="position:relative;left:246px;top:0px;width:20px;height:20px;"><div style="width:100%;text-align:center;font-size:18px !important;line-height:18px !important;color:#b9d999;">✦</div></div></div>

<!-- sparkle: yellow -->
<div style="height:0;position:relative;z-index:9;"><div style="position:relative;left:560px;top:292px;width:20px;height:20px;"><div style="width:100%;text-align:center;font-size:18px !important;line-height:18px !important;color:#ffd95a;">✦</div></div></div>


</div>
</div>

<!-- footer bar: green strip with spaced-out text (edit the text) -->
<div style="height:34px;flex-shrink:0;background:#91d17e;text-align:center;font-size:8px !important;letter-spacing:8px;line-height:34px !important;color:#fff;">your.site.here</div>

</div>
</lj-raw>

07. clickable folder notes

4:20 pm

sun, may 11 ✨

quote here ☁️

battery

85% 🔋

“notes.txt” ✨

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. curabitur pretium tincidunt lacus. nulla gravida orci a odio. nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. integer in mauris eu nibh euismod gravida. duis ac tellus et risus vulputate vehicula. donec lobortis risus a elit. etiam tempor.

“untitled_folder.txt” 📁

you clicked untitled folder! 🌸 this is your unique custom text box frame for folder one. you can write whatever your heart desires right here inside this window pane!

“my_notes.txt” 📝

you clicked my notes! 📝 here are your personal checklist items:

• drink more water 💧
• listen to kali uchis on loop 🎧
• update layout styling ✨

“art_and_culture.txt” 🎨

you clicked art & culture! 🎨

"art is not what you see, but what you make others see." — edgar degas.

this container holds inspirations, aesthetic references, and poetry snippets.

“random.txt” ☁️

you clicked random! ☁️

404 sanity not found. just a collection of random thoughts, stray ideas, brain fog, and midnight musings floating around in the cyberspace ether. ✨💫

♫

melting por vida - kali uchis

⏮ ❚❚ ⏭

html / raw code


<lj-raw>
<!-- credit: htmled -->
<div style="width:750px;height:580px;background:#fff0f3;background-image:linear-gradient(135deg,#fff0f3 0%,#ffe4ec 50%,#f3e8ff 100%);padding:25px;box-sizing:border-box;border-radius:28px;border:2px solid #ffccd5;box-shadow:0 10px 30px rgba(255,182,193,0.35);display:flex;justify-content:center;align-items:center;overflow:hidden;font-family:'trebuchet ms',verdana,arial,sans-serif !important;position:relative;">
<div style="width:700px;height:530px;background:#fff8f9;background-image:radial-gradient(#ffd6de 15%,transparent 16%);background-size:20px 20px;border-radius:20px;border:2px solid #ffb3c6;box-shadow:0 8px 24px rgba(255,182,193,0.25),inset 0 0 0 4px #fff;padding:16px 20px;box-sizing:border-box;position:relative;overflow:hidden;display:flex;justify-content:space-between;">


<div style="width:230px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;position:relative;z-index:1;">
<div style="width:100%;height:90px;background:#ffd1dc;background-image:linear-gradient(160deg,#ffe0e8,#ffc2d1);border-radius:16px;padding:12px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:0 4px 10px rgba(255,150,180,0.3);border:1.5px solid #ffb3c6;">
<div style="font-size:28px !important;font-weight:bold;color:#5c4d5c;letter-spacing:1px;line-height:1 !important;text-shadow:1px 1px 0 #fff;">4:20 <span style="font-size:12px !important;font-weight:normal;">pm</span></div>
<div style="font-size:11px !important;color:#7a6d71;margin-top:7px;font-weight:bold;">sun, may 11 ✨</div>
</div>
<div style="display:flex;gap:8px;width:100%;box-sizing:border-box;">
<div style="width:106px;height:95px;box-sizing:border-box;border-radius:12px;background-color:#ffccd5;background-image:url('https://placehold.co/106x95/ffccd5/ffffff?text=cute+pic');background-size:cover;background-position:center;border:4px solid #fff;box-shadow:0 3px 8px rgba(255,150,180,0.35);transform:rotate(-3deg);"></div>
<div style="width:106px;height:95px;box-sizing:border-box;border-radius:12px;background-color:#ffdac1;background-image:url('https://placehold.co/106x95/ffdac1/ffffff?text=cute+pic');background-size:cover;background-position:center;border:4px solid #fff;box-shadow:0 3px 8px rgba(255,150,180,0.35);transform:rotate(3deg);"></div>
</div>
<div style="width:100%;height:205px;box-sizing:border-box;border-radius:14px;background-color:#b5ead7;background-image:url('https://placehold.co/230x210/b5ead7/ffffff?text=anothaone');background-size:cover;background-position:center;border:5px solid #fff;box-shadow:0 4px 12px rgba(120,200,170,0.35);"></div>
<div style="font-family:georgia,'times new roman',serif !important;font-size:28px !important;font-weight:bold;color:#ff5c8a;text-shadow:2px 2px 0 #fff,3px 3px 0 #ffccd5;font-style:italic;text-align:center;line-height:1 !important;">quote here ☁️</div>
</div>

<div style="width:110px;display:flex;flex-direction:column;align-items:center;gap:16px;padding-top:18px;box-sizing:border-box;position:relative;z-index:2;">

<a href="#f1" style="text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;">
<div style="width:46px;height:38px;">
<div style="width:20px;height:9px;margin:0;box-sizing:border-box;background:#ffd1dc;border:1.5px solid #5c4d5c;border-bottom:none;border-radius:5px 5px 0 0;"></div>
<div style="width:46px;height:29px;margin:0;box-sizing:border-box;background:#ffd1dc;border:1.5px solid #5c4d5c;border-radius:0 7px 7px 7px;box-shadow:2px 3px 0 #ffb3c6;"><div style="margin:3px 4px;height:5px;border-radius:3px;background:rgba(255,255,255,0.7);"></div></div>
</div>
<span style="font-size:10px !important;font-weight:bold;color:#5c4d5c;background:#fff;border:1px solid #ffccd5;border-radius:8px;padding:1px 7px;">untitled folder</span>
</a>

<a href="#f2" style="text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;">
<div style="width:46px;height:38px;">
<div style="width:20px;height:9px;margin:0;box-sizing:border-box;background:#ffdac1;border:1.5px solid #5c4d5c;border-bottom:none;border-radius:5px 5px 0 0;"></div>
<div style="width:46px;height:29px;margin:0;box-sizing:border-box;background:#ffdac1;border:1.5px solid #5c4d5c;border-radius:0 7px 7px 7px;box-shadow:2px 3px 0 #ffb3c6;"><div style="margin:3px 4px;height:5px;border-radius:3px;background:rgba(255,255,255,0.7);"></div></div>
</div>
<span style="font-size:10px !important;font-weight:bold;color:#5c4d5c;background:#fff;border:1px solid #ffccd5;border-radius:8px;padding:1px 7px;">my notes</span>
</a>

<a href="#f3" style="text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;">
<div style="width:46px;height:38px;">
<div style="width:20px;height:9px;margin:0;box-sizing:border-box;background:#b5ead7;border:1.5px solid #5c4d5c;border-bottom:none;border-radius:5px 5px 0 0;"></div>
<div style="width:46px;height:29px;margin:0;box-sizing:border-box;background:#b5ead7;border:1.5px solid #5c4d5c;border-radius:0 7px 7px 7px;box-shadow:2px 3px 0 #ffb3c6;"><div style="margin:3px 4px;height:5px;border-radius:3px;background:rgba(255,255,255,0.7);"></div></div>
</div>
<span style="font-size:10px !important;font-weight:bold;color:#5c4d5c;background:#fff;border:1px solid #ffccd5;border-radius:8px;padding:1px 7px;">art & culture</span>
</a>

<a href="#f4" style="text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;">
<div style="width:46px;height:38px;">
<div style="width:20px;height:9px;margin:0;box-sizing:border-box;background:#87ceeb;border:1.5px solid #5c4d5c;border-bottom:none;border-radius:5px 5px 0 0;"></div>
<div style="width:46px;height:29px;margin:0;box-sizing:border-box;background:#87ceeb;border:1.5px solid #5c4d5c;border-radius:0 7px 7px 7px;box-shadow:2px 3px 0 #ffb3c6;"><div style="margin:3px 4px;height:5px;border-radius:3px;background:rgba(255,255,255,0.7);"></div></div>
</div>
<span style="font-size:10px !important;font-weight:bold;color:#5c4d5c;background:#fff;border:1px solid #ffccd5;border-radius:8px;padding:1px 7px;">random</span>
</a>

</div>

<div style="width:290px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;position:relative;z-index:3;">

<div style="width:100%;height:70px;background:#c7ceea;background-image:linear-gradient(135deg,#d4d9f5,#b7aee5);border-radius:16px;padding:10px 14px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 10px rgba(160,160,230,0.35);border:1.5px solid #b7aee5;">
<div style="display:flex;flex-direction:column;gap:6px;">
<span style="font-size:10px !important;font-weight:bold;color:#fff;text-shadow:0 1px 2px rgba(92,77,92,0.4);">battery</span>
<div style="width:110px;height:10px;background:#fff;border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,0.12);"><div style="width:85%;height:10px;background:#ff8fab;background-image:linear-gradient(90deg,#ffb3c6,#ff5c8a);border-radius:6px;"></div></div>
</div>
<div style="font-size:28px !important;font-weight:bold;color:#fff;letter-spacing:1px;line-height:1 !important;text-shadow:0 2px 4px rgba(92,77,92,0.35);">85% 🔋</div>
</div>

<div style="width:100%;height:230px;box-sizing:border-box;border-radius:16px;border:2px solid #ffb3c6;box-shadow:0 8px 25px rgba(255,150,180,0.3);background:#fff;overflow:hidden;position:relative;">
<div style="width:100%;height:226px;overflow:hidden;">

<a name="f0" id="f0" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:225px;box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;">
<div style="display:flex;gap:5px;align-items:center;flex-shrink:0;">
<a href="#f0" style="display:block;width:10px;height:10px;border-radius:50%;background:#ffb7b2;border:1px solid #f59a94;text-decoration:none;"></a>
<div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;border:1px solid #f2c29e;"></div>
<div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;border:1px solid #8fd6bb;"></div>
<span style="font-size:10px !important;font-weight:bold;color:#ff5c8a;margin-left:6px;">“notes.txt” ✨</span>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;font-size:11px !important;color:#5c4d5c;line-height:1.6 !important;text-align:justify;box-sizing:border-box;background:#fff8f9;border-radius:10px;padding:8px 10px;border:1px dashed #ffb3c6;">
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. curabitur pretium tincidunt lacus. nulla gravida orci a odio. nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. integer in mauris eu nibh euismod gravida. duis ac tellus et risus vulputate vehicula. donec lobortis risus a elit. etiam tempor.
</div>
</div>

<a name="f1" id="f1" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:225px;box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;">
<div style="display:flex;gap:5px;align-items:center;flex-shrink:0;">
<a href="#f0" style="display:block;width:10px;height:10px;border-radius:50%;background:#ffb7b2;border:1px solid #f59a94;text-decoration:none;"></a>
<div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;border:1px solid #f2c29e;"></div>
<div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;border:1px solid #8fd6bb;"></div>
<span style="font-size:10px !important;font-weight:bold;color:#ff5c8a;margin-left:6px;">“untitled_folder.txt” 📁</span>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;font-size:11px !important;color:#5c4d5c;line-height:1.6 !important;text-align:justify;box-sizing:border-box;background:#fff8f9;border-radius:10px;padding:8px 10px;border:1px dashed #ffb3c6;">
you clicked untitled folder! 🌸 this is your unique custom text box frame for folder one. you can write whatever your heart desires right here inside this window pane!
</div>
</div>

<a name="f2" id="f2" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:225px;box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;">
<div style="display:flex;gap:5px;align-items:center;flex-shrink:0;">
<a href="#f0" style="display:block;width:10px;height:10px;border-radius:50%;background:#ffb7b2;border:1px solid #f59a94;text-decoration:none;"></a>
<div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;border:1px solid #f2c29e;"></div>
<div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;border:1px solid #8fd6bb;"></div>
<span style="font-size:10px !important;font-weight:bold;color:#ff5c8a;margin-left:6px;">“my_notes.txt” 📝</span>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;font-size:11px !important;color:#5c4d5c;line-height:1.6 !important;text-align:justify;box-sizing:border-box;background:#fff8f9;border-radius:10px;padding:8px 10px;border:1px dashed #ffb3c6;">
you clicked my notes! 📝 here are your personal checklist items:
<br><br>
• drink more water 💧<br>
• listen to kali uchis on loop 🎧<br>
• update layout styling ✨
</div>
</div>

<a name="f3" id="f3" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:225px;box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;">
<div style="display:flex;gap:5px;align-items:center;flex-shrink:0;">
<a href="#f0" style="display:block;width:10px;height:10px;border-radius:50%;background:#ffb7b2;border:1px solid #f59a94;text-decoration:none;"></a>
<div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;border:1px solid #f2c29e;"></div>
<div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;border:1px solid #8fd6bb;"></div>
<span style="font-size:10px !important;font-weight:bold;color:#ff5c8a;margin-left:6px;">“art_and_culture.txt” 🎨</span>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;font-size:11px !important;color:#5c4d5c;line-height:1.6 !important;text-align:justify;box-sizing:border-box;background:#fff8f9;border-radius:10px;padding:8px 10px;border:1px dashed #ffb3c6;">
you clicked art & culture! 🎨
<br><br>
"art is not what you see, but what you make others see." — edgar degas.
<br><br>
this container holds inspirations, aesthetic references, and poetry snippets.
</div>
</div>

<a name="f4" id="f4" style="display:block;height:1px;overflow:hidden;font-size:1px !important;line-height:1px !important;text-decoration:none;color:#fff;"> </a>
<div style="height:225px;box-sizing:border-box;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fff;">
<div style="display:flex;gap:5px;align-items:center;flex-shrink:0;">
<a href="#f0" style="display:block;width:10px;height:10px;border-radius:50%;background:#ffb7b2;border:1px solid #f59a94;text-decoration:none;"></a>
<div style="width:10px;height:10px;border-radius:50%;background:#ffdac1;border:1px solid #f2c29e;"></div>
<div style="width:10px;height:10px;border-radius:50%;background:#b5ead7;border:1px solid #8fd6bb;"></div>
<span style="font-size:10px !important;font-weight:bold;color:#ff5c8a;margin-left:6px;">“random.txt” ☁️</span>
</div>
<div style="flex:1;min-height:0;overflow-y:auto;font-size:11px !important;color:#5c4d5c;line-height:1.6 !important;text-align:justify;box-sizing:border-box;background:#fff8f9;border-radius:10px;padding:8px 10px;border:1px dashed #ffb3c6;">
you clicked random! ☁️
<br><br>
404 sanity not found. just a collection of random thoughts, stray ideas, brain fog, and midnight musings floating around in the cyberspace ether. ✨💫
</div>
</div>

</div>
</div>

<div style="width:100%;height:84px;background:#ffdac1;background-image:linear-gradient(135deg,#ffe6d3,#ffcfb0);border-radius:16px;padding:10px 12px;box-sizing:border-box;display:flex;align-items:center;gap:10px;box-shadow:0 4px 10px rgba(255,190,150,0.35);border:1.5px solid #ffb3c6;">
<div style="width:56px;height:56px;flex-shrink:0;border-radius:10px;background:#ff8fab;background-image:linear-gradient(135deg,#ffb3c6,#c7ceea);border:2px solid #fff;box-shadow:0 2px 6px rgba(92,77,92,0.2);display:flex;align-items:center;justify-content:center;font-size:22px !important;color:#fff;">♫</div>
<div style="flex:1;display:flex;flex-direction:column;gap:5px;">
<div style="display:flex;justify-content:space-between;align-items:baseline;">
<span style="font-size:13px !important;font-weight:bold;color:#5c4d5c;">melting</span>
<span style="font-size:9px !important;color:#7a6d71;font-weight:bold;">por vida - kali uchis</span>
</div>
<div style="width:100%;height:5px;background:#fff;border-radius:3px;display:flex;align-items:center;">
<div style="width:35%;height:5px;background:#ff5c8a;border-radius:3px;"></div>
<div style="width:9px;height:9px;box-sizing:border-box;margin-left:-4px;border-radius:50%;background:#ff5c8a;border:1.5px solid #fff;"></div>
</div>
<div style="display:flex;justify-content:center;align-items:center;gap:18px;color:#5c4d5c;font-size:12px !important;font-weight:bold;">
<span>⏮</span>
<span style="background:#fff;border-radius:50%;width:20px;height:20px;line-height:20px !important;text-align:center;font-size:10px !important;">❚❚</span>
<span>⏭</span>
</div>
</div>
</div>

</div>
</div>
</div>
</lj-raw>