123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676 |
- <?php
- /**
- * Template Name: Campus Life
- *
- * @package UIU_DEPARTMENTAL
- */
- get_header(); ?>
- <?php while (have_posts()) : the_post(); ?>
- <main id="main" class="site-main" role="main">
- <div id="campus-life">
- <div class="hero-section">
- <iframe src="https://www.youtube.com/embed/MfVYcMmbHuk?controls=0&disablekb=1&autoplay=1&mute=1&playsinline=1&loop=1&playlist=MfVYcMmbHuk" allowfullscreen></iframe>
- <div class="hero-content">
- <h1 class="hero-title">Virtual Campus Tour</h1>
- <p class="hero-sub-title">
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat vero reprehenderit ab hic sunt optio.
- </p>
- </div>
- </div>
- <!-- Getting Around -->
- <?php
- $args = array(
- 'post_type' => 'campus-life',
- 'tag' => 'featured-campus-life',
- 'posts_per_page' => 1,
- 'post__not_in' => array(get_the_ID()),
- 'orderby' => 'date',
- 'order' => 'DESC',
- );
- $query = new WP_Query($args);
- if ($query->have_posts()) :
- while ($query->have_posts()) :
- $query->the_post(); ?>
- <div class="getting-around">
- <div class="container">
- <h1 class="title">
- Getting Around
- </h1>
- <div class="content">
- <div class="text-content">
- <p>
- <?php the_excerpt(); ?>
- </p>
- <a class="link" href="">Read in detail</a>
- </div>
- <div class="image-content">
- <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
- </div>
- </div>
- </div>
- </div>
- <?php
- endwhile;
- // else :
- // echo '<div class="no-post-found">No student life has found! </div>';
- endif;
- wp_reset_query();
- ?>
- <div class="campus-content student-life">
- <div class="container-fluid">
- <h1 class="title">Student Life</h1>
- <div class="content content-three">
- <?php
- $args = array(
- 'post_type' => 'campus-life',
- 'category_name' => 'student-life',
- 'posts_per_page' => 3,
- 'post__not_in' => array(get_the_ID()),
- 'orderby' => 'date',
- 'order' => 'DESC',
- );
- $query = new WP_Query($args);
- if ($query->have_posts()) :
- while ($query->have_posts()) :
- $query->the_post(); ?>
- <div class="single-content">
- <div class="image-container">
- <div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
- </div>
- <div class="details">
- <h4 class="content-title"><?php echo get_the_title(); ?></h4>
- <p class="content-detail">
- <?php the_excerpt(); ?>
- </p>
- <a class="link" href="<?php echo get_permalink(); ?>">View details</a>
- </div>
- </div>
- <?php
- endwhile;
- else :
- echo '<div class="no-post-found">No student life has found! </div>';
- endif;
- wp_reset_query(); ?>
- </div>
- </div>
- </div>
- <!-- Arts & Culture -->
- <div class="campus-content arts-culture">
- <div class="container">
- <h1 class="title">Arts & Culture</h1>
- <div class="content content-two">
- <?php
- $args = array(
- 'post_type' => 'campus-life',
- 'category_name' => 'arts-and-culture',
- 'posts_per_page' => 2,
- 'post__not_in' => array(get_the_ID()),
- 'orderby' => 'date',
- 'order' => 'DESC',
- );
- $query = new WP_Query($args);
- if ($query->have_posts()) :
- while ($query->have_posts()) :
- $query->the_post(); ?>
- <div class="single-content">
- <div class="image-container">
- <div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
- </div>
- <div class="details">
- <h4 class="content-title"><?php echo get_the_title(); ?></h4>
- <p class="content-detail">
- <?php the_excerpt(); ?>
- </p>
- <a class="link" href="<?php echo get_permalink(); ?>">View details</a>
- </div>
- </div>
- <?php
- endwhile;
- else :
- echo '<div class="no-post-found">No Arts & Culture post has found! </div>';
- endif;
- wp_reset_query(); ?>
- </div>
- </div>
- </div>
- <!-- Recreation and Wellness -->
- <div class="campus-content recreation-and-wellness">
- <div class="container-fluid">
- <h1 class="title">Athletics, Recreation, & Wellness</h1>
- <div class="content content-three">
- <?php
- $args = array(
- 'post_type' => 'campus-life',
- 'category_name' => 'recreation-and-wellness',
- 'posts_per_page' => 3,
- 'post__not_in' => array(get_the_ID()),
- 'orderby' => 'date',
- 'order' => 'DESC',
- );
- $query = new WP_Query($args);
- if ($query->have_posts()) :
- while ($query->have_posts()) :
- $query->the_post(); ?>
- <div class="single-content">
- <div class="image-container">
- <div class="bg-img" style="background-image: url(<?php echo get_the_post_thumbnail_url(); ?>"></div>
- </div>
- <div class="details">
- <h4 class="content-title"><?php echo get_the_title(); ?></h4>
- <p class="content-detail">
- <?php the_excerpt(); ?>
- </p>
- <a class="link" href="<?php echo get_permalink(); ?>">View details</a>
- </div>
- </div>
- <?php
- endwhile;
- else :
- echo '<div class="no-post-found">No Recreation & Wellness post has found! </div>';
- endif;
- wp_reset_query(); ?>
- </div>
- </div>
- </div>
- <!-- campus statistics -->
- <div class="state">
- <div class="container-fluid analytics">
- <div class="item">
- <h2 class="count">600+</h2>
- <p class="desc">Organized student groups</p>
- </div>
- <div class="item">
- <h2 class="count">69</h2>
- <p class="desc">Undergraduate student residences</p>
- </div>
- <div class="item">
- <h2 class="count">20000+</h2>
- <p class="desc">Students living on campus</p>
- </div>
- </div>
- </div>
- </div>
- </main>
- <!-- #main -->
- <?php endwhile; // end of the loop.
- ?>
- <style>
- #main {
- padding-top: unset;
- }
- #campus-life {
- font-family: "DM Serif Text", serif;
- }
- #campus-life .hero-section {
- position: relative;
- height: 100vh;
- overflow: hidden;
- }
- @media screen and (max-width: 1000px) {
- #campus-life .hero-section {
- height: 75vh;
- margin-top: 90px;
- }
- }
- @media screen and (max-width: 800px) {
- #campus-life .hero-section {
- height: 65vh;
- }
- }
- @media screen and (max-width: 500px) {
- #campus-life .hero-section {
- margin-top: 40px;
- height: 58vh;
- }
- }
- #campus-life .hero-section iframe {
- height: 100%;
- width: 100vw;
- border: none;
- transform: scaleX(1.5) scaleY(1.8);
- }
- #campus-life .hero-section .hero-content {
- background: rgba(0, 0, 0, 0.3);
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 10;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- text-align: left;
- padding-left: 5rem;
- padding-bottom: 3rem;
- }
- @media screen and (max-width: 1000px) {
- #campus-life .hero-section .hero-content {
- padding-left: 1rem;
- }
- }
- @media screen and (max-width: 500px) {
- #campus-life .hero-section .hero-content {
- padding-left: 0.75rem;
- padding-bottom: 0.25rem;
- }
- }
- #campus-life .hero-section .hero-content .hero-title {
- margin-top: auto;
- margin-bottom: 0.25rem !important;
- font-size: 3rem;
- color: #ffffff;
- text-shadow: 3px 4px 10px #111010;
- }
- @media screen and (max-width: 500px) {
- #campus-life .hero-section .hero-content .hero-title {
- font-size: 1.2rem;
- }
- }
- #campus-life .hero-section .hero-content .hero-sub-title {
- display: inline-block !important;
- max-width: 750px !important;
- color: #d7d7d7;
- font-size: 1.2rem;
- text-shadow: 3px 4px 10px #111010;
- }
- @media screen and (max-width: 500px) {
- #campus-life .hero-section .hero-content .hero-sub-title {
- font-size: 0.75rem;
- }
- }
- #campus-life .hero-section .page-title {
- text-align: center;
- font-size: 2.5rem;
- }
- #campus-life .hero-section .page-subtitle {
- color: #7d7d7d;
- font-size: 1.1rem;
- text-align: center;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: unset;
- max-width: 650px !important;
- }
- #campus-life .hero-section .campus-hero {
- padding-top: 2rem;
- }
- #campus-life .hero-section .image-container {
- width: 100%;
- }
- #campus-life .hero-section .image-container img {
- width: 100%;
- }
- #campus-life .hero-section .analytics {
- margin: 3.8rem 0;
- padding: 1.2rem 0 0.5rem;
- border-top: 2px solid #333;
- border-bottom: 2px solid #333;
- text-align: center;
- display: flex;
- justify-content: space-around;
- align-items: center;
- }
- @media screen and (max-width: 500px) {
- #campus-life .hero-section .analytics {
- flex-direction: column;
- }
- }
- #campus-life .hero-section .analytics .item {
- margin-bottom: 1rem;
- }
- #campus-life .hero-section .analytics .count {
- font-weight: 700;
- margin-bottom: 0.5rem !important;
- }
- #campus-life .hero-section .analytics .title {
- font-weight: 500;
- margin-bottom: unset;
- }
- #campus-life .campus-content {
- padding: 4rem 2rem 3rem;
- }
- @media screen and (max-width: 767px) {
- #campus-life .campus-content {
- padding: 2rem 0;
- }
- }
- #campus-life .campus-content .title {
- text-align: center;
- }
- #campus-life .campus-content .content {
- padding: 3rem 0;
- }
- #campus-life .campus-content .content .single-content {
- overflow: hidden;
- }
- #campus-life .campus-content .content .single-content:hover .bg-img {
- transform: scale(1.1);
- }
- #campus-life .campus-content .content .image-container {
- height: 300px;
- width: 100%;
- border-radius: 5px;
- overflow: hidden;
- }
- #campus-life .campus-content .content .image-container .bg-img {
- height: 100%;
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
- transition: all 4.5s;
- }
- #campus-life .campus-content .content .details {
- padding: 0 0.5rem 1rem;
- }
- #campus-life .campus-content .content .content-title {
- text-align: left;
- margin-top: 0.5rem;
- margin-bottom: unset !important;
- text-transform: capitalize;
- }
- #campus-life .campus-content .content .content-detail {
- margin-top: 0.5rem;
- margin-bottom: unset;
- font-size: 0.8rem;
- line-height: 1.7;
- }
- #campus-life .campus-content .content .link {
- margin-top: 0.5rem;
- display: inline-block;
- padding: 0.35rem 0.85rem;
- color: #fff;
- background: #915416;
- font-size: 0.75rem;
- text-transform: capitalize;
- border-radius: 5px;
- }
- #campus-life .campus-content .content .link:hover {
- background: #e17f1d;
- }
- #campus-life .campus-content .content-two {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 2rem;
- }
- #campus-life .campus-content .content-two .single-content {
- text-align: left;
- width: calc(50% - 2rem);
- }
- @media screen and (max-width: 767px) {
- #campus-life .campus-content .content-two .single-content {
- width: 100%;
- }
- }
- #campus-life .campus-content .content-three {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- gap: 2rem;
- }
- #campus-life .campus-content .content-three .single-content {
- text-align: left;
- width: calc(33.33% - 2rem);
- }
- @media screen and (max-width: 1000px) {
- #campus-life .campus-content .content-three .single-content {
- width: calc(50% - 2rem);
- }
- }
- @media screen and (max-width: 767px) {
- #campus-life .campus-content .content-three .single-content {
- width: 100%;
- }
- }
- #campus-life .student-life {
- padding-top: 5rem;
- margin-top: 0;
- }
- #campus-life .student-life,
- #campus-life .recreation-and-wellness {
- background: #f4f4f4;
- }
- #campus-life .getting-around {
- padding-top: 4rem;
- padding-bottom: 7rem;
- }
- @media screen and (max-width: 1000px) {
- #campus-life .getting-around {
- padding-top: 3rem;
- padding-bottom: 1rem;
- }
- }
- @media screen and (max-width: 767px) {
- #campus-life .getting-around {
- padding-top: 2rem;
- padding-bottom: 2rem;
- }
- }
- #campus-life .getting-around .title {
- text-align: center;
- }
- #campus-life .getting-around .content {
- margin: 4rem 0;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- }
- @media screen and (max-width: 992px) {
- #campus-life .getting-around .content {
- display: block;
- }
- }
- #campus-life .getting-around .content .text-content {
- padding: 2rem 3rem 2rem 2rem;
- background: #f4f4f4;
- width: 100%;
- border-radius: 3px;
- }
- #campus-life .getting-around .content .text-content p {
- font-size: 0.9rem;
- margin-bottom: 0.25rem;
- }
- #campus-life .getting-around .content .text-content .link {
- display: block;
- width: -moz-fit-content;
- width: fit-content;
- margin-top: 0.5rem;
- font-size: 0.95rem;
- font-weight: 600;
- color: #915416;
- }
- #campus-life .getting-around .content .text-content .link:hover {
- color: #633a10;
- }
- #campus-life .getting-around .content .image-content {
- width: 100%;
- transform: translateY(100px) translateX(-2rem);
- border-radius: 3px;
- overflow: hidden;
- }
- @media screen and (max-width: 992px) {
- #campus-life .getting-around .content .image-content {
- width: 80%;
- transform: translateY(-10%) translateX(30%);
- }
- }
- @media screen and (max-width: 500px) {
- #campus-life .getting-around .content .image-content {
- margin-top: 2.5rem;
- width: 100%;
- transform: translateY(0) translateX(0);
- }
- }
- #campus-life .getting-around .content .image-content img {
- width: 100%;
- }
- #campus-life .campus-tour {
- margin: 2rem 0 0;
- padding: 2rem 0;
- background: #f4f4f4;
- }
- #campus-life .campus-tour .title {
- text-align: center;
- }
- #campus-life .campus-tour .content {
- width: 100%;
- margin-top: 2rem;
- }
- #campus-life .campus-tour .content .wraper-iframe {
- position: relative;
- width: 100%;
- }
- #campus-life .campus-tour .content iframe {
- aspect-ratio: 16/6;
- width: 100%;
- border-radius: 10px;
- }
- #campus-life .state {
- padding: 4rem 0 3rem;
- }
- #campus-life .state .analytics {
- border-top: 2px solid #333;
- border-bottom: 2px solid #333;
- text-align: center;
- display: flex;
- justify-content: space-around;
- align-items: center;
- }
- @media screen and (max-width: 768px) {
- #campus-life .state .analytics {
- flex-direction: column;
- }
- }
- #campus-life .state .analytics .item {
- margin-bottom: 1rem;
- }
- #campus-life .state .analytics .count {
- font-weight: 700;
- margin-bottom: 0.5rem !important;
- font-size: 2rem;
- }
- #campus-life .state .analytics .desc {
- font-weight: 500;
- margin-bottom: unset;
- }
- </style>
- <?php get_footer(); ?>
|