Four weather cards — CSS only, built by GPT-6.1 Sol
Hostedvia Codex CLIOpenRouter
Show the code the model wroteHide the code
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#f5f5ef">
<meta name="description" content="Four little worlds of weather, brought to life entirely with CSS.">
<title>Atmos — A little atmosphere</title>
<style>/* styles.css */
:root {
color-scheme: light;
--ink: #2e3c36;
--muted: #6b746b;
--paper: #f5f5ef;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family:
Arial,
Helvetica,
sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
.site-header {
height: 112px;
max-width: 1360px;
margin: auto;
padding: 0 64px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #dddfd5;
}
.wordmark {
display: flex;
align-items: center;
font-size: 31px;
font-weight: 600;
letter-spacing: -1.5px;
}
.wordmark-dot {
color: #8a9e6b;
}
.brand-symbol {
position: relative;
width: 26px;
height: 28px;
margin-right: 11px;
}
.brand-symbol i {
position: absolute;
width: 25px;
height: 3px;
border-radius: 2px;
top: 12px;
left: 0;
background: #4d6347;
}
.brand-symbol i:nth-child(2) {
transform: rotate(45deg);
}
.brand-symbol i:nth-child(3) {
transform: rotate(90deg);
}
.brand-symbol i:nth-child(4) {
transform: rotate(135deg);
}
.header-note,
.edition,
.eyebrow,
.live-label,
.card-top,
.card-footer,
.site-footer {
font-size: 10px;
letter-spacing: 1.55px;
font-weight: 500;
}
.header-note {
color: #626d5c;
margin-left: 70px;
}
.edition {
border: 1px solid #d9ddce;
border-radius: 30px;
padding: 12px 15px;
letter-spacing: 1.1px;
display: flex;
gap: 9px;
align-items: center;
color: #65725a;
}
.edition > span,
.live-label > span,
.status-dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: #84916e;
display: inline-block;
}
main {
max-width: 1360px;
margin: auto;
padding: 0 64px;
}
.intro {
padding-top: 67px;
padding-bottom: 38px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 10px;
font-size: 9px;
color: #626d5c;
letter-spacing: 1.8px;
}
.eyebrow > span {
width: 18px;
height: 1px;
background: #8b987c;
}
h1 {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(48px, 5.8vw, 78px);
font-weight: 400;
letter-spacing: -3.8px;
line-height: 1.1;
margin: 21px 0 23px;
}
h1 em {
color: #7b8c69;
font-weight: 400;
}
.intro-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.intro p {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: #626d5c;
}
.live-label {
color: #626d5c;
display: flex;
align-items: center;
gap: 8px;
font-size: 9px;
letter-spacing: 1.4px;
padding-bottom: 3px;
}
.live-label > span {
background: #8a9b79;
box-shadow: 0 0 0 3px #e7ebdf;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.weather-card {
position: relative;
height: 424px;
overflow: hidden;
isolation: isolate;
border-radius: 16px;
color: #4c4e3e;
box-shadow: inset 0 0 0 1px #ffffff40, 0 6px 14px -12px #33413540;
}
.sun-card {
background:
linear-gradient(
160deg,
#f8ebbe 0%,
#f4dfa4 54%,
#efdab0 100%);
}
.rain-card {
background:
linear-gradient(
160deg,
#d5e0e3 0%,
#bbced5 52%,
#adc3cd 100%);
color: #345160;
}
.snow-card {
background:
linear-gradient(
150deg,
#e6ece6 0%,
#d6e2dc 58%,
#c5d6cf 100%);
color: #3d5a50;
}
.storm-card {
background:
linear-gradient(
155deg,
#46526b 0%,
#343e57 50%,
#293248 100%);
color: #eff1f6;
}
.card-top {
position: relative;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
margin: 23px 23px 0;
font-size: 8px;
letter-spacing: 1.45px;
opacity: 1;
}
.mini-sun {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid currentColor;
box-shadow: 0 0 0 3px #8d81401a;
}
.mini-drop {
width: 7px;
height: 10px;
border: 1px solid currentColor;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
}
.mini-snow {
font-size: 15px;
line-height: 10px;
}
.mini-bolt {
width: 8px;
height: 13px;
background: currentColor;
clip-path: polygon(55% 0, 5% 55%, 46% 55%, 26% 100%, 100% 39%, 62% 39%);
}
.weather-art {
position: absolute;
inset: 0 0 auto;
height: 280px;
pointer-events: none;
}
.sun-halo {
position: absolute;
width: 226px;
height: 226px;
top: 37px;
left: calc(50% - 113px);
border-radius: 50%;
background:
radial-gradient(
circle,
#ffd66c65 0%,
#f7d78230 42%,
#ffefb500 70%);
animation: sun-warmth 6.7s ease-in-out -2.4s infinite;
}
.sun-disc {
position: absolute;
top: 106px;
left: calc(50% - 38px);
width: 76px;
height: 76px;
border-radius: 50%;
background:
radial-gradient(
circle at 34% 28%,
#ffe69a 0%,
#f8cb58 62%,
#eeb94d 100%);
box-shadow:
inset 0 2px 5px #fff3bd80,
0 0 24px 7px #ffd97260,
0 8px 18px #dba24920;
animation: sun-breathe 6.7s ease-in-out -2.4s infinite;
}
.sun-rays {
position: absolute;
top: 62px;
left: calc(50% - 82px);
width: 164px;
height: 164px;
animation: rays-turn 64s linear -13s infinite;
}
.sun-rays i {
position: absolute;
width: 3px;
height: 16px;
left: 80px;
top: 0;
border-radius: 5px;
background: linear-gradient(#e5b35155, #e5b351bb);
transform-origin: 1.5px 82px;
transform: rotate(calc(var(--r) * 30deg));
}
.sky-speck {
position: absolute;
width: 3px;
height: 3px;
border-radius: 50%;
background: #fff5d4;
}
.speck-one {
top: 96px;
left: 21%;
}
.speck-two {
top: 211px;
left: 76%;
width: 2px;
height: 2px;
}
.cloud {
position: absolute;
width: 160px;
height: 57px;
left: calc(50% - 80px);
top: 112px;
--cloud-light: #e9edef;
--cloud-mid: #c4d1d7;
--cloud-dark: #a9bcc7;
filter: drop-shadow(0 10px 9px #57768318);
animation: cloud-float 8.3s ease-in-out -3.1s infinite;
}
.cloud i {
display: block;
position: absolute;
background:
linear-gradient(
150deg,
var(--cloud-light) 5%,
var(--cloud-mid) 66%,
var(--cloud-dark));
}
.cloud-lobe {
border-radius: 50%;
box-shadow: inset 1px 3px 7px #ffffff25;
}
.lobe-one {
width: 72px;
height: 73px;
left: 19px;
top: -28px;
}
.lobe-two {
width: 85px;
height: 87px;
left: 63px;
top: -44px;
}
.lobe-three {
width: 57px;
height: 57px;
left: -3px;
top: -4px;
}
.cloud .cloud-base {
width: 166px;
height: 52px;
left: -3px;
top: 7px;
border-radius: 40px;
background:
linear-gradient(
165deg,
var(--cloud-mid),
var(--cloud-mid) 46%,
var(--cloud-dark));
box-shadow: inset 0 -4px 7px #ffffff12;
}
.sun-cloud {
top: 166px;
left: calc(50% + 2px);
transform: scale(.59);
transform-origin: left top;
--cloud-light: #fff9e8;
--cloud-mid: #f9efd4;
--cloud-dark: #e7d8b6;
opacity: .9;
animation: sunny-cloud-drift 19s ease-in-out -4.8s infinite;
filter: drop-shadow(0 8px 5px #b4933d13);
}
.rain-cloud {
--cloud-light: #e3e9eb;
--cloud-mid: #b7c6ce;
--cloud-dark: #91a7b4;
}
.snow-cloud {
top: 107px;
transform: scale(.93);
--cloud-light: #f8faf6;
--cloud-mid: #e7eee8;
--cloud-dark: #c3d5cc;
animation-duration: 10.7s;
animation-delay: -6.2s;
filter: drop-shadow(0 9px 9px #738d7d10);
}
.storm-cloud {
top: 108px;
--cloud-light: #7b879b;
--cloud-mid: #5b6980;
--cloud-dark: #414e66;
animation-duration: 6.9s;
animation-delay: -1.2s;
filter: drop-shadow(0 10px 10px #17213a33);
}
.ground {
position: absolute;
left: 17%;
width: 66%;
top: 262px;
height: 5px;
border-radius: 50%;
}
.sun-ground {
background: #caa75126;
filter: blur(2px);
width: 47%;
left: 27%;
}
.rain-ground {
background: #6e95a32b;
box-shadow: 0 0 0 1px #d5e5e73b, 0 6px 13px #6891a21a;
height: 6px;
}
.storm-ground {
background: #14233850;
box-shadow: 0 0 0 1px #8a9bb420;
height: 6px;
}
.precipitation {
position: absolute;
top: 152px;
height: 112px;
left: 19%;
right: 19%;
--drop-color: #658b9d;
--drift: -9px;
}
.rain-drop {
position: absolute;
left: var(--x);
top: 0;
width: 2px;
height: 100%;
}
.rain-drop::before {
content: "";
position: absolute;
top: 0;
width: 2px;
height: 15px;
border-radius: 100% 100% 50% 50%;
background: linear-gradient(transparent, var(--drop-color));
animation: rain-fall var(--duration) linear var(--delay) infinite;
}
.rain-drop::after {
content: "";
position: absolute;
top: 107px;
left: -7px;
width: 13px;
height: 4px;
border: 1px solid var(--drop-color);
border-top-color: transparent;
border-radius: 50%;
opacity: 0;
animation: rain-splash var(--duration) linear var(--delay) infinite;
}
.faint {
opacity: .45;
}
.storm-card .precipitation {
top: 149px;
height: 115px;
left: 15%;
right: 15%;
--drop-color: #a2b5d0;
--drift: -19px;
}
.storm-card .rain-drop::before {
height: 22px;
width: 1px;
}
.storm-card .rain-drop::after {
border-color: #8094b4;
border-top-color: transparent;
}
.snow-haze {
position: absolute;
width: 220px;
height: 200px;
top: 57px;
left: calc(50% - 110px);
background:
radial-gradient(
ellipse,
#ffffff3b,
transparent 68%);
}
.snowfall {
position: absolute;
inset: 74px 13% auto;
height: 192px;
}
.flake {
position: absolute;
top: 0;
left: var(--x);
width: var(--size);
height: var(--size);
opacity: 0;
animation: snow-fall var(--duration) linear var(--delay) infinite;
}
.flake b {
position: absolute;
width: 100%;
height: 100%;
animation: snow-sway 4.7s ease-in-out var(--delay) infinite alternate;
}
.flake b,
.flake b::before,
.flake b::after {
background:
linear-gradient(
transparent calc(50% - .65px),
#fffffff2 calc(50% - .65px),
#fffffff2 calc(50% + .65px),
transparent calc(50% + .65px));
}
.flake b::before,
.flake b::after {
content: "";
position: absolute;
inset: 0;
transform: rotate(60deg);
}
.flake b::after {
transform: rotate(-60deg);
}
.snow-ground {
top: 259px;
height: 8px;
background: #f6faf4;
box-shadow:
-17px 3px 0 -1px #edf4ed,
13px 3px 0 -1px #f4f8f0,
0 5px 12px #9db4a52b;
}
.snow-ground::before {
content: "";
position: absolute;
width: 43%;
height: 8px;
left: 17%;
top: -3px;
border-radius: 50%;
background: #f6faf4;
}
.storm-haze {
position: absolute;
inset: 42px 0 0;
background:
radial-gradient(
ellipse at 55% 54%,
#8493bf14,
transparent 65%);
}
.lightning {
position: absolute;
top: 146px;
left: 48%;
width: 37px;
height: 94px;
background: #f6f5da;
clip-path: polygon(48% 0, 11% 48%, 45% 48%, 20% 100%, 94% 34%, 59% 34%, 84% 0);
opacity: 0;
animation: lightning-strike 23.7s linear -4.1s infinite;
}
.card-flash {
pointer-events: none;
position: absolute;
z-index: 9;
inset: 0;
background:
linear-gradient(
140deg,
#fbfdff,
#dbe4ff);
mix-blend-mode: screen;
opacity: 0;
animation: storm-flash 23.7s linear -4.1s infinite;
}
.card-copy {
position: absolute;
z-index: 3;
top: 278px;
left: 24px;
right: 24px;
}
h2 {
font-size: 10px;
font-weight: 500;
letter-spacing: 2.4px;
margin: 0 0 8px;
}
.temperature {
font-size: 59px;
font-weight: 400;
letter-spacing: -3.5px;
line-height: .97;
}
.temperature > span {
vertical-align: top;
font-size: 46px;
line-height: 1.03;
margin-left: 2px;
}
.card-copy p {
font-family:
Georgia,
"Times New Roman",
serif;
font-style: italic;
font-size: 13px;
margin: 12px 0 0;
opacity: 1;
}
.card-footer {
position: absolute;
z-index: 3;
bottom: 0;
left: 24px;
right: 24px;
height: 39px;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #4e553a18;
font-size: 6.7px;
letter-spacing: .75px;
opacity: 1;
}
.storm-card .card-footer {
border-color: #d3def322;
}
.collection-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 23px 1px 47px;
color: #626d5c;
font-size: 11px;
}
.collection-footer p {
margin: 0;
display: flex;
gap: 9px;
align-items: center;
}
.status-dot {
width: 4px;
height: 4px;
background: #8e9c7b;
}
.motion-control {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: #626d5c;
padding: 6px 0 6px 10px;
}
.pause-icon {
width: 8px;
height: 9px;
border-left: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.play-text {
display: none;
}
.motion-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.motion-input:checked ~ .weather-grid *,
.motion-input:checked ~ .weather-grid *::before,
.motion-input:checked ~ .weather-grid *::after {
animation-play-state: paused !important;
}
.motion-input:checked ~ .collection-footer .pause-text {
display: none;
}
.motion-input:checked ~ .collection-footer .play-text {
display: inline;
}
.motion-input:checked ~ .collection-footer .pause-icon {
border: 0;
background: currentColor;
clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.motion-input:focus-visible ~ .collection-footer .motion-control {
outline: 2px solid #79886b;
outline-offset: 5px;
border-radius: 2px;
}
.site-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #dddfd5;
padding: 24px 0 30px;
font-size: 8px;
letter-spacing: 1.3px;
color: #626d5c;
}
.footer-star {
font-size: 18px;
margin-left: 12px;
vertical-align: middle;
color: #819072;
}
@keyframes rays-turn {
to {
transform: rotate(360deg);
}
}
@keyframes sun-warmth {
0%, 100% {
opacity: .65;
transform: scale(.94);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes sun-breathe {
0%, 100% {
box-shadow:
inset 0 2px 5px #fff3bd80,
0 0 24px 7px #ffd97260,
0 8px 18px #dba24920;
}
50% {
box-shadow:
inset 0 2px 5px #fff3bd80,
0 0 34px 12px #ffce7880,
0 8px 18px #dba24920;
}
}
@keyframes cloud-float {
0%, 100% {
translate: -3px 0;
}
50% {
translate: 3px -5px;
}
}
@keyframes sunny-cloud-drift {
0%, 100% {
translate: 19px 4px;
opacity: .8;
}
50% {
translate: -51px -22px;
opacity: .97;
}
}
@keyframes rain-fall {
0% {
transform: translate3d(0, -12px, 0) rotate(9deg);
opacity: 0;
}
8% {
opacity: .75;
}
62% {
transform: translate3d(var(--drift), 101px, 0) rotate(9deg);
opacity: .8;
}
66%, 100% {
transform: translate3d(var(--drift), 107px, 0) rotate(9deg);
opacity: 0;
}
}
@keyframes rain-splash {
0%, 61% {
opacity: 0;
transform: translateX(var(--drift)) scale(.2);
}
66% {
opacity: .55;
transform: translateX(var(--drift)) scale(.5);
}
87%, 100% {
opacity: 0;
transform: translateX(var(--drift)) scale(1.7);
}
}
@keyframes snow-fall {
0% {
translate: 0 -12px;
opacity: 0;
}
10% {
opacity: .85;
}
84% {
opacity: .9;
}
97%, 100% {
translate: 0 185px;
opacity: 0;
}
}
@keyframes snow-sway {
from {
transform: translateX(calc(var(--sway) * -1)) rotate(-20deg);
}
to {
transform: translateX(var(--sway)) rotate(65deg);
}
}
@keyframes storm-flash {
0%, 18.99%, 19.18%, 19.73%, 19.9%, 57.99%, 58.19%, 85.99%, 86.16%, 100% {
opacity: 0;
}
19%, 19.09% {
opacity: .86;
}
19.74%, 19.8% {
opacity: .43;
}
58%, 58.1% {
opacity: .95;
}
86%, 86.08% {
opacity: .72;
}
}
@keyframes lightning-strike {
0%, 18.99%, 19.35%, 19.73%, 20%, 57.99%, 58.35%, 85.99%, 86.35%, 100% {
opacity: 0;
}
19%, 19.15%, 19.74%, 19.85%, 58%, 58.16%, 86%, 86.2% {
opacity: 1;
}
}
@media (min-width: 1500px) {
.site-header {
margin-top: 15px;
}
.intro {
padding-top: 83px;
}
.weather-card {
height: 450px;
}
.card-copy {
top: 307px;
}
.weather-art {
top: 9px;
}
.collection-footer {
padding-bottom: 65px;
}
}
@media (max-width: 1050px) {
.site-header {
padding: 0 36px;
}
main {
padding: 0 36px;
}
.header-note {
margin-left: 0;
}
.weather-grid {
gap: 14px;
}
.card-top {
margin-left: 19px;
margin-right: 19px;
font-size: 7px;
letter-spacing: .9px;
}
.card-copy,
.card-footer {
left: 19px;
right: 19px;
}
.card-footer {
font-size: 6px;
letter-spacing: .4px;
}
.card-copy p {
font-size: 12px;
}
}
@media (max-width: 800px) {
.weather-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.site-header {
height: 91px;
}
.header-note {
display: none;
}
.intro {
padding-top: 48px;
padding-bottom: 31px;
}
h1 {
font-size: 63px;
letter-spacing: -3px;
}
.weather-card {
height: 424px;
}
.card-top {
margin: 23px 24px 0;
font-size: 8px;
letter-spacing: 1.45px;
}
.card-copy,
.card-footer {
left: 24px;
right: 24px;
}
.card-footer {
font-size: 7px;
letter-spacing: .7px;
}
.card-copy p {
font-size: 13px;
}
}
@media (max-width: 480px) {
main {
padding: 0 19px;
}
.site-header {
padding: 0 20px;
height: 78px;
}
.wordmark {
font-size: 28px;
}
.edition {
font-size: 7px;
padding: 10px;
letter-spacing: .7px;
}
.intro {
padding-top: 35px;
padding-bottom: 26px;
}
.eyebrow {
font-size: 7px;
letter-spacing: 1.3px;
}
h1 {
font-size: 46px;
letter-spacing: -2.4px;
margin: 19px 0;
}
.intro p {
font-size: 11px;
}
.live-label {
font-size: 7px;
letter-spacing: .75px;
gap: 6px;
}
.weather-grid {
gap: 12px;
}
.weather-card {
height: 366px;
border-radius: 13px;
}
.weather-art {
width: 235px;
left: calc(50% - 117.5px);
transform: scale(.77);
transform-origin: center 55px;
}
.card-top {
margin: 18px 14px 0;
font-size: 6px;
letter-spacing: .5px;
}
.card-copy {
top: 237px;
left: 15px;
right: 15px;
}
h2 {
font-size: 8px;
letter-spacing: 1.7px;
}
.temperature {
font-size: 49px;
}
.temperature > span {
font-size: 36px;
}
.card-copy p {
font-size: 10px;
margin-top: 10px;
}
.card-footer {
left: 15px;
right: 15px;
height: 33px;
font-size: 5px;
letter-spacing: .1px;
}
.collection-footer {
padding-top: 19px;
padding-bottom: 31px;
font-size: 9px;
}
.motion-control {
font-size: 9px;
gap: 6px;
}
.site-footer {
font-size: 6px;
letter-spacing: .7px;
padding: 20px 0;
gap: 18px;
line-height: 1.8;
}
.site-footer > span:last-child {
text-align: right;
}
.footer-star {
font-size: 13px;
margin-left: 5px;
}
}
@media (max-width: 360px) {
.card-copy {
top: 225px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-play-state: paused !important;
}
.card-flash,
.lightning {
display: none;
}
.motion-input,
.motion-control {
display: none;
}
.live-label {
display: none;
}
}
</style>
</head>
<body>
<header class="site-header">
<a class="wordmark" href="./" aria-label="Atmos home"><span class="brand-symbol" aria-hidden="true"><i></i><i></i><i></i><i></i></span>atmos<span class="wordmark-dot">.</span></a>
<span class="header-note">A STUDY IN WEATHER & MOTION</span>
<span class="edition"><span></span> ALWAYS IN SEASON</span>
</header>
<main>
<section class="intro" aria-labelledby="page-title">
<div class="eyebrow"><span></span> FOUR FORECASTS. ONE LITTLE WORLD.</div>
<h1 id="page-title">A little <em>atmosphere.</em></h1>
<div class="intro-bottom"><p>A moment under every sky.<br>Slow down. Watch the weather roll in.</p><span class="live-label"><span></span> WEATHER IN MOTION</span></div>
</section>
<input class="motion-input" type="checkbox" id="pause-motion" aria-label="Pause weather animations">
<section class="weather-grid" aria-label="Four animated weather conditions">
<article class="weather-card sun-card" aria-labelledby="sun-title">
<div class="card-top"><span>01 / DAYLIGHT</span><span class="mini-sun" aria-hidden="true"></span></div>
<div class="weather-art" aria-hidden="true">
<div class="sun-halo"></div>
<div class="sun-rays"><i style="--r:0"></i><i style="--r:1"></i><i style="--r:2"></i><i style="--r:3"></i><i style="--r:4"></i><i style="--r:5"></i><i style="--r:6"></i><i style="--r:7"></i><i style="--r:8"></i><i style="--r:9"></i><i style="--r:10"></i><i style="--r:11"></i></div>
<div class="sun-disc"></div>
<div class="cloud sun-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
<div class="sky-speck speck-one"></div><div class="sky-speck speck-two"></div>
<div class="ground sun-ground"></div>
</div>
<div class="card-copy"><h2 id="sun-title">SUN</h2><div class="temperature">26<span>°</span></div><p>A little golden hour.</p></div>
<div class="card-footer"><span>CLEAR & BRIGHT</span><span>FEELS LIKE 28°</span></div>
</article>
<article class="weather-card rain-card" aria-labelledby="rain-title">
<div class="card-top"><span>02 / A SOFT SPELL</span><span class="mini-drop" aria-hidden="true"></span></div>
<div class="weather-art" aria-hidden="true">
<div class="cloud rain-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
<div class="ground rain-ground"></div>
<div class="precipitation">
<i class="rain-drop" style="--x:8%;--duration:1.31s;--delay:-.42s"></i><i class="rain-drop" style="--x:17%;--duration:1.57s;--delay:-1.16s"></i><i class="rain-drop" style="--x:25%;--duration:1.18s;--delay:-.83s"></i><i class="rain-drop" style="--x:34%;--duration:1.73s;--delay:-.22s"></i><i class="rain-drop" style="--x:43%;--duration:1.39s;--delay:-.93s"></i><i class="rain-drop" style="--x:52%;--duration:1.61s;--delay:-.36s"></i><i class="rain-drop" style="--x:61%;--duration:1.27s;--delay:-1.08s"></i><i class="rain-drop" style="--x:70%;--duration:1.81s;--delay:-1.43s"></i><i class="rain-drop" style="--x:78%;--duration:1.43s;--delay:-.68s"></i><i class="rain-drop" style="--x:89%;--duration:1.53s;--delay:-1.32s"></i><i class="rain-drop faint" style="--x:12%;--duration:1.91s;--delay:-1.13s"></i><i class="rain-drop faint" style="--x:39%;--duration:1.67s;--delay:-.51s"></i><i class="rain-drop faint" style="--x:66%;--duration:1.47s;--delay:-.17s"></i><i class="rain-drop faint" style="--x:83%;--duration:1.79s;--delay:-.94s"></i>
</div>
</div>
<div class="card-copy"><h2 id="rain-title">RAIN</h2><div class="temperature">14<span>°</span></div><p>The world's softer side.</p></div>
<div class="card-footer"><span>GENTLE SHOWERS</span><span>FEELS LIKE 12°</span></div>
</article>
<article class="weather-card snow-card" aria-labelledby="snow-title">
<div class="card-top"><span>03 / WINTER QUIET</span><span class="mini-snow" aria-hidden="true">✳</span></div>
<div class="weather-art" aria-hidden="true">
<div class="snow-haze"></div>
<div class="cloud snow-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
<div class="snowfall">
<i class="flake" style="--x:8%;--size:5px;--duration:8.7s;--delay:-3.2s;--sway:12px"><b></b></i><i class="flake" style="--x:18%;--size:8px;--duration:10.3s;--delay:-7.6s;--sway:-17px"><b></b></i><i class="flake" style="--x:29%;--size:4px;--duration:7.9s;--delay:-1.8s;--sway:19px"><b></b></i><i class="flake" style="--x:40%;--size:10px;--duration:11.7s;--delay:-5.1s;--sway:-13px"><b></b></i><i class="flake" style="--x:52%;--size:6px;--duration:9.1s;--delay:-7.2s;--sway:16px"><b></b></i><i class="flake" style="--x:62%;--size:4px;--duration:8.3s;--delay:-4.4s;--sway:-20px"><b></b></i><i class="flake" style="--x:74%;--size:9px;--duration:12.1s;--delay:-2.6s;--sway:13px"><b></b></i><i class="flake" style="--x:86%;--size:6px;--duration:9.7s;--delay:-8.1s;--sway:-15px"><b></b></i><i class="flake" style="--x:23%;--size:3px;--duration:10.9s;--delay:-5.2s;--sway:10px"><b></b></i><i class="flake" style="--x:46%;--size:5px;--duration:13.3s;--delay:-10.8s;--sway:-12px"><b></b></i><i class="flake" style="--x:68%;--size:3px;--duration:11.3s;--delay:-6.9s;--sway:14px"><b></b></i><i class="flake" style="--x:92%;--size:4px;--duration:8.9s;--delay:-1.3s;--sway:-16px"><b></b></i>
</div>
<div class="ground snow-ground"></div>
</div>
<div class="card-copy"><h2 id="snow-title">SNOW</h2><div class="temperature">−2<span>°</span></div><p>A hush over everything.</p></div>
<div class="card-footer"><span>SLOW FLURRIES</span><span>FEELS LIKE −5°</span></div>
</article>
<article class="weather-card storm-card" aria-labelledby="storm-title">
<div class="card-top"><span>04 / AFTER DARK</span><span class="mini-bolt" aria-hidden="true"></span></div>
<div class="weather-art" aria-hidden="true">
<div class="storm-haze"></div>
<div class="cloud storm-cloud"><i class="cloud-lobe lobe-one"></i><i class="cloud-lobe lobe-two"></i><i class="cloud-lobe lobe-three"></i><i class="cloud-base"></i></div>
<div class="ground storm-ground"></div>
<div class="precipitation">
<i class="rain-drop" style="--x:5%;--duration:.79s;--delay:-.34s"></i><i class="rain-drop" style="--x:12%;--duration:.93s;--delay:-.76s"></i><i class="rain-drop" style="--x:20%;--duration:.71s;--delay:-.12s"></i><i class="rain-drop" style="--x:27%;--duration:.87s;--delay:-.53s"></i><i class="rain-drop" style="--x:34%;--duration:.69s;--delay:-.39s"></i><i class="rain-drop" style="--x:41%;--duration:1.03s;--delay:-.18s"></i><i class="rain-drop" style="--x:48%;--duration:.83s;--delay:-.62s"></i><i class="rain-drop" style="--x:55%;--duration:.73s;--delay:-.28s"></i><i class="rain-drop" style="--x:62%;--duration:.97s;--delay:-.83s"></i><i class="rain-drop" style="--x:69%;--duration:.81s;--delay:-.43s"></i><i class="rain-drop" style="--x:76%;--duration:.67s;--delay:-.54s"></i><i class="rain-drop" style="--x:83%;--duration:.89s;--delay:-.31s"></i><i class="rain-drop" style="--x:91%;--duration:.77s;--delay:-.68s"></i><i class="rain-drop faint" style="--x:16%;--duration:1.11s;--delay:-.46s"></i><i class="rain-drop faint" style="--x:38%;--duration:.91s;--delay:-.71s"></i><i class="rain-drop faint" style="--x:58%;--duration:1.07s;--delay:-.13s"></i><i class="rain-drop faint" style="--x:87%;--duration:.99s;--delay:-.56s"></i>
</div>
<div class="lightning"></div>
</div>
<div class="card-copy"><h2 id="storm-title">STORM</h2><div class="temperature">18<span>°</span></div><p>A sky with something to say.</p></div>
<div class="card-footer"><span>THUNDER & RAIN</span><span>FEELS LIKE 16°</span></div>
<div class="card-flash" aria-hidden="true"></div>
</article>
</section>
<div class="collection-footer"><p><span class="status-dot"></span> A forecast for your state of mind.</p><label class="motion-control" for="pause-motion"><span class="pause-icon" aria-hidden="true"></span><span class="pause-text">Pause the weather</span><span class="play-text">Let it roll</span></label></div>
<footer class="site-footer"><span>MADE OF NOTHING BUT A LITTLE CSS.</span><span>TAKE A BREATH. STAY A WHILE. <span class="footer-star">✳</span></span></footer>
</main>
</body>
</html>Same prompt, other models
One email when a new model lands on the board or in the showcase. Unsubscribe anytime.