HTML

									
										<div class="wrap">
<ul class="blockList">
	
	<!-- Background images inline for ease of CMS updating -->						
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-1.jpg), linear-gradient(to right, #7b3aff, #258bda);">
			<a href="#">Business</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-2.jpg), linear-gradient(to right, #258bda, #c92bbc);">
			<a href="#">Criminal Justice</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-3.jpg), linear-gradient(to right, #c92bbc, #da9c4b);">
			<a href="#">Education</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-4.jpg), linear-gradient(to right, #da9c4b, #55c729);">
			<a href="#">Health</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-1.jpg), linear-gradient(to right, #55c729, #aa3d07);">
			<a href="#">History, Law &amp; Political Science</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-2.jpg), linear-gradient(to right, #aa3d07, #7b3aff);">
			<a href="#">Language &amp; Communication</a>
		</div>
	</li>	
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-3.jpg), linear-gradient(to right, #7b3aff, #258bda);">
			<a href="#">Performing Arts</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-4.jpg), linear-gradient(to right, #258bda, #c92bbc);">
			<a href="#">Psychology, Social Work &amp; Sociology</a>
		</div>
	</li>
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-1.jpg), linear-gradient(to right, #c92bbc, #da9c4b);">
			<a href="#">Science, Math &amp; Computer Science</a>
		</div>
	</li>	
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-2.jpg), linear-gradient(to right, #da9c4b, #55c729);">
			<a href="#">Theology</a>
		</div>
	</li>	
	
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-3.jpg), linear-gradient(to right, #55c729, #aa3d07);">
			<a href="#">Visual Arts</a>
		</div>
	</li>	
				
</ul>
		
</div>	
									
								

HTML

									
										<ul class="multiBlockList group">
			
	<!-- Background images inline for ease of CMS updating -->					
	<li class="outView">
		<div style="background-image: url(/images/jpg/block-ex-1.jpg), linear-gradient(to right, #7b3aff, #258bda);">
			<h3><a href="#">Undergraduate Admissions</a></h3>
			<ul>
				<li><a href="#">Requirements</a></li>
				<li><a href="#">Meet Your Counselor</a></li>
			</ul>					
		</div>
	</li>
	
	<li class="outView">		
		<div style="background-image: url(/images/jpg/block-ex-2.jpg), linear-gradient(to right, #258bda, #c92bbc);">
			<h3><a href="#">Graduate Admissions</a></h3>
			<ul>
				<li><a href="#">Requirements</a></li>
				<li><a href="#">Meet Your Counselor</a></li>
			</ul>
		</div>
	</li>
	
	<li class="outView">		
		<div style="background-image: url(/images/jpg/block-ex-3.jpg), linear-gradient(to right, #c92bbc, #da9c4b);">
			<h3><a href="#">Adult Degree Programs</a></h3>
			<ul>
				<li><a href="#">Requirements</a></li>
				<li><a href="#">Meet Your Counselor</a></li>
			</ul>
		</div>
	</li>
	
	<li class="outView">		
		<div style="background-image: url(/images/jpg/block-ex-4.jpg), linear-gradient(to right, #da9c4b, #55c729);">
			<h3><a href="#">For Transfer Students</a></h3>
			<ul>
				<li><a href="#">Requirements</a></li>
				<li><a href="#">Meet Your Counselor</a></li>
			</ul>
		</div>		
	</li>	
			
</ul>

									
								

HTML

									
										<section class="figList">
	<h3>Campus Housing</h3>
	
	<ul class="group">			
		<li>
			<a href="#" title="Brownlee Hall">
				<figure class="alt">
					<img src="/images/tmp/brownlee.jpg" alt="Brownlee Hall" />				
					<figcaption>Brownlee Hall</figcaption> 
				</figure>
			</a>
		</li>
		
		<li>
			<a href="#" title="Canevin Lowe ">
				<figure class="alt">
					<img src="/images/tmp/canevin-lowe.jpg" alt="Canevin Lowe " />				
					<figcaption>Canevin Lowe </figcaption> 
				</figure>
			</a>
		</li>
		
		<li>
			<a href="#" title="Dechantal">
				<figure class="alt">
					<img src="/images/tmp/dechantal.jpg" alt="Dechantal" />				
					<figcaption>Dechantal</figcaption> 
				</figure>
			</a>
		</li>
		
		<li>
			<a href="#" title="Farrell">
				<figure class="alt">
					<img src="/images/tmp/farrell.jpg" alt="Farrell" />				
					<figcaption>Farrell</figcaption> 
				</figure>
			</a>
		</li>					
	</ul>
	
	<p class="center"><a href="#" class="but-c"><span>More Housing</span></a></p>	
</section>