model output
Gemini 3 Flash Preview

CSS Spinners
A 0.90T 0.29
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Pulsing Circle Animation</title>
7    <style>
8        body, html {
9            margin: 0;
10            padding: 0;
11            width: 100%;
12            height: 100%;
13            overflow: hidden;
14            display: flex;
15            flex-direction: column;
16        }
17
18        /* Top green section */
19        .top-section {
20            background-color: #4CAF50;
21            height: 33.33vh;
22            width: 100%;
23            display: flex;
24            justify-content: center;
25            align-items: center;
26            position: relative;
27        }
28
29        /* Bottom white section */
30        .bottom-section {
31            background-color: #ffffff;
32            height: 66.67vh;
33            width: 100%;
34        }
35
36        /* The pulsing circle */
37        .circle {
38            width: 30px;
39            height: 30px;
40            border: 2px solid #333;
41            border-radius: 50%;
42            transform: scale(0.2);
43            animation: pulse 1s infinite ease-in-out;
44        }
45
46        @keyframes pulse {
47            0%, 100% {
48                transform: scale(0.2);
49            }
50            50% {
51                transform: scale(1);
52            }
53        }
54    </style>
55</head>
56<body>
57    <div class="top-section">
58        <div class="circle"></div>
59    </div>
60    <div class="bottom-section"></div>
61</body>
62</html>