wrapping div boxes - with buttons and links

by Jordan Dayton

HTML

<div id="button-wrapper">

  <div class="button-container">
    <p>
      <a href="https://docs.google.com/presentation/d/18-PkW3EgvyLcZOT9hnrhFHNRLjtQ1V-lNTRG-UH4dL4/export/pdf" target="_blank"><img src="https://s3.amazonaws.com/thinkific/file_uploads/25327/images/bcc/458/e53/canopy_course_slides.png" class="button" alt="Download Course Slides" style="height:55px; width:55px;"></a>
    </p>
    <a href="https://docs.google.com/presentation/d/18-PkW3EgvyLcZOT9hnrhFHNRLjtQ1V-lNTRG-UH4dL4/export/pdf" target="_blank"><p>
      Download<br>Course Slides
      </p></a>
  </div>

  <div class="button-container">
    <p>
      <a href="https://docs.google.com/document/d/1FfjPAQV0TvtZ0NvnNJMjkDL8Ek0GBxX3Ce_Uv-KuDb0/edit#" target="_blank"><img src="https://s3.amazonaws.com/thinkific/file_uploads/25327/images/d58/460/25b/canopy_faq.png" alt="View Courses FAQ" class="button" style="height:55px; width:55px;"></a>
    </p>
    <a href="https://docs.google.com/document/d/1FfjPAQV0TvtZ0NvnNJMjkDL8Ek0GBxX3Ce_Uv-KuDb0/edit#" target="_blank"><p>
      View the<br>Course FAQ
      </p></a>
  </div>

  <div class="button-container">
    <p>
      <a href="https://www.canopytax.com/community/" target="_blank"><img src="https://s3.amazonaws.com/thinkific/file_uploads/25327/images/185/d76/adc/canopy_discussions.png" class="button" alt="Join the Community Discussion" style="height:55px; width:55px;"></a>
    </p>
    <a href="https://www.canopytax.com/community/" target="_blank"><p>
      Join the Community Discussion
      </p></a>
  </div>

  <div class="button-container">
    <p>
      <a href="http://canopy.thinkific.com/" target="_blank"><img src="https://s3.amazonaws.com/thinkific/file_uploads/25327/images/cc8/87a/ac7/all_canopy_courses.png" class="button" alt="View More Free Courses" style="height:55px; width:55px;"></a>
    </p>
    <a href="http://canopy.thinkific.com/" target="_blank"><p>
      View All<br>Free Courses
      </p></a>
  </div>

</div>

CSS

body {
	  color: #5e5e5e;
	  font: 13px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	}
	
	#button-wrapper {
	  text-align: center;
	  margin-top: -16px;
	}
	
	.button-container {
	  display: inline-block;
	  width: 210px;
	  height: 160px;
	  padding: 5px;
	  vertical-align: top;
	  font-size: 16px;
	  line-height: 1.5;
	}
	
	p {
	  color: #3399FF;
	  text-align: center;
	  font-weight: bold;
	}
	
	a:link {
	  color: #0080CC;
	  text-decoration: none;
	}
	
	a:hover {
	  color: #58585B;
	  text-decoration: underline;
	}
	
	a:visited {
	  color: #0080CC;
	}
	
	img.button:hover {
	  filter: Alpha(opacity=80);
	  -moz-opacity: 0.8;
	  opacity: 0.8;
	  cursor: pointer;
	  border-radius: 50%;
	  box-shadow: 0px 0px 50px #b3b3b3;
	  transition: box-shadow 0.2s ease-in-out;
	}