uiu-cse/single-event.php

<?php

/**
 * The template for displaying all single event posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package UIU_CSE
 */

get_header(); ?>
<?php while (have_posts()) : the_post(); ?>
	<main id="main" class="site-main" role="main">

		<section id="hero-single">

			<div class="container">


				<!-- page title -->
				<div class="page-title">
					Event
				</div>

				<!-- breadcrumb -->
				<nav class="breadcrumb" aria-label="breadcrumb">
					<ul>
						<li><a href="/">Home</a></li>
						<li><a href="/event/">Events</a></li>
					</ul>
				</nav>



				<div class="content">

					<!-- main title -->
					<div class="main-title">
						<?php echo get_the_title(); ?>
					</div>

					<div class="publish-date">
						<span class="title">Publish Date :</span>
						<span class="date"><?php echo get_the_date(); ?></span>
					</div>

					<div class="links">

						<!-- message -->
						<a href="mailto:#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
						</a>

						<!-- printer -->
						<a onclick="window.print()">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
						</a>

						<!-- facebook -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
						</a>

						<!-- twitter -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
						</a>

						<!-- linkedin -->
						<a href="#">
							<img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
						</a>

					</div>


				</div>
			</div>



		</section>




		<div class="container">

			<!-- feture image                              -->
			<div class="feature-image-holder">
				<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
			</div>

			<!-- event info container -->
			<div id="event-info-container">

				<div class="event-date">
					<h3>Jun</h3>
					<h3>6th</h3>
				</div>


				<!-- event info -->
				<section id="event-info">
					<div class="container content">


						<div class="single-content">
							<div class="title">
								Registration URL :
							</div>
							<a class="detail" href="#">
								https://www.eventbrite.co.uk/e/billets-inscription-au-colloque-pourquoi-alain-f…
							</a>
						</div>

						<div class="single-content">
							<div class="title">
								Organizer :
							</div>
							<div class="detail">
								United International University (UIU)
							</div>
						</div>

						<div class="single-content">
							<div class="title">
								Venue :
							</div>
							<div class="detail">
								<?php the_field('event_venue'); ?>
							</div>
						</div>

						<div class="single-content">
							<div class="title">
								Event dates :
							</div>
							<div class="detail">
								<?php the_field('event_date_start'); ?> to <?php the_field('event_date_end'); ?>
							</div>
						</div>
					</div>
				</section>

			</div>

			<section id="event-container">
				<!-- main component -->
				<div class="main-comp">
					<!-- notice details -->
					<div class="event-details">

						<?php echo get_the_content() ?>

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

			<section id="more-event">
				<div class="section-title">
					Recent Events
				</div>
				<div class="events">


					<?php
					$args = array(
						'post_type'      => 'event',
						'posts_per_page' => 6,
						'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-event">
								<div class="event-img">
									<img src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
								</div>
								<a class="detail" href="<?php echo get_the_permalink(); ?>">

									<div class="event-date">
										<img class="icon" src="<?php echo (get_template_directory_uri()) ?>/img/calendar-days-regular.svg" alt="">
										<span class="date">
											<?php the_field('event_date_start'); ?>
										</span>
									</div>

									<div class="title">
										<?php echo get_the_title(); ?>
									</div>
								</a>
							</div>

					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No related news has found! </div>';
					endif; ?>

				</div>
			</section>
		</div>
	</main>
<?php endwhile; ?>
<style>
	#hero-single {
		padding: 6rem 0 3rem;
	}

	#hero-single .page-title {
		font-size: 1.8rem;
		font-weight: bold;
		color: #0f465e;
		font-family: "DM Serif Text", serif;
		letter-spacing: 3px;
	}

	#hero-single .breadcrumb {
		margin-top: 0 !important;
	}

	#hero-single .breadcrumb li {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.8rem;
		font-weight: 600;
	}

	#hero-single .content {
		display: block;
	}

	#hero-single .main-title {
		margin-top: 1.5rem;
		font-size: 1.7rem;
		font-weight: bold;
		letter-spacing: 2px;
		line-height: 1.4 !important;
		color: #333 !important;
		text-transform: capitalize;
		font-family: "DM Serif Text", serif;
	}

	#hero-single .publish-date {
		margin-top: 0.75rem;
		font-size: 0.8rem;
	}

	#hero-single .publish-date .title {
		font-weight: bold;
	}

	#hero-single .publish-date .date {
		margin-left: 0.25rem;
		font-weight: 600;
	}

	#hero-single .links {
		margin-top: 2.5rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #000;
		display: flex;
		gap: 1.5rem;
	}

	#hero-single .links a {
		height: 1.2rem;
	}

	#hero-single .links a:hover {
		transform: scale(1.2);
		opacity: 1 !important;
	}

	#hero-single .links a img {
		height: 100%;
	}

	#event-info-container {
		display: flex;
		gap: 2rem;
	}

	#event-info-container .event-date {
		width: 100px;
		height: 135px;
		padding-top: 1rem;
		color: #fff;
		background: #F68B1F;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-weight: 300 !important;
		line-height: 1.2;
		font-family: "Open Sans", sans-serif;
		color: #485680;
	}

	#event-info-container .event-date h3 {
		font-weight: inherit;
		margin: 0;
		padding: 0;
		color: #fff;
	}

	#event-info-container .event-date::before,
	#event-info-container .event-date::after {
		content: "";
		position: absolute;
		height: 0;
		width: 0;
		bottom: -70px;
		left: 0;
		border-top: 70px solid #f68b1f;
		border-right: 70px solid transparent;
	}

	#event-info-container .event-date::after {
		right: 0;
		left: unset;
		border-right: unset;
		border-left: 70px solid transparent;
	}

	#event-info-container #event-info {
		margin-bottom: 2rem;
		padding-top: 0;
		flex: auto;
	}

	#event-info-container #event-info .content {
		background: #0f465e;
		padding: 1.5rem 2rem;
		color: #fff;
	}

	#event-info-container #event-info .content .single-content {
		display: flex;
		align-items: flex-start;
		margin-bottom: 0.75rem;
		font-size: 0.8rem;
	}

	#event-info-container #event-info .content .single-content:last-child {
		margin-bottom: unset;
	}

	#event-info-container #event-info .content .single-content .title {
		min-width: 200px;
		font-weight: 700;
		font-size: inherit;
	}

	#event-info-container #event-info .content .single-content .detail {
		font-size: inherit;
		font-weight: 500;
		line-break: anywhere;
		color: #fff !important;
	}

	a {
		transition: all 0.25s ease-in-out;
	}

	a:hover {
		opacity: 0.65;
		text-decoration: none;
	}

	.feature-image-holder {
		width: 100%;
		margin-bottom: 2rem;
	}

	.feature-image-holder img {
		width: 100%;
	}

	#event-container {
		margin-top: 1rem;
	}

	#event-container .main-comp {
		padding-bottom: 2rem;
	}

	#event-container .main-comp .event-details {
		margin-top: 1rem;
	}

	#event-container .main-comp .event-details img {
		width: 100%;
		margin-bottom: 2rem;
	}

	#more-event .section-title {
		color: rgb(0, 0, 0);
		font-weight: 600;
		font-size: 1.8rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #333;
	}

	#more-event .events {
		margin-top: 2rem;
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
	}

	#more-event .events .single-event {
		width: calc(33.3333% - 2rem);
		overflow: hidden;
		border-radius: 5px;
		border: 1px solid rgba(0, 0, 0, 0.5);
	}

	#more-event .events .single-event .event-img {
		width: 100%;
		overflow: hidden;
	}

	#more-event .events .single-event .event-img img {
		transition: 4s ease-in-out;
	}

	#more-event .events .single-event:hover .event-img img {
		transform: scale(1.4);
	}

	#more-event .events .single-event .detail {
		padding: 0.5rem 0.75rem 0.75rem;
		background-color: #fff;
		display: block;
	}

	#more-event .events .single-event .detail:hover {
		opacity: unset;
	}

	#more-event .events .single-event .detail .event-date {
		display: flex;
		gap: 0.5rem;
		align-items: center;
		justify-content: start;
		margin: 0.25rem 0 0.75rem;
	}

	#more-event .events .single-event .detail .event-date .icon {
		height: 0.9rem;
	}

	#more-event .events .single-event .detail .event-date .date {
		font-size: 0.7rem;
		font-weight: 700;
	}

	#more-event .events .single-event .detail .title {
		font-size: 0.7rem;
		font-weight: 600;
		color: #0f465e;
		line-height: 1.7 !important;
	}

	@media (max-width: 1000px) {
		#more-event .events .single-event {
			width: calc(50% - 2rem);
		}
	}

	@media (max-width: 768px) {
		#more-event .events .single-event {
			width: 100%;
		}
	}

	@media print {

		head,
		header,
		footer {
			display: none;
		}

		main {
			padding-top: 0 !important;
			margin-top: 0 !important;
		}

		#archive-hero {
			margin: 0;
		}

		#event-container {
			padding: 0;
		}
	}

	/*# sourceMappingURL=single-event2.css.map */
</style>
<?php get_footer(); ?>