uiu-cse/single-faculty.php

<?php

/**
 * The template for displaying all single faculty posts
 *
 * @package UIU_CSE
 */
get_header(); ?>


<?php while (have_posts()) : the_post(); ?>

	<section class="static-banner">
		<div class="static-banner-underlay">
			<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
		</div>
		<div class="static-banner-overlay"></div>
	</section>

	<main>
		<section class="profile-header">


			<div class="profile-main">
				<div class="container">

					<div class="top-row">
						<div class="profile-img-container">
							<img src="<?php the_field('profile_photo'); ?>" alt="">
						</div>

						<div class="profile-header-text">
							<!-- <h3 class="sub-title">Faculty Profile</h3> -->
							<h1 class="profile-name">
								<?php echo get_the_title(); ?>
							</h1>

							<h2 class="profile-des">
								<?php the_field('designation'); ?>
							</h2>

							<?php if (have_rows('contact_details')) : ?>

								<?php while (have_rows('contact_details')) : the_row(); ?>

									<span class="contact-dets"><?php the_sub_field('contact_info'); ?></span>
									<?php
									//  $sub_field_3 = get_sub_field('sub_field_3');
									// do something with $sub_field_3
									?>
								<?php endwhile; ?>

							<?php endif; ?>

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

		</section>


		<section class="profile-body primary-c">
			<div class="container">
				<div class="profile-second-row">
					<div class="left-col">
						<ul class="profile-choices">

						</ul>

					</div>

					<div class="profile-main-description">


						<?php if (have_rows('main_information')) : ?>

							<?php while (have_rows('main_information')) : the_row(); ?>

								<span class="contact-dets"></span>
								<div class="bio desc-block">
									<h2 class="m-text"><?php the_sub_field('title'); ?></h2>
									<p class="m-text">
										<?php the_sub_field('contents'); ?>
									</p>
								</div>

							<?php endwhile; ?>

						<?php endif; ?>
					</div>
				</div>
			</div>
		</section>
	</main>
	<!-- #main -->

<?php endwhile; // end of the loop.
?>
<style>
	header {
		margin: 0px !important;
		padding: 0px !important;
		height: 350px;
		overflow: hidden;
	}

	main {
		min-height: calc(100vh - 400px);
		position: relative;
		padding: 0px !important;
		background: rgb(56, 32, 23);
		background: linear-gradient(180deg, rgb(48, 18, 7) 0%, rgb(40, 21, 13) 22%, rgb(5, 0, 6) 100%);
		height: 100%;
	}

	h1 {
		font-family: "DM Serif Text", serif;
		font-size: 40px !important;
		letter-spacing: 2px !important;
		line-height: 110%;
		color: #fff;
		width: 100%;
		margin: 20px auto !important;
		text-align: left;
	}

	h2 {
		font-family: "DM Serif Text", serif;
		font-size: 40px;
		line-height: 45px;
		color: #ffc3c3;
		width: 100%;
		margin: 20px auto;
		text-align: left;
	}

	p {
		max-width: 1200px;
		font-size: 18px;
		color: #ffc3c3;
		margin: 50px 15px !important;
	}

	.desc-block ul>li {
		list-style: none;
		font-size: 16px;
		line-height: 20px;
		font-size: 18px;
		color: #ffc3c3;
	}

	.static-banner {
		position: relative;
	}

	.static-banner .static-banner-underlay {
		position: fixed;
		height: 100%;
		width: 100%;
		top: 0px;
	}

	.static-banner .static-banner-underlay img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: bottom;
		object-position: bottom;
	}

	.static-banner .static-banner-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #0b1419;
		opacity: 0.8;
	}

	.profile-header {
		position: absolute;
		top: -300px;
		width: 100%;
	}

	.top-row {
		display: flex;
		flex-direction: row;
		margin-top: 50px;
	}

	@media screen and (max-width: 600px) {
		.top-row {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-top: -10px;
		}
	}

	.profile-img-container {
		flex-basis: 200px;
		border-radius: 50%;
		border: 2px solid #F68B1F;
		overflow: hidden;
	}

	.profile-img-container img {
		height: 100%;
		width: 100%;
		-o-object-position: top;
		object-position: top;
		-o-object-fit: cover;
		object-fit: cover;
	}

	@media screen and (max-width: 600px) {
		.profile-img-container {
			flex-basis: 100px;
			width: 100px !important;
			height: 100px !important;
			border-radius: 50%;
			border: 2px solid #F68B1F;
			overflow: hidden;
		}
	}

	.profile-header-text {
		margin: 20px 0px 0px 50px !important;
	}

	@media screen and (max-width: 600px) {
		.profile-header-text {
			margin: 20px 0px !important;
		}
	}

	.profile-header-text h1 {
		font-size: 40px !important;
		margin: 5px 0px !important;
	}

	.profile-header-text h2 {
		font-size: 20px !important;
		line-height: 24px !important;
		color: #fff;
		letter-spacing: 2px;
		font-weight: normal;
		margin: 5px 0px !important;
	}

	.profile-header-text .contact-dets {
		display: inline-block;
		font-size: 12px;
		margin-top: 15px !important;
		margin-right: 20px !important;
		font-weight: lighter;
		color: #fff;
		letter-spacing: 2px;
	}

	.profile-header-text h3 {
		font-size: 14px !important;
		text-transform: uppercase;
		text-decoration: none !important;
		font-family: "Open Sans", sans-serif;
		letter-spacing: 2px;
		text-align: center !important;
		font-weight: normal;
		margin: 5px 0px 0px 0px !important;
		text-align: left !important;
	}

	@media screen and (max-width: 700px) {
		.profile-header-text {
			text-align: center;
		}

		.profile-header-text h1 {
			font-size: 20px !important;
			margin: 5px 0px 0px 0px !important;
			text-align: center;
		}

		.profile-header-text h2 {
			font-size: 14px !important;
			line-height: 16px !important;
			color: #fff;
			letter-spacing: 2px;
			font-weight: normal;
			margin: 5px 0px 10px 0px !important;
			text-align: center;
		}

		.profile-header-text h3 {
			font-size: 14px !important;
			text-transform: uppercase;
			text-decoration: none !important;
			font-family: "Open Sans", sans-serif;
			letter-spacing: 2px;
			text-align: center !important;
			font-weight: normal;
			margin: 5px 0px 0px 0px !important;
			text-align: center;
		}

		.profile-header-text .contact-dets {
			display: block;
			font-size: 12px;
			margin-top: 5px !important;
			font-weight: lighter;
			color: #fff;
			letter-spacing: 1px;
		}
	}

	.profile-second-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.left-col {
		margin-right: 30px;
		width: 400px;
	}

	@media screen and (max-width: 650px) {
		.left-col {
			display: none;
		}
	}

	ul.profile-choices>li {
		list-style: none;
		border-radius: 5px;
		overflow: hidden;
		height: 50px;
	}

	ul.profile-choices>li a {
		padding: 5px 10px;
		font-size: 20px;
		line-height: 40px;
		font-weight: lighter;
		color: #fff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		transition-duration: 0.5s;
		height: 50px !important;
	}

	ul.profile-choices>li a:after {
		content: "chevron_right";
		font-family: "Material Icons";
		font-size: 20px;
		margin-right: 10px;
	}

	ul.profile-choices>li a:hover {
		color: #000;
		text-decoration: none;
		background-color: rgba(255, 255, 255, 0.2039215686);
	}

	.pickr {
		display: inline-block;
		margin-right: 6px !important;
	}

	.profile-des {
		font-family: "Open Sans", sans-serif;
		font-size: 25px;
		font-weight: normal;
		margin: 5px 0px;
		color: #fff;
	}

	details {
		margin-left: 0px !important;
	}

	.accordions {
		margin-top: 100px;
	}

	.sub-title {
		font-family: "Open Sans", sans-serif !important;
		font-size: 14px;
		letter-spacing: 5px;
	}

	b {
		font-weight: 500 !important;
		font-size: 22px !important;
	}

	i {
		font-size: 14px;
		margin-bottom: 130px !important;
		border-bottom: 1px solid #fff;
	}

	ul {
		margin-top: 20px !important;
		margin-bottom: 50px !important;
	}

	ul>li {
		list-style: none;
		font-size: 16px;
		line-height: 20px;
	}

	h2.m-text {
		font-size: 30px;
		margin-left: 0px;
		font-weight: normal;
	}

	.desc-block {
		opacity: 1;
		transition-duration: 0.4s;
		overflow: none;
	}

	.desc-block-hidden {
		display: none;
	}

	.desc-active {
		text-decoration: none;
		background-color: rgba(255, 255, 255, 0.2039215686);
	}

	.desc-active a {
		color: #000;
	}

	ul.m-text {
		margin-top: 10px !important;
	}

	/* The Overlay (background) */
	.overlay {
		/* Height & width depends on how you want to reveal the overlay (see JS below) */
		height: 0%;
		width: 100%;
		position: fixed;
		/* Stay in place */
		z-index: 1100;
		/* Sit on top */
		left: 0;
		top: 0;
		background-color: rgb(0, 0, 0);
		/* Black fallback color */
		background-color: rgba(0, 0, 0, 0.9);
		/* Black w/opacity */
		overflow-x: hidden;
		/* Disable horizontal scroll */
		transition: 0.5s;
		/* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
	}

	/* Position the content inside the overlay */
	.overlay-content {

		position: relative;
		height: 100%;
		top: 25%;
		/* 25% from the top */
		width: 100%;
		/* 100% width */

		text-align: center;
		/* Centered text/links */
		margin-top: 30px;
		/* 30px top margin to avoid conflict with the close button on smaller screens */
	}

	/* The navigation links inside the overlay */
	.overlay a {
		padding: 8px;
		text-decoration: none;
		font-size: 18px;
		color: white;
		display: block;
		/* Display block instead of inline */
		transition: 0.3s;
		/* Transition effects on hover (color) */
	}

	.overlay h1 {
		color: white;
		font-size: 20px;
		font-weight: lighter;
		margin-bottom: 10px;
		text-decoration: underline;
	}

	/* When you mouse over the navigation links, change their color */
	.overlay a:hover,
	.overlay a:focus {
		color: #f1f1f1;

	}

	/* Position the close button (top right corner) */
	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
	}
</style>
<?php get_footer(); ?>