title: Making square boxes in html and css
body: <p>I have created a <a href="https://jsfiddle.net/58f80ahr/2/" rel="nofollow noreferrer">webpage</a> (at present it will work in desktop mode only) by seeing an <a href="https://postimg.org/image/4xk1yzwod/" rel="nofollow noreferrer">image</a>. </p>
  
  <p>At this moment, I am able to create nearly 40-50% of the webpage but I am not sure how to create 6 square boxes (ADDITIONAL SPORT, COLLEGIATE, INDIVIDUAL, PROFESSIONAL, ENTERTAINMENT, COMMERCIAL) beneath the background image(where the guy is standing). I have included all my CSS and HTML codes in the fiddle. I tried creating boxes but automatically it is going over the top of an image(not sure why). </p>
  
  <p>I tried putting the following set of codes beneath the nav section but unfortunately it didn't work.</p>
  
  <pre><code>&lt;div class="squares"&gt;
  &lt;p class="square1"&gt;ADDITIONAL SPORT&lt;/p&gt;
  &lt;p class="square2"&gt;COLLEGIATE&lt;/p&gt;
  &lt;p class="square3"&gt;INDIVIDUAL&lt;/p&gt;
  &lt;p class="square4"&gt;PROFESSIONAL&lt;/p&gt;
  &lt;p class="square5"&gt;Additional Sport&lt;/p&gt;
  &lt;p class="square6"&gt;Additional Sport&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Let me know what I am doing wrong.</p>