Highlight Boxes

Digital_Services.html

  <style scoped="scoped" type="text/css">
	
	div.box-container {
	  max-width: 900px;
	  padding: 0px;
	}
	div.box {
	  display: inline-block;
	  margin: 14px 0 0 0;
	  padding: 20px;
	  max-width: 27%;
	  min-width: 200px;
	  border-radius: 7px;
	}
	div h3.box-label {
	  color: white;
	  font-size: 34px;
	  text-align: center;
	  text-shadow:;
	}
	#left {
	  margin-right: 2.28%;
	  background-size: cover;
	  background-repeat: no-repeat;
	}
	#middle {
	  margin-right: 2.28%;
	  background-size: cover;
	  background-repeat: no-repeat;
	}
	#right {
	  background-size: cover;
	  background-repeat: no-repeat;
	}
	div p.box-description {
	  color: white;
	  text-align: center;
	  font-weight: normal;
	  text-shadow:;
	}
	hr.box-rule {
	  height: 0;
	  border: 0;
	  border-top: 1px dotted white;
	}
	
  </style>
  <div class="box-container">
	  <!--Equipment Checkout--><a href="index.php?option=com_k2&amp;view=item&amp;cid=37">
  <div class="box" id="left" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Equipment Checkout</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Poster Printing--><a href="#">
  <div class="box" id="middle" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Poster Printing</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Website Development &amp; Maintenance--><a href="#">
  <div class="box" id="right" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Website Development &amp; Maintenance</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Audio Recording--><a href="#">
  <div class="box" id="left" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Audio Recording</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Photography--><a href="#">
  <div class="box" id="middle" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Photography</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Videography--><a href="#">
  <div class="box" id="right" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Videography</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Graphic Design--><a href="#">
  <div class="box" id="left" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Graphic Design</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Workshops--><a href="#">
  <div class="box" id="middle" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Workshops</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
	  <!--Consultation &amp; Training--><a href="#">
  <div class="box" id="right" style="background-image: url('images/opp.png');">
  <h3 class="box-label">Consultation &amp; Training</h3>
  <hr class="box-rule" />
  <p class="box-description">Lorem ipsum dolor sit amet, sit modus iudico recteque id, mea ne partem facilisi invenire</p>
  </div>
  </a>
  </div>

hightlight_boxes_1.html

<style scoped="scoped" type="text/css">

	div.box-container {
		max-width: 900px;
		padding: 0px;
	}
	div.box {
		display: inline-block;
		margin: 14px 0 0 0;
		padding: 20px;
		max-width: 27%;
		min-width: 200px;
		border-radius: 7px;
	}
	div h3.box-label {
		color: white;
		font-size: 34px;
		text-align: center;
		text-shadow: -0.07em 0.07em 0.3em rgba(0, 0, 0, 0.8);
	}
	#left {
		margin-right: 2.28%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#middle {
		margin-right: 2.28%;
		background-size: cover;
		background-repeat: no-repeat;
	}
	#right {
		background-size: cover;
		background-repeat: no-repeat;
	}
	div p.box-description {
		color: white;
		text-align: center;
		font-weight: normal;
		text-shadow: -0.06em 0.06em 0.3em rgba(0, 0, 0, 0.8);
	}
	hr.box-rule {
		height: 0;
		border: 0;
		border-top: 1px dotted white;
	}

</style>
<div class="box-container">

  <a href="#">
	<div class="box" id="left" style="background-image: url('');">
	  <h3 class="box-label"><!--Box Title--></h3>
	  <hr class="box-rule" />
	  <p class="box-description"><!--Box Description--></p>
	</div>
  </a>

  <a href="#">
	<div class="box" id="middle" style="background-image: url('');">
	  <h3 class="box-label"><!--Box Title--></h3>
	  <hr class="box-rule" />
	  <p class="box-description"><!--Box Description--></p>
	</div>
  </a>

  <a href="<!--Link Here-->">
	<div class="box" id="right" style="background-image: url('');">
	  <h3 class="box-label"><!--Box Title--></h3>
	  <hr class="box-rule" />
	  <p class="box-description"><!--Box Description--></p>
	</div>
  </a>

</div>