uiu-cse/single-news.php

<?php

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


		<div class="sections">

			<section id="news-single-header" class="container">
				<h5>News</h5>
				<h1><?php echo get_the_title(); ?></h1>
				<p class="subtext">
					<?php echo get_the_excerpt(); ?>
				</p>
				<span class="news-date single"><?php the_field('news_date'); ?></span>

				<hr>

				<div class="news-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>

			<section id="news-single-header" class="container">
				<div class="news-single-body">
					<span class="author"> By <?php echo get_the_author_meta('display_name'); ?></span>
					<div class="article-cover-image">
						<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">

						<span class="img-caption"> </span>
					</div>
					<div class="article">
						<?php echo get_the_content(); ?>
					</div>
					<hr>
				</div>

			</section>


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

				<h2>In Other News</h2>
				<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>

			</section>

		</div>



	</main>




<?php endwhile; ?>
<style>
	p {
		max-width: 100% !important;
	}

	header {
		height: 100px !important;
	}

	#news-single-header h5 {
		margin-top: 30px;
		font-size: 30px;
	}

	#news-single-header h1 {
		color: #000 !important;
		font-family: "DM Serif Text", serif;
	}

	#news-single-header h5 {
		color: #2F4858;
		font-size: 34px;
	}

	#news-single-header .subtext {
		font-size: 22px !important;
		color: #2F4858 !important;
	}

	#news-single-header .news-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
	}

	.news-socials {
		margin: 20px 20px !important;
		font-size: 26x;
	}

	.news-socials a {
		margin: 0px 15px;
	}

	.social-icons {
		color: #2F4858;
	}

	.news-single-body {
		max-width: 900px !important;
		margin: 30px auto !important;
	}

	.news-single-body p {
		font-size: 18px;
		color: #2F4858 !important;
	}

	.news-single-body h3 {
		font-family: "DM Serif Text", serif;
		font-size: 26px;
		color: #2F4858;
	}

	.news-single-body .author {
		display: block;
		color: rgba(0, 0, 0, 0.6431372549);
		margin: 20px auto !important;
	}

	.img-caption {
		font-size: 14px;
		color: #475481 !important;
		line-height: 14px;
	}

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

	#more-news h2 {
		color: #000 !important;
		width: 100%;
		text-align: center;
	}

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

	#more-news .stub-img-holder {
		height: 300px;
		overflow: hidden;
	}

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

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

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

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