Mario Level UI Recreation

Prompt

Recreate a Super Mario Bros. level element (like a question block, brick block interaction, a simple jump sequence, or more if you want to get creative) — make it interactive and fun, feel free to get creative and showcase your skills. Stick to the spirit of nintendo games. In a single-page self-contained HTML.

Response

Claude 3 SonnetMario Level UI Recreation

Claude 3 Sonnet

Couldn't render this response

This model didn't return a displayable web page for this challenge.

View raw output

Here's a simple Super Mario Bros. level element with a question block and a simple jump sequence, created using HTML, CSS, and JavaScript. It's a single-page, self-contained HTML file that you can open in a web browser:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Mario Bros. Level Element</title>
    <style>
        body {
            background-color: #87CEEB;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .game {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: #000;
            border: 4px solid #333;
            overflow: hidden;
        }

        .ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #7B3F00;
        }

        .block {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FFD700;
            border: 2px solid #000;
            box-sizing: border-box;
        }

        .question-block {
            background-color: #FF6347;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJXSURBVHic7Zo7TsNAFEbPxlVWgEIpULJAAtYAEjSIEp0SQIHGBgmFhSNBiRSxQmHlBmBIAYUrBHYcSLJhBEz8mhkfMxM9vfBLn8fHc+7c0Xj8oqOjo6Ojo6NzFXQ6nUmSJB9JkgBODQAcvBYA0GkWbCcA9gAuxpBl2Xq32z1fQpqmN1EUvQYr8DcAQExPAKCQIrbLsmy70WiUTtI0nQNARPvbABDRBQBUUpYkSbXT6ZRuHMfXAEApAHDxFgDCdnVUADCZTK6iKPqSJQmA4/F4p91uH5cNnm6Zz+c3vV7vX1lYCgD3VYKnA0BVQC0AoirgbgBwV8DdAeCugLsEQK0CbgYAtwWVmoGbAcB9QaUAcF9QLgDcF5QKAPcF5QJAv6DULCgVAPoFpWZBqQDQLygVAPoFlQJAv6AjC0oFgH5BRxaUCgD9go4sKBUA+gUdWVAqAPQLOrKgVADoF3RkQakA0C/oyIJSAaBf0JEFpQJAv6AjC0oFgH5BRxaUCgD9go4sKBUA+gUdWVAqAPQLOrKgVADoF3RkQakA0C/oyIJSAaBf0JEFpQJAv6AjC0oFgH5BRxaUCgD9go4sqNQMnGpBqQBwX1CqG7gvKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUN3BeU6gbuC0p1A/cFpbqB+4JS3cB9QalukGpBqQBwX1CqG7gvKNUN3BeU6gbuC0p1A/cFpbqB+4JS3cB9QalukGpBqQDQLyjVDdwXlOoG7gtKdQP3BaW6gfuCUt3AfUGpbuC+oFQ3cF9Qqhu4LyjVDdwXlOoG7gtKdQP3BaW6gfuCUt3AfUGpbuC+oFQ3cF9Qqhu4LyjVDdwXlOoG7gtKdQP3BaW6gfuCUt0g1f8BHR0dHR0dHR0dnf/xC0fMkbQUg1XSAAAAAElFTkSuQmCC');
            background-repeat: no-repeat;
            background-position: center;
        }

        .mario {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/png;base64,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

Mario Level UI Recreation

Prompt

Response

Claude 3 SonnetMario Level UI Recreation

Claude 3 Sonnet

Couldn't render this response

This model didn't return a displayable web page for this challenge.

View raw output

Here's a simple Super Mario Bros. level element with a question block and a simple jump sequence, created using HTML, CSS, and JavaScript. It's a single-page, self-contained HTML file that you can open in a web browser:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super Mario Bros. Level Element</title>
    <style>
        body {
            background-color: #87CEEB;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        .game {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: #000;
            border: 4px solid #333;
            overflow: hidden;
        }

        .ground {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            background-color: #7B3F00;
        }

        .block {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #FFD700;
            border: 2px solid #000;
            box-sizing: border-box;
        }

        .question-block {
            background-color: #FF6347;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAB2AAAAdgB+lymcgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAJXSURBVHic7Zo7TsNAFEbPxlVWgEIpULJAAtYAEjSIEp0SQIHGBgmFhSNBiRSxQmHlBmBIAYUrBHYcSLJhBEz8mhkfMxM9vfBLn8fHc+7c0Xj8oqOjo6Ojo6NzFXQ6nUmSJB9JkgBODQAcvBYA0GkWbCcA9gAuxpBl2Xq32z1fQpqmN1EUvQYr8DcAQExPAKCQIrbLsmy70WiUTtI0nQNARPvbABDRBQBUUpYkSbXT6ZRuHMfXAEApAHDxFgDCdnVUADCZTK6iKPqSJQmA4/F4p91uH5cNnm6Zz+c3vV7vX1lYCgD3VYKnA0BVQC0AoirgbgBwV8DdAeCugLsEQK0CbgYAtwWVmoGbAcB9QaUAcF9QLgDcF5QKAPcF5QJAv6DULCgVAPoFpWZBqQDQLygVAPoFlQJAv6AjC0oFgH5BRxaUCgD9go4sKBUA+gUdWVAqAPQLOrKgVADoF3RkQakA0C/oyIJSAaBf0JEFpQJAv6AjC0oFgH5BRxaUCgD9go4sKBUA+gUdWVAqAPQLOrKgVADoF3RkQakA0C/oyIJSAaBf0JEFpQJAv6AjC0oFgH5BRxaUCgD9go4sqNQMnGpBqQBwX1CqG7gvKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUNPCwo1Q08LCjVDTwsKNUN3BeU6gbuC0p1A/cFpbqB+4JS3cB9QalukGpBqQBwX1CqG7gvKNUN3BeU6gbuC0p1A/cFpbqB+4JS3cB9QalukGpBqQDQLyjVDdwXlOoG7gtKdQP3BaW6gfuCUt3AfUGpbuC+oFQ3cF9Qqhu4LyjVDdwXlOoG7gtKdQP3BaW6gfuCUt3AfUGpbuC+oFQ3cF9Qqhu4LyjVDdwXlOoG7gtKdQP3BaW6gfuCUt0g1f8BHR0dHR0dHR0dnf/xC0fMkbQUg1XSAAAAAElFTkSuQmCC');
            background-repeat: no-repeat;
            background-position: center;
        }

        .mario {
            position: absolute;
            width: 50px;
            height: 50px;
            background-image: url('data:image/png;base64,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

Mario Level UI Recreation

?
Prompt

Response

About Claude 3 Sonnet

Capabilities

Categories

Specifications

Claude Sonnet 4.6's version

Claude 3 Sonnet vs Gemini 3.1 Pro Preview

Mario Level UI Recreation

?
Prompt

Response

About Claude 3 Sonnet

Capabilities

Categories

Specifications

Claude Sonnet 4.6's version

Claude 3 Sonnet vs Gemini 3.1 Pro Preview

Mario Level UI Recreation

?Prompt

Response

About Claude 3 Sonnet

Capabilities

Categories

Specifications

Claude Sonnet 4.6's version

Claude 3 Sonnet vs Gemini 3.1 Pro Preview

Mario Level UI Recreation

?Prompt

Response

About Claude 3 Sonnet

Capabilities

Categories

Specifications

Claude Sonnet 4.6's version

Claude 3 Sonnet vs Gemini 3.1 Pro Preview

?
Prompt

?
Prompt