<div class="introduction">
      <p class="site-title">Innovatively creating new knowledge and leading scientists<br><br> The Faculty of Science comprises thirteen Departments, namely: Academy of Computer Science and Software Engineering; Applied Chemistry; App​​​lied Physics and Engineering Mathematics;
        Biochemistry; Biotechnology and Food Technology; Botany and Plant Biotechnology; Chemistry; Geography, Environmental Management & Energy Studies; Geology; Physics; Pure and Applied Mathematics; Statistics; Zoology. Non-academic units housed in
        the Faculty include SPECTRUM (an Analytical Research Facility), the Faculty's Workshop and the Glass Blowing Unit<br><br> In addition the Faculty has a regular Newsletter and is also involved in Community and Outreach Programmes<br><br> We offer
        excellent bursaries for top achievers in Science. Visit the UJ Winter School Science Workshops</p><br></div>


<div class="container">
  <div class="row">

    <article class="col-md-4 col-lg-3">
      <div class="card-content">
        <a class="spectrum-a" href="http://uj.ac.za"><img class="spectrum1" src="https://image.freepik.com/free-vector/science-elements-with-test-tubes-and-molecules_23-2147491185.jpg" alt="meow">
        <h4 class="spectrum-h2">Spectrum</h4>
          <p>Visit our world-class analytical facility for South African scientists, Spectrum</p></a>
      </div>
      <!-- .card-content -->
    </article>
    <!-- .card -->

    <article class="col-md-4 col-lg-3">
      <div class="card-content">
        <a href="http://uj.ac.za"><img class="spectrum1" src="https://image.freepik.com/free-vector/science-elements-with-test-tubes-and-molecules_23-2147491185.jpg" alt="meow">
        <h4 class="spectrum-h2">Study With Us</h4>
          <p>Visit our world-class analytical facility for South African scientists, Spectrum</p></a>
      </div>
      <!-- .card-content -->
      </a>
    </article>
    <!-- .card -->

    <article class="col-md-4 col-lg-3">
      <div class="card-content">
        <a href="http://uj.ac.za"><img class="spectrum1" src="https://image.freepik.com/free-vector/science-elements-with-test-tubes-and-molecules_23-2147491185.jpg" alt="meow">
        <h4 class="spectrum-h2">Soweto Science Centre</h4>
        <p>Visit our world-class analytical facility for South African scientists, Spectrum</p></a>
      </div>
      <!-- .card-content -->
      </a>
    </article>
    <!-- .card -->

    <article class="col-md-4 col-lg-3">
      <div class="card-content">
        <a href="http://uj.ac.za"><img class="spectrum1" src="https://image.freepik.com/free-vector/science-elements-with-test-tubes-and-molecules_23-2147491185.jpg" alt="meow">
        <h4 class="spectrum-h2">Upcoming events</h4>
        <p>Visit our world-class analytical facility for South African scientists, Spectrum</p></a>
      </div>
      <!-- .card-content -->
      </a>
    </article>
    <!-- .card -->

  </div>
</div>
div.introduction {
    padding: 1em;
    background: #f5f5f5;
  	box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
}

/* Card Based Layout - Base styles */

p.site-title {
	color: #000000;
}

article.col-md-4 col-lg-3 {
	background: #f5f5f5;
  margin-top: 1em;	
	margin-bottom: 2em;
  box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
}

div.card-content {
  background: #f5f5f5;
  padding: 0.5em;
  margin-top: 1em;	
	margin-bottom: 2em;
  box-shadow: 3px 3px 8px hsl(0, 0%, 70%);
}

div.card-content h3 {
	margin-bottom: 0.5em;
	font-weight: normal;
}

div.card-content p {
	font-size: 95%;
}

img.spectrum1 {
  width: 100%;
  height: auto;
}

div a, a:hover {
  text-decoration: none;
}

div a:hover {
  opacity: 0.8;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.