470 lines
13 KiB
Plaintext
470 lines
13 KiB
Plaintext
<!-- NOT USED FOR NOW -->
|
|
{% assign number_of_featured_courses_of_current_user = 0 %}
|
|
{% for course in my_content.courses %}
|
|
{% if current_person.properties.featured contains course.id %}
|
|
{% assign number_of_featured_courses_of_current_user = number_of_featured_courses_of_current_user | plus: 1 %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<!-- Add the slick-theme.css if you want default styling -->
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
|
|
<!-- Add the slick-theme.css if you want default styling -->
|
|
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
|
|
|
|
{% include "side_navigation_bar" %}
|
|
|
|
<a id="back-to-top-button"></a>
|
|
|
|
<div class="section-margin">
|
|
{% comment %} Hero {% endcomment %}
|
|
<section id="Main" class="section" style="padding-top: 0; padding-bottom: 33px;">
|
|
<div class="section-heading hunt-hero-header" style="margin-top: 1em; margin-bottom: 2em;">
|
|
<h1 class="text-dark-blue sainte-colombe-regular section-heading__heading heading--1 decorative-font hunt-margin-t" style="font-size: 60px;">
|
|
Elevate Your Knowledge
|
|
</h1>
|
|
<p class="text-grey euclid-circular-regular section-heading__subhead heading--3 hero__subhead">
|
|
Curated Courses Inspired By Our Agents To Help Grow Your Business
|
|
</p>
|
|
</div>
|
|
<div class="homepage-images-container">
|
|
<div>
|
|
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27163_3360923_RT+(2).jpg" style="filter: contrast(80%);">
|
|
</div>
|
|
<div>
|
|
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/0B2V0376-1024x683.jpeg">
|
|
</div>
|
|
<div>
|
|
<img class="homepage-image" src="https://s3.us-west-2.amazonaws.com/static.schoolkeep.com/DouglasElliman/BFA_27177_3362525.jpeg">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{% comment %} Courses {% endcomment %}
|
|
<section id="Courses" class="section background-white section--padding-top-only" style="padding-top: 0;">
|
|
{% include 'my_content_header' %}
|
|
{%- assign courses = my_content.courses -%}
|
|
<div id="categories" class="grid">
|
|
<div class="grid__item grid__item--tablet-up-half hunt-margin-b" style="width: 100%;">
|
|
<h2 class="text-dark-blue euclid-circular-bold heading--1 color-indigo-dark" style="margin-bottom: 0;">My Courses</h2>
|
|
</div>
|
|
</div>
|
|
{% comment %} Recommendations {% endcomment %}
|
|
{% if number_of_featured_courses_of_current_user > 0 %}
|
|
<div id="recommendations" class="section background-white section--padding-top-only" style="padding-top: 0;">
|
|
<!-- Featured -->
|
|
<div class="single-carousel">
|
|
<div class="grid">
|
|
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
|
|
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
|
|
Featured Courses</h2>
|
|
</div>
|
|
<p class="euclid-circular-regular carousel-change1 show-more">See More</p>
|
|
</div>
|
|
|
|
<div class="grid grid--equal-height slider1 test-carousel">
|
|
{%- for course in courses -%}
|
|
{% if current_person.properties.featured contains course.id %}
|
|
{% include 'course' %}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
<!-- Featured -->
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- All Enrolled Courses -->
|
|
<div class="single-carousel">
|
|
<div class="grid">
|
|
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
|
|
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
|
|
All Enrolled Courses</h2>
|
|
</div>
|
|
<p class="euclid-circular-regular carousel-change3 show-more">See More</p>
|
|
</div>
|
|
|
|
<div class="grid grid--equal-height slider3">
|
|
{%- for course in courses -%}
|
|
{% include 'course' %}
|
|
{%- endfor -%}
|
|
</div>
|
|
<p class="text-grey euclid-circular-light text-major text-grey" style="margin-bottom: 30px; font-size: 20px; margin-top: 2px; padding-left: 100px;">
|
|
Click <b><a href="/catalog" class="euclid-circular-regular click-here">here</a></b> to access the full course catalog.
|
|
</p>
|
|
</div>
|
|
<!-- All Enrolled Courses -->
|
|
|
|
|
|
<!-- DE Tools & Technology -->
|
|
<div class="single-carousel">
|
|
<div class="grid">
|
|
<div class="grid__item grid__item--tablet-up-half cat-header" style="width: 100%; padding-bottom: 10px">
|
|
<h2 class="text-dark-blue euclid-circular-light heading--1 color-indigo-dark hunt-padding-b">
|
|
DE Tools & Technology</h2>
|
|
</div>
|
|
<p class="euclid-circular-regular carousel-change2 show-more">See More</p>
|
|
</div>
|
|
|
|
<div class="grid grid--equal-height slider2 test-carousel">
|
|
{%- for course in courses -%}
|
|
{% if course.course_category_names == "DE Tools & Technology" %}
|
|
{% include 'course' %}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
<!-- DE Tools & Technology -->
|
|
</section>
|
|
</div>
|
|
|
|
<!--
|
|
<section id="resources" class="section-margin">
|
|
<div class="templates-header hunt-margin-b" style="margin-top: 100px;">
|
|
<div class="grid">
|
|
<div class="grid__item grid__item--tablet-up-third grid__item--desktop-up-5" style="background: white; width: 100% !important;">
|
|
<h2 class="text-dark-blue sainte-colombe-medium heading--1 color-indigo-dark hunt-margin-b">Quick Links & Resources</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="grid__item">
|
|
<span class="euclid-circular-regular" style="font-size: 20px;">Filter: </span>
|
|
<select id="elliman-dropdown">
|
|
<option value="c-all">All</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
</section> -->
|
|
|
|
<style>
|
|
* {box-sizing: border-box;}
|
|
body {font-family: Verdana, sans-serif;}
|
|
.mySlides {display: none;}
|
|
img {vertical-align: middle;}
|
|
|
|
/* Slideshow container */
|
|
.slideshow-container {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.homepage-images-container {
|
|
justify-content: center;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
.homepage-image {
|
|
max-height: 220px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* Caption text */
|
|
.text {
|
|
color: #f2f2f2;
|
|
font-size: 15px;
|
|
padding: 8px 12px;
|
|
position: absolute;
|
|
bottom: 8px;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Number text (1/3 etc) */
|
|
.numbertext {
|
|
color: #f2f2f2;
|
|
font-size: 12px;
|
|
padding: 8px 12px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
/* The dots/bullets/indicators */
|
|
.dot {
|
|
height: 5.3px;
|
|
width: 5.3px;
|
|
margin: 0 2px;
|
|
background-color: #c7c7c7;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
transition: background-color 0.6s ease;
|
|
}
|
|
|
|
.active {
|
|
background-color: #009CBD;
|
|
}
|
|
|
|
/* Fading animation */
|
|
.fade {
|
|
-webkit-animation-name: fade;
|
|
-webkit-animation-duration: 1.5s;
|
|
animation-name: fade;
|
|
animation-duration: 1.5s;
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
from {opacity: .4}
|
|
to {opacity: 1}
|
|
}
|
|
|
|
@keyframes fade {
|
|
from {opacity: .4}
|
|
to {opacity: 1}
|
|
}
|
|
|
|
/* On smaller screens, decrease text size */
|
|
@media only screen and (max-width: 300px) {
|
|
.text {font-size: 11px}
|
|
}
|
|
</style>
|
|
|
|
<script
|
|
src="https://code.jquery.com/jquery-3.5.1.min.js"
|
|
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
|
|
crossorigin="anonymous"></script>
|
|
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
|
|
|
|
|
|
<script>
|
|
var slideIndex = 0;
|
|
showSlides();
|
|
|
|
function showSlides() {
|
|
var i;
|
|
var slides = document.getElementsByClassName("mySlides");
|
|
var dots = document.getElementsByClassName("dot");
|
|
for (i = 0; i < slides.length; i++) {
|
|
slides[i].style.display = "none";
|
|
}
|
|
slideIndex++;
|
|
if (slideIndex > slides.length) {slideIndex = 1}
|
|
for (i = 0; i < dots.length; i++) {
|
|
dots[i].className = dots[i].className.replace(" active", "");
|
|
}
|
|
slides[slideIndex-1].style.display = "block";
|
|
dots[slideIndex-1].className += " active";
|
|
setTimeout(showSlides, 5000); // Change image every 2 seconds
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
var btn = $('#back-to-top-button');
|
|
|
|
$(window).scroll(function() {
|
|
if ($(window).scrollTop() > 300) {
|
|
btn.addClass('show');
|
|
} else {
|
|
btn.removeClass('show');
|
|
}
|
|
});
|
|
|
|
btn.on('click', function(e) {
|
|
e.preventDefault();
|
|
$('html, body').animate({scrollTop:0}, '300');
|
|
});
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
</script>
|
|
<script>
|
|
$('.carousel-change1').click(function() {
|
|
|
|
if($('.carousel-change1').hasClass('show-more')) {
|
|
$('.slider1').slick('unslick');
|
|
$('.show-more').text('Show Less');
|
|
$('.show-more').addClass('show-less');
|
|
$('.show-more').removeClass('show-more');
|
|
} else if($('.carousel-change1').hasClass('show-less')) {
|
|
$('.show-less').text('Show More');
|
|
$('.show-less').addClass('show-more');
|
|
$('.show-less').removeClass('show-less');
|
|
$('.slider1').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
infinite: true,
|
|
cssEase: 'linear',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
$('.carousel-change2').click(function() {
|
|
|
|
if($('.carousel-change2').hasClass('show-more')) {
|
|
$('.slider2').slick('unslick');
|
|
$('.show-more').text('Show Less');
|
|
$('.show-more').addClass('show-less');
|
|
$('.show-more').removeClass('show-more');
|
|
} else if($('.carousel-change2').hasClass('show-less')) {
|
|
$('.show-less').text('Show More');
|
|
$('.show-less').addClass('show-more');
|
|
$('.show-less').removeClass('show-less');
|
|
$('.slider2').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
infinite: true,
|
|
cssEase: 'linear',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<script>
|
|
$('.carousel-change3').click(function() {
|
|
|
|
if($('.carousel-change3').hasClass('show-more')) {
|
|
$('.slider3').slick('unslick');
|
|
$('.show-more').text('Show Less');
|
|
$('.show-more').addClass('show-less');
|
|
$('.show-more').removeClass('show-more');
|
|
} else if($('.carousel-change3').hasClass('show-less')) {
|
|
$('.show-less').text('Show More');
|
|
$('.show-less').addClass('show-more');
|
|
$('.show-less').removeClass('show-less');
|
|
$('.slider3').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
infinite: true,
|
|
cssEase: 'linear',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
function orderSlides() {
|
|
$(".slider3 .course-details__item").each(function() {
|
|
var currentSlideDataOrder = $(this).attr("data-order")
|
|
var firstSlideDataOrder = $(".course-details__item").first().attr("data-order")
|
|
if (currentSlideDataOrder > firstSlideDataOrder) {
|
|
$($(this)).prependTo(".slider3")
|
|
}
|
|
})
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
$('.test-carousel').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
infinite: true,
|
|
cssEase: 'linear',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
})
|
|
|
|
orderSlides()
|
|
initializeCarousel()
|
|
});
|
|
|
|
|
|
|
|
function initializeCarousel() {
|
|
$('.slider3').slick({
|
|
slidesToShow: 3,
|
|
slidesToScroll: 1,
|
|
dots: true,
|
|
infinite: true,
|
|
cssEase: 'linear',
|
|
responsive: [
|
|
{
|
|
breakpoint: 1024,
|
|
settings: {
|
|
slidesToShow: 2,
|
|
slidesToScroll: 1,
|
|
infinite: true,
|
|
dots: true
|
|
}
|
|
},
|
|
{
|
|
breakpoint: 600,
|
|
settings: {
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1
|
|
}
|
|
}
|
|
]
|
|
})
|
|
}
|
|
</script> |