Artera notes. A few scripting things. Downloaded templates.
This commit is contained in:
Norm Rasmussen
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
BIN
Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
BIN
Custom_Templates/customer_templates/Artera_sandbox/.DS_Store
vendored
Normal file
BIN
Custom_Templates/customer_templates/Artera_sandbox/.DS_Store
vendored
Normal file
Binary file not shown.
@ -1,10 +1,14 @@
|
||||
<div class="my-courses-filters" style="display: none;">
|
||||
<div class="progress-filter-dropdown-container">
|
||||
<button class="progress-filter-dropdown np-button">All Courses</button>
|
||||
<button class="progress-filter-dropdown np-button">
|
||||
<span style="margin-right: 10px">
|
||||
Not Started
|
||||
</span>
|
||||
<i class="fas fa-angle-down"></i>
|
||||
</button>
|
||||
<div class="progress-filter-dropdown-content">
|
||||
<span class="progress-filter-item" id="all-courses" style="display: none;">All Courses</span>
|
||||
<span class="progress-filter-item" id="not-started">Not Started</span>
|
||||
<span class="progress-filter-item" id="in-progress">In Progress</span>
|
||||
<span class="progress-filter-item" id="not-started" style="display: none">Not Started</span>
|
||||
<span class="progress-filter-item" id="completed">Completed</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -12,6 +16,9 @@
|
||||
|
||||
<script>
|
||||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
setDefaultFilter('.learning-paths-container', 'not-started')
|
||||
setDefaultFilter('.courses-container', 'not-started')
|
||||
|
||||
document.querySelectorAll('.progress-filter-item').forEach((item) => {
|
||||
item.addEventListener('click', (clickEvent) => {
|
||||
changeFilterButtonName(clickEvent.target);
|
||||
@ -20,16 +27,32 @@
|
||||
filter(clickEvent.target);
|
||||
})
|
||||
})
|
||||
|
||||
document.querySelector('.progress-filter-dropdown').addEventListener('click', showDropdown)
|
||||
|
||||
window.addEventListener("click", hideDropdown);
|
||||
});
|
||||
|
||||
function hideDropdown(event) {
|
||||
if (!event.target.matches('.progress-filter-dropdown')) {
|
||||
var dropdowns = document.getElementsByClassName("progress-filter-dropdown-content");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('progress-filter-dropdown-content-show')) {
|
||||
openDropdown.classList.remove('progress-filter-dropdown-content-show');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function showDropdown() {
|
||||
document.querySelector('.progress-filter-dropdown-content').classList.add('progress-filter-dropdown-content-show')
|
||||
}
|
||||
|
||||
function filter(filterOption) {
|
||||
if (filterOption.id !== "all-courses" ) {
|
||||
filterItems('.learning-paths-container', filterOption)
|
||||
filterItems('.courses-container', filterOption)
|
||||
} else {
|
||||
showAllItems('.learning-paths-container')
|
||||
showAllItems('.courses-container')
|
||||
}
|
||||
filterItems('.learning-paths-container', filterOption)
|
||||
filterItems('.courses-container', filterOption)
|
||||
}
|
||||
|
||||
function filterItems(itemsClass, filterOption) {
|
||||
@ -41,6 +64,15 @@
|
||||
})
|
||||
}
|
||||
|
||||
function setDefaultFilter(itemsClass, filterOption) {
|
||||
document.querySelectorAll(itemsClass).forEach((item) => {
|
||||
if (!item.id.includes(filterOption))
|
||||
item.style.display = "none";
|
||||
else
|
||||
item.style.removeProperty('display');
|
||||
})
|
||||
}
|
||||
|
||||
function showAllItems(itemsClass) {
|
||||
document.querySelectorAll(itemsClass).forEach((item) => {
|
||||
item.style.removeProperty('display');
|
||||
@ -58,7 +90,7 @@
|
||||
}
|
||||
|
||||
function changeFilterButtonName(newName) {
|
||||
document.querySelector(".progress-filter-dropdown").innerHTML = newName.innerHTML;
|
||||
document.querySelector(".progress-filter-dropdown span").innerHTML = newName.innerHTML;
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -83,7 +115,6 @@
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Dropdown Content (Hidden by Default) */
|
||||
.progress-filter-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -93,7 +124,6 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Links inside the dropdown */
|
||||
.progress-filter-item {
|
||||
color: black;
|
||||
padding: 12px 16px;
|
||||
@ -102,11 +132,13 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Change color of dropdown links on hover */
|
||||
.progress-filter-dropdown * {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.progress-filter-item:hover {background-color: #f1f1f1}
|
||||
|
||||
/* Show the dropdown menu on hover */
|
||||
.progress-filter-dropdown-container:hover .progress-filter-dropdown-content {
|
||||
.progress-filter-dropdown-content-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.enrolled %}
|
||||
{% include "sub_navigation" %}
|
||||
|
||||
{% assign courses_classes = "" %}
|
||||
{% if features.training_events? %}
|
||||
{% assign courses_classes = "col-xs-12 col-sm-6 np-stretch-content" %}
|
||||
{% else %}
|
||||
{% assign courses_classes = "col-xs-12 col-sm-4 np-stretch-content" %}
|
||||
@ -17,7 +18,7 @@
|
||||
</div>
|
||||
{% include "in_progress_learning_paths_index", items: learning_paths.enrolled %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="learning-paths-container" id="not-started-learning-paths">
|
||||
<div class="np-dashboard-resources-title">
|
||||
Enrolled Learning Paths
|
||||
@ -87,4 +88,4 @@
|
||||
margin: 20px 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -52,6 +52,7 @@
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
/*
|
||||
.np-homepage-hero-content {
|
||||
position: static;
|
||||
text-align: left;
|
||||
@ -70,7 +71,7 @@
|
||||
max-width: 50%;
|
||||
height: auto;
|
||||
max-height: max-content;
|
||||
}
|
||||
}*/
|
||||
|
||||
.np-stretch-content:nth-child(n+2) {
|
||||
margin-top: 24px;
|
||||
@ -80,10 +81,14 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tns-outer {
|
||||
.tns-outer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tns1-mw {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.tns-controls {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
@ -127,6 +132,10 @@
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.course-card {
|
||||
height: 29rem;
|
||||
}
|
||||
|
||||
.np-homepage-hero-cta.np-button {
|
||||
border-radius: 30px;
|
||||
padding: 32px;
|
||||
@ -168,4 +177,4 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
<a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}">
|
||||
<div class="np-card-container">
|
||||
{% if course.ribbon %}
|
||||
<div class="np-card-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<video class='left-video' autoplay muted loop>
|
||||
<source src="{{course.promo_video_embed_url}}" type="video/mp4" alt="{{ course.name }}">
|
||||
</video>
|
||||
<div class="np-card-content-bottom">
|
||||
<h3 class="np-card-content-title np-color-white">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class='np-card-content-description'>
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
<div class="np-card-content-category">
|
||||
{{course.categories.first.name}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<style>
|
||||
.np-card {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
.np-card-content-category {
|
||||
border-top: 1px solid lightgray;
|
||||
padding: 10px;
|
||||
}
|
||||
.np-card-content-description {
|
||||
display: block;
|
||||
color: lightgray;
|
||||
}
|
||||
.np-card-content-bottom {
|
||||
padding: 15px;
|
||||
}
|
||||
.np-button-color {
|
||||
color: lightslategray;
|
||||
font-size: 15px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,44 @@
|
||||
<div class="np-card np-no-horizontal-padding">
|
||||
<div class="np-card-container">
|
||||
<div class="np-learning-path np-featured-course">
|
||||
<div class="np-featured-course-img-container" style="overflow: hidden">
|
||||
<video class='featured-video' autoplay muted loop style="margin-left: -60px;">
|
||||
<source id="featured_video" src="{{course.promo_video_embed_url}}" type="video/mp4" alt="{{ course.name }}" />
|
||||
</video>
|
||||
<div class="np-card-image-content-top">
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-card-text-wrapper">
|
||||
<div class="np-card-content np-card-padding np-card-content-vertical">
|
||||
<h3 class="np-card-content-title">
|
||||
{{ course.name }}
|
||||
</h3>
|
||||
<div class="np-card-content-description">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
|
||||
<div class="np-card-content-footer" style='display: flex; flex-direction: row; justify-content: space-between;'>
|
||||
<a
|
||||
class="np-top-button np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
>
|
||||
{% if course.enrolled? == false %}
|
||||
{% t shared.enroll %}
|
||||
{% elsif course.started? == false %}
|
||||
{% t shared.start, key: current_school.course_vocabulary %}
|
||||
{% elsif course.completed? %}
|
||||
{% t shared.course.view, key: current_school.course_vocabulary %}
|
||||
{% else %}
|
||||
{% t shared.continue %}
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="np-card-image-content-bottom" style="position: unset;">
|
||||
<div class="np-card-content-progress np-button-color">
|
||||
{% t shared.progress, count: course.progress %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,80 @@
|
||||
<footer class="np-footer">
|
||||
<div class="np-footer-top">
|
||||
{% if website_footer.show_navigation_links? %}
|
||||
<div class="np-footer-navigation">
|
||||
<ul class="np-footer-navigation-list">
|
||||
{% for website_navigation in navigations.footer_navigations %}
|
||||
{% if website_navigation.external? %}
|
||||
<li class="np-footer-navigation-item">
|
||||
<a
|
||||
class="np-footer-navigation-link np-button-color"
|
||||
href="{{ website_navigation.path }}"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if current_school.logo_url %}
|
||||
<h2 class="np-footer-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-footer-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h2>
|
||||
{% else %}
|
||||
<div class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="np-footer-bottom">
|
||||
<nav class="np-footer-social-links">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<ul class="np-footer-social-links-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<li class="np-footer-social-links-item">
|
||||
<a
|
||||
class="np-footer-social-links-link np-button-color"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="np-footer-social-links-icon
|
||||
np-button-color
|
||||
fab fa-{{ social_media_link.name }}"
|
||||
></i>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% if website_footer.show_customer_service_email? and
|
||||
website_footer.school_customer_service_email
|
||||
%}
|
||||
<div class="np-footer-support">
|
||||
<div class="np-footer-support-item np-footer-support-help np-fc-white np-opacity-50">
|
||||
{% t .need_help %}
|
||||
</div>
|
||||
<div class="np-footer-support-item np-footer-support-email np-fc-white np-opacity-50">
|
||||
{% t .email %}
|
||||
</div>
|
||||
<a
|
||||
class="np-footer-support-item np-footer-support-link np-button-color"
|
||||
href="mailto:{{ website_footer.school_customer_service_email }}"
|
||||
>
|
||||
support@menlosecurity.com
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</footer>
|
||||
@ -0,0 +1,11 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>
|
||||
@ -0,0 +1,183 @@
|
||||
<header class="np-header np-header-color" >
|
||||
<div class="np-header-content">
|
||||
<div class="np-hidden-desktop np-header-mobile-menu-nav">
|
||||
{% if current_person.signed_in? %}
|
||||
<button
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
|
||||
data-toggle-target=".np-header-mobile-avatar-menu,
|
||||
.np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
></button>
|
||||
<button
|
||||
data-test="open-mobile-menu"
|
||||
data-toggle-class="np-hidden"
|
||||
class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
|
||||
data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if current_school.logo_url %}
|
||||
<h1 class="np-header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="np-header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</h1>
|
||||
{% else %}
|
||||
<a href="{% route home %}" class="np-school-name np-header-font-color">
|
||||
{{ current_school.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
<div class="np-hidden-mobile np-header-desktop-nav">
|
||||
<ul class="np-header-desktop-nav-list">
|
||||
{% for website_navigation in navigations.header_navigations_external %}
|
||||
<li class= "np-header-desktop-nav-item">
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-desktop-nav-link np-header-font-color"
|
||||
target="_blank"
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="np-hidden-mobile np-header-search np-header-search-expanded">
|
||||
<form action="{% route search %}" method="get" data-test="desktop-search">
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input np-header-font-background-color"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
</div>
|
||||
<div class="np-hidden-mobile np-header-avatar">
|
||||
<button
|
||||
class="np-header-avatar-button"
|
||||
data-test="open-desktop-menu"
|
||||
data-toggle-class-on-target="np-hidden"
|
||||
data-toggle-target=".np-header-avatar-tooltip"
|
||||
data-toggle-outside
|
||||
>
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
>
|
||||
</button>
|
||||
<div class="np-header-avatar-tooltip np-hidden" role="tooltip">
|
||||
<span class="np-header-avatar-tooltip-arrow-up"></span>
|
||||
<div class="np-header-avatar-tooltip-learner">
|
||||
<div class="np-header-avatar-tooltip-learner-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
<div class="np-header-avatar-tooltip-learner-email">
|
||||
{{ current_person.email }}
|
||||
</div>
|
||||
</div>
|
||||
<nav class="np-header-avatar-tooltip-navigation">
|
||||
<a class="np-header-avatar-tooltip-navigation-link" onclick="buildURL(window.location.pathname)" style="cursor:pointer">
|
||||
Default
|
||||
</a>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-avatar-tooltip-navigation-link np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a
|
||||
class="np-header-sign-in np-header-desktop-nav-link np-header-font-color"
|
||||
href="{% route login %}"
|
||||
>
|
||||
{% t shared.sign_in %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="np-hidden-desktop">
|
||||
<div class="np-header-mobile-menu-content np-hidden">
|
||||
{% if current_person.signed_in? %}
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="np-header-mobile-menu-content-avatar"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
<div class="np-header-mobile-menu-content-name">
|
||||
{{ current_person.name }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="np-header-mobile-menu-content-nav">
|
||||
<form
|
||||
class="np-header-search"
|
||||
data-test="mobile-search"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<input
|
||||
aria-label="{% t .search %}"
|
||||
class="np-header-search-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="{% t .search %}"
|
||||
/>
|
||||
<i class="np-header-search-icon far fa-search"></i>
|
||||
</form>
|
||||
{% for website_navigation in navigations.header_navigations %}
|
||||
<a
|
||||
href="{{ website_navigation.path }}"
|
||||
class="np-header-mobile-menu-content-button"
|
||||
{% if website_navigation.external? %} target="_blank" {% endif %}
|
||||
>
|
||||
{{ website_navigation.name }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<div class="np-header-mobile-menu-content-line"></div>
|
||||
{% unless current_school.sso_active? %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button"
|
||||
href="{% route account %}"
|
||||
>
|
||||
{% t .profile_settings %}
|
||||
</a>
|
||||
{% endunless %}
|
||||
<a
|
||||
class="np-header-mobile-menu-content-button np-danger"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
{% t .sign_out %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include "messages" %}
|
||||
|
||||
@ -0,0 +1,109 @@
|
||||
<div class="np-homepage-featured np-faq np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
</div>
|
||||
<div class="row np-faqs">
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm not in shape. Can I still go to a climbing gym?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Absolutely. Climbing is a wonderful full-body and full-mind workout. If you're looking to get in shapre but tired of pumping iron, climbing is a fantastic option.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> I'm scared of heights. Should I try climbing?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Many climbers have a fear of heights! However, it goes away when you use your own strength and technique to get to the top of a wall. Start small by climbing in a gym first.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> Should I hire someone to belay me at a gym?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> You absolutely can as a quick introduction. However, what would be even better is to grab a friend and take a belay class at your local gym.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> What is bouldering?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Great question! Bouldering is a form of climbing, done on shorter walls. You use a crash pad under your climb to cushion your fall. Be warned, bouldering is much more powerful and has a steeper learning curve.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> What are those people with all that gear hanging from their harness doing?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong> Chances are you saw a trad climber! Short for traditional climbing, that gear serves as removable protection. When the climbing pair is done with the climb, nothing is left on the rock.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-accordion">
|
||||
<div class="accordion-btn">
|
||||
<i class="fal fa-plus"></i>
|
||||
<div class="accordion-title"><strong>Q:</strong> None of my friends are interested in climbing. How can I find partners?</div>
|
||||
</div>
|
||||
<div class="accordion-panel">
|
||||
<div class="accordion-panel-content">
|
||||
<p><strong>A:</strong>The best way to meet people is to join a gym a start climbing! Climbers are social and you'll start meeting people. You can also use online resources like Mountain Project's Partner Finder.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
/
|
||||
<style>
|
||||
.fa-plus {
|
||||
background-image: unset;
|
||||
background: #0297FA;
|
||||
}
|
||||
.fa-minus {
|
||||
background-image: unset;
|
||||
background: #0297FA; }
|
||||
</style>
|
||||
|
||||
<script>
|
||||
let accordions = document.getElementsByClassName("accordion-btn");
|
||||
|
||||
for (let i = 0; i < accordions.length; i++) {
|
||||
accordions[i].addEventListener("click", function() {
|
||||
this.querySelector('.fal').classList.toggle("fa-plus");
|
||||
this.querySelector('.fal').classList.toggle("fa-minus");
|
||||
|
||||
let panel = this.nextElementSibling;
|
||||
panel.classList.toggle("panel-open");
|
||||
if (panel.style.maxHeight) {
|
||||
panel.style.maxHeight = null;
|
||||
} else {
|
||||
panel.style.maxHeight = panel.scrollHeight + "px";
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,91 @@
|
||||
<div class="np-homepage-featured np-homepage-featured-items np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Recommended Gear
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="featured-photography-carousel np-carousel np-carousel-bg-blue" id="featured-photography-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src=https://5prq858zcb-flywheel.netdna-ssl.com/wp-content/uploads/2016/12/50823_4WhiteBG-1-600x625.png" alt="Featured Photography" class='customer-carousel-image'/>
|
||||
<div class="slide-label">Misty Mountain Cadillav Harness</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://outdoorgearlab-mvnab3pwrvp3t0.stackpathdns.com/photos/18/97/311203_1848_XXXL.jpg" alt="Featured Photography" class='customer-carousel-image'/>
|
||||
<div class="slide-label">Gri-Gri Belay Device</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://lcdn.sportiva.com/pub/media/catalog/product/8/0/800_yellow_katanalace_1_7_4.jpg" alt="Featured Photography" class='customer-carousel-image'/>
|
||||
<div class="slide-label">La Sportiva Katana Lace Shoes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/demos/hsbc-old-logo.png" alt="Featured Photography" class='customer-carousel-image'/>
|
||||
<div class="slide-label">Metolious Helmet</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<div>
|
||||
<img src="https://s3.amazonaws.com/static.northpass.com/demos/sandia-labs-logo.jpg" alt="Featured Photography" class='customer-carousel-image'/>
|
||||
<div class="slide-label">Unknown</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
|
||||
$("#featured-photography-carousel").slick({
|
||||
slidesToShow: 3.5,
|
||||
prevArrow: '<i class="fal fa-chevron-left"></i>',
|
||||
nextArrow: '<i class="fal fa-chevron-right"></i>',
|
||||
infinite: false,
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 1350,
|
||||
settings: {
|
||||
slidesToShow: 2.3,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 1024,
|
||||
settings: {
|
||||
slidesToShow: 2,
|
||||
}
|
||||
},
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1,
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.featured-photography-carousel .fa-chevron-right::before {
|
||||
right: -6px !important;
|
||||
}
|
||||
.customer-carousel-image {
|
||||
width: 292px;
|
||||
height: 292px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.featured-photography-carousel .slick-initialized .slick-slide {
|
||||
margin: 10px 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="np-homepage-featured np-homepage-topics np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Popular Topics
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-topics-list row">
|
||||
<div class="col-xs-12 np-stretch-content">
|
||||
{% assign categories_by_name = current_school.filterable_categories | sort: "name" %}
|
||||
{% for category in categories_by_name %}
|
||||
<a class="np-top-button np-button np-button-secondary" href="#">{{ category.name }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,118 @@
|
||||
<div class="np-homepage-featured np-homepage-tips-tricks np-max-width">
|
||||
<div class="np-homepage-featured-text">
|
||||
<div class="np-homepage-headline">
|
||||
Professional Climbers
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tips-tricks-carousel np-carousel" id="tips-tricks-carousel">
|
||||
<div class="np-carousel-card">
|
||||
<video class='left-video' autoplay muted loop>
|
||||
<source type="video/mp4" src="https://i.imgur.com/IizyBxj.mp4">
|
||||
</video>
|
||||
<div class='review'>
|
||||
<div class='review-text'>
|
||||
“Enlightenment isn't found with a full stomach or a soft pillow.”
|
||||
</div>
|
||||
<div class='review-name'>
|
||||
Cory Richards
|
||||
</div>
|
||||
<div class='review-title'>
|
||||
Professional Mountain Climbers & Photographer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<video class='left-video' autoplay muted loop>
|
||||
<source type="video/mp4" src="https://i.imgur.com/HS7PW7n.mp4">
|
||||
</video>
|
||||
<div class='review'>
|
||||
<div class='review-text'>
|
||||
“If you don't own your grunt work, can you really say you've done the climb?” </div>
|
||||
<div class='review-name'>
|
||||
Tommy Caldwell
|
||||
</div>
|
||||
<div class='review-title'>
|
||||
Multiple First Ascents in Yosemite National Park
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="np-carousel-card">
|
||||
<video class='left-video' autoplay muted loop>
|
||||
<source type="video/mp4" src="https://i.imgur.com/wMtE1Yt.mp4">
|
||||
</video>
|
||||
<div class='review'>
|
||||
<div class='review-text'>
|
||||
“Fear is always there; it's a survival instinct. You just need to know how to manage it. </div>
|
||||
<div class='review-name'>
|
||||
Jimmy Chin
|
||||
</div>
|
||||
<div class='review-title'>
|
||||
World-class videographer, photographer, and climber.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.left-video {
|
||||
border-radius: 18px;
|
||||
border: black 8px solid;
|
||||
position: relative;
|
||||
height: 380px;
|
||||
width: 660px;
|
||||
object-fit: fill;
|
||||
left: 100px;
|
||||
top: -100px;
|
||||
}
|
||||
.review {
|
||||
background: black;
|
||||
border-radius: 5px;
|
||||
padding: 100px 150px;
|
||||
width: 70%;
|
||||
}
|
||||
.review-text {
|
||||
font-size: 24px;
|
||||
}
|
||||
.review-name {
|
||||
font-size: 18px;
|
||||
padding-top: 25px;
|
||||
padding-bottom: 10px;
|
||||
color: lightgrey;
|
||||
}
|
||||
.review-title {
|
||||
color: lightgray;
|
||||
}
|
||||
.tips-tricks-carousel .slick-list {
|
||||
height: 580px;
|
||||
}
|
||||
.tips-tricks-carousel .slick-initialized .slick-slide {
|
||||
width: 100% !important;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: 100px;
|
||||
}
|
||||
.tips-tricks-carousel .np-carousel-card {
|
||||
margin: auto !important;
|
||||
}
|
||||
.tips-tricks-carousel div.slick-list:nth-child(1) > div:nth-child(1) {
|
||||
height: 700px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#tips-tricks-carousel").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
cssEase: 'linear',
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
dots: true,
|
||||
autoplay: true,
|
||||
autoplaySpeed: 5000
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -0,0 +1,44 @@
|
||||
<main class="np-main np-catalog np-subpage-container np-max-width">
|
||||
<div class="np-catalog-header-wrapper">
|
||||
<div class="filter-buttons">
|
||||
<button class="filter-buttons-button" id='home'>Home</button>
|
||||
<button class="filter-buttons-button" id='catalog'>Course Catalog</button>
|
||||
<button class="filter-buttons-button" id='videos'>Videos</button>
|
||||
<button class="filter-buttons-button" id='instructors'>Professional Climbers</button>
|
||||
<button class="filter-buttons-button" id='live-courses'>Live Courses</button>
|
||||
<button class="filter-buttons-button" id='community'>Mountain Project</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.np-catalog-header-wrapper {
|
||||
display: block;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.filter-buttons-button {
|
||||
background: none;
|
||||
border: white 1px solid;
|
||||
border-radius: 30px;
|
||||
color: white;
|
||||
padding: 15px 20px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('#home').click(function () { window.location.replace('/app') })
|
||||
$('#catalog').click(function () { window.location.replace('/app/catalog') })
|
||||
$('#videos').click(function () { window.location.replace('/app/videos') })
|
||||
$('#instructors').click(function () { window.location.replace('/app/instructors') })
|
||||
$('#live-courses').click(function () { window.location.replace('/app/live-courses') })
|
||||
$('#community').click(function () { window.location.replace('/app/community') })
|
||||
</script>
|
||||
@ -0,0 +1,39 @@
|
||||
{% 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">
|
||||
Menlo Security Resrouces
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
Resources to help you make the most of your Security Training
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
{% include "courses_catalog" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.np-card-content-description {
|
||||
height: 100px;
|
||||
}
|
||||
.np-card-content-title {
|
||||
height: 58px;
|
||||
overflow: clip;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<script>
|
||||
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>
|
||||
@ -0,0 +1,32 @@
|
||||
{% include 'header' %}
|
||||
<main class="np-main np-homepage">
|
||||
<div class="np-homepage-hero">
|
||||
<h1 class="community-headline">Explore</h1>
|
||||
</div>
|
||||
{% include 'sub_navigation' %}
|
||||
<div class='discussion-container' style="border: 18px solid rgb(0, 0, 0); overflow: hidden; margin-left: 100px; margin-top: 35px; width: 1065px;">
|
||||
<iframe scrolling="yes" src="https://www.mountainproject.com/partner-finder" style="border: 0px none; margin-left: 15px auto; height: 1954px; margin-top: -100px; width: 1060px;"></iframe>
|
||||
</div>
|
||||
</main>
|
||||
{% include 'footer' %}
|
||||
|
||||
<style>
|
||||
.discussion-frame {
|
||||
min-width: 100%;
|
||||
margin-left: -10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.discussion-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.community-headline {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
font-family: "Raleway", "Helvetic", "Arial" sans-serif;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
1781
Custom_Templates/customer_templates/Norm_sandbox_2/styles.css.liquid
Normal file
1781
Custom_Templates/customer_templates/Norm_sandbox_2/styles.css.liquid
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,39 @@
|
||||
{% include "header" %}
|
||||
<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">
|
||||
Menlo Learning Program
|
||||
</div>
|
||||
<div class="np-homepage-subheadline np-header-font-color">
|
||||
Resources to help you make the most of your Security Training
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "sub_navigation" %}
|
||||
<main class="np-main np-training-events np-subpage-container np-max-width">
|
||||
<div class="row">
|
||||
<div class="iframe_div">
|
||||
<iframe
|
||||
style= "border: 3px solid #B2D7C7;"
|
||||
width="100%" height="1000"
|
||||
src="https://calendar.google.com/calendar/u/0/embed?src=pmtpcalendar@gmail.com&ctz=America/New_York"
|
||||
title="Wild Health Public Calendar"
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.iframe_div {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 99%;
|
||||
height: 999px;
|
||||
border-radius: 12px;
|
||||
transform: translateZ(0px);
|
||||
border: 3px solid #B2D7C7;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,117 @@
|
||||
{% 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 die-hard climber
|
||||
</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'>
|
||||
Bouldering
|
||||
</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'>
|
||||
Roped Climbing
|
||||
</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>
|
||||
Reference in New Issue
Block a user