uiu-cse/archive-notice.php

<?php

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

get_header();
?>

<main id="primary" class="site-main">

	<section id="archive-hero">

		<div class="container">

			<!-- breadcrumb -->
			<nav aria-label="breadcrumb">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Category</a></li>
					<li>Page</li>
				</ul>
			</nav>

			<div class="content">

				<!-- left content -->
				<div class="left-content">

					<div class="main-title">Notice</div>

					<div class="short-details">
						As a graduate you will have access to all University of London alumni services.
					</div>

					<div class="links">

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

						<!-- printer -->
						<a href="#">
							<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>

				<!-- right content -->
				<div class="right-content">
					<img src="<?php echo (get_template_directory_uri()) ?>/img/campus_07.jpg" alt="">
				</div>

			</div>
		</div>



	</section>


	<section class="container">

		<div id="notice-container">
			<?php if (have_posts()) : ?>
				<?php while (have_posts()) : the_post(); ?>

					<!-- single notice -->
					<div class="notice">
						<div class="image">
							<img src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
						</div>


						<div class="details">

							<!-- date -->
							<div class="date-container">
								<!-- icon -->
								<span class="icon">
									<img src="<?php echo (get_template_directory_uri()) ?>/img/calendar-days-regular.svg" alt="">
								</span>
								<!-- date -->
								<span class="date">
									June 4th, 2023
								</span>
							</div>

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

						</div>
					</div>

				<?php endwhile; ?>
				<?php the_posts_navigation(); ?>
			<?php
			else :
				get_template_part('template-parts/content', 'none');
			endif;
			?>

		</div>

	</section>
</main><!-- #main -->

<style>
	#notice-container {
		padding: 2rem 0;
		display: flex;
		flex-wrap: wrap;
		gap: 1.5rem;
	}

	#notice-container .notice {
		width: calc(25% - 1.5rem);
		margin-bottom: 1rem !important;
	}

	#notice-container .notice .image {
		width: 100%;
		border-bottom: 4px solid #F68B1F;
		overflow: hidden;
	}

	#notice-container .notice .image img {
		width: 100%;
		transition: 5s;
	}

	#notice-container .notice .image img:hover {
		transform: scale(1.5);
	}

	#notice-container .notice .details {
		padding: 0.25rem;
	}

	#notice-container .notice .details .date-container {
		margin-top: 0.75rem;
		font-size: 0.7rem;
		font-weight: 700;
		color: #2c5d73;
		display: flex;
		align-items: center;
		gap: 0.35rem;
	}

	#notice-container .notice .details .date-container .icon {
		width: 0.7rem;
	}

	#notice-container .notice .details .date-container .icon img {
		width: 100%;
	}

	#notice-container .notice .details .title {
		margin-top: 0.75rem;
		font-size: 0.9rem;
		color: #2c5d73;
		font-weight: 600;
		line-height: 1.4;
	}

	#notice-container .notice .details .title a {
		color: inherit !important;
	}

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