single-success_story.php 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <?php
  2. /**
  3. * The template for displaying all single success_story posts
  4. *
  5. * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
  6. *
  7. * @package UIU_CSE
  8. */
  9. get_header(); ?>
  10. <?php while (have_posts()) : the_post(); ?>
  11. <main id="main" class="site-main" role="main">
  12. <div class="sections">
  13. <section id="success-single-header" class="container">
  14. <h5>Student Success Story</h5>
  15. <div class="success-img-title">
  16. <img src=" <?php the_field('profile_image'); ?>" alt="">
  17. <div class="success-name">
  18. <h1><?php echo get_the_title(); ?></h1>
  19. <span class="subtext">
  20. <?php the_field('student_designation'); ?>
  21. </span>
  22. </div>
  23. </div>
  24. <hr>
  25. <div class="success-socials">
  26. <div>
  27. SHARE:
  28. <a href="#" class="social-icons"><i class="fa-brands fa-facebook-f"></i></a>
  29. <a href="#" class="social-icons"><i class="fa-brands fa-twitter"></i></a>
  30. <a href="#" class="social-icons"><i class="fa-brands fa-linkedin-in"></i></a>
  31. </div>
  32. </div>
  33. </section>
  34. <section id="success-single-body" class="container">
  35. <div class="success-single-text">
  36. <?php if (has_post_thumbnail()) : ?>
  37. <div class="article-cover-image">
  38. <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
  39. <span class="img-caption"> </span>
  40. </div>
  41. <?php endif ?>
  42. <div class="article">
  43. <?php echo the_content(); ?>
  44. </div>
  45. <hr>
  46. </div>
  47. </section>
  48. </div>
  49. </main>
  50. <?php endwhile; ?>
  51. <style>
  52. p {
  53. max-width: 100% !important;
  54. }
  55. header {
  56. height: 100px !important;
  57. }
  58. #success-single-header {
  59. padding-top: 40px !important;
  60. display: flex;
  61. flex-direction: column;
  62. justify-content: center;
  63. align-items: flex-start;
  64. margin-bottom: 40px !important;
  65. }
  66. #success-single-header hr {
  67. margin: 10px 0px !important;
  68. width: 100%;
  69. }
  70. #success-single-header h5 {
  71. font-size: 30px;
  72. color: #2F4858;
  73. }
  74. #success-single-header .success-img-title {
  75. display: flex;
  76. flex-direction: row;
  77. justify-content: flex-start;
  78. align-items: flex-start;
  79. }
  80. #success-single-header .success-img-title img {
  81. height: 150px;
  82. width: 150px;
  83. -o-object-fit: cover;
  84. object-fit: cover;
  85. }
  86. #success-single-header .success-img-title .success-name {
  87. height: 150px;
  88. display: flex;
  89. flex-direction: column;
  90. justify-content: center;
  91. align-items: flex-start;
  92. padding: 10px 20px;
  93. }
  94. #success-single-header .success-img-title .success-name .subtext {
  95. display: block;
  96. color: #2F4858;
  97. }
  98. #success-single-header .success-img-title .success-name h1 {
  99. margin: 0px !important;
  100. color: #000;
  101. font-family: "DM Serif Text", serif;
  102. font-size: 30px !important;
  103. }
  104. #success-single-header .success-socials {
  105. margin: 0px 20px !important;
  106. font-size: 26x;
  107. }
  108. #success-single-header .success-socials a {
  109. margin: 0px 10px;
  110. }
  111. .success-single-text {
  112. max-width: 900px;
  113. margin: 0px auto 100px !important;
  114. }
  115. .success-single-text p {
  116. text-align: justify;
  117. color: #2F4858;
  118. }
  119. /*# sourceMappingURL=single-success.css.map */
  120. </style>
  121. <?php get_footer(); ?>