Page Information

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<style>
.row {
    width: 100%;
    margin-left: -15px;
    margin-top: 0;
    margin-bottom: 0;
}
.row:before, .row:after {
    content: " ";
    display: table;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.row:after {
    clear: both;
}
.column, .columns {
	position: relative;
    padding-left: 0.9375rem;
    width: 100%;
    float: left;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
@media only screen and (min-width: 64.063em) {
.large-3 {
    	width: 33%;
	}
	.large-6 {
    	width: 50%;
	}

	.large-12 {
    	width: 100%;
	}

 .column, .columns {
    	position: relative;
    	padding-left: 0.9375rem;
    	float: left;
	}
}
@media only screen and (min-width: 40.063em) {
	.column, .columns {
    	position: relative;
    	padding-left: 0.9375rem;
    	float: left;
		margin-bottom: 15px;
	}
}
[class*="column"] + [class*="column"]:last-child {
    float: right;
}
.why-change {
	background: #ca4766; 
	height: 175px;
}
.consultation {
	background: #96281B; 
	height:	175px;
}
.news {
	background: #c4c4c4; 
	height:	175px;
}
.say {
	background: #95bf59; 
	height:	175px;
}
.faqs {
	background: #c84545; 
	height:	175px;
}
.contact {
	background: #5fa8d7; 
	height:	175px;
}
.box-text {
	position: absolute;
    bottom: 20px;
    color: #ffffff;
    font-size: 24px;
    font-weight: 100;
    left: 30px;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    border-bottom: 3px solid;
    line-height: 45px;
}
</style>
 
<div class="row">

<div class="large-12 columns">
<a href="https://www.sunderland.ac.uk/about/accommodation/" target="_blank"><div class="why-change"><div class="box-text">Student Accommodation</div>
</div></a>
</div>
<div class="large-6 columns">
<a href="https://www.sunderland.ac.uk/about/our-campuses/" target="_blank"><div class="consultation"><div class="box-text">Two Campuses</div>
</div></a>
</div>

<div class="large-6 columns">
<a href="https://www.sunderland.ac.uk/help/contact-us/getting-here/" target="_blank"><div class="faqs"><div class="box-text">How to Get Here</div>
</div></a>
</div>

<!-- <div class="large-6 columns">
<a href="https://my.sunderland.ac.uk/display/CIR/News" target="_top"><div class="news"><div class="box-text">News</div></div></a>
</div> -->

<!-- <div class="large-6 columns">
<a href="https://my.sunderland.ac.uk/display/CIR/Your+Ideas" target="_top">
<div class="say"><div class="box-text">Your ideas</div></div></a>
</div> -->

<!-- <div class="large-6 columns">
<a href="https://my.sunderland.ac.uk/display/CIR/Frequently+Asked+Questions" target="_top"><div class="faqs"><div class="box-text">FAQs</div></div></a>
</div> -->

<!-- <div class="large-6 columns">
<a href="https://my.sunderland.ac.uk/display/CIR/Change+toolkit" target="_top"><div class="contact"><div class="box-text">Change toolkit</div></div></a>
</div> -->

 </div> 

...