Files
Gainsight/Custom_Templates/customer_templates/CIRE Academy/homepage.html.liquid

185 lines
6.7 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% include "hero_header"%}
{% include "course_version_outdated_alert", courses: courses.featured %}
<main class="np-main np-homepage">
{% include 'homepage_hero' %}
{% include "sub_navigation" %}
<div class="featured-courses-wrapper container">
<div class="featured-courses row">
<div class="featured-courses-title featured-course-card col-md-4">
Featured<br>Courses
</div>
<div class="featured-course-card col-12 col-md-8">
{% assign course = courses.in_catalog | where: 'name', 'C-Social' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/C-social.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-8">
{% assign course = courses.in_catalog | where: 'name', 'The Digital Listing Presentation (DLP)' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/the_digital_listening.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-4">
{% assign course = courses.in_catalog | where: 'name', 'Perfect Prospecting' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/perfect_prospecting.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-6">
{% assign course = courses.in_catalog | where: 'name', 'Creative Studio' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/creative_studio.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-6">
{% comment %} course name contains &, so using id instead to avoid errors {% endcomment %}
{% assign course = courses.in_catalog | where: 'id', 'b316a566-5bdd-4797-92b0-6e1471bc2576' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/the_digital_cma.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-4">
{% assign course = courses.in_catalog | where: 'name', 'CRM' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/crm.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
<div class="featured-course-card col-12 col-md-8">
{% assign course = courses.in_catalog | where: 'name', 'Perfect Listing Presentation' | first %}
{% if course %}
{% assign image_url = "https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/perfect_listening.png" %}
{% include 'cards_featured_course' with course, image_url %}
{% endif %}
</div>
</div>
</div>
<div class="homepage-video-section">
<div class="homepage-video-container">
<iframe class="homepage-video-iframe" title="vimeo-player" src="https://player.vimeo.com/video/763891856?h=2f9d2ba0f5" width="640" height="360" frameborder="0" allowfullscreen></iframe>
{%- comment -%} <iframe class="homepage-video-iframe" src="https://www.youtube-nocookie.com/embed/Kk17reatQ3g" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> {%- endcomment -%}
</div>
<div class="homepage-video-text">
<div class="homepage-video-text-title">
The Academy
</div>
<div class="homepage-video-text-subtitle">
Introducing The Academy. A learning center exclusively for Christie's International Real Estate featuring live trainings and on-demand courses on marketing, technology, running a successful real estate business, and more. The Academy was built to guide, support, and inspire. The industrys best educational offerings, available anywhere and anytime.
</div>
</div>
</div>
</main>
{% include "footer" %}
<style>
.featured-courses-wrapper {
max-width: 100%;
padding: 0 6%;
margin-top: 80px;
}
.featured-courses-title {
font-size: 4.5rem;
font-weight: 500;
line-height: 4.6rem;
font-family: 'Playfair Display', serif;
text-align: left;
align-self: center;
}
.featured-course-card {
padding-bottom: 80px;
}
.featured-course-card-image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.featured-course-card-footer {
margin-top: 8px;
display: flex;
justify-content: space-between;
}
.featured-course-card-footer-title {
font-weight: 600;
font-size: 1.5rem;
align-self: center;
}
.featured-course-card-footer-button {
font-weight: 600;
text-decoration: underline !important;
align-self: center;
}
.homepage-video-section {
display: flex;
margin-top: 80px;
}
.homepage-video-container {
flex-basis: 65%;
}
.homepage-video-iframe {
width: 100%;
/* calc 100vw * flex-basis of parent * height/width of native video iframe */
height: calc(100vw * 0.65 * 0.5625);
}
.homepage-video-text {
width: 22%;
align-self: center;
margin-left: 4%;
color: black;
}
.homepage-video-text-title {
font-family: 'Playfair Display', serif;
font-size: 2.25rem;
font-weight: 500;
margin-bottom: 40px;
}
.homepage-video-text-subtitle {
font-family: 'Gilroy', sans-serif;
font-weight: 300;
}
@media screen and (max-width: 880px) {
.featured-courses-title {
font-size: 4rem;
}
}
@media screen and (max-width: 768px) {
.featured-courses-title {
text-align: center;
}
.homepage-video-section {
flex-direction: column;
padding: 0 6%;
}
.homepage-video-text {
width: 22%;
align-self: center;
margin-left: 4%;
width: 75%;
align-self: left;
margin-left: 2%;
margin-top: 16px;
}
.homepage-video-text-title {
margin-bottom: 40px;
margin-bottom: 20px;
}
}
@media screen and (max-width: 550px) {
.homepage-video-text {
width: 100%;
}
}
</style>