GLM 5.3

Create HTML/CSS-only weather cards. Icons built from divs and pseudo-elements. Four cards: sunny, rainy, snowy, stormy. Animations: rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning. Responsive grid, hover lift, prefers-reduced-motion.

Need rain drops and snowflakes from HTML elements — can add a few divs for drops/flakes inside the icon. No SVG, no images.

Let me design:

Sun: circle core with ::before/::after? Rays: a container div with 8 rays via pseudo-elements... Better: core circle (div.sun-core) plus ray container rotating, rays made from repeating child divs. I can use child divs for rays — 8 spans, each rotated. That's fine HTML.

Rain: cloud (div with ::before/::after bumps) plus drop spans animating translateY with staggered animation-delay.

Snow: cloud + snowflake dots drifting down with sway.

Storm: dark cloud + lightning bolt built from... a bolt shape via clip-path on a div, flashing with opacity keyframes.

Background gradients per card. Grid: repeat(auto-fit, minmax(240px,1fr)) — 4 per row desktop at 1280 (4 cards fit). Actually with fixed 4 cards, use grid-template-columns: repeat(4, 1fr) with media query to 1 column on mobile (or 2 at mid). Hover translateY lift.

Reduced motion: disable animations.

Keep it polished: nice typography, subtle details. Let me write the code.

Bolt via clip-path polygon: polygon(40% 0, 100% 0, 55% 45%, 85% 45%, 20% 100%, 45% 55%, 10% 55%) roughly. Let me craft: classic bolt: polygon(45% 0%, 100% 0%, 50% 50%, 90% 50%, 15% 100%, 40% 60%, 5% 60%). Good enough.

Sun rays: 8 spans each 6px tall bars positioned top center, transform rotate(i*45deg) translateY. Use nth-child to rotate. Also add pulse scale on core.

Rain drops: teardrop via border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%? Simpler: small rounded bar with border-radius 0 0 50% 50% — elongated drop. Animate translateY from cloud bottom down, fade.

Snowflakes: small white circles, translate down with horizontal sway (use two animations or single keyframe with translate both).

Card design: rounded cards, temperature big, city name, description. Maybe a "feels like" or hi/lo small detail. Add subtle animated background layers? Keep icons in an icon stage area.

Let me write.

CSS variables per card for accent colors.

Structure:

<section class="weather-grid">
  <article class="card card--sunny">
    <div class="icon icon--sun"> ... </div>
    <h2 class="city">...</h2>
    <p class="temp">...</p>
    <p class="desc">...</p>
    <div class="meta">...</div>
  </article>
  ...
</section>

Header with title.

Sun icon:
<div class="icon icon-sun">
  <div class="sun">
    <span class="ray"></span> ×8
  </div>
</div>
.sun { position relative, width/height 90px, core via ::before circle; rays positioned absolute at center, transform-origin bottom... } Each ray: position absolute, left 50%, top 0, width 6px, height 100%?? Simpler: ray is a child span: absolute, left calc(50% - 3px), top: 0, width 6, height 18, background, border-radius, transform-origin: center calc offset. Better: rays as full-height spans with a bar rendered via ::before at top? Hmm, each ray span: absolute inset 0? Alternative: ray span width 6px height 50% of container, top 0, left 50% - 3px, transform-origin: 3px 45px (center). Then rotate nth-child.

Container .sun: 90×90. Core: ::before circle 40px centered. Rays container: wrap all rays in .rays div that rotates slowly (spin). Each ray height 90px? Ray: position absolute; top:0; left:calc(50% - 3px); width:6px; height:90px; background transparent; ::before at top: bar 6×16 at top. Actually simpler: ray itself is 6px wide, 16px tall, positioned top:0 left calc(50% - 3px), transform-origin: 3px 45px. Then nth-child rotations 0,45,...315. The .rays wrapper spins 20s linear infinite. Rays could also pulse. Good.

Cloud shape: .cloud div width 80 height 26, border-radius 13px, background; ::before circle 34px at left top overlapping; ::after circle 26px right. Standard CSS cloud.

Cloud with ::before/::after needs background matching. Position: cloud base at bottom.

Rain drops: spans inside .icon-rain below cloud. .drop { width:5px; height:14px; border-radius: 0 0 6px 6px... } Actually classic: border-radius: 50% 50% 50% 50% / 30% 30% 70% 70% gives teardrop? Let me just use border-radius: 0 0 5px 5px with rounded top too: border-radius: 3px; simple bars look fine as rain streaks. Or teardrop: border-radius: 50% 50% 50% 50% / 25% 25% 75% 75%? A common CSS raindrop: border-radius: 0 50% 50% 50%; transform rotate(45deg) — that's a drop pointing up. Simplest attractive: rounded-bottom streaks. I'll use teardrops: width 8 height 8 background, border-radius 50% 50% 50% 50% / 60% 60% 40% 40%... Let me just do streak: width 4, height 16, border-radius 4px, with gradient fade. Fine.

Stagger delays via nth-child.

Snow: .flake spans, circles 8px, animate fall with sway using keyframes translate(0,0)→(4px,15px)→(-4px,30px)→... ends at translateY(40px), opacity fade.

Storm: dark cloud + bolt div with clip-path, flash animation opacity steps + maybe a flash overlay on card? Keep bolt flashing: keyframes flicker.

Backgrounds:
- sunny: linear-gradient warm amber/sky
- rainy: slate blue-gray
- snowy: pale ice blue
- stormy: dark indigo

Hover: translateY(-10px) + shadow, transition. Also maybe icon scales.

Reduced motion: @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important } }

Responsive: grid-template-columns: repeat(4, 1fr); @media max-width 1024: 2 cols; max-width 560: 1 col. At 1280 wide four cards of ~280px each — fine.

Also demo note? No JS required, it's static animation — always visible. Fine.

Add fonts: system stack. Add a small footer hint? Keep header: "Weather — Four Moods" etc.

Let me write full code.

Extra details: temperature with degree symbol, hi/lo. Small tag like "H:24° L:16°".

Card text colors: white-ish on darker cards; for snowy light card maybe dark text? Snowy gradient light icy — use dark navy text? Keep snowy background as medium blue-to-pale with white text with shadow. Let's do:

- sunny: #FFB25E → #FF8A5C? Actually gradient top to bottom: linear-gradient(160deg, #ffd194, #ff8a59)? Text dark? White text with dark shadow works on orange. Use #2b1a3a? Let's make text white on all but add slight shadow; snowy: gradient #a8c8f0 → #e8f4ff too light for white. Use gradient #7fa8d9 → #b8d8f0 white text okay-ish. Or give snowy darker text: #16324f. I'll give each card a --text and --sub variable.

Sunny text: #5b2a12? On warm amber, dark brown text reads nice. Hmm mixed text colors fine since each card defines vars.

Sunny: bg linear-gradient(165deg, #FFE29A 0%, #FFA85C 100%)? text #6b2d0e... Let's pick: text #4a2508, sub rgba(74,37,8,.65). Nice.

Rainy: bg linear-gradient(165deg, #4b6cb7, #2b3a67)? Actually rain mood: #5C7C9E → #2F4858. text white.

Snowy: bg linear-gradient(165deg, #BFE3FF, #7FB3E8)? text #14406b.

Stormy: bg linear-gradient(165deg, #3a3a5c, #17172b)? Dark indigo. text #e8e8f5.

Alright, write it.

Bolt clip-path: polygon(32% 0%, 78% 0%, 52% 38%, 82% 38%, 22% 100%, 42% 52%, 12% 52%) — check: starts top-left-ish, top-right, mid-right going down... Common bolt: polygon(40% 0, 100% 0, 45% 50%, 90% 50%, 10% 100%, 35% 55%, 5% 55%). I'll use that. Yellow gradient background on bolt.

Flash animation: 
@keyframes flash { 0%,55%,60%,100% {opacity:.25} 56%,58% {opacity:1} 70%{opacity:.9} 72%{opacity:.3} } — something irregular.

Also add a subtle glow behind bolt via filter drop-shadow.

Also maybe rain card cloud drips... fine.

Icon stage: height 110px, display flex center, margin-bottom.

Rain drops positioning: absolute inside icon relative to stage. Place drops at left offsets 25%,45%,65% etc, top ~ cloud bottom. Use absolute positioning with left: calc(...). I'll position via nth-child left values.

Icon container: position relative; width 140px; height 110px; margin auto.

Rain icon: cloud centered top. Drops: 5 drops.

Let me code.

.card:hover .icon maybe slight scale? Add.

Also add small "wind lines" on sunny? Skip.

Write final HTML.

Ensure no <script>. Include header with page title and subtitle.

Reduced motion also pauses spin etc.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Four Moods of Weather</title>
<style>
:root{--radius:22px}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Avenir Next','Segoe UI',system-ui,sans-serif;
  min-height:100vh;
  background:#0e1220 radial-gradient? Actually background: #12141f with subtle gradient;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 24px;
  background: radial-gradient(1200px 600px at 50% -10%, #232a44, #0d0f1a 70%);
}
header text-align center margin-bottom.
h1 letter-spacing etc color #f0ecf7.
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;width:100%;max-width:1200px}
media queries.

.card{border-radius; padding:34px 26px 30px; position:relative; overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.28); transition: transform .45s cubic-bezier(.2,.7,.3,1.2), box-shadow .45s; text-align:center? or left. Left-aligned with icon centered maybe. I'll center everything for cleanliness. Actually left-aligned looks designed. Let's do left: icon stage left-aligned too. Hmm centered icons simpler with absolute positioning? No, absolute positioning works regardless. I'll left-align content.

Hover: transform translateY(-12px); box-shadow bigger. Also a ::after highlight sheen? optional.

Text colors via vars:
.card{color:var(--ink)}
.city{font-size:1.15rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.temp{font-size:3.4rem;font-weight:700;line-height:1}
sup ° smaller.
.desc{font-size:.95rem;color:var(--sub);line-height:1.45}
.hilo{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

Icons.

.icon{position:relative;height:96px;margin-bottom:26px}

Sun:
.sun{position:absolute;left:8px;top:4px;width:88px;height:88px;animation:spin 18s linear infinite}
.sun::before core circle.
Actually core: .sun-core as ::before: content:'';position:absolute;inset:22px;background:radial-gradient(circle at 35% 35%, #fff2b0, #ffcf3f 55%, #ffb300);border-radius:50%;box-shadow:0 0 24px rgba(255,190,60,.75); animation: pulse 3.2s ease-in-out infinite.
.ray{position:absolute;top:0;left:calc(50% - 3px);width:6px;height:88px;transform-origin:50% 44px} — with rotate around center: origin should be center of 88 box: 44px. ray element height 88 but visible part only top bar via... hmm if height 88 and background full it'd be a line across. Instead: ray height 16px, top 0, transform-origin: 3px 44px (center). width 6, background gradient, border-radius 3px.
.ray:nth-child(1){transform:rotate(0deg)} ... 8 at 45deg steps. Also animation delay stagger? The whole .sun spins so no need.

Pulse core also scale slightly.

@keyframes spin{to{transform:rotate(360deg)}}

Cloud base class:
.cloud{position:absolute;width:84px;height:28px;border-radius:16px;top:14px;left:10px}
.cloud::before{content:'';position:absolute;width:36px;height:36px;border-radius:50%;left:12px;top:-18px}
.cloud::after{... width:28px;height:28px;left:46px;top:-12px}
Background set per card via variable --cloud.

Rain drops: 
.drop{position:absolute;top:52px;width:4px;height:15px;border-radius:4px;background:linear-gradient(#cfe8ff,#7fb8e8);animation:fall 1.1s linear infinite}
nth-child left/delay: 5 drops at left 16,36,56,76,96 px? Icon width ~140. cloud spans left 10 to 94. drops left: 18,38,58,78,98? width 140 okay. delays: 0,.22,.44,.1,.33.

@keyframes fall{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(38px);opacity:0}}

Snowflakes: .flake{position:absolute;top:50px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.9);animation:drift 3.2s ease-in-out infinite}
@keyframes drift{0%{transform:translate(0,0);opacity:0}12%{opacity:1}50%{transform:translate(5px,18px)}88%{opacity:1}100%{transform:translate(-4px,36px);opacity:0}}
nth-child lefts and delays.

Storm bolt:
.bolt{position:absolute;left:44px;top:46px;width:34px;height:52px;background:linear-gradient(#fff7ae,#ffd23c 45%,#ff9d2e);clip-path:polygon(38% 0,95% 0,48% 46%,92% 46%,8% 100%,40% 54%,5% 54%);animation:flash 2.6s infinite;filter:drop-shadow(0 0 10px rgba(255,214,92,.8))}
@keyframes flash{0%,42%,48%,56%,100%{opacity:.15}44%,46%{opacity:1}54%{opacity:.85}}

Check clip-path: polygon points (38%,0),(95%,0),(48%,46%),(92%,46%),(8%,100%),(40%,54%),(5%,54%). Sequence: top edge from 38 to 95; down-left to 48,46; right to 92,46; diagonal down-left to 8,100; up to 40,54; left to 5,54; back to 38,0? Closing back to first point (38,0) — the segment from (5,54) to (38,0) is the left slanted edge. Looks like a bolt. Good.

Also stormy rain? Add two drops maybe on storm too — yes add drops to storm card as well for interest. Sure, add 3 drops.

Cloud colors: rainy cloud #e6eef7 whiteish; storm cloud #3a3f5c darker with slightly lighter top? just #454b6e.

Icon container heights: storm bolt extends to ~98, height 100px fine. Set .icon height 108 maybe. Bolt top:46 +52=98. Fine.

Hi/Lo lines: --line rgba colors.

Also give cards decorative ::before radial glow? e.g., sunny card sun glow. Keep simple.

Media queries:
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

Reduced motion:
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .card:hover{transform:none}
}

Header: h1 "Weather, in Four Moods" + p subtitle.

Also maybe footer small note "Pure HTML + CSS — no JavaScript". Nice touch.

Write it all out.