uiu-sobe/single-success_story.php

<?php

/**
 * The template for displaying all single success_story posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package UIU_DEPARTMENTAL
 */

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

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

		<div class="sections">

			<section id="success-single-header" class="container">

				<h5>Student Success Story</h5>

				<div class="success-img-title">
					<img src=" <?php the_field('profile_image'); ?>" alt="">
					<div class="success-name">
						<h1><?php echo get_the_title(); ?></h1>
						<span class="subtext">
							<?php the_field('student_designation'); ?>
						</span>
					</div>
				</div>

				<hr>

				<div class="success-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="success-single-body" class="container">
				<div class="success-single-text">

					<?php if (has_post_thumbnail()) : ?>
						<div class="article-cover-image">
							<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
							<span class="img-caption"> </span>
						</div>
					<?php endif ?>

					<div class="article">
						<?php echo the_content(); ?>
					</div>
					<hr>
				</div>

			</section>
		</div>

	</main>

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

	header {
		height: 100px !important;
	}

	#success-single-header {
		padding-top: 40px !important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		margin-bottom: 40px !important;
	}

	#success-single-header hr {
		margin: 10px 0px !important;
		width: 100%;
	}

	#success-single-header h5 {
		font-size: 30px;
		color: #2F4858;
	}

	#success-single-header .success-img-title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
	}

	#success-single-header .success-img-title img {
		height: 150px;
		width: 150px;
		-o-object-fit: cover;
		object-fit: cover;
	}

	#success-single-header .success-img-title .success-name {
		height: 150px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		padding: 10px 20px;
	}

	#success-single-header .success-img-title .success-name .subtext {
		display: block;
		color: #2F4858;
	}

	#success-single-header .success-img-title .success-name h1 {
		margin: 0px !important;
		color: #000;
		font-family: "DM Serif Text", serif;
		font-size: 30px !important;
	}

	#success-single-header .success-socials {
		margin: 0px 20px !important;
		font-size: 26x;
	}

	#success-single-header .success-socials a {
		margin: 0px 10px;
	}

	.success-single-text {
		max-width: 900px;
		margin: 0px auto 100px !important;
	}

	.success-single-text p {
		text-align: justify;
		color: #2F4858;
	}

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