Little help needed to add a train game in html

Question

I was trying to copy and paste some code from codepen into my sons website so he can play a game with his friends https://codepen.io/ghostreef/pen/ZXjqJO Its not too straight forward as its in haml which I am not familiar with

%div.wrapper
%div.sky
%div.sun
%div.clouds
  - (1..9).each do
    %div.cloud
      %div.big_bubble
      %div.base
      %div.small_bubble
%div.mountains
  - (1..11).each do
    %div.mountain
%div.info
  %button.js-play PLAY        
  %button.js-instructions INSTRUCTIONS
  %button.js-tutorial TUTORIAL    
%div.land.js-land
 %div.game_info
  %span Score:
  %span.score.js-score 0000
  %span.fraction
    %span.right.js-correct 0
    %span /
    %span.total.js-total 0
%div.trees
  - (1..11).each do
    %div.tree
      %div.branch
      %div.branch
      %div.trunk
      %div.shadow

Answer 1

If you click on the down arrow, you can see compiled html.

<div class='wrapper'>
  <div class='sky'>
    <div class='sun'></div>
    <div class='clouds'>
      <div class='cloud'>
        <div class='big_bubble'></div>
        <div class='base'></div>
        <div class='small_bubble'></div>
      </div>
      <div class='cloud'>
        <div class='big_bubble'></div>
        <div class='base'></div>
        <div class='small_bubble'></div>
      </div>
      <div class='cloud'>
        <div class='big_bubble'></div>
        <div class='base'></div>
        <div class='small_bubble'></div>
      </div>
      <div class='cloud'>
        <div class='big_bubble'></div>
        <div class='base'></div>
        <div class='small_bubble'></div>
      </div>
      <div class='cloud'>
        <div class='big_bubble'></div>
        <div class='base'></div>
        <div class='small_bubble'></div>