uiu-cse/archive-news.php

<?php

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

get_header();
?>

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

		<section id="all-news" class="container">

			<h2>All News</h2>

			<hr>

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

					<div class="grid">
						<div class="stub">

							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_05.jpg" alt="">
							</div>
							<span class="news-date">January 1, 2023</span>

							<a href="#">
								<h3>Learning to make a museum more accessible</h3>
							</a>

						</div>

						<div class="stub">
							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_02.jpg" alt="">
							</div>
							<span class="news-date">January 1, 2023</span>

							<a href="#">
								<h3>New blood test to identify infections could reduce global antibiotic overuse</h3>
							</a>

						</div>

						<div class="stub">
							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/gettybacktoschool.webp" alt="">
							</div>
							<span class="news-date">January 5, 2023</span>


							<a href="#">
								<h3>New center at addresses the forces shaping early childhood</h3>
							</a>

						</div>
					</div>
					<div class="grid">
						<div class="stub">

							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_05.jpg" alt="">
							</div>
							<span class="news-date">January 1, 2023</span>

							<a href="#">
								<h3>Learning to make a museum more accessible</h3>
							</a>

						</div>

						<div class="stub">
							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_02.jpg" alt="">
							</div>
							<span class="news-date">January 1, 2023</span>

							<a href="#">
								<h3>New blood test to identify infections could reduce global antibiotic overuse</h3>
							</a>

						</div>

						<div class="stub">
							<div class="stub-img-holder">
								<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/gettybacktoschool.webp" alt="">
							</div>
							<span class="news-date">January 5, 2023</span>


							<a href="#">
								<h3>New center at addresses the forces shaping early childhood</h3>
							</a>

						</div>
					</div>
				<?php endwhile; ?>

				<?php the_posts_navigation(); ?>

			<?php
			else :

				get_template_part('template-parts/content', 'none');

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

<style>
	header {
		height: 100px !important;
	}

	#all-news {
		display: flex;
		flex-direction: column;
	}

	#all-news h2 {
		color: #000 !important;
		margin-top: 40px;
		margin-bottom: 20px;
	}

	#all-news .stub {
		margin: 30px auto;
	}

	#all-news .stub-img-holder {
		height: 200px;
		overflow: hidden;
	}

	#all-news .stub-img-holder img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
	}

	#all-news .news-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
		margin: 10px 0px !important;
	}

	#all-news h3 {
		height: 50px;
		font-size: 18px;
		line-height: 22px;
		font-family: "Open Sans", sans-serif;
		color: #2F4858 !important;
		margin: 20px auto;
	}

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