UCLA--OpenUCLA__landing-pg

index.html

<div class="ou-container ou-container--white">

	<nav class="ou-nav">
		<a href="https://www.library.ucla.edu/">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/ucla-library-logo-blue_resized.svg" alt="UCLA Library Logo" class="ou-nav__logos">
		</a>
		<a href="https://100.ucla.edu/initiatives" target="_blank">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/ucla_100_logo_blue.png" alt="UCLA 100 Centennial Logo" class="ou-nav__logos">
		</a>
	</nav>

	<header class="ou-header">
		<span role="img" aria-label="Video projection of Royce Hall"> </span>
		<div class="ou-header-label">
			<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/label-openucla.svg" alt="OpenUCLA: A Centennial Initiative">
		</div>
	</header>

	<main class="ou-content">
		<!-- WHAT IS OPENUCLA? -->
		<section class="ou-intro">
			<div class="ou-intro__wrapper--lead">
				<p class="ou-intro__lead--text">OpenUCLA seeks to create a better future by removing barriers to research and scholarship. We commit to making UCLA’s research and collections globally accessible, providing affordable resources to the UCLA community, and supporting teaching, learning, and research.</p>
				<a href="#" class="ou-intro__lead--link anime-link anime-link--blue">Frequently Asked Questions about OpenUCLA</a>
			</div>
			<div class="ou-intro__wrapper--list" role="navigation" aria-label="Page Sections">
				<ul class="ou-intro__list">
					<li class="ou-intro__list--item"><a href="#initiatives" class="anime-link anime-link--white">Initiatives</a></li>
					<li class="ou-intro__list--item"><a href="#events" class="anime-link anime-link--white">Events</a></li>
					<li class="ou-intro__list--item"><a href="#portals" class="anime-link anime-link--white">Open Access Portals</a></li>
					<li class="ou-intro__list--item"><a href="#news" class="anime-link anime-link--white">News & Resources</a></li>
					<li class="ou-intro__list--item"><a href="#media" class="anime-link anime-link--white">Media Experts</a></li>
				</ul>
			</div>
		</section>

		<!-- INITIATIVES -->
		<section class="ou-initiatives" id="initiatives" role="heading" aria-level="2">
			<h2 class="ou-subheading">Initiatives</h2>
			<p class="ou-lead">OpenUCLA impacts the entire Bruin scholarly community and beyond.</p>
			<div class="ou-inner-container ou-items-container">
				<!-- Initiative Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--initiatives" role="img" aria-label="Label for OpenUCLA Affordable Course Materials Initiative (ACMI) Awards"></div>
					<p class="ou-item__text">Two UCLA faculty members will receive grants of $5,000 each to develop and release their proposals for Open Educational Resources.</p>
					<a href="" class="ou-item__link">Learn more about the ACMI Awards</a>
				</div>
				<!-- Initiative Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--initiatives" role="img" aria-label="Label for OpenUCLA Affordable Course Materials Initiative (ACMI) Awards"></div>
					<p class="ou-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
					<a href="" class="ou-item__link">Learn more about Lorem Ipsum</a>
				</div>
				<!-- Initiative Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--initiatives" role="img" aria-label="Label for OpenUCLA Affordable Course Materials Initiative (ACMI) Awards"></div>
					<p class="ou-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<a href="" class="ou-item__link">Learn more about Lorem Ipsum</a>
				</div>
				<!-- Initiative Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--initiatives" role="img" aria-label="Label for OpenUCLA Affordable Course Materials Initiative (ACMI) Awards"></div>
					<p class="ou-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<a href="" class="ou-item__link">Learn more about Lorem Ipsum</a>
				</div>
			</div>
		</section>

		<!-- EVENTS -->
		<section class="ou-events" id="events" role="heading" aria-level="2">
			<h2 class="ou-subheading">Events</h2>
			<div class="ou-inner-container ou-events-container">
				<!-- Event Item -->
				<div class="ou-event__wrapper">
					<div class="ou-event__image-wrapper">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/open-ucla-kickoff_1000.jpg" alt="" class="ou-event__image">
					</div>
					<div class="ou-event__body">
						<div class="ou-event__date">
							<p class="ou-event__month">Mar</p>
							<p class="ou-event__day">20</p>
						</div>
						<p class="ou-event__desc">Last Fast Ride: The Life, Love, and Death of a Punk Goddess</p>
					</div>
				</div>
				<!-- Event Item -->
				<div class="ou-event__wrapper">
					<div class="ou-event__image-wrapper">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/open-ucla-kickoff_1000.jpg" alt="" class="ou-event__image">
					</div>
					<div class="ou-event__body">
						<div class="ou-event__date">
							<p class="ou-event__month">Mar</p>
							<p class="ou-event__day">21</p>
						</div>
						<p class="ou-event__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
					</div>
				</div>
				<!-- Event Item -->
				<div class="ou-event__wrapper">
					<div class="ou-event__image-wrapper">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/open-ucla-kickoff_1000.jpg" alt="" class="ou-event__image">
					</div>
					<div class="ou-event__body">
						<div class="ou-event__date">
							<p class="ou-event__month">Mar</p>
							<p class="ou-event__day">22</p>
						</div>
						<p class="ou-event__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
					</div>
				</div>
				<!-- Event Item -->
				<div class="ou-event__wrapper">
					<div class="ou-event__image-wrapper">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/open-ucla-kickoff_1000.jpg" alt="" class="ou-event__image">
					</div>
					<div class="ou-event__body">
						<div class="ou-event__date">
							<p class="ou-event__month">Mar</p>
							<p class="ou-event__day">23</p>
						</div>
						<p class="ou-event__desc">Lorem ipsum dolor sit amet, consectetur</p>
					</div>
				</div>
				<!-- Event Item - Past -->
				<div class="ou-event__wrapper">
					<p class="ou-event__past"><a href="" class="ou-event__past--link">View Past OpenUCLA Events</a></p>
				</div>
			</div>
		</section>

		<!-- OPEN ACCESS PORTALS -->
		<section class="ou-portals" id="portals" role="heading" aria-level="2">
			<h2 class="ou-subheading">Open Access Portals</h2>
			<p class="ou-lead">Visit some of the UCLA Library's most robust - and growing - open access repositories, from campus images, to global ephemera to peer-reviewed publications.</p>
			<div class="ou-inner-container ou-items-container">
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Over 10,000 images from the UCLA University Archives Photographic Reference collection, available to download and use with citation.</p>
					<a href="" class="ou-item__link">View the Photographic Archives</a>
				</div>
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
					<a href="" class="ou-item__link">Descriptive Portal Link</a>
				</div>
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p>
					<a href="" class="ou-item__link">Descriptive Portal Link</a>
				</div>
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</p>
					<a href="" class="ou-item__link">Descriptive Portal Link</a>
				</div>
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
					<a href="" class="ou-item__link">Descriptive Portal Link</a>
				</div>
				<!-- Portal Item -->
				<div class="ou-item__wrapper">
					<div class="ou-item__header ou-item__header--oa-portals" role="img" aria-label="Label for Picturing UCLA: The Visual History of UCLA"></div>
					<p class="ou-item__text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
					<a href="" class="ou-item__link">Descriptive Portal Link</a>
				</div>
			</div>
		</section>

		<!-- NEWS & RESOURCES -->
		<section class="ou-news" id="news" role="heading" aria-level="2">
			<h2 class="ou-subheading">News & Resources</h2>
			<div class="ou-inner-container ou-news-container">
				<a href="" class="ou-news__link">UC Office of Scholarly Communications - Elsevier Updates</a>
				<a href="" class="ou-news__link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</a>
				<a href="" class="ou-news__link">Duis aute irure dolor in reprehenderit in</a>
				<a href="" class="ou-news__link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</a>
				<a href="" class="ou-news__link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</a>
				<a href="" class="ou-news__link ou-news__link--more">More Open Access News and Resources</a>
			</div>
		</section>

		<!-- MEDIA EXPERTS -->
		<section class="ou-media-bio" id="media" role="heading" aria-level="2">
			<h2 class="ou-subheading">Media Experts</h2>
			<div class="ou-inner-container ou-media-bio-container">
				<!-- Media Expert Card-->
				<a href="https://www.library.ucla.edu/staff/virginia-steel" target="_blank" class="bio-card-wrapper">
					<div class="bio-img-wrapper">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/ginny.jpg" alt="" class="bio-img">
					</div>
					<div class="bio-text-wrapper">
						<p class="bio-name">Virginia Steel</p>
						<p class="bio-title">Norman and Armena Powell University Librarian</p>
					</div>
				</a>
				<!-- Media Expert Card-->
				<a href="https://www.library.ucla.edu/staff/alison-scott" target="_blank" class="bio-card-wrapper">
					<div class="bio-img-wrapper">
						<img src="https://www.library.ucla.edu/sites/default/files/styles/staff_profile_photo/public/Scott_Alison_011.jpg?itok=X1HTLMen&c=2af1b96b199cd3e82eeacf946935d04a" alt="" class="bio-img">
					</div>
					<div class="bio-text-wrapper">
						<p class="bio-name">Allison Scott</p>
						<p class="bio-title">Associate University Librarian for Collections and Scholarly Communication</p>
					</div>
				</a>
				<!-- Media Expert Card-->
				<a href="" target="_blank" class="bio-card-wrapper">
					<div class="bio-img-wrapper">
						<img src="https://via.placeholder.com/400x450" alt="" class="bio-img">
					</div>
					<div class="bio-text-wrapper">
						<p class="bio-name">Mimi Tarn</p>
						<p class="bio-title">Associate Professor, Family Medicine, David Geffen School of Medicine</p>
					</div>
				</a>
				<!-- Media Expert Label-->
				<a href="https://www.library.ucla.edu/staff/martin-j-brennan" target="_blank" class="bio-label-wrapper">
					<div class="bio-label-text-wrapper">
						<p class="bio-name">Marty Brennan</p>
						<p class="bio-title">Scholarly Communication Education Librarian</p>
					</div>
				</a>
				<!-- Media Expert Label -->
				<a href="https://www.library.ucla.edu/staff/jennifer-chan" target="_blank" class="bio-label-wrapper">
					<div class="bio-label-text-wrapper">
						<p class="bio-name">Jennifer Chan</p>
						<p class="bio-title">Scholarly Communication Librarian</p>
					</div>
				</a>
				<!-- Media Expert Label -->
				<a href="https://www.library.ucla.edu/staff/matthew-vest" target="_blank" class="bio-label-wrapper">
					<div class="bio-label-text-wrapper">
						<p class="bio-name">Matthew Vest</p>
						<p class="bio-title">Music Inquiry and Research Librarian</p>
					</div>
				</a>
			</div>
		</section>
	</main>
</div>

<footer class="ou-footer-wrapper__primary">
	<div class="ou-container">
		<div class="ou-footer__primary">
			<a href="https://www.library.ucla.edu/"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/ucla-library-logo-wht2.svg" alt="UCLA Library Logo" class="ou-footer__logo"></a>
			<p class="ou-footer__text">The UCLA Library creates a vibrant nexus of ideas, collections, expertise, and spaces in which users illuminate solutions for local and global challenges. We constantly evolve to advance UCLA’s research, education, and public service mission by empowering and inspiring communities of scholars and learners to discover, access, create, share, and preserve knowledge.</p>
			<ul class="ou-footer__list">
				<li><a href="https://www.library.ucla.edu/about" class="ou-footer__list-link">About the UCLA Library</a></li>
				<li><a href="https://www.library.ucla.edu/about/giving-library" class="ou-footer__list-link">Giving to the UCLA Library</a></li>
				<li><a href="http://www.ucla.edu/" class="ou-footer__list-link">UCLA Homepage</a></li>
				<li><a href="https://100.ucla.edu/initiatives" class="ou-footer__list-link">UCLA Centennial Celebration</a></li>
			</ul>
		</div>
	</div>
</footer>

<footer class="ou-footer-wrapper__secondary">
	<div class="ou-container">
		&copy; 2014–2020 UC Regents, Creative Commons Attribution 4.0
	</div>
</footer>

style.scss

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

//******** Resets ********//
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
	margin: 0;
	padding: 0;
}

//******** Colors ********//
$ucla-blue: #2774ae;
$ucla-darker-blue: #005587;
$ucla-darkest-blue: #003b5c;
$ucla-lighter-blue: #8bb8e8;
$ucla-lightest-blue: #c3d7ee;
$ucla-gold: #ffd100;
$ucla-darker-gold: #ffc72c;
$ucla-darkest-gold: #ffb81c;
$text-black: #333333;
$white: #ffffff;

//******** Typography ********//
body {
	color: $text-black;
	font-family: "Helvetica";
}

.ou-subheading {
	color: $ucla-darker-blue;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-bottom: 1px solid $ucla-lightest-blue;
	padding-bottom: 0.75rem;
}
@media (min-width: 375px) {
	.ou-subheading {
		font-size: 1.5rem;
	}
}
@media (min-width: 768px) {
	.ou-subheading {
		font-size: 1.75rem;
	}
}
@media (min-width: 992px) {
	.ou-subheading {
		font-size: 2rem;
	}
}

.ou-lead {
	font-size: 1.25rem;
	line-height: 1.5;
	padding-top: 1rem;
}
@media (min-width: 992px) {
	.ou-lead {
		font-size: 1.5rem;
		padding-top: 2rem;
	}
}

.anime-link {
	text-decoration: none;
	border-bottom: solid 0px transparent;
	-webkit-transition: border-bottom-color 0.2s ease-in;
	-moz-transition: border-bottom-color 0.2s ease-in;
	-ms-transition: border-bottom-color 0.2s ease-in;
	-o-transition: border-bottom-color 0.2s ease-in;
	transition: border-bottom-color 0.2s ease-in;
	&:hover {
		text-decoration: none;
		margin-bottom: -2px;
	}
	&--blue {
		color: $ucla-darker-blue;
		&:hover {
			color: $ucla-darkest-blue;
			border-bottom: solid 2px $ucla-darkest-blue;
		}
	}
	&--white {
		color: $white;
		&:hover {
			color: $white;
			border-bottom: solid 2px $white;
		}
	}
}

//******** Layout ********//
.ou-container {
	margin: 0 auto;
	width: calc(100vw - 40px);
	max-width: 1920px;
	&--white {
		background: $white;
	}
}
@media (min-width: 768px) {
	.ou-container {
		width: calc(100vw - 60px);
	}
}
@media (min-width: 992px) {
	.ou-container {
		width: calc(100vw - 80px);
	}
}

// Sections
.ou-intro,
.ou-initiatives,
.ou-events,
.ou-portals,
.ou-news,
.ou-media-bio {
	padding: 1.5rem 0;
}
@media (min-width: 768px) {
	.ou-intro,
	.ou-initiatives,
	.ou-events,
	.ou-portals,
	.ou-news,
	.ou-media-bio {
		padding: 2.5rem 0;
	}
}
@media (min-width: 992px) {
	.ou-intro,
	.ou-initiatives,
	.ou-events,
	.ou-portals,
	.ou-news,
	.ou-media-bio {
		padding: 4rem 0;
	}
}

.ou-inner-container {
	display: flex;
	flex-wrap: wrap;
	padding-top: 2rem;
}

//******** NAV ********//
.ou-nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding: 1rem 0;
	&__logos {
		width: 100px;
	}
}
@media (min-width: 768px) {
	.ou-nav {
		&__logos {
			width: 125px;
		}
	}
}

//******** HEADER ********//
.ou-header {
	background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/openucla-royce-projection-o.jpeg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom center;
	height: 500px;
	position: relative;
}

.ou-header-label {
	background: $white;
	max-width: 450px;
	width: 100%;
	height: 135px;
	position: absolute;
	bottom: 1.5rem;
	display: flex;
	img {
		width: 100%;
		padding: 0 1rem;
	}
}
@media (min-width: 768px) {
	.ou-header-label {
		height: 150px;
		img {
			padding: 0 2rem;
		}
	}
}

.ou-content {
	margin-top: 1rem;
	margin-bottom: 4rem;
}

//******** WHAT IS OPENUCLA ********//
.ou-intro {
}
@media (min-width: 992px) {
	.ou-intro {
		display: flex;
		justify-content: space-between;
	}
}

.ou-intro__wrapper--lead {
	padding: 1rem 0 4rem 0;
}
@media (min-width: 992px) {
	.ou-intro__wrapper--lead {
		flex: 0 0 55%;
		align-self: center;
		order: 2;
		padding: 0 4rem 0 2rem;
	}
}

.ou-intro__lead--text {
	font-size: 1.125rem;
	line-height: 1.5;
}
@media (min-width: 375px) {
	.ou-intro__lead--text {
		font-size: 1.25rem;
	}
}
@media (min-width: 768px) {
	.ou-intro__lead--text {
		font-size: 1.5rem;
	}
}
@media (min-width: 1200px) {
	.ou-intro__lead--text {
		font-size: 1.75rem;
	}
}

.ou-intro__lead--link {
	display: inline-block;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 1px;
	line-height: 1.25;
	padding-top: 2.5rem;
}
@media (min-width: 375px) {
	.ou-intro__lead--link {
		font-size: 1.125rem;
	}
}
@media (min-width: 768px) {
	.ou-intro__lead--link {
		font-size: 1.25rem;
	}
}
@media (min-width: 992px) {
	.ou-intro__lead--link {
		font-size: 1.375rem;
	}
}

.ou-intro__wrapper--list {
	background: $ucla-darker-blue;
	margin-bottom: 3.125rem;
}
@media (min-width: 992px) {
	.ou-intro__wrapper--list {
		flex: 0 0 35%;
		min-width: 475px;
		height: 400px;
		max-height: 450px;
		margin: 0;
		display: flex;
		align-items: center;
		order: 1;
	}
}

.ou-intro__list {
	padding: 2rem 0 2rem 0.75rem;
}
@media (min-width: 375px) {
	.ou-intro__list {
		padding-left: 1rem;
	}
}
@media (min-width: 400px) {
	.ou-intro__list {
		padding-left: 1.5rem;
	}
}
@media (min-width: 576px) {
	.ou-intro__list {
		padding-left: 2.5rem;
	}
}

.ou-intro__list--item {
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	line-height: 1.25;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	position: relative;
	padding-bottom: 1.25rem;
	&::before {
		content: "";
		background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/lgt-blue-ylw-molecule.svg");
		background-size: contain;
		background-repeat: no-repeat;
		height: 40px;
		width: 40px;
		margin-right: 0.5rem;
		transform: rotate(45deg);
	}
}
@media (min-width: 375px) {
	.ou-intro__list--item {
		font-size: 1.25rem;
	}
}
@media (min-width: 400px) {
	.ou-intro__list--item {
		letter-spacing: 1px;
		&::before {
			margin-right: 1rem;
		}
	}
}
@media (min-width: 576px) {
	.ou-intro__list--item {
		letter-spacing: 2px;
	}
}
@media (min-width: 768px) {
	.ou-intro__list--item {
		font-size: 1.5rem;
	}
}

.ou-intro__list--item:nth-last-child(1) {
	padding-bottom: 0;
}

//******** INITIATIVES ********//
//******** OPEN ACCESS PORTAL ********//
.ou-items-container {
	justify-content: space-between;
	padding-top: 1rem;
}

.ou-item__wrapper {
	flex: 0 0 100%;
	padding: 1rem 0;
	border-bottom: 1px solid #c3d7ee;
}
@media (min-width: 576px) {
	.ou-item__wrapper {
		flex: 0 0 48%;
	}
}
@media (min-width: 992px) {
	.ou-item__wrapper {
		flex: 0 0 32%;
	}
}

.ou-item__header {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 132px;
	&--initiatives {
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/label-acmi_awards.svg);
	}
	&--oa-portals {
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1302838/label-picturing_ucla.svg);
	}
}

.ou-item__text {
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem 0 3rem 0;
}
@media (min-width: 992px) {
	.ou-item__text {
		font-size: 1.125rem;
	}
}

.ou-item__link {
	color: $ucla-darker-blue;
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	// position: relative;
	// &::after {
	// 	content: "\f105";
	// 	display: inline-block;
	// 	font-family: "Font Awesome 5 Free";
	// 	font-weight: 900;
	// 	top: 1px;
	// 	margin-left: 0.5rem;
	// }
	&:hover {
		color: $ucla-darkest-blue;
	}
}

//******** EVENTS ********//
.ou-events-container {
}

.ou-event__wrapper {
	flex: 0 0 100%;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid $ucla-lightest-blue;
	margin-bottom: 1rem;

	&:nth-last-child(1) {
		align-self: center;
		margin-top: 1.5rem;
		border-bottom: 0;
	}
}
@media (min-width: 768px) {
	.ou-event__wrapper {
		flex: 0 0 48%;
		margin-bottom: 2rem;
		&:nth-child(even) {
			margin-left: 1rem;
		}
		&:nth-last-child(1) {
			margin-top: 0;
		}
	}
}
@media (min-width: 992px) {
	.ou-event__wrapper {
		flex: 0 0 32%;
		margin-bottom: 2rem;
		&:nth-child(even) {
			margin-left: 0;
		}
		&:nth-child(3n-1) {
			margin-right: 1rem;
			margin-left: 1rem;
		}
	}
}

.ou-event__image-wrapper {
	img {
		width: 100%;
	}
}
.ou-event__image {
	height: auto;
	max-width: 100%;
}

.ou-event__body {
	display: flex;
	align-items: center;
	padding: 1rem 2rem;
}
@media (min-width: 768px) {
	.ou-event__body {
		padding-left: 2rem;
		padding-right: 1rem;
	}
}
.ou-event__date {
	border-right: 6px solid $ucla-gold;
	padding-right: 1.25rem;
}

.ou-event__month {
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
}

.ou-event__day {
	font-size: 1.875rem;
	font-weight: 100;
	line-height: 1;
}

.ou-event__desc {
	font-size: 0.875rem;
	line-height: 1.25;
	padding-left: 1.25rem;
}
@media (min-width: 768px) {
	.ou-event__desc {
		font-size: 1rem;
	}
}

.ou-event__past {
	&--link {
		color: $text-black;
		font-size: 0.875rem;
		font-weight: 600;
		letter-spacing: 1px;
		text-decoration: underline;
		&:hover {
			color: $ucla-darkest-blue;
		}
	}
}
@media (min-width: 992px) {
	.ou-event__past {
		padding-left: 1.25rem;
	}
}

//******** NEWS & RESOURCES ********//
.ou-news-container {
	justify-content: space-between;
}

.ou-news__link {
	color: $text-black;
	flex: 0 0 100%;
	font-size: 1rem;
	line-height: 1.25;
	text-decoration: none;
	border-bottom: 1px solid $ucla-lightest-blue;
	padding-bottom: 1rem;
	margin-bottom: 2rem;
	&:nth-last-child(1) {
	}
	&:hover {
		color: $ucla-darkest-blue;
		text-decoration: underline;
	}
}
@media (min-width: 768px) {
	.ou-news__link {
		flex: 0 0 48%;
		&:nth-child(even) {
			margin-left: 1.25rem;
		}
	}
}
@media (min-width: 992px) {
	.ou-news__link {
		flex: 0 0 31%;
		&:nth-child(even) {
			margin-left: 0;
		}
		&:nth-child(3n-1) {
			margin-left: 1.25rem;
			margin-right: 1.25rem;
		}
	}
}

.ou-news__link--more {
	color: $text-black;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-decoration: underline;
	border-bottom: 0;
}

//******** MEDIA EXPERTS ********//
.ou-media-bio-container {
	justify-content: space-between;
}

.bio-card-wrapper,
.bio-label-wrapper {
	flex: 0 0 100%;
	border-bottom: 1px solid $ucla-lightest-blue;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	color: $text-black;
	text-decoration: none;
	opacity: 0.95;
	&:hover {
		color: $text-black;
		text-decoration: none;
		opacity: 1;
	}
}

@media (min-width: 768px) {
	.bio-card-wrapper,
	.bio-label-wrapper {
		flex: 0 0 48%;
	}
}
@media (min-width: 992px) {
	.bio-card-wrapper,
	.bio-label-wrapper {
		flex: 0 0 31%;
		margin-bottom: 2.5rem;
	}
}

.bio-card-wrapper {
	display: flex;
}

.bio-img-wrapper {
	flex-basis: 40%;
	img {
		width: 100%;
	}
}
.bio-img {
	height: auto;
	max-width: 100%;
}

.bio-text-wrapper {
	flex-basis: 60%;
	padding-left: 1.5rem;
}

.bio-name {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
@media (min-width: 576px) {
	.bio-name {
		font-size: 1.5rem;
	}
}

.bio-title {
	font-size: 0.875rem;
	line-height: 1.25;
}
@media (min-width: 576px) {
	.bio-title {
		font-size: 1rem;
	}
}

//******** FOOTER ********//
footer {
	color: $white;
	font-size: 13px;
	margin: 0 auto;
}

.ou-footer-wrapper__primary {
	background: $ucla-darker-blue;
	padding-top: 2.5rem;
	padding-bottom: 1.5rem;
}
@media (min-width: 900px) {
	.ou-footer__primary {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
}

.ou-footer__logo {
	width: 200px;
}

.ou-footer__text {
	line-height: 2.5;
	margin-top: 1.5rem;
}
@media (min-width: 900px) {
	.ou-footer__text {
		flex-basis: 45%;
		margin-top: 0;
	}
}

.ou-footer__list {
	margin-top: 1.875rem;
	li {
		padding-bottom: 1rem;
	}
}
@media (min-width: 900px) {
	.ou-footer__list {
		flex-basis: 25%;
		margin-top: 0;
	}
}

.ou-footer__list-link {
	color: $white;
	font-weight: 600;
	text-decoration: none;
	&:hover {
		color: $white;
		text-decoration: underline;
	}
}

.ou-footer-wrapper__secondary {
	background: $ucla-darkest-blue;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet" />

ucla-openucla__landing-pg.markdown

UCLA--OpenUCLA__landing-pg

A Pen by Tinuola on CodePen.

License.