My no div pixel art - Fez Art Recreation

In this example below you will see how to do a My no div pixel art - Fez Art Recreation with some HTML / CSS and Javascript

Original image - https://i.pinimg.com/originals/0c/c3/2a/0cc32aa7ae295eb7db063c540b994821.jpg

Thumbnail
This awesome code was written by KristopherVanSant, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright KristopherVanSant ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>My no div pixel art - Fez Art Recreation</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- Made using the No Div Pixel Art Scene Builder by Jamie Coulter https://codepen.io/jcoulterdesign/pen/oqPNXL -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/KristopherVanSant/my-no-div-pixel-art-fez-art-recreation-OvaLeR */
body {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}

body {
  width: 300px;
  height: 200px;
  background: #64c9b4;
}
body::after {
  position: relative;
  box-shadow: 120px 110px #f6edd4, 110px 100px #f6edd4, 100px 90px #f6edd4, 100px 100px #f6edd4, 90px 100px #f6edd4, 90px 90px #f6edd4, 90px 80px #f6edd4, 110px 90px #f6ecd0, 110px 80px #f6ecd0, 110px 70px #f6ecd0, 120px 90px #f6ecd0, 120px 100px #f6ecd0, 120px 120px #f6ecd0, 120px 130px #f6ecd0, 110px 120px #f6ecd0, 100px 120px #f6ecd0, 80px 120px #f6ecd0, 90px 120px #f6ecd0, 90px 130px #f6ecd0, 100px 130px #f6ecd0, 110px 130px #f6ecd0, 100px 140px #f6ecd0, 100px 150px #f6ecd0, 100px 160px #f6ecd0, 100px 170px #f6ecd0, 100px 180px #f6ecd0, 90px 190px #f6ecd0, 130px 180px #f6ecd0, 110px 140px #f6ecd0, 110px 150px #f6ecd0, 110px 160px #f6ecd0, 110px 170px #f6ecd0, 120px 170px #f6ecd0, 130px 170px #f6ecd0, 140px 170px #f6ecd0, 140px 160px #f6ecd0, 120px 160px #f6ecd0, 130px 160px #f6ecd0, 140px 150px #f6ecd0, 140px 140px #f6ecd0, 140px 130px #f6ecd0, 140px 120px #f6ecd0, 130px 150px #f6ecd0, 120px 150px #f6ecd0, 120px 140px #f6ecd0, 130px 140px #f6ecd0, 130px 130px #f6ecd0, 130px 120px #f6ecd0, 130px 110px #f6ecd0, 130px 100px #f6ecd0, 140px 100px #f6ecd0, 150px 100px #f6ecd0, 160px 100px #f6ecd0, 170px 100px #f6ecd0, 170px 50px #f6ecd0, 170px 40px #f6ecd0, 160px 40px #f6ecd0, 150px 40px #f6ecd0, 140px 40px #f6ecd0, 130px 40px #f6ecd0, 120px 40px #f6ecd0, 110px 40px #f6ecd0, 100px 40px #f6ecd0, 90px 40px #f6ecd0, 80px 40px #f6ecd0, 80px 50px #f6ecd0, 70px 50px #f6ecd0, 70px 60px #f6ecd0, 70px 70px #f6ecd0, 70px 80px #f6ecd0, 70px 90px #f6ecd0, 80px 90px #f6ecd0, 80px 80px #f6ecd0, 80px 70px #f6ecd0, 80px 60px #f6ecd0, 90px 50px #f6ecd0, 90px 70px #f6ecd0, 100px 80px #f6ecd0, 100px 70px #f6ecd0, 100px 50px #f6ecd0, 100px 60px #f6ecd0, 110px 60px #f6ecd0, 150px 60px #f6ecd0, 160px 60px #f6ecd0, 160px 50px #f6ecd0, 150px 50px #f6ecd0, 140px 50px #f6ecd0, 130px 50px #f6ecd0, 110px 50px #f6ecd0, 120px 50px #f6ecd0, 120px 60px #f6ecd0, 130px 60px #f6ecd0, 140px 60px #f6ecd0, 150px 90px #f6ecd0, 160px 90px #f6ecd0, 160px 80px #f6ecd0, 170px 80px #f6ecd0, 170px 90px #f6ecd0, 180px 90px #f6ecd0, 180px 80px #f6ecd0, 180px 70px #f6ecd0, 180px 60px #f6ecd0, 180px 50px #f6ecd0, 70px 120px #e5e0b8, 80px 130px #e5e0b8, 90px 140px #e5e0b8, 90px 150px #e5e0b8, 90px 160px #e5e0b8, 90px 170px #e5e0b8, 90px 180px #e5e0b8, 80px 190px #e5e0b8, 110px 180px #e5e0b8, 120px 180px #e5e0b8, 130px 190px #e5e0b8, 140px 180px #e5e0b8, 150px 130px #e5e0b8, 150px 120px #e5e0b8, 160px 120px #e5e0b8, 110px 110px #e5e0b8, 100px 110px #e5e0b8, 80px 100px #e5e0b8, 60px 50px #e5e0b8, 60px 60px #e5e0b8, 60px 70px #e5e0b8, 60px 80px #e5e0b8, 60px 90px #e5e0b8, 70px 40px #e5e0b8, 110px 0px #d63533, 110px 10px #d63533, 110px 20px #d63533, 100px 20px #d63533, 100px 10px #d63533, 100px 0px #d63533, 90px 10px #b72925, 90px 20px #b72925, 90px 0px #e7bd49, 80px 10px #e7bd49, 90px 60px #210503, 170px 60px #210503, 170px 70px #f6ecd0, 160px 70px #f6ecd0, 150px 70px #210503, 140px 70px #210503, 130px 70px #210503, 150px 80px #210503, 120px 70px #210503, 140px 80px #210503, 140px 90px #210503, 130px 90px #f49ba0, 120px 80px #f49ba0, 130px 80px #f49ba0;
  width: 10px;
  height: 10px;
  display: block;
  content: '';
}

Comments