Published: 20 Jan 2018 › Updated: 20 Jan 2018
HTML Mario
Hi, Steemians
I made this pixelated Mario using CSS Grid, I thought you might like to take a look!
https://s.codepen.io/MichaelHill/debug/oGpeMO/XxkVwDEEWXvM
HTML:
<html lang="en-gb">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section>
<div style="background-color:;"></div>
<div style="background-color:;"></div>
<div style="background-color:;"></div>
<div style="background-color:#ee1c25;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: #ee1c25;"></div>
<div style="background-color: #ee1c25;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: #ee1c25;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: #fdd0af;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: #874c2e;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: #874c2e;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: #fdd0af;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color:#000000 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: #ee1c25;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#fef001 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#fef001 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#ee1c25 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color:#fdd0af ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color:#0065b3 ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color: #874c2e;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color: ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color:#874c2e ;"></div>
<div style="background-color: ;"></div>
</section>
<script>
(function(u) {
var s = document.createElement("script");
s.async = true;
s.src = u;
var b = document.getElementsByTagName("script")[0];
b.parentNode.insertBefore(s, b);
})("//updatemybrowser.org/umb.js");
</script>
</body>
</html>
CSS:
section {
display: grid;
grid-template-columns: repeat(13, 15px);
grid-template-rows: repeat(16, 15px);
justify-content: center;
align-content: center;
height: 100vh;
}
Leave HTML Mario to:
Best Posts From .
We have not curated any of mikefromtheuk's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.