--- title: Earth rescue - A CSS only game | daily.dev description: A CSS-only game created for the Frontend Challenge, inspired by Earth Day. Includes information on generating waves in CSS, using the BEM Pattern for CSS,... canonical: https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Earth rescue - A CSS only game | daily.dev og:description: A CSS-only game created for the Frontend Challenge, inspired by Earth Day. Includes information on generating waves in CSS, using the BEM Pattern for CSS,... og:url: https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7 og:image: https://api.daily.dev/og/posts/O370wOeK7.png og:image:alt: Earth rescue - A CSS only game og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Earth rescue - A CSS only game **[DEV](https://daily.dev/sources/devto)** · 4 min read · 50 upvotes · 1 comments ## Summary A CSS-only game created for the Frontend Challenge, inspired by Earth Day. Includes information on generating waves in CSS, using the BEM Pattern for CSS, creating an earth design with CSS grid, improving CSS animations for performance, and using checkboxes to control game state. The game features icons for ecological disasters and a CSS robot companion. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@pasujemito** · 0 upvotes > Minimalistic :) Really nice ## Similar posts on daily.dev - [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments - [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments - [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments - [CNCF Unveils Schedule for KubeCon \+ CloudNativeCon Europe 2026](https://daily.dev/posts/cncf-unveils-schedule-for-kubecon-cloudnativecon-europe-2026-ikhcoa5cb) · CNCF · 2 upvotes · 0 comments - [CNCF Debuts KubeCon \+ CloudNativeCon Japan 2026 Schedule](https://daily.dev/posts/cncf-debuts-kubecon-cloudnativecon-japan-2026-schedule-xp5pyudub) · CNCF · 1 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#github-pages](https://daily.dev/tags/github-pages) [View this post on daily.dev](https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Earth rescue - A CSS only game","url":"https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7"},"datePublished":"2024-04-26T16:19:47.606Z","dateModified":"2024-05-09T09:27:15.675Z","description":"A CSS-only game created for the Frontend Challenge, inspired by Earth Day. Includes information on generating waves in CSS, using the BEM Pattern for CSS,...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a7cee59a137f76bc45c534765a6b3a48?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a7cee59a137f76bc45c534765a6b3a48?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"DEV","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"DEV","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/devto","url":"https://daily.dev/sources/devto"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":50},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,github-pages","timeRequired":"PT4M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"DEV","item":"https://daily.dev/sources/devto"},{"@type":"ListItem","position":3,"name":"Earth rescue - A CSS only game"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/earth-rescue---a-css-only-game-o370woek7","comment":[{"@type":"Comment","text":"Minimalistic :) Really nice","datePublished":"2024-06-13T11:37:07.300Z","url":"https://daily.dev/posts/O370wOeK7#c-rf7zhYHiI","author":{"@type":"Person","name":"Damian","url":"https://daily.dev/pasujemito","image":"https://media.daily.dev/image/upload/s--PbZohDNZ--/f_auto/v1718184276/avatars/avatar_q-uurJR-W"}}]} ```