<div class="home_feature">
<div class="home_feature_spotlight">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feature_header">
<h1 class="home_feature_title" id="page_title">Now is the perfect time to become a lifelong Monarch.</h1>
<div class="home_feature_media">
<figure class="home_feature_figure">
<img class="home_feature_image" src="https://images.fastspot.com/methodist-university/735x980/1" alt="" loading="eager" width="735" height="980">
</figure>
<div class="js-background-video-wrapper home_feature_video">
<iframe class="js-background-video-iframe home_feature_iframe" src="//player.vimeo.com/video/705844125?autoplay=1&loop=1&muted=1&background=1" title="Now is the perfect time to become a lifelong Monarch. video" allow="autoplay; fullscreen" allowfullscreen></iframe>
<script src="//player.vimeo.com/api/player.js"></script>
<div class="home_feature_video_controls">
<div class="page_header_bg_video_controls">
<button class="js-page-header-bg-video-play-button page_header_bg_video_play_button">
<span class="page_header_bg_video_play_button_inner">
<span class="page_header_bg_video_play_button_label">Play Video</span>
<span class="page_header_bg_video_play_button_icon">
<span class="page_header_bg_video_play_button_icon_inner">
<svg class="icon icon_play">
<use href="/images/icons.svg#play" />
</svg>
</span>
</span>
</span>
</button>
<button class="js-page-header-bg-video-pause-button page_header_bg_video_pause_button">
<span class="page_header_bg_video_pause_button_inner">
<span class="page_header_bg_video_pause_button_label">Pause Video</span>
<span class="page_header_bg_video_play_button_icon">
<span class="page_header_bg_video_play_button_icon_inner">
<svg class="icon icon_pause">
<use href="/images/icons.svg#pause" />
</svg>
</span>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feature_body">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feature_body_inner">
<div class="home_feature_tabs">
<a class="home_feature_tab" href="#Engage">
Engage
</a>
<a class="home_feature_tab" href="#Enrich">
Enrich
</a>
<a class="home_feature_tab" href="#Empower">
Empower
</a>
</div>
<ul class="home_feature_items">
<li class="home_feature_item" id="Engage">
<div class="home_feature_item_inner">
<figure class="home_feature_item_biggie" aria-hidden="true">
<span class="home_feature_item_biggie_media">
<picture class="home_feature_item_biggie_picture">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/1">
<img class="home_feature_item_biggie_image" src="//images.fastspot.com/methodist-university/500x282/1" alt="" loading="lazy" width="500px" height="282px">
</picture>
</span>
</figure>
<div class="home_feature_item_wrapper">
<figure class="home_feature_item_figure">
<blockquote class="home_feature_item_quote">
<p>"What I have learned at MU can’t be confined to a classroom—it comes in the form of the relationships you build and the lessons you learn from everyone you come into contact with."</p>
</blockquote>
<figcaption class="home_feature_item_figcaption">
<span class="home_feature_item_avatar">
<img class="home_feature_item_avatar_image" src="https://images.fastspot.com/methodist-university/300x300/1" alt="" loading="lazy" width="300" height="300">
</span>
<span class="home_feature_item_quote_info">
<span class="home_feature_item_quote_info_inner">
<span class="home_feature_item_quote_name">Alexandra Proulx ’19</span>
<span class="home_feature_item_quote_label">Justice Studies</span>
</span>
</span>
</figcaption>
</figure>
<div class="home_feature_item_action">
<a href="#" class="home_feature_item_link">
<span class="home_feature_item_link_inner">
<span class="home_feature_item_link_label">Find Your Program</span>
<span class="home_feature_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</li>
<li class="home_feature_item" id="Enrich">
<div class="home_feature_item_inner">
<figure class="home_feature_item_biggie" aria-hidden="true">
<span class="home_feature_item_biggie_media">
<picture class="home_feature_item_biggie_picture">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/2">
<img class="home_feature_item_biggie_image" src="//images.fastspot.com/methodist-university/500x282/2" alt="" loading="lazy" width="500px" height="282px">
</picture>
</span>
</figure>
<div class="home_feature_item_wrapper">
<figure class="home_feature_item_figure">
<blockquote class="home_feature_item_quote">
<p>"What I have learned at MU can’t be confined to a classroom—it comes in the form of the relationships you build and the lessons you learn from everyone you come into contact with."</p>
</blockquote>
<figcaption class="home_feature_item_figcaption">
<span class="home_feature_item_avatar">
<img class="home_feature_item_avatar_image" src="https://images.fastspot.com/methodist-university/300x300/2" alt="" loading="lazy" width="300" height="300">
</span>
<span class="home_feature_item_quote_info">
<span class="home_feature_item_quote_info_inner">
<span class="home_feature_item_quote_name">Noah Sachs ’18</span>
<span class="home_feature_item_quote_label">Marketing</span>
</span>
</span>
</figcaption>
</figure>
<div class="home_feature_item_action">
<a href="#" class="home_feature_item_link">
<span class="home_feature_item_link_inner">
<span class="home_feature_item_link_label">Student Life at MU</span>
<span class="home_feature_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</li>
<li class="home_feature_item" id="Empower">
<div class="home_feature_item_inner">
<figure class="home_feature_item_biggie" aria-hidden="true">
<span class="home_feature_item_biggie_media">
<picture class="home_feature_item_biggie_picture">
<source media="(min-width: 500px)" srcset="https://images.fastspot.com/methodist-university/740x740/3">
<img class="home_feature_item_biggie_image" src="//images.fastspot.com/methodist-university/500x282/3" alt="" loading="lazy" width="500px" height="282px">
</picture>
</span>
</figure>
<div class="home_feature_item_wrapper">
<figure class="home_feature_item_figure">
<blockquote class="home_feature_item_quote">
<p>"I would describe my experience at Methodist as a journey that has not only helped me grow as a leader, but one that has changed my life."</p>
</blockquote>
<figcaption class="home_feature_item_figcaption">
<span class="home_feature_item_avatar">
<img class="home_feature_item_avatar_image" src="https://images.fastspot.com/methodist-university/300x300/" alt="" loading="lazy" width="300" height="300">
</span>
<span class="home_feature_item_quote_info">
<span class="home_feature_item_quote_info_inner">
<span class="home_feature_item_quote_name">Devan Cox ’19</span>
<span class="home_feature_item_quote_label">SGA President, Kinesiology</span>
</span>
</span>
</figcaption>
</figure>
<div class="home_feature_item_action">
<a href="#" class="home_feature_item_link">
<span class="home_feature_item_link_inner">
<span class="home_feature_item_link_label">Explore MU Leadership Fellows</span>
<span class="home_feature_item_link_icon" aria-hidden="true">
<svg class="icon icon_chevron_right">
<use href="/images/icons.svg#chevron_right" />
</svg>
</span>
</span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="home_feature">
<div class="home_feature_spotlight">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feature_header">
<h1 class="home_feature_title" id="page_title">{{ title }}</h1>
<div class="home_feature_media">
<figure class="home_feature_figure">
{% include '@partial-image' with {
class: 'home_feature',
alt: '',
image: 1,
loading: 'eager',
sources: [
img.portraitFull.med,
]
} %}
</figure>
<div class="js-background-video-wrapper home_feature_video">
<iframe class="js-background-video-iframe home_feature_iframe" src="//player.vimeo.com/video/{{ video }}?autoplay=1&loop=1&muted=1&background=1" title="{{ title }} video" allow="autoplay; fullscreen" allowfullscreen></iframe>
<script src="//player.vimeo.com/api/player.js"></script>
<div class="home_feature_video_controls">
<div class="page_header_bg_video_controls">
<button class="js-page-header-bg-video-play-button page_header_bg_video_play_button">
<span class="page_header_bg_video_play_button_inner">
<span class="page_header_bg_video_play_button_label">Play Video</span>
<span class="page_header_bg_video_play_button_icon">
<span class="page_header_bg_video_play_button_icon_inner">
{{ icon('play') }}
</span>
</span>
</span>
</button>
<button class="js-page-header-bg-video-pause-button page_header_bg_video_pause_button">
<span class="page_header_bg_video_pause_button_inner">
<span class="page_header_bg_video_pause_button_label">Pause Video</span>
<span class="page_header_bg_video_play_button_icon">
<span class="page_header_bg_video_play_button_icon_inner">
{{ icon('pause') }}
</span>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="home_feature_body">
<div class="fs-row">
<div class="fs-cell">
<div class="home_feature_body_inner">
<div class="home_feature_tabs">
{% for item in items %}
<a class="home_feature_tab" href="#{{ item.title }}">
{{ item.title }}
</a>
{% endfor %}
</div>
<ul class="home_feature_items">
{% for item in items %}
<li class="home_feature_item" id="{{ item.title }}">
<div class="home_feature_item_inner">
<figure class="home_feature_item_biggie" aria-hidden="true">
<span class="home_feature_item_biggie_media">
{% include '@partial-picture' with {
class: 'home_feature_item_biggie',
alt: '',
image: item.image,
loading: 'lazy',
default: img.wide.xsml,
sources: {
'500px': img.square.sml
}
} %}
</span>
</figure>
<div class="home_feature_item_wrapper">
<figure class="home_feature_item_figure">
<blockquote class="home_feature_item_quote">
<p>{{ item.quote }}</p>
</blockquote>
<figcaption class="home_feature_item_figcaption">
<span class="home_feature_item_avatar">
{% include '@partial-image' with {
class: 'home_feature_item_avatar',
alt: '',
image: item.avatar,
loading: 'lazy',
sources: [
img.square.xxsml,
]
} %}
</span>
<span class="home_feature_item_quote_info">
<span class="home_feature_item_quote_info_inner">
<span class="home_feature_item_quote_name">{{ item.name }}</span>
<span class="home_feature_item_quote_label">{{ item.label }}</span>
</span>
</span>
</figcaption>
</figure>
<div class="home_feature_item_action">
{% include '@partial-link' with {
class: 'home_feature_item',
title: item.link.title,
url: item.link.url,
icon: item.link.icon
} %}
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
No notes defined.