<body class="students">
<div class="bg-gradient">
<div class="wrapper">
<div class="content">
<div class="item logo">
<a href="#"><img src="http://www.smcm.edu/wp-content/themes/smcm-common/img/logo-white.png" /></a>
<h1 class="tagline">Make a <span>difference.</span> Your gift <span>counts.</span></h1>
</div>
<div class="item designation">
<img src="http://www.smcm.edu/wp-content/uploads/2016/10/giving-tuesday-logo-01.png" />
<h1>Choose your Designation</h1>
<a href="#" class="button gold">Designation One</a>
<a href="#" class="button teal">Designation Two</a>
<a href="#" class="button red">Designation Three</a>
<p><a href="#">Want to choose something else?</a></p>
</div>
</div>
</div>
<div class="footer">
<div class="item">
<p>Need Help?
<a href="#">FAQs</a> |
<a href="#">Privacy Policy</a>
</p>
</div>
<div class="item">
<p>St. Mary's College of Maryland has a 501 (c)(3), functionally integrated, Type 3 foundation.</p>
</div>
<div class="item">
<address>
Office of Advancement<br />
47645 College Drive<br />
St. Mary's City, MD, 20686
</address>
</div>
</div>
</div>
</body>// Brand fonts, icons, and colors
@import 'https://fonts.googleapis.com/css?family=Lato|Libre+Baskerville';
@import 'http://weloveiconfonts.com/api/?family=fontawesome';
// fonts
$serif:'Libre Baskerville',
serif;
$sans-serif:'Lato',
sans-serif;
// blues
$navy:#00205c;
$light-blue:#7D8DAC;
$pale-blue:#e4eef3;
// reds
$red:#B30000;
// golds
$gold:#FFCC00;
$orange-gold:#FFB81D;
$light-gold:#FBF0D2;
$mute-gold:#C29E57;
// grays
$medium-gray:#DFD9D5;
$warm-gray:#847870;
// greens
$dark-green:#15514F;
$green:#5DBF0D;
$teal:#248F8B;
$aqua:#0099A9;
$mute-green:#4A7877;
body {
font-family:$sans-serif;
background-size:cover;
&.campfire {
background:url(http://www.smcm.edu/wp-content/uploads/2016/10/gt1.jpg) no-repeat center center fixed;
}
&.students {
background:url(http://www.smcm.edu/wp-content/uploads/2016/10/gt2.jpg) no-repeat center center fixed;
}
&.fall {
background:url(http://www.smcm.edu/wp-content/uploads/2016/10/gt3.jpg) no-repeat center center fixed;
}
}
.bg-gradient {
width:100%;
height:50vh;
padding:3em 0 0 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6f8dad+0,6f8dad+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
.wrapper {
max-width:1000px;
margin:0 auto;
}
.content {
display:flex;
flex-flow:row nowrap;
justify-content:space-around;
align-items:flex-start;
}
.content .item {
width:35%;
padding:2.5em 5%;
border-radius:3px;
line-height:2em;
text-align:center;
background:rgba(255,255,255,.9);
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zm20.97 0l9.315 9.314-1.414 1.414L34.828 0h2.83zM22.344 0L13.03 9.314l1.414 1.414L25.172 0h-2.83zM32 0l12.142 12.142-1.414 1.414L30 .828 17.272 13.556l-1.414-1.414L28 0h4zM.284 0l28 28-1.414 1.414L0 2.544V0h.284zM0 5.373l25.456 25.455-1.414 1.415L0 8.2V5.374zm0 5.656l22.627 22.627-1.414 1.414L0 13.86v-2.83zm0 5.656l19.8 19.8-1.415 1.413L0 19.514v-2.83zm0 5.657l16.97 16.97-1.414 1.415L0 25.172v-2.83zM0 28l14.142 14.142-1.414 1.414L0 30.828V28zm0 5.657L11.314 44.97 9.9 46.386l-9.9-9.9v-2.828zm0 5.657L8.485 47.8 7.07 49.212 0 42.143v-2.83zm0 5.657l5.657 5.657-1.414 1.415L0 47.8v-2.83zm0 5.657l2.828 2.83-1.414 1.413L0 53.456v-2.83zM54.627 60L30 35.373 5.373 60H8.2L30 38.2 51.8 60h2.827zm-5.656 0L30 41.03 11.03 60h2.828L30 43.858 46.142 60h2.83zm-5.656 0L30 46.686 16.686 60h2.83L30 49.515 40.485 60h2.83zm-5.657 0L30 52.343 22.343 60h2.83L30 55.172 34.828 60h2.83zM32 60l-2-2-2 2h4zM59.716 0l-28 28 1.414 1.414L60 2.544V0h-.284zM60 5.373L34.544 30.828l1.414 1.415L60 8.2V5.374zm0 5.656L37.373 33.656l1.414 1.414L60 13.86v-2.83zm0 5.656l-19.8 19.8 1.415 1.413L60 19.514v-2.83zm0 5.657l-16.97 16.97 1.414 1.415L60 25.172v-2.83zM60 28L45.858 42.142l1.414 1.414L60 30.828V28zm0 5.657L48.686 44.97l1.415 1.415 9.9-9.9v-2.828zm0 5.657L51.515 47.8l1.414 1.413 7.07-7.07v-2.83zm0 5.657l-5.657 5.657 1.414 1.415L60 47.8v-2.83zm0 5.657l-2.828 2.83 1.414 1.413L60 53.456v-2.83zM39.9 16.385l1.414-1.414L30 3.658 18.686 14.97l1.415 1.415 9.9-9.9 9.9 9.9zm-2.83 2.828l1.415-1.414L30 9.313 21.515 17.8l1.414 1.413 7.07-7.07 7.07 7.07zm-2.827 2.83l1.414-1.416L30 14.97l-5.657 5.657 1.414 1.415L30 17.8l4.243 4.242zm-2.83 2.827l1.415-1.414L30 20.626l-2.828 2.83 1.414 1.414L30 23.456l1.414 1.414zM56.87 59.414L58.284 58 30 29.716 1.716 58l1.414 1.414L30 32.544l26.87 26.87z' fill='%23000000' fill-opacity='0.035' fill-rule='evenodd'/%3E%3C/svg%3E");
&.logo {
background:transparent;
padding:0;
img {
max-width:100%;
}
}
&.designation img {
max-width:80%;
}
p {
}
a {
text-decoration:none;
color:$aqua;
}
h1 {
border-top: 4px double #999;
font-size: 2.5em;
line-height:1em;
font-weight:bold;
margin: .25em 0 .75em 0;
padding:.5em 0 0 0;
&.tagline {
color:#fff;
font-weight:normal;
text-shadow:0 0 5px rgba(0,0,0,.25);
line-height:1em;
text-align:center;
margin-top:3em;
border:3px solid rgba(255,255,255,.15);
border-radius:3px;
padding:1em;
span {
font-style:italic;
}
}
}
.button {
text-decoration:none;
border-radius:3px;
padding:1em;
display:block;
text-align:center;
font-size:1.5em;
margin-bottom:.5em;
text-shadow:0 -1px 1px rgba(0,0,0,.35);
border-bottom:2px solid rgba(215,215,215,1);
&.gold {
background-color: $mute-gold;
color:#fff;
}
&.teal {
background-color: $teal;
color:#fff;
}
&.red {
background-color: $red;
color:#fff;
}
&.gold,
&.teal,
&.red {
&:hover {
filter:brightness(1.15);
}
}
}
}
.footer {
padding:2em 5em;
margin-top:3em;
color:#fff;
display:flex;
flex-flow:column wrap;
justify-content:space-around;
text-shadow:0 0 5px rgba(0,0,0,.75);
line-height:1.5em;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.75) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
a {
color:$gold;
text-decoration:none;
}
address {
font-style:italic;
}
.item {
margin-bottom:.5em;
}
}
@media only screen and (max-width: 800px) {
.content {
flex-flow:column nowrap;
align-items:center;
.item {
width:80%;
h1.tagline {
margin:0 0 .5em 0;
border:0;
padding:0;
}
}
}
}
@media only screen and (max-width: 500px) {
body{
background:#eee;
&.campfire,
&.students,
&.fall {
background:#eee;
}
}
.content .item h1.tagline {
padding:0;
margin:0 0 .5em 0;
border:none;
text-shadow:none;
}
.footer {
padding:2em;
background:transparent;
}
.footer .item {
color:#666;
text-shadow:none;
a {
color:$teal;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.