uiu-sobe/archive-campus-life.php

<?php

/**
 * The template for displaying campus life archive page
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package UIU_DEPARTMENTAL
 */

get_header();
?>
<main id="main" class="site-main" role="main">



	<div id="campus-life">
		<div class="hero-section">

			<iframe src="https://www.youtube.com/embed/MfVYcMmbHuk?controls=0&disablekb=1&autoplay=1&mute=1&playsinline=1&loop=1&playlist=MfVYcMmbHuk" allowfullscreen></iframe>
			<div class="hero-content">
				<h1 class="hero-title">Virtual Campus Tour</h1>
				<p class="hero-sub-title">
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat vero reprehenderit ab hic sunt optio.
				</p>
			</div>
		</div>


		<!-- Getting Around -->

		<?php
		$args = array(
			'post_type'      => 'campus-life',
			'tag'            => 'featured-campus-life',
			'posts_per_page' => 1,
			'post__not_in' => array(get_the_ID()),
			'orderby'        => 'date',
			'order'          => 'DESC',
		);
		$query = new WP_Query($args);

		if ($query->have_posts()) :
			while ($query->have_posts()) :
				$query->the_post(); ?>


				<div class="getting-around">
					<div class="container">
						<h1 class="title">
							Getting Around
						</h1>

						<div class="content">
							<div class="text-content">
								<p>
									<?php the_excerpt(); ?>
								</p>
								<a class="link" href="">Read in detail</a>
							</div>
							<div class="image-content">
								<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
							</div>
						</div>
					</div>
				</div>


		<?php
			endwhile;
		// else :
		//     echo '<div class="no-post-found">No student life has found! </div>';
		endif;
		wp_reset_query();
		?>



		<div class="campus-content student-life">
			<div class="container-fluid">
				<h1 class="title">Student Life</h1>
				<div class="content content-three">
					<?php
					$args = array(
						'post_type'      => 'campus-life',
						'category_name'  => 'student-life',
						'posts_per_page' => 3,
						'post__not_in' => array(get_the_ID()),
						'orderby'        => 'date',
						'order'          => 'DESC',
					);
					$query = new WP_Query($args);

					if ($query->have_posts()) :
						while ($query->have_posts()) :
							$query->the_post(); ?>

							<div class="single-content">

								<div class="image-container">
									<div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
								</div>

								<div class="details">
									<h4 class="content-title"><?php echo get_the_title(); ?></h4>
									<p class="content-detail">
										<?php the_excerpt(); ?>
									</p>
									<a class="link" href="<?php echo get_permalink(); ?>">View details</a>
								</div>
							</div>

					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No student life has found! </div>';
					endif;
					wp_reset_query(); ?>

				</div>
			</div>
		</div>


		<!-- Arts & Culture -->
		<div class="campus-content arts-culture">

			<div class="container">
				<h1 class="title">Arts & Culture</h1>
				<div class="content content-two">
					<?php
					$args = array(
						'post_type'      => 'campus-life',
						'category_name'  => 'arts-and-culture',
						'posts_per_page' => 2,
						'post__not_in' => array(get_the_ID()),
						'orderby'        => 'date',
						'order'          => 'DESC',
					);

					$query = new WP_Query($args);
					if ($query->have_posts()) :
						while ($query->have_posts()) :
							$query->the_post(); ?>

							<div class="single-content">
								<div class="image-container">
									<div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
								</div>
								<div class="details">

									<h4 class="content-title"><?php echo get_the_title(); ?></h4>
									<p class="content-detail">
										<?php the_excerpt(); ?>
									</p>
									<a class="link" href="<?php echo get_permalink(); ?>">View details</a>
								</div>
							</div>
					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No Arts & Culture post has found! </div>';
					endif;
					wp_reset_query(); ?>
				</div>
			</div>
		</div>


		<!-- Recreation and Wellness -->
		<div class="campus-content recreation-and-wellness">
			<div class="container-fluid">
				<h1 class="title">Athletics, Recreation, & Wellness</h1>
				<div class="content content-three">

					<?php
					$args = array(
						'post_type'      => 'campus-life',
						'category_name'  => 'recreation-and-wellness',
						'posts_per_page' => 3,
						'post__not_in' => array(get_the_ID()),
						'orderby'        => 'date',
						'order'          => 'DESC',
					);

					$query = new WP_Query($args);
					if ($query->have_posts()) :
						while ($query->have_posts()) :
							$query->the_post(); ?>

							<div class="single-content">
								<div class="image-container">
									<div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
								</div>
								<div class="details">
									<h4 class="content-title"><?php echo get_the_title(); ?></h4>
									<p class="content-detail">
										<?php the_excerpt(); ?>
									</p>
									<a class="link" href="<?php echo get_permalink(); ?>">View details</a>
								</div>
							</div>

					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No Recreation & Wellness post has found! </div>';
					endif;
					wp_reset_query(); ?>
				</div>
			</div>
		</div>
		<!-- campus statistics -->
		<div class="state">

			<div class="container-fluid analytics">

				<div class="item">
					<h2 class="count">600+</h2>
					<p class="desc">Organized student groups</p>
				</div>

				<div class="item">
					<h2 class="count">69</h2>
					<p class="desc">Undergraduate student residences</p>
				</div>

				<div class="item">
					<h2 class="count">20000+</h2>
					<p class="desc">Students living on campus</p>
				</div>

			</div>

		</div>


	</div>


</main>
<style>
	#main {
		padding-top: unset;
	}

	#campus-life {
		font-family: "DM Serif Text", serif;
	}

	#campus-life .hero-section {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	@media screen and (max-width: 1000px) {
		#campus-life .hero-section {
			height: 75vh;
			margin-top: 90px;
		}
	}

	@media screen and (max-width: 800px) {
		#campus-life .hero-section {
			height: 65vh;
		}
	}

	@media screen and (max-width: 500px) {
		#campus-life .hero-section {
			margin-top: 40px;
			height: 58vh;
		}
	}

	#campus-life .hero-section iframe {
		height: 100%;
		width: 100vw;
		border: none;
		transform: scaleX(1.5) scaleY(1.8);
	}

	#campus-life .hero-section .hero-content {
		background: rgba(0, 0, 0, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		text-align: left;
		padding-left: 5rem;
		padding-bottom: 3rem;
	}

	@media screen and (max-width: 1000px) {
		#campus-life .hero-section .hero-content {
			padding-left: 1rem;
		}
	}

	@media screen and (max-width: 500px) {
		#campus-life .hero-section .hero-content {
			padding-left: 0.75rem;
			padding-bottom: 0.25rem;
		}
	}

	#campus-life .hero-section .hero-content .hero-title {
		margin-top: auto;
		margin-bottom: 0.25rem !important;
		font-size: 3rem;
		color: #ffffff;
		text-shadow: 3px 4px 10px #111010;
	}

	@media screen and (max-width: 500px) {
		#campus-life .hero-section .hero-content .hero-title {
			font-size: 1.2rem;
		}
	}

	#campus-life .hero-section .hero-content .hero-sub-title {
		display: inline-block !important;
		max-width: 750px !important;
		color: #d7d7d7;
		font-size: 1.2rem;
		text-shadow: 3px 4px 10px #111010;
	}

	@media screen and (max-width: 500px) {
		#campus-life .hero-section .hero-content .hero-sub-title {
			font-size: 0.75rem;
		}
	}

	#campus-life .hero-section .page-title {
		text-align: center;
		font-size: 2.5rem;
	}

	#campus-life .hero-section .page-subtitle {
		color: #7d7d7d;
		font-size: 1.1rem;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: unset;
		max-width: 650px !important;
	}

	#campus-life .hero-section .campus-hero {
		padding-top: 2rem;
	}

	#campus-life .hero-section .image-container {
		width: 100%;
	}

	#campus-life .hero-section .image-container img {
		width: 100%;
	}

	#campus-life .hero-section .analytics {
		margin: 3.8rem 0;
		padding: 1.2rem 0 0.5rem;
		border-top: 2px solid #333;
		border-bottom: 2px solid #333;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	@media screen and (max-width: 500px) {
		#campus-life .hero-section .analytics {
			flex-direction: column;
		}
	}

	#campus-life .hero-section .analytics .item {
		margin-bottom: 1rem;
	}

	#campus-life .hero-section .analytics .count {
		font-weight: 700;
		margin-bottom: 0.5rem !important;
	}

	#campus-life .hero-section .analytics .title {
		font-weight: 500;
		margin-bottom: unset;
	}

	#campus-life .campus-content {
		padding: 4rem 2rem 3rem;
	}

	@media screen and (max-width: 767px) {
		#campus-life .campus-content {
			padding: 2rem 0;
		}
	}

	#campus-life .campus-content .title {
		text-align: center;
	}

	#campus-life .campus-content .content {
		padding: 3rem 0;
	}

	#campus-life .campus-content .content .single-content {
		overflow: hidden;
	}

	#campus-life .campus-content .content .single-content:hover .bg-img {
		transform: scale(1.1);
	}

	#campus-life .campus-content .content .image-container {
		height: 300px;
		width: 100%;
		border-radius: 5px;
		overflow: hidden;
	}

	#campus-life .campus-content .content .image-container .bg-img {
		height: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: all 4.5s;
	}

	#campus-life .campus-content .content .details {
		padding: 0 0.5rem 1rem;
	}

	#campus-life .campus-content .content .content-title {
		text-align: left;
		margin-top: 0.5rem;
		margin-bottom: unset !important;
		text-transform: capitalize;
	}

	#campus-life .campus-content .content .content-detail {
		margin-top: 0.5rem;
		margin-bottom: unset;
		font-size: 0.8rem;
		line-height: 1.7;
	}

	#campus-life .campus-content .content .link {
		margin-top: 0.5rem;
		display: inline-block;
		padding: 0.35rem 0.85rem;
		color: #fff;
		background: #915416;
		font-size: 0.75rem;
		text-transform: capitalize;
		border-radius: 5px;
	}

	#campus-life .campus-content .content .link:hover {
		background: #e17f1d;
	}

	#campus-life .campus-content .content-two {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
	}

	#campus-life .campus-content .content-two .single-content {
		text-align: left;
		width: calc(50% - 2rem);
	}

	@media screen and (max-width: 767px) {
		#campus-life .campus-content .content-two .single-content {
			width: 100%;
		}
	}

	#campus-life .campus-content .content-three {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 2rem;
	}

	#campus-life .campus-content .content-three .single-content {
		text-align: left;
		width: calc(33.33% - 2rem);
	}

	@media screen and (max-width: 1000px) {
		#campus-life .campus-content .content-three .single-content {
			width: calc(50% - 2rem);
		}
	}

	@media screen and (max-width: 767px) {
		#campus-life .campus-content .content-three .single-content {
			width: 100%;
		}
	}

	#campus-life .student-life {
		padding-top: 5rem;
		margin-top: 0;
	}

	#campus-life .student-life,
	#campus-life .recreation-and-wellness {
		background: #f4f4f4;
	}

	#campus-life .getting-around {
		padding-top: 4rem;
		padding-bottom: 7rem;
	}

	@media screen and (max-width: 1000px) {
		#campus-life .getting-around {
			padding-top: 3rem;
			padding-bottom: 1rem;
		}
	}

	@media screen and (max-width: 767px) {
		#campus-life .getting-around {
			padding-top: 2rem;
			padding-bottom: 2rem;
		}
	}

	#campus-life .getting-around .title {
		text-align: center;
	}

	#campus-life .getting-around .content {
		margin: 4rem 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	@media screen and (max-width: 992px) {
		#campus-life .getting-around .content {
			display: block;
		}
	}

	#campus-life .getting-around .content .text-content {
		padding: 2rem 3rem 2rem 2rem;
		background: #f4f4f4;
		width: 100%;
		border-radius: 3px;
	}

	#campus-life .getting-around .content .text-content p {
		font-size: 0.9rem;
		margin-bottom: 0.25rem;
	}

	#campus-life .getting-around .content .text-content .link {
		display: block;
		width: -moz-fit-content;
		width: fit-content;
		margin-top: 0.5rem;
		font-size: 0.95rem;
		font-weight: 600;
		color: #915416;
	}

	#campus-life .getting-around .content .text-content .link:hover {
		color: #633a10;
	}

	#campus-life .getting-around .content .image-content {
		width: 100%;
		transform: translateY(100px) translateX(-2rem);
		border-radius: 3px;
		overflow: hidden;
	}

	@media screen and (max-width: 992px) {
		#campus-life .getting-around .content .image-content {
			width: 80%;
			transform: translateY(-10%) translateX(30%);
		}
	}

	@media screen and (max-width: 500px) {
		#campus-life .getting-around .content .image-content {
			margin-top: 2.5rem;
			width: 100%;
			transform: translateY(0) translateX(0);
		}
	}

	#campus-life .getting-around .content .image-content img {
		width: 100%;
	}

	#campus-life .campus-tour {
		margin: 2rem 0 0;
		padding: 2rem 0;
		background: #f4f4f4;
	}

	#campus-life .campus-tour .title {
		text-align: center;
	}

	#campus-life .campus-tour .content {
		width: 100%;
		margin-top: 2rem;
	}

	#campus-life .campus-tour .content .wraper-iframe {
		position: relative;
		width: 100%;
	}

	#campus-life .campus-tour .content iframe {
		aspect-ratio: 16/6;
		width: 100%;
		border-radius: 10px;
	}

	#campus-life .state {
		padding: 4rem 0 3rem;
	}

	#campus-life .state .analytics {
		border-top: 2px solid #333;
		border-bottom: 2px solid #333;
		text-align: center;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	@media screen and (max-width: 768px) {
		#campus-life .state .analytics {
			flex-direction: column;
		}
	}

	#campus-life .state .analytics .item {
		margin-bottom: 1rem;
	}

	#campus-life .state .analytics .count {
		font-weight: 700;
		margin-bottom: 0.5rem !important;
		font-size: 2rem;
	}

	#campus-life .state .analytics .desc {
		font-weight: 500;
		margin-bottom: unset;
	}
</style>
<?php
get_footer();