Circle Dance Version 1

23 JUNE 2023:

I gave ChatGPT the following prompt:

Write HTML and CSS for webpage comprising 16 circles that dynamically move and adjust size when browser size changes."

The initial result was the circles moving back and forth.
Whilst not what I wanted, I liked it so much I kept going.

2. "Give examples of all animation types."
More: Bouncing Page Loader | Cool Effects | nth Child |

3. "Create CSS so the circle changes colour and dances."

4. "Create h1 with font height of 4em, plus is always above the dynamic circles."

5. "Produce a:link CSS where initial colour is #3CB371 , on:hover colour is #EEE8AA and visited is #3CB371 ."

6. "Adapt circle so that any text I put inside will centre in circle."

7. "Add CSS that will reduce size of font as browser width decreases."

11 AUGUST 2026:

I prompted ChatGPT to design it again. Sigh. It took three years to discover that nth-child was the problem.

Yet I have a new version is different again.