uiu-sobe/page-template/page-campus-life.php

<?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(); ?>