Weekly Motivation Card
A sage poster card with a serif headline, flower mark and a tilted sunset photo with a Good day sticker.
Preview and code
index.html
<div class='dm'><h4>Your daily<br>motivation<br>for this Week</h4><svg class='f' width='46' height='46' viewBox='0 0 48 48' fill='none' stroke='#2d4a43' stroke-width='5'><circle cx='15' cy='15' r='8'/><circle cx='33' cy='15' r='8'/><circle cx='15' cy='33' r='8'/><circle cx='33' cy='33' r='8'/></svg><div class='pl'><i></i></div><span class='st'>GOOD DAY!</span></div>
styles.css
.dm{position:relative;width:min(340px,92%);height:430px;margin:auto;padding:22px;background:#f1f1e6;font-family:Georgia,serif;color:#2d4a43;overflow:hidden;border-radius:6px}.dm h4{margin:0;font-size:26px;line-height:1.08;font-weight:400;letter-spacing:-.02em}.dm .f{position:absolute;right:24px;top:24px}.pl{position:absolute;right:-12px;bottom:34px;width:58%;height:60%;padding:8px 8px 34px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);transform:rotate(8deg)}.pl i{display:block;width:100%;height:100%;background:linear-gradient(#8f7fb0 0,#d9857a 40%,#f19a52 62%,#3f5b2c 63%,#2d4025 100%)}.st{position:absolute;left:26%;bottom:34px;padding:9px 16px;background:#ddd5f4;border:3px solid #8b7bc7;border-radius:999px;font:700 11px Inter,Arial,sans-serif;letter-spacing:.04em;transform:rotate(-5deg)}
About
A portrait poster: elegant serif title, flower glyph, and a rotated polaroid-style photo built from a CSS sunset gradient, topped with a lavender pill sticker.