1 image

!!HEADER!!

!!subheader!!

🌿 Bullet list goes here
🌿 Only with themed emoji
🌿 Instead of bullets
🌿 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!

Click on the images for full-size versions.

🌧️ + ❤

<raw-code><div style="background:#ccc;display:flex;flex-wrap:wrap;gap:5px 10px;padding:10px;justify-content:center;box-sizing:border-box;font-size:10px;font-weight:bold;color:#fff;background:transparent;">
<div style="display:flex;flex:1 1 300px;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #4acb70;background:#fff;"><div style="display:grid;grid-template-rows:auto auto 1fr auto;width:100%;box-sizing:border-box;padding:10px;text-align:justify;color:#102651;"><div style="width:100%;box-sizing:border-box;background-color:#4acb70;color:#fff;padding:10px;">

<div style="width:100%;font-size: clamp(20px, 2vw, 25px);text-align:center;text-transform:uppercase;">!!HEADER!!</div>
<div style="width:100%;font-weight:lighter;text-align:center;text-transform:lowercase;">!!subheader!!</div>

</div><div style="display:flex;width:100%;"><div style="width:37.5%"></div><div style="width:25%;box-sizing:border-box;padding:10px;border-bottom:1px solid #4acb70;"></div><div style="width:37.5%"></div></div>
<div style="width:100%;box-sizing:border-box;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);">

</raw-code>🌿 Bullet list goes here
🌿 Only with themed emoji
🌿 Instead of bullets
🌿 Here's a line long enough to wrap! So as to demonstrate the flexibility of the layout. Be sure to also check the mobile view!<raw-code>

</div><div style="width:100%;box-sizing:border-box;background-color:#4acb70;color:#fff;padding:10px;font-weight:normal;font-size: clamp(10px, 1vw, 11px);align-self:end;">Click on the images for full-size versions.</div></div></div>

<div style="flex:1 0 390px;max-width:100%;padding:10px;box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;border:1px solid #4acb70;background:#fff;display:grid;grid-template-rows:500px;grid-template-columns:1fr;gap:10px;">

</div><div style="width:100%;box-sizing:border-box;text-align:right;font-size:10px;color:#102651"><a title="seasons specific code" href="https://raincoded.dreamwidth.org/595.html" style="text-decoration:none;">🌧️</a> + <a title="code credit!" href="https://10billionghosts.dreamwidth.org/53754.html" style="text-decoration:none;color:#fa0000;">❤</a></div></div></raw-code>

(19 comments)

1 image

Post a comment in response: