uiu-cse/single-notice.php

<?php

/**
 * The template for displaying all single notice 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">
					Notice
				</div>

				<!-- breadcrumb -->
				<nav class="breadcrumb" aria-label="breadcrumb">
					<ul>
						<li><a href="/">Home</a></li>
						<li><a href="/notice/">Notice</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">

			<section id="notice-container">


				<!-- main component -->
				<div class="main-comp">

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


					<!-- notice details -->
					<div class="notice-details">

						<?php the_content(); ?>

					</div>



				</div>



				<!-- side component -->
				<div class="side-comp">


					<!--  notice -->
					<div class="item">

						<!-- title -->
						<div class="item-title">
							NOTICES
						</div>

						<!-- item container -->
						<div class="item-container">

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

						</div>

						<!-- view more button -->
						<a class="view-more" href="#">
							<div class="icon">
								<img src="./img/square-plus-solid.svg" alt="">
							</div>
							<span>
								View more
							</span>
						</a>

					</div>


					<!--  news -->
					<div class="item">

						<!-- title -->
						<div class="item-title">
							NEWS
						</div>

						<!-- item container -->
						<div class="item-container">

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

							<a class="single-item" href="#">
								<div class="date">
									January 28, 2024
								</div>
								<div class="details">
									Orientation Program for the Newly Admitted Students of Summer 2023 Trimester
								</div>
							</a>

						</div>

						<!-- view more button -->
						<a class="view-more" href="#">
							<div class="icon">
								<img src="./img/square-plus-solid.svg" alt="">
							</div>
							<span>
								View more
							</span>
						</a>

					</div>



				</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-top: 1rem;
		border-top: 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%;
	}

	#notice-info {
		padding-top: 0;
		margin-bottom: 1rem;
	}

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

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

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

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

	#notice-info .content .single-content .detail {
		font-size: inherit;
		font-weight: 500;
	}

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

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

	#notice-container {
		margin: 0.5rem 0;
		display: flex;
		gap: 1rem;
	}

	@media (max-width: 1000px) {
		#notice-container {
			display: block;
		}
	}

	#notice-container .main-comp {
		flex: 5;
		padding: 0 0.75rem 1rem 0;
	}

	#notice-container .main-comp .feature-image-holder {
		width: 100%;
		margin-bottom: 2rem;
	}

	#notice-container .main-comp .feature-image-holder img {
		width: 100%;
	}

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

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

	#notice-container .side-comp {
		flex: 2;
		padding: 0 0.25rem 1rem 0 !important;
	}

	#notice-container .side-comp .item {
		margin-bottom: 2rem;
		border: 1px solid #2c5d73;
	}

	#notice-container .side-comp .item .item-title {
		padding: 0.25rem 1rem;
		text-align: center;
		background: #2c5d73;
		color: #fff;
	}

	#notice-container .side-comp .item .item-container {
		padding: 0.5rem;
	}

	#notice-container .side-comp .item .item-container .single-item {
		display: block;
		margin-bottom: 0.75rem;
		padding-bottom: 2rem;
		border-bottom: 1px solid #2c5d73;
		transition: all 0.25s ease-in-out;
	}

	#notice-container .side-comp .item .item-container .single-item:last-child {
		border-bottom: none;
		margin-bottom: 0rem;
		padding-bottom: 0.25rem;
	}

	#notice-container .side-comp .item .item-container .single-item .date {
		font-size: 0.8rem;
		font-weight: 500;
		color: #c66f17;
	}

	#notice-container .side-comp .item .item-container .single-item .single-item-title {
		font-size: 0.8rem;
		font-weight: 700;
		color: #2c5d73;
	}

	#notice-container .side-comp .item .item-container .single-item .date-container {
		display: flex;
		align-items: center;
		gap: 0.7rem;
	}

	#notice-container .side-comp .item .item-container .single-item .date-container .date {
		font-size: 0.75rem;
	}

	#notice-container .side-comp .item .item-container .single-item .date-container .icon {
		width: 0.75rem;
		color: #ffffff;
	}

	#notice-container .side-comp .item .item-container .single-item .date-container .icon img {
		width: 100%;
	}

	#notice-container .side-comp .item .item-container .single-item .details {
		font-size: 0.7rem;
		margin-top: 0.3rem;
		color: #232323;
	}

	#notice-container .side-comp .item .news {
		font-size: 0.7rem !important;
		padding-bottom: 2rem !important;
	}

	#notice-container .side-comp .item .view-more {
		display: flex;
		align-items: center;
		padding: 0 0.5rem 0.5rem;
		gap: 0.5rem;
	}

	#notice-container .side-comp .item .view-more .icon {
		width: 1rem;
	}

	#notice-container .side-comp .item .view-more .icon img {
		width: 100%;
	}

	#notice-container .side-comp .item .view-more span {
		font-size: 0.85rem;
		color: #2F4858;
		font-weight: bolder !important;
		transition: all 0.35s ease-in-out;
	}

	#notice-container .side-comp .item .view-more:hover {
		opacity: 1;
	}

	#notice-container .side-comp .item .view-more:hover span {
		color: #E55807;
	}

	@media print {

		head,
		header,
		footer {
			display: none;
		}

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

		#archive-hero {
			margin: 0;
		}

		#notice-container {
			padding: 0;
		}
	}

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