Events - single template

single-event.php

@@ -10,144 +10,501 @@
 
 get_header(); ?>
 <?php while (have_posts()) : the_post(); ?>
-
 	<main id="main" class="site-main" role="main">
 
-		<div class="sections">
+		<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>
+
+
 
-			<section id="event-single-header" class="container">
-				<h5>Event</h5>
-				<h1><?php echo get_the_title(); ?></h1>
+				<div class="content">
 
-				<p class="subtext">
-					<strong>Venue: </strong><?php the_field('event_venue'); ?>
-				</p>
+					<!-- 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">
 
-				<span class="news-date single"><?php the_field('news_date'); ?></span>
+						<!-- message -->
+						<a href="mailto:#">
+							<img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
+						</a>
 
-				<span class="event-published-date">Duration: <?php the_field('event_date_start'); ?> to <?php the_field('event_date_end'); ?></span>
+						<!-- printer -->
+						<a onclick="window.print()">
+							<img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
+						</a>
 
-				<hr>
+						<!-- 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 class="event-socials">
-					<div>
-						SHARE:
-						<a href="#" class="social-icons"><i class="fa-brands fa-facebook-f"></i></a>
-						<a href="#" class="social-icons"><i class="fa-brands fa-twitter"></i></a>
-						<a href="#" class="social-icons"><i class="fa-brands fa-linkedin-in"></i></a>
 					</div>
 
+
 				</div>
-			</section>
+			</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>
 
-			<section id="news-single-header" class="container">
-				<div class="news-single-body">
-					<div class="article-cover-image">
-						<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
-						<span class="img-caption"> </span>
+						<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>
-					<div class="article">
-						<?php echo get_the_content(); ?>
+				</section>
+
+			</div>
+
+			<section id="event-container">
+				<!-- main component -->
+				<div class="main-comp">
+					<!-- notice details -->
+					<div class="event-details">
+
+						<?php echo get_the_content() ?>
+
 					</div>
-					<hr>
 				</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>
-	footer.container-fluid {
-		margin-top: 80px;
+	#hero-single {
+		padding: 6rem 0 3rem;
 	}
-	p {
-		max-width: 100% !important;
+
+	#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;
 	}
 
-	header {
-		height: 100px !important;
+	#hero-single .breadcrumb li {
+		padding-top: 10px;
+		padding-bottom: 10px;
+		font-size: 0.8rem;
+		font-weight: 600;
 	}
 
-	#event-single-header .event-date {
-		font-size: 16px;
-		color: #2F4858;
+	#hero-single .content {
 		display: block;
-		margin-bottom: 30px;
 	}
 
-	#event-single-header h1 {
-		color: #000 !important;
+	#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;
-		margin-bottom: 10px !important;
 	}
 
-	#event-single-header h5 {
-		margin-top: 30px;
-		font-size: 30px;
-		color: #2F4858;
+	#hero-single .publish-date {
+		margin-top: 0.75rem;
+		font-size: 0.8rem;
 	}
 
-	#event-single-header .subtext {
-		font-size: 22px !important;
-		color: #2F4858 !important;
+	#hero-single .publish-date .title {
+		font-weight: bold;
 	}
 
-	#event-single-header .event-published-date {
-		display: block;
+	#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;
-		font-weight: 800;
-		font-size: 14px;
 	}
 
-	.event-socials {
-		margin: 20px 20px !important;
-		font-size: 26x;
+	#event-info-container .event-date h3 {
+		font-weight: inherit;
+		margin: 0;
+		padding: 0;
+		color: #fff;
 	}
 
-	.event-socials a {
-		margin: 0px 15px;
+	#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;
 	}
 
-	.social-icons {
-		color: #2F4858;
+	#event-info-container .event-date::after {
+		right: 0;
+		left: unset;
+		border-right: unset;
+		border-left: 70px solid transparent;
 	}
 
-	.event-single-body {
-		max-width: 900px !important;
-		margin: 30px auto !important;
+	#event-info-container #event-info {
+		margin-bottom: 2rem;
+		padding-top: 0;
+		flex: auto;
 	}
 
-	.event-single-body p {
-		text-align: justify;
-		font-size: 18px;
-		color: #2F4858 !important;
+	#event-info-container #event-info .content {
+		background: #0f465e;
+		padding: 1.5rem 2rem;
+		color: #fff;
 	}
 
-	.event-single-body ul li {
-		list-style: none;
-		color: #2F4858;
-		font-size: 16px;
+	#event-info-container #event-info .content .single-content {
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: 0.75rem;
+		font-size: 0.8rem;
 	}
 
-	.event-single-body h3 {
-		font-family: "DM Serif Text", serif;
-		font-size: 26px;
-		color: #2F4858;
+	#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;
 	}
 
-	.event-single-body .event-image img {
+	.feature-image-holder {
 		width: 100%;
-		margin-bottom: 30px;
+		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;
 	}
 
-	.img-caption {
-		font-size: 14px;
-		color: #475481 !important;
-		line-height: 14px;
+	#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-event.css.map */
+	/*# sourceMappingURL=single-event2.css.map */
 </style>
 <?php get_footer(); ?>

single-notice.php

@@ -28,14 +28,11 @@ get_header(); ?>
 				<!-- breadcrumb -->
 				<nav class="breadcrumb" aria-label="breadcrumb">
 					<ul>
-						<li><a href="#">Home</a></li>
-						<li><a href="#">Category</a></li>
-						<li>Page</li>
+						<li><a href="/">Home</a></li>
+						<li><a href="/notice/">Notice</a></li>
 					</ul>
 				</nav>
 
-
-
 				<div class="content">
 
 					<!-- main title -->