Models 44
Claude Haiku 4.5AnthropicClaude Haiku 5.5AnthropicClaude Opus 5.5AnthropicClaude Sonnet 5.5AnthropicNorth Mini Code (free)CohereDeepSeek V4 Flash 0423DeepSeekDeepSeek V4 Pro 0813DeepSeekDeepSeek V4.1 Flash 1017DeepSeekDots3-Note Preview (free)Dots StudioGemini 3.1 Flash LiteGoogleGemini 3.8 FlashGoogleGemini 4 ArgonGoogleGemini 4 HydrogenGoogleGemma 4 31BGoogleLFM2.5-2.6B (free)LiquidAILFM3-1.7B (free)LiquidAIMuse EmberMetaMiniMax M3MiniMaxMiniMax M3.1 FlashMiniMaxMinistral 3 14B 2512MistralMistral Large 4MistralMistral Small 4MistralKimi K3.1 ProMoonshotAINemotron 3 Nano Omni (free)NVIDIANemotron 3 SuperNVIDIANemotron 3 Ultra (free)NVIDIANemotron 3.5 Lightning (free)NVIDIANemotron 3.5 Super VL (free)NVIDIAGPT-5 NanoOpenAIGPT-6 LunaOpenAIGPT-6 Luna ProOpenAIGPT-6.1 SolOpenAIGPT-6.1 TerraOpenAIgpt-oss-120bOpenAIQwen3 Coder NextQwenQwen3.8 FlashQwenQwen3.8 Max (0902)QwenFlint (free)RecursiveGrok 4.7SpaceXAIMiMo-V2.6-FlashXiaomiMiMo-V2.6-ProXiaomiXing4.0 29B A4B (free)XingChenGLM 5.3Z.aiGLM 5.3 FlashZ.ai
Animated weather cards

Nemotron 3 Super

by NVIDIAreasoning defaultClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
1 min 48 s
Cost
$0.0047
Output tokens
10,402
Spent thinking
7,615 tokens
Speed
96.5 tok/s
Console errors
0
First token after
537 ms
First visible text after
1 min 25 s
Prompt tokens
524
Code size
6.0 KB
Finish reason
stop
Served by
DekaLLM
Model id
nvidia/nemotron-3-super-120b-a12b
Reasoning sent
model default
Max output
16,384 tokens
Generated
Nov 13, 2026

What it was asked

The prompt
Create a set of four animated weather cards (sunny, rainy, snowy, stormy), made with HTML and CSS only. Requirements: - Absolutely no JavaScript: the file must not contain any <script> tag or inline event handler. - No images, no SVG, no icon fonts: every weather icon is built from HTML elements and pseudo-elements styled with CSS. - Each card shows an animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), a city name, a temperature and a short description. - Each card has its own background gradient matching the weather. - The cards are displayed in a responsive grid (4 per row on desktop, stacked on mobile) and lift up on hover. - Smooth infinite animations using @keyframes, and respect prefers-reduced-motion.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 206 lines

Download
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f5f5;
display:flex;
justify-content:center;
align-items:flex-start;
min-height:100vh;
padding:20px;
}
.cards{
display:grid;
gap:20px;
width:100%;
max-width:1200px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
position:relative;
border-radius:12px;
overflow:hidden;
color:#fff;
text-align:center;
padding:20px;
transition:transform .3s ease;
}
.card:hover{
transform:translateY(-10px);
}
.card .info{
margin-top:15px;
}
.card .city{font-size:1.5rem;font-weight:600;margin-bottom:5px;}
.card .temp{font-size:2rem;font-weight:bold;margin-bottom:5px;}
.card .desc{font-size:1rem;opacity:0.9;}
/* Gradients */
.card.sunny{background:linear-gradient(135deg,#ffeb3b,#ff9800);}
.card.rainy{background:linear-gradient(135deg,#64b5f6,#42a5f5);}
.card.snowy{background:linear-gradient(135deg,#e0e0e0,#b0bec5);}
.card.stormy{background:linear-gradient(135deg,#424242,#212121);}
.icon{
position:relative;
width:100%;
height:100px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
margin-bottom:10px;
}
/* Sunny */
.sunny .icon .sun{
position:absolute;
left:50%;top:50%;
width:50px;height:50px;
margin-left:-25px;margin-top:-25px;
background:#ffeb3b;
border-radius:50%;
}
.sunny .icon .ray{
position:absolute;
left:50%;top:50%;
width:4px;height:20px;
margin-left:-2px;margin-top:-20px;
background:#ffeb3b;
transform-origin:bottom center;
}
.sunny .icon .ray:nth-child(1){transform:rotate(0deg);}
.sunny .icon .ray:nth-child(2){transform:rotate(30deg);}
.sunny .icon .ray:nth-child(3){transform:rotate(60deg);}
.sunny .icon .ray:nth-child(4){transform:rotate(90deg);}
.sunny .icon .ray:nth-child(5){transform:rotate(120deg);}
.sunny .icon .ray:nth-child(6){transform:rotate(150deg);}
.sunny .icon .ray:nth-child(7){transform:rotate(180deg);}
.sunny .icon .ray:nth-child(8){transform:rotate(210deg);}
.sunny .icon .ray:nth-child(9){transform:rotate(240deg);}
.sunny .icon .ray:nth-child(10){transform:rotate(270deg);}
.sunny .icon .ray:nth-child(11){transform:rotate(300deg);}
.sunny .icon .ray:nth-child(12){transform:rotate(330deg);}
@keyframes spin{to{transform:rotate(360deg);}}
.sunny .icon{animation:spin 20s linear infinite;}
/* Rainy */
.rainy .icon .drop{
position:absolute;
width:4px;height:12px;
background:#42a5f5;
border-radius:2px;
left:50%;margin-left:-2px;
top:-10px;
animation:fall 3s linear infinite;
}
@keyframes fall{
to{transform:translateY(110vh);}
}
.rainy .icon .drop:nth-child(1){left:0%;animation-delay:0s;}
.rainy .icon .drop:nth-child(2){left:12.5%;animation-delay:0.2s;}
.rainy .icon .drop:nth-child(3){left:25%;animation-delay:0.4s;}
.rainy .icon .drop:nth-child(4){left:37.5%;animation-delay:0.6s;}
.rainy .icon .drop:nth-child(5){left:50%;animation-delay:0.8s;}
.rainy .icon .drop:nth-child(6){left:62.5%;animation-delay:1.0s;}
.rainy .icon .drop:nth-child(7){left:75%;animation-delay:1.2s;}
.rainy .icon .drop:nth-child(8){left:87.5%;animation-delay:1.4s}
/* Snowy */
.snowy .icon .flake{
position:absolute;
width:8px;height:8px;
background:#fff;
border-radius:50%;
opacity:0.8;
animation:fall 6s linear infinite, sway 3s ease-in-out infinite alternate;
}
@keyframes fall{
to{transform:translateY(110vh);}
}
@keyframes sway{
to{transform:translateX(20px);}
}
.snowy .icon .flake:nth-child(1){left:0%;animation-delay:0s;}
.snowy .icon .flake:nth-child(2){left:12.5%;animation-delay:0.5s;}
.snowy .icon .flake:nth-child(3){left:25%;animation-delay:1s;}
.snowy .icon .flake:nth-child(4){left:37.5%;animation-delay:1.5s;}
.snowy .icon .flake:nth-child(5){left:50%;animation-delay:2s;}
.snowy .icon .flake:nth-child(6){left:62.5%;animation-delay:2.5s;}
.snowy .icon .flake:nth-child(7){left:75%;animation-delay:3s;}
.snowy .icon .flake:nth-child(8){left:87.5%;animation-delay:3.5s}
/* Stormy */
.stormy .icon{
width:60px;height:80px;
background:#ffeb3b;
clip-path:polygon(50% 0%, 60% 35%, 90% 35%, 40% 70%, 90% 100%, 50% 70%, 40% 100%, 10% 65%, 40% 65%, 0% 35%, 30% 35%);
}
@keyframes flash{
0%,50%{opacity:.2;}
51%,100%{opacity:1;}
}
.stormy .icon{animation:flash 1.5s ease-in-out infinite;}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation:none !important;
transition:none !important;
}
}
</style>
</head>
<body>
<div class="cards">
  <div class="card sunny">
    <div class="icon">
      <div class="sun"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
    </div>
    <div class="info">
      <div class="city">Phoenix</div>
      <div class="temp">34°C</div>
      <div class="desc">Clear skies</div>
    </div>
  </div>

  <div class="card rainy">
    <div class="icon">
      <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
      <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
    </div>
    <div class="info">
      <div class="city">London</div>
      <div class="temp">15°C</div>
      <div class="desc">Light rain</div>
    </div>
  </div>

  <div class="card snowy">
    <div class="icon">
      <div class="flake"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div>
      <div class="flake"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div>
    </div>
    <div class="info">
      <div class="city">Oslo</div>
      <div class="temp">-5°C</div>
      <div class="desc">Snowfall</div>
    </div>
  </div>

  <div class="card stormy">
    <div class="icon"></div>
    <div class="info">
      <div class="city">Miami</div>
      <div class="temp">28°C</div>
      <div class="desc">Thunderstorm</div>
    </div>
  </div>
</div>
</body>
</html>
Reasoning trace (7,615 tokens)
We need to produce HTML with CSS only, no script. Four cards: sunny, rainy, snowy, stormy. Each card: animated icon (rotating sun rays, falling rain drops, drifting snowflakes, flashing lightning), city name, temperature, description. Cards displayed in responsive grid: 4 per row on desktop, stacked on mobile. On hover: lift up (translateY). Use smooth infinite animations via @keyframes; respect prefers-reduced-motion: if user prefers reduced motion, then disable animation (set animation:none). No JS, so we can use CSS media query @media (prefers-reduced-motion: reduce) { * { animation:none !important; } }.

No images, SVG, icon fonts: icons built from HTML elements and pseudo-elements.

We need to embed everything in a single HTML file: <html> <head> <style> ... </style> </head> <body> ... </body> </html>.

We'll need to create card containers: <div class="card sunny"> ... </div> etc. Each card: .icon container for animation, .info with city name, temperature, description.

We must avoid horizontal scrollbar: max-width? Ensure grid container width 100% and maybe use gap. Use display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); This will give as many columns as fit based on min width. At desktop width >= 1000px we get 4 columns (since each min width 250px, 4*250=1000). That works.

Lift on hover: .card:hover { transform: translateY(-10px); transition: transform .3s ease; }.

Now animations:

Sunny: a sun circle with rotating rays. Could make .sun with circle and .ray elements using pseudo or children; we can use a .sun .ray using ::before for each ray? Simpler: use multiple .ray elements inside .sun. Use CSS to rotate them via animation on the .sun container? Or each ray rotates individually. Simpler: animate the .sun container rotate (makes rays rotate). For rays: we can use .sun::before for the circle and .sun .ray for lines.

But we need to ensure animation respects reduced motion.

Rainy: falling rain drops: we can have .rain container with multiple .drop elements animated downwards with varying delays.

Snowy: drifting snowflakes: similar.

Stormy: flashing lightning: maybe a bolt shape using pseudo elements; animation toggles opacity or brightness.

We must not use images; we can create bolt using two skewed rectangles.

Simplify: For each card, we can just have a simple animated icon using CSS.

Let's design:

.sunny .icon:
- width: 80px; height: 80px; position: relative; margin-bottom: 10px;
- .sun: circle: width: 40px; height: 40px; background: #ffeb3b; border-radius: 50%; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);
- .ray: 8 rays: we can create via ::before and ::after of .sun? Might be easier to have separate .ray elements: .sunny .icon .ray { position: absolute; width: 4px; height: 20px; background: #ffeb3b; left:50%; top:0; transform-origin: bottom center; } then rotate each ray via nth-child.

Simpler: Use CSS to animate rotation of .sunny .icon: @keyframes spin { to { transform: rotate(360deg); } } .sunny .icon { animation: spin 12s linear infinite; } Then we can have static rays drawn as part of .sun using pseudo elements rotated via transform: maybe we can have the .sun itself with border and box-shadow to emulate rays.

Alternative: Use multiple .ray with rotation using nth-child.

We'll implement .sunny .icon .ray: we will generate 12 rays using HTML? Could embed 12 <div class="ray"></div> inside .icon. That's okay.

But we need to avoid too many elements? It's fine.

We'll produce HTML for each card: .card.sunny contains <div class="icon"><div class="sun"></div><div class="ray"></div>... repeated 12 times</div>. Then city, temp, desc.

Similarly for rainy: .rain .drop elements.

Snowy: .snow .flake.

Stormy: .storm .bolt.

We can use CSS to animate drops: keyframes fall { 0% { transform: translateY(-10px) opacity 0; } 100% { transform: translateY(100px) opacity 1; } } with varying animation-delay.

But we need infinite falling: maybe use animation: fall 2s linear infinite; with each drop having different delay and duration.

Snowflakes: similar with drift sideways and rotate.

Lightning: flash: keyframes flash { 0%, 50% { opacity: .2; } 51%, 100% { opacity: 1; } } or use scale.

We'll also need to respect prefers-reduced-motion: inside @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }.

Now layout: body { display:flex; justify-content:center; padding:20px; } .cards { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); width:100%; max-width:1200px; }. .card { background: ... gradient; border-radius:12px; padding:20px; color:#fff; text-align:center; box-shadow:0 4px 6px rgba(0,0,0,0.1); transition:transform .3s ease; } .card:hover { transform:translateY(-10px); } .icon { font-size:0; margin-bottom:15px; } .temp { font-size:2rem; margin:10px 0; } .city { font-size:1.5rem; font-weight:600; } .desc { font-size:1rem; opacity:0.9; }.

Gradients: sunny: linear-gradient(135deg, #ffeb3b, #ff9800); rainy: linear-gradient(135deg, #64b5f6, #42a5f5); snowy: linear-gradient(135deg, #e0e0e0, #b0bec5); stormy: linear-gradient(135deg, #424242, #212121).

Now icons colors: sunny: sun yellow #ffeb3b; rays same. Rainy: drops blue #42a5f5. Snowy: flakes white. Stormy: bolt yellow #ffeb3b.

Now implement animations.

Sunny: We'll have .sunny .icon .sun { width:50px; height:50px; background:#ffeb3b; border-radius:50%; position:relative; } and rays: .sunny .icon .ray { position:absolute; width:4px; height:20px; background:#ffeb3b; left:50%; top:0; transform-origin:bottom center; } Then each ray rotated via nth-child: .sunny .icon .ray:nth-child(1) { transform:rotate(0deg); } ... up to 11*30? Actually 12 rays each 30 deg.

We then animate the whole .sunny .icon rotate: @keyframes spin { to { transform:rotate(360deg); } } .sunny .icon { animation:spin 20s linear infinite; } This will cause rays to rotate as well.

Now rainy: We'll create .rainy .icon .drop { width:4px; height:12px; background:#42a5f5; border-radius:2px; position:absolute; left:50%; margin-left:-2px; top:-10px; animation:fall 3s linear infinite; } Use nth-child for different left positions and animation-delay.

But we need the drops to start from random positions across width. We'll use left:calc(var(--i)*8%); but we need to set custom property via style? Not allowed inline style? Could use nth-child to set left and delay.

Simplify: create 8 drops; use nth-child to set left: 0%, 14%, 28%, 42%, 56%, 70%, 84%, 98% maybe.

We'll use .rainy .icon .drop:nth-child(odd) { left:10%; } etc. This is tedious but doable.

Alternatively we can use .rainy .icon { position:relative; overflow:hidden; } and then use pseudo-element ::before and ::after with multiple backgrounds? That's complex.

Better: Use multiple .drop elements with nth-child.

We'll generate 8 drops in HTML: <div class="drop"></div> repeated 8 times.

Then in CSS: .rainy .icon .drop { position:absolute; width:4px; height:12px; background:#42a5f5; border-radius:2px; left:50%; margin-left:-2px; top:-10px; animation:fall 3s linear infinite; } Then for each child we override left and animation-delay.

We'll need to set left via calc maybe using nth-child formula: left:calc((var(--n) * 12.5%) ). But we cannot set variable via HTML. However we can use nth-child to set left: for nth-child(1) left:0%; nth-child(2) left:14.285%; etc. But we have 8 drops, we can approximate.

Simpler: Use left:0%; left:12.5%; left:25%; etc. We'll compute.

If we have 8 drops: indices 1-8. left = (i-1)*12.5% . So:

nth-child(1): left:0%
nth-child(2): left:12.5%
nth-child(3): left:25%
nth-child(4): left:37.5%
nth-child(5): left:50%
nth-child(6): left:62.5%
nth-child(7): left:75%
nth-child(8): left:87.5%

But we also need margin-left:-2px to center.

Now animation-delay: we can stagger: animation-delay:calc((var(--i)-1)*0.4s). Not possible without variable. We'll assign per nth-child: nth-child(1):0s; nth-child(2):0.2s; nth-child(3):0.4s; ... up to nth-child(8):1.4s.

We'll write CSS for each.

Snowy: Similar with snowflakes: use .flake elements with size maybe 8px, border-radius:50%; background:#fff; animation: drift 6s linear infinite; plus rotate? We'll do simple fall with sideways sway.

We'll create keyframes drift: 0% { transform:translateY(-10px) rotate(0deg); } 100% { transform:translateY(110vh) rotate(360deg); } plus some horizontal movement: maybe add translateX(sin) but we can approximate with left/right using animation.

Simplify: use transform: translateY(110vh) translateX(var(--dx)) rotate(360deg); we can't set var.

Alternative: Use two animations: fall and sway.

We'll create .flake { position:absolute; width:8px; height:8px; background:#fff; border-radius:50%; opacity:0.8; animation:fall 6s linear infinite, sway 3s ease-in-out infinite alternate; } where fall moves down, sway moves side.

Define @keyframes fall { to { transform:translateY(110vh); } } @keyframes sway { to { transform:translateX(20px); } } but we need also initial position maybe left.

We'll set left via nth-child similar to rain.

Stormy: Lightning bolt: we can create using two skewed rectangles forming a bolt shape. Simpler: use a single element with ::before and ::after to make a zigzag. Or use CSS border trick: width:0; height:0; border-left: solid transparent; border-right: solid transparent; border-top: solid yellow; Not bolt.

Better: Use a simple flash: just a yellow rectangle that flashes opacity. Represent lightning as a simple bolt shape using two rectangles overlapped: a vertical thick rectangle and a diagonal. Might be overkill.

Simplify: Use a simple flash: .stormy .icon { width:60px; height:80px; background:yellow; clip-path: polygon(50% 0%, 60% 35%, 90% 35%, 40% 70%, 90% 100%, 50% 70%, 40% 100%, 10% 65%, 40% 65%, 0% 35%, 30% 35%); } This is a bolt shape using clip-path. Then animate opacity or scale.

Define @keyframes flash { 0%,50% { opacity:.2; } 51%,100% { opacity:1; } } .stormy .icon { animation:flash 1.5s ease-in-out infinite; }.

Now we need to ensure that the clip-path shape is visible: we need width and height.

Now implement gradient backgrounds: For each card, we set class like .sunny, .rainy, .snowy, .stormy and define background via .card.sunny { background: linear-gradient(135deg, #ffeb3b, #ff9800); } etc.

Now we need to respect prefers-reduced-motion: use @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }.

Now ensure no script.

Now produce final HTML.

Will include <meta name="viewport" content="width=device-width, initial-scale=1">.

Now test for horizontal scroll: grid container width 100%; max-width maybe 1200px; margin auto; ensure no overflow.

Now code.

Let's craft HTML:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
font-family:Arial,Helvetica,sans-serif;
background:#f5f5f5;
display:flex;
justify-content:center;
align-items:flex-start;
min-height:100vh;
padding:20px;
}
.cards{
display:grid;
gap:20px;
width:100%;
max-width:1200px;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
position:relative;
border-radius:12px;
overflow:hidden;
color:#fff;
text-align:center;
padding:20px;
transition:transform .3s ease;
}
.card:hover{
transform:translateY(-10px);
}
.card .info{
margin-top:15px;
}
.card .city{font-size:1.5rem;font-weight:600;margin-bottom:5px;}
.card .temp{font-size:2rem;font-weight:bold;margin-bottom:5px;}
.card .desc{font-size:1rem;opacity:0.9;}
/* Gradients */
.card.sunny{background:linear-gradient(135deg,#ffeb3b,#ff9800);}
.card.rainy{background:linear-gradient(135deg,#64b5f6,#42a5f5);}
.card.snowy{background:linear-gradient(135deg,#e0e0e0,#b0bec5);}
.card.stormy{background:linear-gradient(135deg,#424242,#212121);}
.icon{
position:relative;
width:100%;
height:80px;
margin-bottom:10px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
/* Sunny */
.sunny .icon .sun{
width:50px;height:50px;
background:#ffeb3b;
border-radius:50%;
position:relative;
}
.sunny .icon .ray{
position:absolute;
width:4px;height:20px;
background:#ffeb3b;
left:50%;top:0;
transform-origin:bottom center;
}
.sunny .icon .ray:nth-child(1){transform:rotate(0deg);}
.sunny .icon .ray:nth-child(2){transform:rotate(30deg);}
.sunny .icon .ray:nth-child(3){transform:rotate(60deg);}
.sunny .icon .ray:nth-child(4){transform:rotate(90deg);}
.sunny .icon .ray:nth-child(5){transform:rotate(120deg);}
.sunny .icon .ray:nth-child(6){transform:rotate(150deg);}
.sunny .icon .ray:nth-child(7){transform:rotate(180deg);}
.sunny .icon .ray:nth-child(8){transform:rotate(210deg);}
.sunny .icon .ray:nth-child(9){transform:rotate(240deg);}
.sunny .icon .ray:nth-child(10){transform:rotate(270deg);}
.sunny .icon .ray:nth-child(11){transform:rotate(300deg);}
.sunny .icon .ray:nth-child(12){transform:rotate(330deg);}
@keyframes spin{to{transform:rotate(360deg);}}
.sunny .icon{animation:spin 20s linear infinite;}
/* Rainy */
.rainy .icon .drop{
position:absolute;
width:4px;height:12px;
background:#42a5f5;
border-radius:2px;
left:50%;margin-left:-2px;
top:-10px;
animation:fall 3s linear infinite;
}
@keyframes fall{
to{transform:translateY(110vh);}
}
.rainy .icon .drop:nth-child(1){left:0%;animation-delay:0s;}
.rainy .icon .drop:nth-child(2){left:12.5%;animation-delay:0.2s;}
.rainy .icon .drop:nth-child(3){left:25%;animation-delay:0.4s;}
.rainy .icon .drop:nth-child(4){left:37.5%;animation-delay:0.6s;}
.rainy .icon .drop:nth-child(5){left:50%;animation-delay:0.8s;}
.rainy .icon .drop:nth-child(6){left:62.5%;animation-delay:1.0s;}
.rainy .icon .drop:nth-child(7){left:75%;animation-delay:1.2s;}
.rainy .icon .drop:nth-child(8){left:87.5%;animation-delay:1.4s}
/* Snowy */
.snowy .icon .flake{
position:absolute;
width:8px;height:8px;
background:#fff;
border-radius:50%;
opacity:0.8;
animation:fall 6s linear infinite, sway 3s ease-in-out infinite alternate;
}
@keyframes fall{
to{transform:translateY(110vh);}
}
@keyframes sway{
to{transform:translateX(20px);}
}
.snowy .icon .flake:nth-child(1){left:0%;animation-delay:0s;}
.snowy .icon .flake:nth-child(2){left:12.5%;animation-delay:0.5s;}
.snowy .icon .flake:nth-child(3){left:25%;animation-delay:1s;}
.snowy .icon .flake:nth-child(4){left:37.5%;animation-delay:1.5s;}
.snowy .icon .flake:nth-child(5){left:50%;animation-delay:2s;}
.snowy .icon .flake:nth-child(6){left:62.5%;animation-delay:2.5s;}
.snowy .icon .flake:nth-child(7){left:75%;animation-delay:3s;}
.snowy .icon .flake:nth-child(8){left:87.5%;animation-delay:3.5s}
/* Stormy */
.stormy .icon{
width:60px;height:80px;
background:#ffeb3b;
clip-path:polygon(50% 0%, 60% 35%, 90% 35%, 40% 70%, 90% 100%, 50% 70%, 40% 100%, 10% 65%, 40% 65%, 0% 35%, 30% 35%);
position:relative;
}
@keyframes flash{
0%,50%{opacity:.2;}
51%,100%{opacity:1;}
}
.stormy .icon{animation:flash 1.5s ease-in-out infinite;}
/* Reduced motion */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation:none !important;
transition:none !important;
}
}
</style>
</head>
<body>
<div class="cards">
  <div class="card sunny">
    <div class="icon">
      <div class="sun"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
      <div class="ray"></div><div class="ray"></div><div class="ray"></div><div class="ray"></div>
    </div>
    <div class="info">
      <div class="city">Phoenix</div>
      <div class="temp">34°C</div>
      <div class="desc">Clear skies</div>
    </div>
  </div>

  <div class="card rainy">
    <div class="icon">
      <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
      <div class="drop"></div><div class="drop"></div><div class="drop"></div><div class="drop"></div>
    </div>
    <div class="info">
      <div class="city">London</div>
      <div class="temp">15°C</div>
      <div class="desc">Light rain</div>
    </div>
  </div>

  <div class="card snowy">
    <div class="icon">
      <div class="flake"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div>
      <div class="flake"></div><div class="flake"></div><div class="flake"></div><div class="flake"></div>
    </div>
    <div class="info">
      <div class="city">Oslo</div>
      <div class="temp">-5°C</div>
      <div class="desc">Snowfall</div>
    </div>
  </div>

  <div class="card stormy">
    <div class="icon"></div>
    <div class="info">
      <div class="city">Miami</div>
      <div class="temp">28°C</div>
      <div class="desc">Thunderstorm</div>
    </div>
  </div>
</div>
</body>
</html>
```

Check for any script: none. No inline event handlers. No images, SVG, icon fonts. All icons built via HTML elements.

Check responsiveness: grid with minmax(250px,1fr) ensures at desktop width >1000px we get 4 columns (since each at least 250). At smaller width it reduces.

Hover lift: transform:translateY(-10px) on .card:hover.

Now ensure that the .sunny .icon .sun and .ray are visible; we set .sun width 50px height 50px; .ray width 4px height 20px; positioned at top:0 left:50% with transform-origin bottom center; The .sun is positioned relative but we need to position it within .icon. Currently .sun is not positioned; we need to set position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); else it will be at top-left. Let's adjust.

Also .sunny .icon .ray need to be positioned absolute relative to .icon; they currently have left:50%; top:0; but .icon has position:relative; .sun currently not positioned. Let's fix.

Add to .sunny .icon .sun { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }.

Alternatively we can keep .sun at center using margin auto: but easier to set absolute.

Thus adjust CSS.

Also need to ensure .sunny .icon has position:relative (it does via .icon). Good.

Now we need to ensure .rainy .icon .drop etc: .icon is relative; .drop absolute left:50% etc.

But note we set left:0% etc, plus margin-left:-2px; that will shift left half width; but we also have left:0% meaning left edge of icon; we want drop to start at that left position; we used margin-left:-2px to center the drop horizontally at that left position? Actually we want drop's center at that left percentage; we set left: X%; margin-left:-2px (half width) to center the drop at that X% point. This is okay.

But we also set top:-10px; then animation fall moves to translateY(110vh). This will move from -10px to bottom +? Actually we need to set transform: translateY(0) initially? We set top:-10px; then animation: fall { to { transform:translateY(110vh); } } Starting from translateY(0) (since no transform). But we also have top:-10px which is separate; we might want to set top:-10px and let animation move from that position downwards. The transform will be added on top of top? Actually transform is applied after layout; top:-10px positions the element; then transform:translateY(110vh) moves it down relative to its current position. So final position will be top:-10px + translateY(110vh) = roughly bottom. That's fine.

But we might want to start at top:-10px and end at bottom+10px; okay.

Now .snowy .icon .flake similar.

Now .stormy .icon we set width and height and clip-path; no animation besides flash opacity.

Now ensure the .icon for stormy has no inner elements; it's fine.

Now test mental.

Potential issue: .sunny .icon .sun and .rays: we set .sun width/height 50px, .ray width 4px height 20px; but .sun is at center; the rays extend from center outward due to transform-origin bottom center and top:0 left:50%; This will place ray's bottom center at the center of the icon? Actually .ray's origin is its bottom center; we set left:50%; top:0; So the top left corner of the ray is at 50% left, 0 top; then transform-origin bottom center means the rotation point is at the bottom middle of the ray (which is at x=50% left, y=height). Since top is 0, bottom is at height (20px). So the ray extends upward from its bottom center (which is at the point we set left:50%, top:0? Actually the bottom center of the ray is at (left + width/2, top + height). Since left is 50% of parent width, top is 0, width is 4px, height 20px. So bottom center x = left + 2px, y = 20px. That's not exactly at center of icon; but we wanted rays emanating from center of sun. To simplify, we could set .ray position absolute; left:50%; top:50%; width:4px; height:20px; margin-left:-2px; margin-top:-20px; transform-origin:bottom center; This would place the bottom center at the center of icon (since top 50% moves down half parent height, then margin-top:-20px moves it up half its height, making its bottom center at the center). Let's do that for simplicity.

Thus adjust .sunny .icon .ray: position:absolute; left:50%; top:50%; width:4px; height:20px; margin-left:-2px; margin-top:-20px; background:#ffeb3b; transform-origin:bottom center; animation? Not needed; they rotate with .icon via spin.

And .sun: position:absolute; left:50%; top:50%; width:50px; height:50px; margin-left:-25px; margin-top:-25px; background:#ffeb3b; border-radius:50%;

Now adjust CSS accordingly.

Let's rewrite .sunny part:

.sunny .icon{
 position:relative;
}
.sunny .icon .sun{
 position:absolute;
 left:50%; top:50%;
 width:50px;height:50px;
 margin-left:-25px;margin-top:-25px;
 background:#ffeb3b;
 border-radius:50%;
}
.sunny .icon .ray{
 position:absolute;
 left:50%; top:50%;
 width:4px;height:20px;
 margin-left:-2px;margin-top:-20px;
 background:#ffeb3b;
 transform-origin:bottom center;
}
... then each ray's rotation as before.

Now .icon height maybe 100px to accommodate rays; we set .icon height:100px maybe. We'll set .icon height:100px; width:100%; Actually we set .icon height:100px to give space. But we can keep .icon height:100px (or 120px). Let's set .icon height:100px; width:100%; display:flex? Not needed; we removed flex. We'll keep .icon as container with position:relative; height:100px; width:100%; margin-bottom:10px; . Then the sun and rays positioned absolutely.

Thus adjust .icon style: height:100px; (or maybe 120). We'll keep 100px.

Now adjust .sunny .icon .sun width/height 50px, margins -25 each.

Now .sunny .icon .ray width 4px height 20px; margin-left -2px; margin-top -20px.

Now other .icon classes (rainy, snowy, stormy) may need height as well; but they currently have .icon with default height from content (drops etc). They have position:relative; width:100%; height:80px; we set earlier .icon { height:80px; }. We'll keep that but adjust if needed.

Let's define .icon { position:relative; width:100%; height:100px; display:flex; align-items:center; justify-content:center; overflow:hidden; } But we removed flex for sunny; we can keep flex but then absolutely positioned children may break flex layout? Actually flex container still allows absolute positioned children; they are positioned relative to the container. That's fine.

But we used .icon height:100px; we can keep flex to center content if needed; but we have absolute positioned children for sun/rays; they will be positioned irrespective of flex. The flex may affect other children (none). It's okay.

Thus we set .icon { position:relative; width:100%; height:100px; display:flex; align-items:center; justify-content:center; overflow:hidden; } This will also cause .sunny .icon's children to be positioned absolutely; they will ignore flex.

But for rainy etc we have .drop elements absolute; they will also ignore flex; but we also have .icon with flex; no problem.

Now we need to adjust .icon height maybe 120px for larger icons; but okay.

Now ensure .sunny .icon .sun and .ray are visible; .sun at center; rays rotate.

Now need to ensure .sunny .icon .ray's transform-origin bottom center; with margin-top -20px, the bottom center of the ray is at the point we set left/top (50%,50%)? Let's compute: The ray's top-left corner is at left:50%; top:50%; then we apply margin-left:-2px; margin-top:-20px; So the actual top-left corner is shifted left by 2px and up by 20px from the 50%,50% point. So the point (50%,50%) corresponds to the point that is 2px right and 20px down from the top-left corner. That point is the center of the ray's top edge? Actually let's compute: Ray width 4px, height 20px. Its center is at (width/2, height/2) = (2px,10px) from its top-left. The point we want to be at the center of the icon (the rotation center) is the bottom center of the ray: that's at (width/2, height) = (2px,20px) from top-left. So we want the point (2px,20px) from top-left to be at 50%,50% of the icon. To achieve that, we set top-left at (50%-2px, 50%-20px) = left:50% -2px, top:50% -20px. That's exactly margin-left:-2px; margin-top:-20px; plus left:50%; top:50%; So correct.

Thus the bottom center of the ray is at the 50%,50% point, which is the center of the icon. Good.

Now we need to ensure .sun is also centered: we set width/height 50px; margin-left:-25px; margin-top:-25px; left:50%; top:50%; So its center is at 50%,50%.

Thus everything rotates around center.

Now adjust .icon height maybe 120px to accommodate rays length 20px plus sun radius 25px => total half height ~45px; so height 100px enough (radius 25 + ray length 20 =45, times 2 =90). So 100px fine.

Now adjust .icon height to 100px.

Now need to adjust .sunny .icon .sun width/height maybe 40px to look nicer; but fine.

Now adjust .sunny .icon .ray height maybe 24px for longer rays. Keep 20.

Now adjust .icon height maybe 120px to have more space; but fine.

Now check other icons: .rainy .icon .drop: we set left:50% etc; but we also have .icon height 100px; drop start top:-10px; animation fall to translateY(110vh) which will go beyond viewport; but that's fine.

Now .snowy .icon .flake: similar.

Now .stormy .icon: we set width:60px;height:80px; but .icon height is 100px; the bolt will be centered due to flex? Actually we removed flex? .icon still has flex: display:flex; align-items:center; justify-content:center; This will center the bolt inside .icon (since it's a child). Good.

Now ensure .icon has height:100px; then bolt will be vertically centered.

Now check .sunny .icon: we have flex, but we also have absolutely positioned children; they will be taken out of flow and positioned relative to container; flex will not affect them. That's okay.

Now final code.

Let's assemble final HTML.

Check for any missing closing tags.

We'll output exactly one code block with ```html ... ```.

Now produce final answer.