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;
}
