117 lines
3.6 KiB
Plaintext
117 lines
3.6 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
|
<div class="np-homepage-hero">
|
|
<div class="np-homepage-hero-image">
|
|
</div>
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline np-header-font-color">
|
|
Video Tutorials
|
|
</div>
|
|
<div class="np-homepage-subheadline np-header-font-color">
|
|
Beginner to advanced level training for the Camera IQ project editor
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% include "sub_navigation" %}
|
|
<div class='video-carousel'>
|
|
<div class='video-carousel-title'>
|
|
Getting Started
|
|
</div>
|
|
<div class='video-carousel-carousel-1'>
|
|
{% for course in courses.in_catalog %}
|
|
<div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class='video-carousel'>
|
|
<div class='video-carousel-title'>
|
|
Fundamentals
|
|
</div>
|
|
<div class='video-carousel-carousel-2'>
|
|
{% for course in courses.in_catalog %}
|
|
<div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class='video-carousel'>
|
|
<div class='video-carousel-title'>
|
|
Creative Exploration
|
|
</div>
|
|
<div class='video-carousel-carousel-3'>
|
|
{% for course in courses.in_catalog %}
|
|
<div class='col-xs-12 col-md-6 col-lg-4 np-stretch-content'>
|
|
{% include "cards_course" with course %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% include "footer" %}
|
|
<style>
|
|
.video-carousel {
|
|
max-width: 85%;
|
|
margin: auto;
|
|
margin-top: 70px;
|
|
}
|
|
.video-carousel-title {
|
|
font-size: 26px;
|
|
padding: 15px 0;
|
|
}
|
|
.slick-slider {
|
|
display: flex;
|
|
}
|
|
.slick-arrow {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
font-size: 82px;
|
|
font-weight: 100;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.slick-prev {
|
|
left: -20px;
|
|
}
|
|
.slick-next {
|
|
right: -20px;
|
|
}
|
|
.np-card-content-description {
|
|
height: 100px;
|
|
}
|
|
.np-card-content-title {
|
|
height: 85px;
|
|
overflow: clip;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$(".np-sub-navigation-content-item:contains('Videos')").addClass('np-sub-navigation-content-item-active')
|
|
$(".video-carousel-carousel-1").slick({
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
|
|
nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
|
|
infinite: false,
|
|
slidesToShow: 3,
|
|
})
|
|
$(".video-carousel-carousel-2").slick({
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
|
|
nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
|
|
infinite: false,
|
|
slidesToShow: 3,
|
|
})
|
|
$(".video-carousel-carousel-3").slick({
|
|
prevArrow: '<button type="button" class="slick-prev"><i class="fas fa-chevron-left"></i></button>',
|
|
nextArrow: '<button type="button" class="slick-next"><i class="fas fa-chevron-right"></i></button>',
|
|
infinite: false,
|
|
slidesToShow: 3,
|
|
})
|
|
window.onload = function() {
|
|
[].slice.call(document.getElementsByClassName("np-card-content-description")).forEach(function(element) {
|
|
if(element.innerText.length > 150){
|
|
element.innerText = element.innerText.slice(0,150) + '...'
|
|
}
|
|
});
|
|
}
|
|
</script> |