<div class="frame">
  <div class="container">
    <div id="one-one">
      <div id="shape-four-one">
        <svg width="236" height="236" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="145 22, 145 77, 102 120, 36 120" fill="var(--green-01)"/>
  <polygon points="145 22, 200 22, 200 212, 145 212" fill="var(--green-04)"/>
  <polygon points="36 120, 145 120, 145 160, 36 160" fill="var(--green-03)"/>
  <polygon points="145 77, 145 120, 91 120" fill="var(--tan)"/>
</svg>
      </div>
    </div>
    <div id="one-two">
      <svg width="236" height="236">
        <polygon points="36 22, 91 22, 91 140, 36 140" fill="var(--green-03)"/> 
        <polygon points="91 58, 170 58, 170 110, 91 110" fill="var(--tan)"/> 
        <path d="M36,140 a1,1 0 0,0 160,0" fill="var(--green-01)" />
      </svg>
    </div>
    <div id="one-three">
      <svg width="236" height="236">
        <polygon points="36 22, 91 22, 91 212, 36 212" fill="var(--green-03)"/>
        <path d="M91,120 a1,1 0 0,1 109,0" fill="var(--green-01)" />
        <polygon points="145 120, 200 120, 200 212, 145 212" fill="var(--green-04)"/>
      </svg>
    </div>
    <div id="one-four">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-04)" />
        <circle cx="90" cy="160" r="55" fill="var(--green-01)"/>
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="one-five">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--tan)" />
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--green-03)"/>
        <polygon points="36 105, 91 105, 91 212, 36 212" fill="var(--green-04)"/>
      </svg>
    </div>
    <div id="two-one">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-04)" />
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--tan)"/>
        <polygon points="36 105, 91 105, 91 212, 36 212" fill="var(--green-02)"/>
      </svg>
    </div>
    <div id="two-two">
      <svg width="236" height="236">
        <path d="M36,140 a1,1 0 0,0 164,0" fill="var(--tan)" /> 
        <polygon points="145 22, 200 22, 200 140, 145 140" fill="var(--green-04)"/>
        <polygon points="36 22, 91 22, 91 140, 36 140" fill="var(--green-01)"/>
      </svg>
    </div>
    <div id="two-three">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-01)" />
        <circle cx="90" cy="160" r="55" fill="var(--green-04)"/>
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="two-four">
      <svg width="236" height="236">
        <polygon points="36 22, 91 22, 91 212, 36 212" fill="var(--tan)"/>
        <polygon points="36 160, 91 160, 91 212, 36 212" fill="var(--green-01)"/>
        <polygon points="91 160, 200 160, 200 212, 91 212" fill="var(--green-03)"/>
      </svg>
    </div>
    <div id="two-five">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-03)" />
        <circle cx="90" cy="160" r="55" fill="var(--green-01)"/>
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--green-04)"/>
      </svg>
    </div>
    <div id="three-one">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-01)" />
        <circle cx="90" cy="160" r="55" fill="var(--tan)"/>
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--green-03)"/>
      </svg>
    </div>
    <div id="three-two">
      <svg width="236" height="236">
       <polygon points="36 22, 91 22, 91 212, 36 212" fill="var(--green-04)"/> 
        <polygon points="91 22, 200 22, 200 74, 91 74" fill="var(--green-01)"/>
        <polygon points="91 100, 141 100, 141 152, 91 152" fill="var(--green-03)"/>
      </svg>

    </div>
    <div id="three-three">
      <svg width="236" height="236">
        <circle cx="118" cy="118" r="100" fill="var(--tan)"/>
        <circle cx="118" cy="118" r="40" fill="var(--green-04)"/>
      </svg>
    </div>
    <div id="three-four">
      <svg width="236" height="236">
       <polygon points="36 22, 91 22, 91 212, 36 212" fill="var(--green-04)"/> 
       <polygon points="91 22, 146 22, 146 150, 91 150" fill="var(--green-03)"/> 
      <path d="M22, -146 a1,1 0 0,1 128,0" fill="var(--green-03)" style="display: inline-block; transform: rotate(90deg)"/>
      </svg>
    </div>
    <div id="three-five">
      <svg width="236" height="236">
       <polygon points="36 22, 91 22, 91 212, 36 212" fill="var(--tan)"/> 
        <polygon points="91 22, 200 22, 200 74, 91 74" fill="var(--green-04)"/>
        <polygon points="91 90, 141 90, 141 142, 91 142" fill="var(--green-02)"/>
        <polygon points="91 160, 200 160, 200 212, 91 212" fill="var(--green-01)"/>
      </svg>
    </div>
    <div id="four-one">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-01)" />
        <polygon points="145 105, 200 105, 200 212, 145 212" fill="var(--green-04)"/>
        <polygon points="36 105, 91 105, 91 212, 36 212" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="four-two">
      <svg width="236" height="236">
        <path d="M36,105 a1,1 0 0,1 164,0" fill="var(--green-04)" />
        <polygon points="91 105, 200 105, 145 160, 36 160" fill="var(--green-01)"/>
        <polygon points="36 160, 200 160, 200 215, 36 215" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="four-three">
      <svg width="236" height="236">
        <circle cx="118" cy="118" r="100" fill="var(--green-01)"/>
        <circle cx="118" cy="118" r="40" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="four-four">
      <svg width="236" height="236">
        <polygon points="87 22, 87 77, 36 77" fill="var(--green-03)"/>
        <polygon points="87 22, 142 22, 142 160, 87 160" fill="var(--green-01)"/>
        <polygon points="36 160, 200 160, 200 215, 36 215" fill="var(--green-04)"/>
      </svg>
    </div>
    <div id="four-five">
      <svg width="236" height="236">
        <polygon points="36 22, 91 22, 91 140, 36 140" fill="var(--green-01)"/> 
        <polygon points="91 70, 136 70, 136 140, 91 140" fill="var(--tan)"/>
        <path d="M70, -132 a1,1 0 0,1 128,0" fill="var(--tan)" style="display: inline-block; transform: rotate(90deg)"/>
        <path d="M36,140 a1,1 0 0,0 160,0" fill="var(--green-04)" />
      </svg>
    </div>
    <div id="five-one">
      <svg width="236" height="708">
        <polygon points="108 0, 236 0, 236 240" fill="var(--green-04)"/> 
        <polygon points="90 0, 108 0, 177 130, 90 130" fill="var(--green-03)"/> 
        <polygon points="120 177, 177 130, 236 240, 236 370" fill="var(--green-03)"/> 
      </svg>
    </div>
    <div id="five-two">
      <svg width="236" height="708">
        <polygon points="0 0, 108 0, 0 240" fill="var(--green-05)"/>
        <polygon points="108 0, 126 0, 126 130, 49 130" fill="var(--green-02)"/> 
        <polygon points="106 177, 49 130, 0 240, 0 370" fill="var(--green-02)"/> 
        <polygon points="106 260, 215 260, 215 280, 106 280" fill="var(--green-03)"/>
        <circle cx="40" cy="500" r="15" fill="var(--tan)"/>
        <circle cx="40" cy="600" r="15" fill="var(--tan)"/>
      </svg>
    </div>
    <div id="five-three">
      <svg width="236" height="708">
        <polygon points="55 65, 75 65, 75 280, 55 280" fill="var(--green-01)"/>
        <polygon points="60 280, 70 280, 70 600, 60 600" fill="var(--tan)"/>
        <polygon points="55 600, 75 600, 75 635, 55 635" fill="var(--green-01)"/>
        
        <polygon points="35 640, 115 640, 115 665, 35 665" fill="var(--green-04)"/>
        <path d="M640, -115 a1,1 0 0,1 25,0" fill="var(--green-04)" style="display: inline-block; transform: rotate(90deg)"/>
        <path d="M-665, 35 a1,1 0 0,1 25,0" fill="var(--green-04)" style="display: inline-block; transform: rotate(-90deg)"/>
        
        <polygon points="35 635, 115 635, 115 660, 35 660" fill="var(--green-01)"/>
        <path d="M635, -115 a1,1 0 0,1 25,0" fill="var(--green-01)" style="display: inline-block; transform: rotate(90deg)"/>
        <path d="M-660, 35 a1,1 0 0,1 25,0" fill="var(--green-01)" style="display: inline-block; transform: rotate(-90deg)"/>
<!--         ball -->
        <circle cx="130" cy="570" r="15" fill="var(--tan)"/>
<!--         top of club -->
        <circle cx="65" cy="65" r="10" fill="var(--green-05)"/>
        <circle cx="65" cy="65" r="4" fill="var(--green-01)"/>
        
        <polygon points="95 135, 215 135, 215 200, 95 200" fill="var(--tan)"/>
        <polygon points="105 140, 120 140, 120 155, 105 155" fill="var(--green-06)"/>
        <polygon points="105 160, 120 160, 120 175, 105 175" fill="var(--green-06)"/>
        <polygon points="105 180, 120 180, 120 195, 105 195" fill="var(--green-06)"/>
        
        
        <polygon points="130 140, 145 140, 145 155, 130 155" fill="var(--green-06)"/>
        <polygon points="130 160, 145 160, 145 175, 130 175" fill="var(--green-06)"/>
        <polygon points="130 180, 145 180, 145 195, 130 195" fill="var(--green-06)"/>
        
<!--         right side -->
        <polygon points="165 140, 180 140, 180 155, 165 155" fill="var(--green-06)"/>
        <polygon points="165 160, 180 160, 180 175, 165 175" fill="var(--green-06)"/>
        <polygon points="165 180, 180 180, 180 195, 165 195" fill="var(--green-06)"/>
        
        <polygon points="190 140, 205 140, 205 155, 190 155" fill="var(--green-06)"/>
        <polygon points="190 160, 205 160, 205 175, 190 175" fill="var(--green-06)"/>
        <polygon points="190 180, 205 180, 205 195, 190 195" fill="var(--green-06)"/>

        
        
        <polygon points="150 120, 160 120, 160 210, 150 210" fill="var(--green-01)"/>
        <polygon points="150 115, 160 115, 160 120, 150 120" fill="var(--tan)"/>
        
        <circle cx="155" cy="210" r="5" fill="var(--tan)"/>
        <circle cx="155" cy="210" r="2" fill="var(--green-04)"/>
        
        <polygon points="150 115, 160 115, 155 105" fill="var(--green-04)"/>
        
<!--         can -->
        <polygon points="125 290, 185 290, 185 300, 125 300" fill="var(--tan)"/>
        <polygon points="125 290, 125 300, 120 300" fill="var(--tan)"/>
        <polygon points="185 290, 185 300, 190 300" fill="var(--tan)"/>
        <polygon points="120 300, 190 300, 190 400, 120 400" fill="var(--green-01)"/>
        <polygon points="125 400, 185 400, 185 410, 125 410" fill="var(--tan)"/>
        <polygon points="120 400, 125 400, 125 410" fill="var(--tan)"/>
        <polygon points="185 400, 190 400, 185 410" fill="var(--tan)"/>
        
        <polygon points="120 380, 190 380, 190 390, 120 390" fill="var(--green-02)"/>
        <polygon points="120 310, 190 310, 190 320, 120 320" fill="var(--green-02)"/>
        
        <circle cx="155" cy="350" r="25" fill="var(--green-04)"/>
        
        <ellipse cx="155" cy="340" rx="3" ry="7" fill="var(--tan)"/>
        <ellipse cx="359" cy="130" rx="3" ry="7" fill="var(--tan)" style="display: inline-block; transform: rotate(45deg)"/>
        <ellipse cx="366" cy="138" rx="3" ry="7" fill="var(--tan)" style="display: inline-block; transform: rotate(45deg)"/>
        <ellipse cx="-140" cy="350" rx="3" ry="7" fill="var(--tan)" style="display: inline-block; transform: rotate(-45deg)"/>
        <ellipse cx="-147" cy="358" rx="3" ry="7" fill="var(--tan)" style="display: inline-block; transform: rotate(-45deg)"/>
        
      </svg>
    </div>
    <div id="five-four">
      <span id="h1">4th Annual<br/>
      AAFOpen<br/></span>
      <span id="h2">2016 Mini Golf <br/> Tournament<br/></span>
      <span id="h3">
        Thursday, June 9 <br/>
Boulder Creek <br/>
14208 “S” Street, Omaha <br/>
6:00 pm
      </span>
      <span id="h4">
        For more information visit the<br/>
aafomaha.org events page.
      </span>
      <img src="http://aafomaha.org/wp-content/themes/aaf/images/logo.png" alt="">
    </div>
  </div>
</div>

<a href="http://www.graphis.com/entry/dd8a987a-af2c-442c-9d4a-7271fe247010/" target="_blank">original</a>

@import url('https://fonts.googleapis.com/css?family=Questrial');

body {
  font-family: Helvetica;
}

:root {
  --green-01: #87B729;
  --green-02: #519E3B;
  --green-03: #008948;
  --green-04: #004F21;
  --green-05: #195B2C;
  --green-06: #D3E0B7;
  --tan: #FFF0CD;
}

.frame {
  display: grid;
  justify-content: center;
}

.container {
  width: 1180px;
  height: auto;
  display: grid;
  grid-template-columns: repeat(5, 236px);
  grid-template-rows: repeat(7, 236px);
}

#test {
  fill: var(--lime-green);
}

#one-one {
  background: #519E3B;
}

#one-two {
  background: #004F21;
}

#one-three {
  background: #FFF0CD;
}

#one-four {
  background: #008948;
}

#one-five {
  background: #87B729;
}

#two-one {
  background: #008948;
}

#two-two {
  background: #519E3B;
}

#two-three {
  background: #008948;
}

#two-four {
  background: #004F21;
}

#two-five {
  background: #FFF0CD;
}

#three-one {
  background: #004F21;
}

#three-two {
  background: #FFF0CD;
}

#three-three {
  background: #519E3B;
}

#three-four {
  background: #87B729;
}

#three-five {
  background: #008948;
}

#four-one {
  background: #008948;
}

#four-two {
  background: #519E3B;
}

#four-three {
  background: #004F21;
}

#four-four {
  background: #FFF0CD;
}

#four-five {
  background: #519E3B;
}

#five-one {
  background: #519E3B;
  grid-row: 5 / span 3;
}

#five-two {
  background: #87B729;
  grid-row: 5 / span 3;
}

#five-three {
  background: #008948;
  grid-row: 5 / span 3;
}

#five-four {
  background: #004F21;
  grid-row: 5 / span 3;
  grid-column: 4 / span 2;
  padding: 24px;
  position: relative;
}

#h1 {
  color: var(--tan);
  font-size: 48px;
  font-weight: bold;
  line-height: 1.1;
}

#h2 {
  color: var(--green-01);
  font-size: 48px;
  font-weight: bold;
  line-height: 1.1;
}

#h3 {
  display: inline-block;
  color: var(--tan);
  font-size: 24px;
  margin-top: 60px;
  font-weight: bold;
}

#h4 {
  display:block;
  color: var(--green-01);
  margin-top: 80px;
  font-weight: bold;
  font-size: 18px;
}

img {
  transform: scale(0.3);
  position: absolute;
  bottom: -60px;
  left: -140px;
  
}

a {
  font-size: 11px;
  color: black;
  float: right;
}