Scenario & Omnisend
This commit is contained in:
Norm Rasmussen
@ -1,5 +1,6 @@
|
||||
# Crayon
|
||||
|
||||
|
||||
As of tonight
|
||||
Crayon.co/Academy will no longer have a form
|
||||
Crayon.co/Academy/Activator-Course - Form to course url
|
||||
@ -372,8 +373,10 @@ They need more training and enablement They will follow up for Figma files and
|
||||
# Humly
|
||||
|
||||
## Technical People
|
||||
|
||||
- Tomasz (Tom) - Client and Team Leader
|
||||
- Bartosz - Full stack developer, 2 years at Humly
|
||||
|
||||
## Answers to Questions from email
|
||||
How do we know what courses a candidate has completed? Should we store it ourselves or should we always get it from Northpass? What is the best practice?
|
||||
- They want to apply some logic to these completions in Northpass
|
||||
@ -399,3 +402,45 @@ Status is they are mapping out and deciding what Northpass involvment should be
|
||||
|
||||
## Tasks
|
||||
- [ ] Tom and Bartos:z will start working on this
|
||||
|
||||
|
||||
# Omnisend
|
||||
|
||||
## Tasks
|
||||
- [ ] Wistia Project, what access do they have?
|
||||
- [ ] Share button with /app/course within course viewer bright green 52 front
|
||||
- [ ] EXpert led categories url not working
|
||||
- [ ]
|
||||
|
||||
## Notes
|
||||
|
||||
Can they embed a video from the Wistia Project video into Omnisend's product?
|
||||
|
||||
### Skip Cover Page logic
|
||||
|
||||
Is a user enrolled?
|
||||
LOGIC: Learner comes in, skip cover for page, start course -> skip cover,
|
||||
If not enabled, they should see overview page
|
||||
Automation logic, single-activity or 2 activities are not considered a course
|
||||
The key is a single video
|
||||
|
||||
The logic should be if a single video exists skip cover page
|
||||
|
||||
### Video on overview page
|
||||
|
||||
Course card, will also enroll person in course/activate them
|
||||
Bring in video from Wistia Project
|
||||
Get analytics via wistia or google
|
||||
|
||||
This is key analytics they need too
|
||||
What's new are every month, on average 600 views
|
||||
This week so far 51
|
||||
It usually lines up with activated learners on Northpass
|
||||
There was another link with dashboard, Audrius to check clicks
|
||||
|
||||
Fundamentals First Video
|
||||
Out of 202 played it out of 220 load
|
||||
|
||||
Whats new 95% play rate
|
||||
Out of 41 people, 39 played its
|
||||
|
||||
|
||||
29
ErikaInterview.md
Normal file
29
ErikaInterview.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Interview with Erika
|
||||
|
||||
Tough admin, used enablement and creativity to make it work
|
||||
Created multiple workspaces for the users for that account
|
||||
Client's issue was didn't want to manage multiple accounts, had no bandwidth
|
||||
Used teaching to help the customer
|
||||
|
||||
Needier customers were district contracts
|
||||
Gave her her phone number to client who wanted instant communication
|
||||
Setup regular checkins with these accounts
|
||||
More frequent communication for larger clients
|
||||
Tiered system, small team and each person handled almost 700 accounts
|
||||
Just taking the time explain
|
||||
|
||||
Being an AM was her most enjoyable, creative time
|
||||
Tight knit group
|
||||
Constant communication
|
||||
|
||||
Project Question:
|
||||
Go to learning library, resources first
|
||||
See what's available first
|
||||
Try to connect with client and asking more questions
|
||||
Align with them, is there a temporary fix
|
||||
Check in with peers and see if anyone else has faced this issue before
|
||||
Is there a bridge to solve this temporarily
|
||||
Being honest and aligning with the customer
|
||||
Offer to pushback
|
||||
|
||||
Catalyst for CS with client
|
||||
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
BIN
NP_Custom_Templates/customer_templates/.DS_Store
vendored
Binary file not shown.
@ -0,0 +1,68 @@
|
||||
{% assign categories = '' | split: '' %}
|
||||
{% for cat in course.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign categories = categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
{% case course.properties.difficulty %}
|
||||
{% when "Beginner" %}
|
||||
{% assign diff = 1 %}
|
||||
{% when "Advanced" %}
|
||||
{% assign diff = 2 %}
|
||||
{% when "Expert" %}
|
||||
{% assign diff = 3 %}
|
||||
{% else %}
|
||||
{% assign diff = 0 %}
|
||||
{% endcase %}
|
||||
|
||||
{% if course.properties.course_time < 10 %}
|
||||
{% assign time = 1 %}
|
||||
{% elsif course.properties.course_time < 30 %}
|
||||
{% assign time = 2 %}
|
||||
{% elsif course.properties.course_time < 60 %}
|
||||
{% assign time = 3 %}
|
||||
{% elsif course.properties.course_time < 120 %}
|
||||
{% assign time = 4 %}
|
||||
{% else %}
|
||||
{% assign time = 5 %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="course-card col-12 col-lg-6 col-xl-4" category='{{categories | join: '+'}}' diff="{{ diff }}" time="{{ time }}">
|
||||
<a class="course-card-image-wrapper" href="{{course_path}}">
|
||||
<img
|
||||
class="course-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
{% if course.ribbon and course.ribbon.size > 0 %}
|
||||
<div class="course-card-image-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="course-card-content">
|
||||
<a class="course-card-content-title" href="{{course_path}}">
|
||||
{{ course.name }}
|
||||
</a>
|
||||
<div class="course-card-content-time" time>
|
||||
{{ course.properties.course_time }}
|
||||
</div>
|
||||
<div class="course-card-content-description">
|
||||
{{course.full_description}}
|
||||
</div>
|
||||
<div class="course-card-content-footer">
|
||||
<a class="course-card-button" href="{{ course_path }}">
|
||||
{% if course.started? %}
|
||||
Continue course <i class="fa-solid fa-angle-right"></i>
|
||||
{% else %}
|
||||
Start course <i class="fa-solid fa-angle-right"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
{% if course.has_to_restart? %}
|
||||
{% include "course_version_outdated_popup", path: course_path %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,164 @@
|
||||
{% assign diff_1 = 0 | times: 1 %}
|
||||
{% assign diff_2 = 0 | times: 1 %}
|
||||
{% assign diff_3 = 0 | times: 1 %}
|
||||
|
||||
{% assign time_1 = 0 | times: 1 %}
|
||||
{% assign time_2 = 0 | times: 1 %}
|
||||
{% assign time_3 = 0 | times: 1 %}
|
||||
{% assign time_4 = 0 | times: 1 %}
|
||||
{% assign time_5 = 0 | times: 1 %}
|
||||
|
||||
{% assign co_categories = '' | split: '' %}
|
||||
{% for co in courses.in_catalog %}
|
||||
|
||||
{% for cat in co.categories %}
|
||||
{% assign cat_name = cat.name | split: '!@#$%^&*()' %}
|
||||
{% assign co_categories = co_categories | concat: cat_name %}
|
||||
{% endfor %}
|
||||
|
||||
{% case co.properties.difficulty %}
|
||||
{% when "Beginner" %}
|
||||
{% assign diff_1 = diff_1 | plus: 1 %}
|
||||
{% when "Advanced" %}
|
||||
{% assign diff_2 = diff_2 | plus: 1 %}
|
||||
{% when "Expert" %}
|
||||
{% assign diff_3 = diff_3 | plus: 1 %}
|
||||
{% endcase %}
|
||||
|
||||
{% if co.properties.course_time < 10 %}
|
||||
{% assign time_1 = time_1 | plus: 1 %}
|
||||
{% elsif co.properties.course_time < 30 %}
|
||||
{% assign time_2 = time_2 | plus: 1 %}
|
||||
{% elsif co.properties.course_time < 60 %}
|
||||
{% assign time_3 = time_3 | plus: 1 %}
|
||||
{% elsif co.properties.course_time < 120 %}
|
||||
{% assign time_4 = time_4 | plus: 1 %}
|
||||
{% else %}
|
||||
{% assign time_5 = time_5 | plus: 1 %}
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
{% assign co_unique_categories = co_categories | uniq | sort %}
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="filter">
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
CATEGORY
|
||||
</div>
|
||||
<div class='filter-element-category category-selected' category='none'>
|
||||
All
|
||||
</div>
|
||||
{% for cat in co_unique_categories %}
|
||||
{% assign number_of_courses = co_categories | split: cat %}
|
||||
{% assign number_of_courses = number_of_courses.size | minus: 1 %}
|
||||
<div class='filter-element-category' category='{{cat}}'>
|
||||
{{ cat }} ({{ number_of_courses }})
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
DIFFICULTY
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_1 == 0 %} disabled {% endif %}' diff='1'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Beginner ({{ diff_1 }})
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_2 == 0 %} disabled {% endif %}' diff='2'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Advanced ({{ diff_2 }})
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_3 == 0 %} disabled {% endif %}' diff='3'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Expert ({{ diff_3 }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
DURATION
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_1 == 0 %} disabled {% endif %}' time='1'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
< 10 mins ({{ time_1 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_2 == 0 %} disabled {% endif %}' time='2'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
10-30 mins ({{ time_2 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_3 == 0 %} disabled {% endif %}' time='3'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
30-60 mins ({{ time_3 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_4 == 0 %} disabled {% endif %}' time='4'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
1-2 hours ({{ time_4 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_5 == 0 %} disabled {% endif %}' time='5'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
> 2 hours ({{ time_5 }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.filter-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.filter-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
div[class^="filter-element"] {
|
||||
margin-bottom: 15px;
|
||||
cursor: pointer;
|
||||
font-weight: 400;
|
||||
font-size: 1.125rem;
|
||||
line-height: 32px;
|
||||
}
|
||||
.category-selected {
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
div[class^="filter-element"] .fa-square {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.filter-element-diff .fa-square-check {
|
||||
display: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.diff-selected .fa-square-check {
|
||||
display: inline-block;
|
||||
}
|
||||
.diff-selected .fa-square {
|
||||
display: none;
|
||||
}
|
||||
.filter-element-time .fa-square-check {
|
||||
display: none;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.time-selected .fa-square-check {
|
||||
display: inline-block;
|
||||
}
|
||||
.time-selected .fa-square {
|
||||
display: none;
|
||||
}
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
cursor: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,121 @@
|
||||
<div class="mobile-filter np-hidden">
|
||||
<div class="mobile-filter-header">
|
||||
<div class="mobile-filter-header-button">
|
||||
Filter <i class="fa-solid fa-angle-up"></i>
|
||||
</div>
|
||||
<i class="fal fa-times mobile-filter-header-close"></i>
|
||||
</div>
|
||||
<div class="mobile-filter-content">
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
CATEGORY
|
||||
</div>
|
||||
<div class='filter-element-category category-selected' category='none'>
|
||||
All
|
||||
</div>
|
||||
{% for cat in co_unique_categories %}
|
||||
{% assign number_of_courses = co_categories | split: cat %}
|
||||
{% assign number_of_courses = number_of_courses.size | minus: 1 %}
|
||||
<div class='filter-element-category' category='{{cat}}'>
|
||||
{{ cat }} ({{ number_of_courses }})
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
DIFFICULTY
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_1 == 0 %} disabled {% endif %}' diff='1'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Beginner ({{ diff_1 }})
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_2 == 0 %} disabled {% endif %}' diff='2'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Advanced ({{ diff_2 }})
|
||||
</div>
|
||||
<div class='filter-element-diff {% if diff_3 == 0 %} disabled {% endif %}' diff='3'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
Expert ({{ diff_3 }})
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='filter-section'>
|
||||
<div class='filter-title'>
|
||||
DURATION
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_1 == 0 %} disabled {% endif %}' time='1'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
< 10 mins ({{ time_1 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_2 == 0 %} disabled {% endif %}' time='2'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
10-30 mins ({{ time_2 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_3 == 0 %} disabled {% endif %}' time='3'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
30-60 mins ({{ time_3 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_4 == 0 %} disabled {% endif %}' time='4'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
1-2 hours ({{ time_4 }})
|
||||
</div>
|
||||
<div class='filter-element-time {% if time_5 == 0 %} disabled {% endif %}' time='5'>
|
||||
<i class="fal fa-square"></i>
|
||||
<i class="fa-solid fa-square-check"></i>
|
||||
> 2 hours ({{ time_5 }})
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mobile-filter-header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
padding: 16px 5%;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.mobile-filter-header-button {
|
||||
font-size: 20px;
|
||||
}
|
||||
.mobile-filter-header-close {
|
||||
font-size: 32px;
|
||||
align-self: center;
|
||||
right: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.mobile-filter-content {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
height: calc(100vh - 64px);
|
||||
top: 64px;
|
||||
left: 0;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
overflow-y: auto !important;
|
||||
padding-top: 32px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
@media only screen and (max-width: 350px) {
|
||||
.mobile-filter-content {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,8 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
<a class="list-course col" href="{{ course_path }}" carousel='{{ property }}' {% if property == "latest" %} latest-order="{{ course.properties.latest_order }}" {% endif %}>
|
||||
<img class="list-course-image" src="{{ course.image_url }}">
|
||||
<div class="list-course-name">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
</a>
|
||||
@ -0,0 +1,568 @@
|
||||
{% include "footer_join" %}
|
||||
<footer class="footer">
|
||||
<div class="footer-wrapper">
|
||||
<div class="footer-top">
|
||||
<div class="footer-top-left">
|
||||
<img class="footer-top-left-logo" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/logo.png">
|
||||
<div class="footer-top-left-text">
|
||||
Your complete marketing automation platform.
|
||||
</div>
|
||||
<img class="footer-top-left-badges" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/footer-badges.png">
|
||||
</div>
|
||||
<div class="footer-top-right">
|
||||
<div class="footer-top-right-top">
|
||||
<div class="footer-top-right-top-text">
|
||||
Get insights about omnichannel marketing automation and Omnisend news. Once per month. No spam, ever!
|
||||
</div>
|
||||
<form class="footer-top-right-top-newsletter">
|
||||
<!-- keep the line below intact, don't divide into two lines! -->
|
||||
<input id="newsletter-form" class="footer-top-right-top-newsletter-input" placeholder="Enter your email"><button disabled id="newsletter-button" class="footer-top-right-top-newsletter-button">Subscribe</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="footer-top-right-bottom">
|
||||
<div class="footer-top-right-bottom-columns-wrapper">
|
||||
<div class="footer-top-right-bottom-column">
|
||||
<div class="footer-top-right-bottom-column-title">
|
||||
Product
|
||||
</div>
|
||||
<ul class="footer-top-right-bottom-column-list">
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/features/">
|
||||
Features
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/pricing/">
|
||||
Pricing
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/features/multi-store-accounts/">
|
||||
Multi-Store Accounts
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/reviews-2/">
|
||||
Reviews
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://support.omnisend.com/?_ga=2.135224433.1576613929.1535033507-843474724.1532935523">
|
||||
Support
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-top-right-bottom-column">
|
||||
<div class="footer-top-right-bottom-column-title">
|
||||
Platforms
|
||||
</div>
|
||||
<ul class="footer-top-right-bottom-column-list">
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/shopify-email-marketing/">
|
||||
Shopify
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/shopify-plus/">
|
||||
Shopify Plus
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/bigcommerce-app/">
|
||||
BigCommerce
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="">
|
||||
Magento
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/woocommerce-plugin/">
|
||||
WooCommerce
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-top-right-bottom-columns-wrapper">
|
||||
<div class="footer-top-right-bottom-column">
|
||||
<div class="footer-top-right-bottom-column-title">
|
||||
Resources
|
||||
</div>
|
||||
<ul class="footer-top-right-bottom-column-list">
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/why-omnisend/">
|
||||
Why OmniSend
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/blog/">
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://developers.omnisend.com/">
|
||||
Developer center
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://partnerpage.omnisend.com/integrations/">
|
||||
Integration directory
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://partnerpage.omnisend.com/">
|
||||
Freelancer/agency directory
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="http://www.opensaredead.com/">
|
||||
OpernsAreDead.com
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-top-right-bottom-column">
|
||||
<div class="footer-top-right-bottom-column-title">
|
||||
Comparisons
|
||||
</div>
|
||||
<ul class="footer-top-right-bottom-column-list">
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/mailchimp-alternative/">
|
||||
Mailchimp alternatives
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/aweber-alternative/">
|
||||
Aweber alternatives
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/constant-contact-alternative/">
|
||||
Constant Contact alternatives
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/blog/klaviyo-alternatives/">
|
||||
Klaviyo alternatives
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-top-right-bottom-column">
|
||||
<div class="footer-top-right-bottom-column-title">
|
||||
Omnisend
|
||||
</div>
|
||||
<ul class="footer-top-right-bottom-column-list">
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/about/">
|
||||
About us
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/careers/">
|
||||
Careers<span style="color: #1E2423; background: #88D880; padding: 3px; border-radius: 5px; font-weight: 400; margin-left: 6px; font-size: 10px;">HIRING</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/newsroom/">
|
||||
Newsroom
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/partners/">
|
||||
Partner program
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://www.omnisend.com/partner-portal/">
|
||||
Partner portal
|
||||
</a>
|
||||
</li>
|
||||
<li class="footer-top-right-bottom-column-list-element">
|
||||
<a class="footer-top-right-bottom-column-list-element-link" href="https://appmarket.omnisend.com/app-list/home">
|
||||
App market
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<div class="footer-bottom-links">
|
||||
<div class="footer-bottom-links-text">
|
||||
© Omnisend 2022
|
||||
</div>
|
||||
<a class="footer-bottom-links-text" href="https://status.omnisend.com/">
|
||||
Status
|
||||
</a>
|
||||
<a class="footer-bottom-links-text" href="https://www.omnisend.com/data-processing-agreement/">
|
||||
Data processing agreement
|
||||
</a>
|
||||
<a class="footer-bottom-links-text" href="https://www.omnisend.com/terms/">
|
||||
Terms of use
|
||||
</a>
|
||||
<a class="footer-bottom-links-text" href="https://www.omnisend.com/privacy/">
|
||||
Privacy policy
|
||||
</a>
|
||||
<a class="footer-bottom-links-text" href="https://www.omnisend.com/anti-spam/">
|
||||
Anti-spam policy
|
||||
</a>
|
||||
</div>
|
||||
<div class="footer-bottom-social">
|
||||
<a class="footer-bottom-social-button" href="https://www.facebook.com/omnisend/">
|
||||
<i class="fa-brands fa-facebook"></i>
|
||||
</a>
|
||||
<a class="footer-bottom-social-button" href="https://twitter.com/omnisend">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</a>
|
||||
<a class="footer-bottom-social-button" href="https://www.linkedin.com/company/omnisend/">
|
||||
<i class="fa-brands fa-linkedin-in"></i>
|
||||
</a>
|
||||
<a class="footer-bottom-social-button" href="https://www.instagram.com/omnisend/">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</a>
|
||||
<a class="footer-bottom-social-button" href="https://www.youtube.com/channel/UCy0iaBjHUoF0DIbg8Ygj31A">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<style>
|
||||
.footer {
|
||||
background: #1E2423;
|
||||
width: 100%;
|
||||
}
|
||||
.footer-wrapper {
|
||||
padding: 80px 4% 0;
|
||||
}
|
||||
.footer * {
|
||||
color: white;
|
||||
font-weight: 300;
|
||||
font-size: 0.9375rem;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.footer-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 80px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
.footer-top-left {
|
||||
max-width: 300px;
|
||||
}
|
||||
.footer-top-left-logo {
|
||||
max-width: 180px;
|
||||
}
|
||||
.footer-top-left-text {
|
||||
margin: 50px 0;
|
||||
}
|
||||
.footer-top-left-badges {
|
||||
max-width: 272px;
|
||||
}
|
||||
.footer-top-right {
|
||||
width: min-content;
|
||||
}
|
||||
.footer-top-right-top {
|
||||
display: flex;
|
||||
padding-bottom: 50px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-top-right-top-text {
|
||||
width: 50%;
|
||||
font-size: 1.125rem;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.footer-top-right-top-newsletter {
|
||||
margin: auto 0;
|
||||
display: flex;
|
||||
}
|
||||
.footer-top-right-top-newsletter-input {
|
||||
background: #FFFFFF19;
|
||||
color: white;
|
||||
padding: 12px 16px;
|
||||
border-radius: 5px 0 0 5px;
|
||||
min-width: 60%;
|
||||
border: none;
|
||||
outline: none !important;
|
||||
}
|
||||
.footer-top-right-top-newsletter-input::placeholder {
|
||||
color: #FFFFFF4C;
|
||||
}
|
||||
.footer-top-right-top-newsletter-button {
|
||||
background: #2F8481;
|
||||
color: white;
|
||||
padding: 12px 32px;
|
||||
border: none;
|
||||
border-radius: 0px 5px 5px 0px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.footer-top-right-bottom {
|
||||
padding-top: 50px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
float: right;
|
||||
width: min-content;
|
||||
}
|
||||
.footer-top-right-bottom-columns-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.footer-top-right-bottom-column {
|
||||
padding: 0 30px;
|
||||
}
|
||||
.footer-top-right-bottom-column-list {
|
||||
padding-left: 0;
|
||||
}
|
||||
.footer-top-right-bottom-column-title {
|
||||
font-family: 'Faktum', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 1.125rem;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
.footer-top-right-bottom-column-list-element {
|
||||
padding: 6px 0;
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
a.footer-top-right-bottom-column-list-element-link:hover {
|
||||
color: darkgray;
|
||||
}
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
}
|
||||
.footer-bottom-links {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: auto 0;
|
||||
}
|
||||
.footer-bottom-links-text {
|
||||
color: #ACB5B4;
|
||||
padding: 0 16px;
|
||||
}
|
||||
a.footer-bottom-links-text:hover {
|
||||
color: white ;
|
||||
}
|
||||
.footer-bottom-social {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: auto 0;
|
||||
}
|
||||
.footer-bottom-social-button {
|
||||
padding: 0 12px;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.footer-bottom-social-button .fa-brands {
|
||||
color: #ACB5B4;
|
||||
}
|
||||
|
||||
.footer-bottom-social-button .fa-brands:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.np-powered-by {
|
||||
background: #1E2423;
|
||||
}
|
||||
.np-powered-by-link {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.footer-wrapper {
|
||||
padding: 80px 10% 0;
|
||||
}
|
||||
.footer-top-left-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.footer-top-right-top-text {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.footer-top-right-top-newsletter-input {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.footer-top-right-bottom-column-title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
.footer * {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
.footer-top-right-top-newsletter-button {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.footer-bottom-social * {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.homepage-join-button {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1350px) {
|
||||
.footer-top-right-bottom-column {
|
||||
padding: 0 20px;
|
||||
}
|
||||
.footer-top-right-bottom-column-list-element {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1150px) {
|
||||
.footer-top {
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer-top-left {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
max-width: none;
|
||||
}
|
||||
.footer-top-left-badges {
|
||||
max-width: none;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.footer-top-left-logo {
|
||||
max-width: none;
|
||||
width: 30%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.footer-top-left-text {
|
||||
width: 30%;
|
||||
}
|
||||
.footer-top-right {
|
||||
width: auto;
|
||||
}
|
||||
.footer-top-right-top {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-top-right-bottom {
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1070px) {
|
||||
.footer-bottom-links-text {
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 800px) {
|
||||
.footer * {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.footer-top-left, .footer-top-right, .footer-top-right-top, .footer-top-right-bottom, .footer-bottom, .footer-bottom-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer-top-left-badges{
|
||||
width: 90%;
|
||||
}
|
||||
.footer-top-left-logo {
|
||||
width: 60%;
|
||||
}
|
||||
.footer-top-left-text {
|
||||
width: 90%;
|
||||
font-size: 1.2rem;
|
||||
margin: 30px 0;
|
||||
}
|
||||
.footer-top-right-top-text {
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.footer-top-right-bottom-column {
|
||||
padding: 0 20px 20px 0;
|
||||
width: 220px;
|
||||
}
|
||||
.footer-top {
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.footer-bottom {
|
||||
height: auto;
|
||||
}
|
||||
.footer-bottom-links-text {
|
||||
padding: 6px 0;
|
||||
}
|
||||
.footer-top-right-bottom {
|
||||
padding-top: 30px;
|
||||
}
|
||||
.footer-bottom-social {
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 400px) {
|
||||
.footer-top-right-bottom-columns-wrapper {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function checkIfEmailIsValid() {
|
||||
if ($("#newsletter-form")[0].value.match(/^[^\s@]+@[^\s@]+\.[^\s@]+$/)) {
|
||||
$('#newsletter-button').prop("disabled", false);
|
||||
}
|
||||
else {
|
||||
$('#newsletter-button').prop("disabled", true);
|
||||
};
|
||||
};
|
||||
|
||||
function SendInfos() {
|
||||
for (let x of document.cookie.split('; ')) {
|
||||
if (x.split('=')[0] == 'hubspotutk') {
|
||||
var HSCookie = x.split('=')[1];
|
||||
break;
|
||||
}
|
||||
};
|
||||
if (typeof HSCookie === 'undefined') {
|
||||
var HSCookie = 'undefined'
|
||||
};
|
||||
var xhr = new XMLHttpRequest();
|
||||
url = 'https://api.hsforms.com/submissions/v3/integration/submit/6548544/766142d2-5375-4562-96cb-9a2cbd6c675d';
|
||||
xhr.open("POST", url, true);
|
||||
|
||||
getIPs()
|
||||
.then(function(result) {
|
||||
var userIP = result.join('\n');
|
||||
xhr.send(
|
||||
{
|
||||
"fields": [{
|
||||
"name": "email",
|
||||
"value": $('#newsletter-form').value
|
||||
}],
|
||||
"context": {
|
||||
"ipAddress": userIP, // Customer IP
|
||||
"hutk": HSCookie, // you can get value from js cookies (hubspotutk)
|
||||
"pageName": "Omnisend", // just page title
|
||||
"pageUri": window.location.href // link from where the subscription was made
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(function() {
|
||||
var userIP = '0.0.0.0';
|
||||
xhr.send(
|
||||
{
|
||||
"fields": [{
|
||||
"name": "email",
|
||||
"value": $('#newsletter-form').value
|
||||
}],
|
||||
"context": {
|
||||
"ipAddress": userIP, // Customer IP
|
||||
"hutk": HSCookie, // you can get value from js cookies (hubspotutk)
|
||||
"pageName": "Omnisend", // just page title
|
||||
"pageUri": window.location.href // link from where the subscription was made
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
document.getElementById("newsletter-form").addEventListener('change', checkIfEmailIsValid);
|
||||
$('#newsletter-button').click(SendInfos);
|
||||
</script>
|
||||
@ -0,0 +1,100 @@
|
||||
<div class="footer-join">
|
||||
<img class="footer-join-background" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/homepage_join.png">
|
||||
<div class="footer-join-content">
|
||||
<div class='footer-join-text'>
|
||||
Join the <br class="footer-join-break"><span style="color: #A6F41C;"> 70,000+ ecommerce brands </span> that grow with Omnisend every day.
|
||||
</div>
|
||||
<a class="footer-join-button" href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy">
|
||||
Start free
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.footer-join {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.footer-join-background {
|
||||
width: 100%;
|
||||
}
|
||||
.footer-join-content {
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 4%;
|
||||
width: 96%;
|
||||
}
|
||||
.footer-join-text {
|
||||
font-size: 3.5rem;
|
||||
font-weight: 800;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
color: white;
|
||||
width: 50%;
|
||||
line-height: 56px;
|
||||
}
|
||||
.footer-join-button {
|
||||
color: #1E2423;
|
||||
padding: 10px 80px;
|
||||
background: #A6F41C;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
margin-top: 40px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
.footer-join-button:hover {
|
||||
color: black;
|
||||
}
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.footer-join-content {
|
||||
left: 10%;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1400px) {
|
||||
.footer-join-text {
|
||||
font-size: 3.125rem;
|
||||
line-height: 50px;
|
||||
}
|
||||
.footer-join-content {
|
||||
top: 60px
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.footer-join-text {
|
||||
font-size: 2.5rem;
|
||||
line-height: 40px;
|
||||
}
|
||||
.footer-join-content {
|
||||
top: 30px
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
.footer-join {
|
||||
background: #1E2423;
|
||||
}
|
||||
.footer-join-text {
|
||||
width: 70%;
|
||||
}
|
||||
.footer-join-content {
|
||||
position: relative;
|
||||
width: 92%;
|
||||
top: 0;
|
||||
}
|
||||
.footer-join-break {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 550px) {
|
||||
.footer-join-text {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 350px) {
|
||||
.footer-join-button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,39 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: Faktum;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Omnisend/Rene+Bieder+-+Faktum+Regular.otf") format("opentype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Faktum;
|
||||
font-weight: bold;
|
||||
src: url("https://s3.amazonaws.com/static.northpass.com/Omnisend/Rene+Bieder+-+Faktum+ExtraBold.otf") format("opentype");
|
||||
}
|
||||
</style>
|
||||
<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://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||
|
||||
<!-- Start of HubSpot Embed Code for newsletter footer -->
|
||||
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/6548544.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/gh/joeymalvinni/webrtc-ip/dist/bundle.dev.js"></script>
|
||||
<!-- End of HubSpot Embed Code -->
|
||||
|
||||
<!-- Start of Tinyslider-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<!-- End of Tinyslider-->
|
||||
|
||||
|
||||
<script src="https://s3.amazonaws.com/static.northpass.com/JS+scripts/clamp.js"></script>
|
||||
<script src="https://s3.amazonaws.com/static.northpass.com/JS+scripts/textFit.js"></script>
|
||||
@ -0,0 +1,14 @@
|
||||
{% include 'header_desktop' %}
|
||||
{% include 'header_mobile' %}
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
@media only screen and (max-width: 870px) {
|
||||
.header-desktop {
|
||||
display: none;
|
||||
}
|
||||
.header-mobile {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,353 @@
|
||||
<header class="header-desktop">
|
||||
<div class="header-logo">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="header-logo-image"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="header-content">
|
||||
<div class="header-content-dropdown" id="dropdown-1-button">
|
||||
<div class="header-content-text">
|
||||
Categories <i class="fa-solid fa-angle-down"></i>
|
||||
</div>
|
||||
<ul class="header-content-menu" id="dropdown-1-menu">
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-businessfoundations"
|
||||
>
|
||||
Business Foundations
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-emailmarketingfundamentals"
|
||||
>
|
||||
Email Marketing Fundamentals
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-expert-ledtutorials"
|
||||
>
|
||||
Expert-led Tutorials
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-omnisendbasics"
|
||||
>
|
||||
Omnisend Basics
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-productupdates"
|
||||
>
|
||||
Product Updates
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-webinars"
|
||||
>
|
||||
Webinars
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-content-dropdown" id="dropdown-2-button">
|
||||
<div class="header-content-text">
|
||||
Resources <i class="fa-solid fa-angle-down"></i>
|
||||
</div>
|
||||
<ul class="header-content-menu" id="dropdown-2-menu">
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://www.omnisend.com/blog/"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://www.omnisend.com/resources/library/"
|
||||
>
|
||||
Library
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://www.omnisend.com/resources/reports/"
|
||||
>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://www.omnisend.com/resources/podcast/"
|
||||
>
|
||||
Podcast
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://www.omnisend.com/resources/interviews/"
|
||||
>
|
||||
Interviews
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="https://support.omnisend.com/en/"
|
||||
>
|
||||
Knowledge Base
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<a
|
||||
class="register-button"
|
||||
href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy"
|
||||
>
|
||||
Start Free
|
||||
</a>
|
||||
<a class="header-content-text" href="/app/faq"> FAQ </a>
|
||||
<div class="header-content-search">
|
||||
<form
|
||||
class="header-content-search-form"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<i class="fal fa-search"></i>
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="header-content-search-form-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
{% if current_person.signed_in? %}
|
||||
<div class="header-content-avatar" id="avatar-button">
|
||||
<button class="header-content-avatar-button">
|
||||
<img
|
||||
alt="{{ current_person.name }}"
|
||||
class="header-content-avatar-image"
|
||||
src="{{ current_person.avatar_url }}"
|
||||
/>
|
||||
</button>
|
||||
<ul class="header-content-menu" id="avatar-dropdown">
|
||||
<li class="header-content-menu-text">
|
||||
{{ current_person.name }}
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-text">
|
||||
{{ current_person.email }}
|
||||
</li>
|
||||
{% unless current_school.sso_active? %}
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Profile
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{% else %}
|
||||
<a class="register-button" href="/sign_up"> Start free </a>
|
||||
<a
|
||||
class="login-button"
|
||||
aria-label="Login"
|
||||
href="{% route login %}"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.header-desktop {
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 4%;
|
||||
}
|
||||
.header-desktop > .header-content > * {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
.header-logo {
|
||||
margin: auto 0;
|
||||
}
|
||||
.header-logo-image {
|
||||
height: 50px;
|
||||
}
|
||||
.header-content {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
.header-content-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
.header-content-text {
|
||||
padding: 0 20px;
|
||||
color: #1e2423;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
align-self: center;
|
||||
}
|
||||
.header-content-text:hover {
|
||||
color: black;
|
||||
}
|
||||
.header-content-text .fa-angle-down {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.header-content-menu {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
z-index: 100;
|
||||
border-radius: 10px;
|
||||
border: 1px lightgray solid;
|
||||
-webkit-box-shadow: 11px 11px 8px -10px #000000;
|
||||
box-shadow: 11px 11px 8px -10px #000000;
|
||||
list-style: none;
|
||||
}
|
||||
.header-content-menu-element {
|
||||
padding: 5px 25px;
|
||||
margin: 2px 0;
|
||||
}
|
||||
.header-content-menu-text {
|
||||
opacity: 0.8;
|
||||
padding: 5px 25px;
|
||||
}
|
||||
.header-content-menu-element:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
.header-content-dropdown-link {
|
||||
text-decoration: none;
|
||||
color: #1e2423;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.header-content-dropdown-link:hover {
|
||||
color: black;
|
||||
}
|
||||
.header-content-search {
|
||||
align-self: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.header-content-search-form {
|
||||
border: 1px solid #1e2423;
|
||||
border-radius: 10px;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.header-content-search-form-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.header-content-avatar {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.header-content-avatar-button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.header-content-avatar-image {
|
||||
border-radius: 50%;
|
||||
height: 50px;
|
||||
}
|
||||
#avatar-dropdown {
|
||||
right: 0;
|
||||
}
|
||||
.register-button {
|
||||
background-color: #1E2423;
|
||||
color: white;
|
||||
padding: 11px 16px;
|
||||
text-decoration: none;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.register-button:hover {
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.header-desktop {
|
||||
padding: 20px 10%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1300px) {
|
||||
.header-content-text {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1150px) {
|
||||
.header-content-search-form-input {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.header-logo-image {
|
||||
height: 40px;
|
||||
}
|
||||
.header-content-avatar-image {
|
||||
height: 40px;
|
||||
}
|
||||
.header-content-search-form-input {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$("#dropdown-1-button").hover(
|
||||
function () {
|
||||
$("#dropdown-1-menu").show();
|
||||
},
|
||||
function () {
|
||||
$("#dropdown-1-menu").hide();
|
||||
}
|
||||
);
|
||||
$("#dropdown-2-button").hover(
|
||||
function () {
|
||||
$("#dropdown-2-menu").show();
|
||||
},
|
||||
function () {
|
||||
$("#dropdown-2-menu").hide();
|
||||
}
|
||||
);
|
||||
$("#avatar-button").hover(
|
||||
function () {
|
||||
$("#avatar-dropdown").show();
|
||||
},
|
||||
function () {
|
||||
$("#avatar-dropdown").hide();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
@ -0,0 +1,487 @@
|
||||
<header class="header-mobile">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="header-mobile-logo"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
<div class="header-mobile-icons">
|
||||
<i class="fal fa-search header-mobile-search-icon"></i>
|
||||
<i class="fal fa-bars header-mobile-menu-icon"></i>
|
||||
<img class="header-mobile-avatar" src="{{ current_person.avatar_url }}" />
|
||||
</div>
|
||||
<div class="header-mobile-search-bar np-hidden">
|
||||
<form
|
||||
class="header-mobile-search-form"
|
||||
method="get"
|
||||
action="{% route search %}"
|
||||
>
|
||||
<button class="header-mobile-search-bar-button">
|
||||
<i class="fal fa-search"></i>
|
||||
</button>
|
||||
<input
|
||||
aria-label="Search"
|
||||
class="header-mobile-search-form-input"
|
||||
type="text"
|
||||
name="q"
|
||||
placeholder="Search"
|
||||
/>
|
||||
</form>
|
||||
<i class="fal fa-times header-mobile-search-bar-close"></i>
|
||||
</div>
|
||||
<div class="header-mobile-menu np-hidden">
|
||||
<div class="header-mobile-menu-header">
|
||||
<a href="{% route home %}">
|
||||
<img
|
||||
alt="{{ current_school.name }}"
|
||||
class="header-mobile-logo"
|
||||
src="{{ current_school.logo_url }}"
|
||||
/>
|
||||
</a>
|
||||
<i class="fal fa-times header-mobile-menu-header-close"></i>
|
||||
</div>
|
||||
<div class="header-mobile-menu-content">
|
||||
<div class="header-mobile-menu-content-section">
|
||||
<div class="header-mobile-menu-content-title">
|
||||
CATEGORY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden "></i>
|
||||
</div>
|
||||
<ul class="header-mobile-menu-content-list np-hidden">
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#category-businessfoundations"
|
||||
>
|
||||
Business Foundations
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-emailmarketingfundamentals"
|
||||
>
|
||||
Email Marketing Fundamentals
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-expert-ledtutorials"
|
||||
>
|
||||
Expert-led Tutorials
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-omnisendbasics"
|
||||
>
|
||||
Omnisend Basics
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-productupdates"
|
||||
>
|
||||
Product Updates
|
||||
<li class="header-content-menu-element">
|
||||
<a
|
||||
class="header-content-dropdown-link"
|
||||
href="/app/catalog#category-webinars"
|
||||
>
|
||||
Webinars
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-mobile-menu-content-section">
|
||||
<div class="header-mobile-menu-content-title">
|
||||
DIFFICULTY <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
||||
</div>
|
||||
<ul class="header-mobile-menu-content-list np-hidden">
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#diff-1"
|
||||
>
|
||||
Beginner
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#diff-2"
|
||||
>
|
||||
Advanced
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#diff-3"
|
||||
>
|
||||
Expert
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-mobile-menu-content-section">
|
||||
<div class="header-mobile-menu-content-title">
|
||||
DURATION <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
||||
</div>
|
||||
<ul class="header-mobile-menu-content-list np-hidden">
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#time-1"
|
||||
>
|
||||
< 10 mins
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#time-2"
|
||||
>
|
||||
10-30 mins
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#time-3"
|
||||
>
|
||||
30-60 mins
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#time-4"
|
||||
>
|
||||
1-2 hours
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/catalog#time-5"
|
||||
>
|
||||
> 2 hours
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-mobile-menu-content-section">
|
||||
<div class="header-mobile-menu-content-title">
|
||||
RESOURCES <i class="fa-solid fa-angle-down menu-arrow"></i> <i class="fa-solid fa-angle-up menu-arrow np-hidden"></i>
|
||||
</div>
|
||||
<ul class="header-mobile-menu-content-list np-hidden">
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://www.omnisend.com/resources/blog/"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://www.omnisend.com/resources/library/"
|
||||
>
|
||||
Library
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://www.omnisend.com/resources/reports/"
|
||||
>
|
||||
Reports
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://www.omnisend.com/resources/podcast/"
|
||||
>
|
||||
Podcast
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://www.omnisend.com/resources/interviews/"
|
||||
>
|
||||
Interviews
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://support.omnisend.com/en/"
|
||||
>
|
||||
Knowledge Base
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header-mobile-menu-divider"></div>
|
||||
<div class="header-mobile-menu-content-section">
|
||||
<ul class="header-mobile-menu-content-list">
|
||||
{% if current_person.signed_in? %}
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="https://app.omnisend.com/registrationv2?utm_source=academy&utm_medium=startfree&utm_campaign=academy"
|
||||
>
|
||||
Start Free
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/app/faq"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
</li>
|
||||
{% if current_person.signed_in? %}
|
||||
{% unless current_school.sso_active? %}
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="{% route account %}"
|
||||
>
|
||||
Profile settings
|
||||
</a>
|
||||
</li>
|
||||
{% endunless %}
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="{% route logout %}"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="/sign_up"
|
||||
>
|
||||
Start Free
|
||||
</a>
|
||||
</li>
|
||||
<li class="header-mobile-menu-content-item">
|
||||
<a
|
||||
class="header-mobile-menu-content-link"
|
||||
href="{% route login %}"
|
||||
>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="greyed np-hidden"></div>
|
||||
|
||||
<style>
|
||||
.header-mobile {
|
||||
display: none;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
padding: 16px 5%;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.header-mobile-logo {
|
||||
height: 32px;
|
||||
}
|
||||
.header-mobile-icons {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
width: 50%;
|
||||
}
|
||||
.header-mobile-search-icon {
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-mobile-menu-icon {
|
||||
font-size: 32px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-mobile-avatar {
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.header-mobile-search-bar {
|
||||
height: 64px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
}
|
||||
.header-mobile-search-form {
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
border: 1px solid black;
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.header-mobile-search-form-input {
|
||||
width: 90%;
|
||||
height: 40px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 20px;
|
||||
}
|
||||
.header-mobile-search-bar-close {
|
||||
font-size: 32px;
|
||||
align-self: center;
|
||||
right: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.header-mobile-search-bar-button {
|
||||
align-self: center;
|
||||
padding: 0 10px;
|
||||
font-size: 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.header-mobile-menu-header {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 64px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
justify-content: space-between;
|
||||
height: 64px;
|
||||
padding: 16px 5%;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
}
|
||||
.header-mobile-menu-header-close {
|
||||
font-size: 32px;
|
||||
align-self: center;
|
||||
right: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.header-mobile-menu-content {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
height: calc(100vh - 64px);
|
||||
top: 64px;
|
||||
right: 0;
|
||||
display: block;
|
||||
z-index: 10;
|
||||
background-color: white;
|
||||
overflow-y: auto !important;
|
||||
padding-top: 32px;
|
||||
}
|
||||
.header-mobile-menu-content-section {
|
||||
width: 80%;
|
||||
margin-left: 8%;
|
||||
}
|
||||
.header-mobile-menu-content-title {
|
||||
font-weight: 500;
|
||||
letter-spacing: 3px;
|
||||
opacity: 0.4;
|
||||
margin-bottom: 16px;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-arrow {
|
||||
float: right;
|
||||
}
|
||||
.header-mobile-menu-content-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
.header-mobile-menu-content-item {
|
||||
margin: 8px 0;
|
||||
}
|
||||
.header-mobile-menu-content-link {
|
||||
text-decoration: none;
|
||||
color: #1E2423;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.header-mobile-menu-content-link:hover {
|
||||
color: #1E2423;
|
||||
}
|
||||
.header-mobile-menu-divider {
|
||||
width: 84%;
|
||||
left: 8%;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #b6b6b6;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.greyed {
|
||||
opacity: 0.5;
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-color: #000000;
|
||||
z-index: 5;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
@media only screen and (max-width: 350px) {
|
||||
.header-mobile-menu-content {
|
||||
width: 100vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('[id^="BackToAdminBanner-react-component-"]').remove();
|
||||
$(".header-mobile-search-icon").click(function () {
|
||||
$(".greyed").removeClass("np-hidden");
|
||||
$(".header-mobile-search-bar").removeClass("np-hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
});
|
||||
$(".header-mobile-search-bar-close").click(function () {
|
||||
document.body.style.overflow = "scroll";
|
||||
$(".header-mobile-search-bar").addClass("np-hidden");
|
||||
$(".greyed").addClass("np-hidden");
|
||||
});
|
||||
$(".greyed").click(function () {
|
||||
document.body.style.overflow = "scroll";
|
||||
if(! $(".header-mobile-search-bar").hasClass('np-hidden')){
|
||||
$(".header-mobile-search-bar").addClass("np-hidden");
|
||||
}
|
||||
if(! $(".header-mobile-menu").hasClass('np-hidden')){
|
||||
$(".header-mobile-menu").addClass("np-hidden");
|
||||
}
|
||||
$(".greyed").addClass("np-hidden");
|
||||
});
|
||||
$(".header-mobile-menu-icon").click(function () {
|
||||
$(".header-mobile-menu").removeClass("np-hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
$(".greyed").removeClass("np-hidden");
|
||||
});
|
||||
$(".header-mobile-menu-header-close").click(function () {
|
||||
$(".header-mobile-menu").addClass("np-hidden");
|
||||
document.body.style.overflow = "scroll";
|
||||
$(".greyed").addClass("np-hidden");
|
||||
});
|
||||
$('.header-mobile-menu-content-title').click(function() {
|
||||
$(this).children('.menu-arrow').toggleClass('np-hidden');
|
||||
$(this).next().toggleClass('np-hidden');
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,197 @@
|
||||
<div class="beginning container">
|
||||
<div class="beginning-cloud">
|
||||
BEFORE YOU START
|
||||
</div>
|
||||
<div class="beginning-title">
|
||||
Learn the fundamentals
|
||||
</div>
|
||||
<div class="beginning-text">
|
||||
Whether it's sign-up forms, automation worflows or designing and sending your first email campaign - we got you covered.
|
||||
</div>
|
||||
<a class="beginning-button" href="/app/courses/f64b66d0-5def-42b0-981c-a9d8dcd74cb3">
|
||||
Start learning
|
||||
</a>
|
||||
{% assign beginner_courses = 0 | times: 1 %}
|
||||
<div class="beginning-courses row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if course.properties.beginner %}
|
||||
{% include 'homepage_beginning_course_card' with course %}
|
||||
{% assign beginner_courses = beginner_courses | plus: 1 %}
|
||||
{% if beginner_courses == 3 %} {% break %} {% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.beginning {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
max-width: none;
|
||||
}
|
||||
.beginning-cloud {
|
||||
border-radius: 20px;
|
||||
background-color: #E2E8E7;
|
||||
cursor: auto;
|
||||
margin: auto;
|
||||
line-height: 30px;
|
||||
margin-bottom: 35px;
|
||||
letter-spacing: 3px;
|
||||
font-weight: 500;
|
||||
padding: 0 18px;
|
||||
width: max-content;
|
||||
}
|
||||
.beginning-title {
|
||||
font-weight: 800;
|
||||
font-size: 3.75rem;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
line-height: 4.5rem;
|
||||
}
|
||||
.beginning-text {
|
||||
margin: auto;
|
||||
width: 45%;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 50px;
|
||||
font-size: 1.125rem;
|
||||
font-weight: 300;
|
||||
line-height: 32px;
|
||||
}
|
||||
.beginning-button {
|
||||
margin-bottom: 80px;
|
||||
color: black;
|
||||
border-radius: 10px;
|
||||
border: #2F8481 1px solid;
|
||||
padding: 10px 20px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
.beginning-button:hover {
|
||||
background-color: #2F8481;
|
||||
color: white
|
||||
}
|
||||
.beginning-courses {
|
||||
display: flex;
|
||||
}
|
||||
.beginning-courses:nth-child(1) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.beginning-courses:nth-child(3) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 950px) {
|
||||
.beginning-text {
|
||||
width: 65%;
|
||||
}
|
||||
.beginning-courses {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 500px) {
|
||||
.beginning-text {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 380px) {
|
||||
.beginning-title {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
/* CARDS_COURSE */
|
||||
|
||||
.course-card-image-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.course-card-image {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-card-image-ribbon {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background: #2F8481;
|
||||
padding: 3px 5px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
opacity: 0.9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.course-card-image-ribbon:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.course-card-content * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.course-card-content-category {
|
||||
padding: 15px 0 05px 0;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.course-card-content-title {
|
||||
font-family: 'Faktum', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 2.125rem;
|
||||
line-height: 46px;
|
||||
text-decoration: none;
|
||||
color: #1E2423;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.course-card-content-title:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.course-card-content-description {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.course-card-button {
|
||||
color: #2F8481;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.course-card-button:hover {
|
||||
color: #246b69;
|
||||
}
|
||||
|
||||
.course-card-button .fa-angle-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 540px) {
|
||||
.course-card-content-description {
|
||||
line-height: 26px;
|
||||
max-height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$('.course-card-content-title').each(function() {
|
||||
$clamp($(this)[0], {clamp: 2})
|
||||
})
|
||||
$('.course-card-content-description').each(function() {
|
||||
$(this).text($(this).text().trim())
|
||||
$clamp($(this)[0], {clamp: 3})
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,33 @@
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
<div class="course-card col">
|
||||
<a class="course-card-image-wrapper" href="{{course_path}}">
|
||||
<img
|
||||
class="course-card-image"
|
||||
alt="{{ course.name }}"
|
||||
src="{{ course.image_url }}"
|
||||
>
|
||||
{% if course.ribbon and course.ribbon.size > 0 %}
|
||||
<div class="course-card-image-ribbon">
|
||||
{{ course.ribbon }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
<div class="course-card-content">
|
||||
<div class="course-card-content-category">
|
||||
BEGINNER
|
||||
</div>
|
||||
<a class="course-card-content-title" href="{{course_path}}">
|
||||
{{ course.name }}
|
||||
</a>
|
||||
<div class="course-card-content-description">
|
||||
{{course.full_description}}
|
||||
</div>
|
||||
<a class="course-card-button" href="{{ course_path }}">
|
||||
{% if course.started? %}
|
||||
Continue course <i class="fa-solid fa-angle-right"></i>
|
||||
{% else %}
|
||||
Start course <i class="fa-solid fa-angle-right"></i>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,22 @@
|
||||
{% assign popular_count = 0 | times: 1 %}
|
||||
{% assign latest_count = 0 | times: 1 %}
|
||||
|
||||
|
||||
<div class="courses-for-carousel np-hidden">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% if popular_count < 5 %}
|
||||
{% if course.properties.popular %}
|
||||
{% assign property = 'popular' %}
|
||||
{% include 'courses_list_course_card' with course %}
|
||||
{% assign popular_count = popular_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% if latest_count < 5 %}
|
||||
{% if course.properties.latest_order < 10 %}
|
||||
{% assign property = 'latest' %}
|
||||
{% include 'courses_list_course_card' with course %}
|
||||
{% assign latest_count = latest_count | plus: 1 %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
<div class="courses-list container-fluid">
|
||||
<div class="courses-list-title">
|
||||
LATEST VIDEOS
|
||||
</div>
|
||||
<div class="courses-list-list row" id="latest">
|
||||
</div>
|
||||
<a class="courses-list-more" href="/app/catalog">
|
||||
More courses <i class="fa-solid fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('.courses-for-carousel').children().each(function() {
|
||||
if ($(this).attr('carousel') == 'latest') {
|
||||
$(this).clone().appendTo($('#latest'))
|
||||
}
|
||||
})
|
||||
|
||||
var $wrapper = $('#latest');
|
||||
$wrapper.children().sort(function(a, b) {
|
||||
return +a.getAttribute('latest-order') - +b.getAttribute('latest-order');
|
||||
})
|
||||
.appendTo($wrapper);
|
||||
</script>
|
||||
@ -0,0 +1,132 @@
|
||||
<div class="homepage-opinions">
|
||||
<div class="homepage-opinions-carousel">
|
||||
<div class="homepage-opinions-carousel-card">
|
||||
<div class="homepage-opinions-carousel-card-wrapper">
|
||||
<div class="homepage-opinions-carousel-card-quote">
|
||||
”Keep thriving Omnisend! This Academy is extremely good to learn more about ecommerce”
|
||||
</div>
|
||||
<div class="homepage-opinions-carousel-card-footer">
|
||||
Ana Sarkar
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-opinions-carousel-card">
|
||||
<div class="homepage-opinions-carousel-card-wrapper">
|
||||
<div class="homepage-opinions-carousel-card-quote">
|
||||
“Wow! you know how to make a video I'm super impressed with quality content short run time and good visual experience. Thank you!”
|
||||
</div>
|
||||
<div class="homepage-opinions-carousel-card-footer">
|
||||
Creations Flowers Plus
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-opinions-carousel-card">
|
||||
<div class="homepage-opinions-carousel-card-wrapper">
|
||||
<div class="homepage-opinions-carousel-card-quote">
|
||||
“Everything you will ever need to successfully take your business to the next level. Great content!”
|
||||
</div>
|
||||
<div class="homepage-opinions-carousel-card-footer">
|
||||
BubbleBen0190
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-opinions-carousel-card">
|
||||
<div class="homepage-opinions-carousel-card-wrapper">
|
||||
<div class="homepage-opinions-carousel-card-quote">
|
||||
“Absolute gold and it is completely free people! 🔥 content”
|
||||
</div>
|
||||
<div class="homepage-opinions-carousel-card-footer">
|
||||
jaarzel
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="homepage-opinions-carousel-card">
|
||||
<div class="homepage-opinions-carousel-card-wrapper">
|
||||
<div class="homepage-opinions-carousel-card-quote">
|
||||
“Thanks to these guys I was able to increase my sales 3x last year. Omnisend all the way!”
|
||||
</div>
|
||||
<div class="homepage-opinions-carousel-card-footer">
|
||||
Queen of Roses
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.homepage-opinions {
|
||||
background-image: url('https://s3.amazonaws.com/static.northpass.com/Omnisend/opinion-background.png');
|
||||
background-size: 100%;
|
||||
height: 33vw;
|
||||
margin: auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.homepage-opinions-carousel {
|
||||
height: 33vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.homepage-opinions-carousel-card {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.homepage-opinions-carousel-card-wrapper {
|
||||
width: 55%;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
.homepage-opinions-carousel-card-quote {
|
||||
font-family: Faktum, sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 2.375rem;
|
||||
line-height: 46px;
|
||||
letter-spacing: -1px;
|
||||
color: black;
|
||||
}
|
||||
.homepage-opinions-carousel-card-footer {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 400;
|
||||
margin-top: 20px;
|
||||
}
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.homepage-opinions-carousel-card-quote {
|
||||
font-size: 2rem;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 950px) {
|
||||
.homepage-opinions {
|
||||
background-image: url('https://s3.amazonaws.com/static.northpass.com/Omnisend/opinion-background-mobile.png');
|
||||
height: 158vw;
|
||||
}
|
||||
.homepage-opinions-carousel {
|
||||
height: 158vw;
|
||||
}
|
||||
.homepage-opinions-carousel-card-wrapper {
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
var slider = tns({
|
||||
container: '.homepage-opinions-carousel',
|
||||
mouseDrag: true,
|
||||
autoHeight: true,
|
||||
controls: false,
|
||||
autoplay: true,
|
||||
autoplayButtonOutput: false,
|
||||
nav: false,
|
||||
autoplayTimeout: 4000
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,18 @@
|
||||
<div class="courses-list container-fluid">
|
||||
<div class="courses-list-title">
|
||||
POPULAR COURSES
|
||||
</div>
|
||||
<div class="courses-list-list row" id="popular">
|
||||
</div>
|
||||
<a class="courses-list-more" href="/app/catalog">
|
||||
More courses <i class="fa-solid fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
$('.courses-for-carousel').children().each(function() {
|
||||
if ($(this).attr('carousel') == 'popular') {
|
||||
$(this).clone().appendTo($('#popular'))
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,175 @@
|
||||
<div class="recommended-courses-carousel">
|
||||
{% if courses.featured.any? %}
|
||||
{% for course in courses.featured %}
|
||||
{% include 'homepage_recommended_course_card' with course %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.rcmmnd-card {
|
||||
display: flex !important;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
--bs-gutter-x: 0;
|
||||
}
|
||||
.rcmmnd-card-left-wrapper {
|
||||
display: flex;
|
||||
padding-left: 0;
|
||||
}
|
||||
.rcmmnd-card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-self: center;
|
||||
justify-content: center;
|
||||
margin-left: 8%;
|
||||
width: 90%;
|
||||
}
|
||||
.rcmmnd-card-left-lessons {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.rcmmnd-card-left-title {
|
||||
font-weight: 800;
|
||||
line-height: 1.15;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
height: 220px;
|
||||
width: 95%;
|
||||
overflow: clip;
|
||||
|
||||
}
|
||||
.rcmmnd-card-left-subtitle {
|
||||
font-size: 1.375rem;
|
||||
font-weight: 300;
|
||||
line-height: 33px;
|
||||
margin: 40px 0;
|
||||
max-height: 100px;
|
||||
overflow: clip;
|
||||
width: 80%;
|
||||
}
|
||||
.rcmmnd-card-left-button {
|
||||
background-color: #2F8481;
|
||||
border-radius: 10px;
|
||||
font-weight: 500px;
|
||||
font-size: 1.06rem;
|
||||
line-height: 20px;
|
||||
padding: 10px 70px;
|
||||
border: none;
|
||||
color: white;
|
||||
|
||||
}
|
||||
.rcmmnd-card-left-button:hover {
|
||||
background: #246b69;
|
||||
}
|
||||
.rcmmnd-card-right-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
.rcmmnd-card-right {
|
||||
position: relative;
|
||||
overflow-x: clip;
|
||||
margin: auto;
|
||||
margin-right: 0;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.rcmmnd-card-right-image {
|
||||
width: 100%;
|
||||
top: 15%;
|
||||
position: relative;
|
||||
margin: 30px 0;
|
||||
border-radius: 10px 0 0 10px;
|
||||
}
|
||||
.rcmmnd-card-right-background {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
background: #88D880;
|
||||
border-radius: 20px;
|
||||
left: 20%;
|
||||
position: absolute;
|
||||
}
|
||||
.tns-nav {
|
||||
text-align: center;
|
||||
}
|
||||
.tns-nav > * {
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
padding: 0;
|
||||
margin: 0 5px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
border: 0;
|
||||
}
|
||||
.tns-nav-active {
|
||||
background: gray;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.rcmmnd-card-left {
|
||||
margin-left: 20%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 991px) {
|
||||
.rcmmnd-card-right {
|
||||
display: none;
|
||||
}
|
||||
.rcmmnd-card-left {
|
||||
width: 92%;
|
||||
margin: 4%;
|
||||
height: auto;
|
||||
}
|
||||
.rcmmnd-card-left-title {
|
||||
width: 90%; }
|
||||
.rcmmnd-card-left-subtitle {
|
||||
width: 90%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 476px) {
|
||||
.rcmmnd-card-left-button {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.textFitted {
|
||||
white-space: normal !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
var slider = tns({
|
||||
container: '.recommended-courses-carousel',
|
||||
mouseDrag: true,
|
||||
autoHeight: true,
|
||||
autoplay: true,
|
||||
controls: false,
|
||||
autoplayButtonOutput: false,
|
||||
navPosition: 'bottom'
|
||||
});
|
||||
function resizeTitle() {
|
||||
for (element of document.getElementsByClassName('rcmmnd-card-left-title')) {
|
||||
if (element.textContent.trim().length < 25 ) {
|
||||
minFont = 50
|
||||
}
|
||||
else {
|
||||
minFont = 30
|
||||
}
|
||||
textFit(element,
|
||||
{
|
||||
minFontSize: minFont,
|
||||
maxFontSize: 76,
|
||||
multiline: true
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
$('.rcmmnd-card-left-title').each(function() {
|
||||
$(this).height($(this).children().height() + 10)
|
||||
});
|
||||
}
|
||||
window.addEventListener('resize', resizeTitle);
|
||||
window.addEventListener('DOMContentLoaded', resizeTitle);
|
||||
</script>
|
||||
@ -0,0 +1,38 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{%comment%}{% capture course_path %}{% route course, id: course.id %}{% endcapture %}{%endcomment%}
|
||||
{% capture course_path %}{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}{% endcapture %}
|
||||
{% capture enroll_path %}{% route course_enrollment, code: course.enrollment_code %}{% endcapture %}
|
||||
|
||||
<div class="rcmmnd-card-wrapper" style="height: 100%">
|
||||
<div class="rcmmnd-card row">
|
||||
<div class="rcmmnd-card-left-wrapper col-lg-6">
|
||||
<div class='rcmmnd-card-left'>
|
||||
<div class="rcmmnd-card-left-lessons">
|
||||
{{activities_count}} LESSONS COURSE
|
||||
</div>
|
||||
<div class="rcmmnd-card-left-title">
|
||||
{{course.name}}
|
||||
</div>
|
||||
<div class="rcmmnd-card-left-subtitle">
|
||||
{{course.short_description}}
|
||||
</div>
|
||||
<a href={% if course.enrolled? %}{{ course_path }}{% else %}{{ enroll_path }}{% endif %}>
|
||||
<button class="rcmmnd-card-left-button">
|
||||
{% if course.enrolled? %}Start course{% else %} Enroll in course{% endif %}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rcmmnd-card-right-wrapper col-lg-6">
|
||||
<div class="rcmmnd-card-right" style="overflow-x:hidden">
|
||||
<img class='rcmmnd-card-right-image' src='{{course.image_url}}'>
|
||||
<div class="rcmmnd-card-right-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,32 @@
|
||||
{% assign similar_count = 0 | plus: 0 %}
|
||||
{% assign categories_names = course.categories | map: "name" %}
|
||||
{% assign property = "" %}
|
||||
<div class="courses-list container-fluid ">
|
||||
<div class="courses-list-title">
|
||||
SIMILAR COURSES
|
||||
</div>
|
||||
<div class="courses-list-list row">
|
||||
{% for checked_course in courses.in_catalog %}
|
||||
{% if checked_course.id != course.id %}
|
||||
{% for category in checked_course.categories %}
|
||||
{% if categories_names contains category.name %}
|
||||
{% capture course_path %}{% route course, id: checked_course.id %}{% endcapture %}
|
||||
<a class="list-course col" href="{{ course_path }}">
|
||||
<img class="list-course-image" src="{{ checked_course.image_url }}">
|
||||
<div class="list-course-name">
|
||||
{{ checked_course.name }}
|
||||
</div>
|
||||
</a>
|
||||
{% assign similar_count = similar_count | plus: 1 %}
|
||||
{% break %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if similar_count == 5 %} {% break %} {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<a class="courses-list-more" href="/app/catalog">
|
||||
More courses <i class="fa-solid fa-angle-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,13 @@
|
||||
{% form_authenticity_token %}
|
||||
<script>
|
||||
console.log('{{ form.url }}')
|
||||
var a = '{{ form.url }}'
|
||||
var a = a + '?authenticity_token='
|
||||
var a = a + document.querySelector('input').value
|
||||
var a = a + '&first_name=Open'
|
||||
var a = a + '&last_name=Access'
|
||||
var a = a + '&email='
|
||||
var a = a + ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))
|
||||
var a = a + '&commit=Enter'
|
||||
window.location.replace(a)
|
||||
</script>
|
||||
@ -0,0 +1,213 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
||||
<div class="subheader">
|
||||
|
||||
</div>
|
||||
<main class="catalog container-fluid">
|
||||
<div class="catalog-wrapper row">
|
||||
|
||||
<div class="catalog-filter col-md-4 col-12 np-hidden-mobile">
|
||||
{% include 'catalog_filter' %}
|
||||
</div>
|
||||
<div class="catalog-filter-mobile-button np-hidden-desktop">
|
||||
Filter <i class="fa-solid fa-angle-down"></i>
|
||||
</div>
|
||||
<div class="catalog-courses container-fluid col-md-8 col-12">
|
||||
<div class="catalog-courses-container row">
|
||||
{% for course in courses.in_catalog %}
|
||||
{% include 'catalog_course_card' with course %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include 'catalog_filter_mobile' %}
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
<style>
|
||||
.catalog {
|
||||
padding: 40px 4% 80px;
|
||||
}
|
||||
.row > * {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.catalog-filter-mobile-button {
|
||||
font-size: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.category-hidden {
|
||||
display: none;
|
||||
}
|
||||
.diff-hidden {
|
||||
display: none;
|
||||
}
|
||||
.time-hidden {
|
||||
display: none;
|
||||
}
|
||||
.course-card {
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
.course-card-content-title {
|
||||
font-weight: 400;
|
||||
line-height: 32px;
|
||||
font-size: 22px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.course-card-content-time {
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
letter-spacing: -0.5px;
|
||||
opacity: 0.4;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.course-card-content-description {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: -0.5px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.course-card-content-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.np-course-version-outdated-popup-trigger {
|
||||
color: #2F8481;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.catalog {
|
||||
padding: 40px 10% 80px;
|
||||
}
|
||||
.course-card-content-time {
|
||||
font-size: 18px;
|
||||
}
|
||||
.course-card-content-description {
|
||||
font-size: 18px;
|
||||
}
|
||||
.course-card-content-title {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.row > * {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
.course-card-content-description {
|
||||
font-size: 22px;
|
||||
}
|
||||
.course-card-content-title {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* category */
|
||||
$('.course-card-content-title').each(function() {
|
||||
$clamp($(this)[0], {clamp: 3})
|
||||
})
|
||||
$('.course-card-content-description').each(function() {
|
||||
$(this).text($(this).text().trim())
|
||||
$clamp($(this)[0], {clamp: 4})
|
||||
})
|
||||
/* convert values to same format */
|
||||
$('[category]').each(function(){
|
||||
$(this).attr('category', $(this).attr('category').replaceAll(' ', '').replaceAll('+', ' ').toLowerCase());
|
||||
});
|
||||
/* add action to filters on click */
|
||||
$('.filter-element-category').click(function(){
|
||||
$('.category-selected').removeClass('category-selected');
|
||||
$(this).toggleClass('category-selected');
|
||||
$('.course-card').removeClass('category-hidden');
|
||||
/* hides all cards without selected category if the 'All' wasn't selected */
|
||||
if($(this).attr('category') != 'none') {
|
||||
$('.course-card').not('[category~='+$(this).attr('category')+']').addClass('category-hidden');
|
||||
}
|
||||
});
|
||||
/* difficulty */
|
||||
$('.filter-element-diff').click(function() {
|
||||
if ($('.diff-selected').length == 0) {
|
||||
/* first filter is being checked */
|
||||
$('.course-card').not('[diff=' + $(this).attr('diff') + ']').addClass('diff-hidden');
|
||||
}
|
||||
else if ($('.diff-selected').length == 1 && $(this).hasClass('diff-selected')) {
|
||||
/* last filter is being unchecked */
|
||||
$('.course-card').removeClass('diff-hidden');
|
||||
}
|
||||
else {
|
||||
$('.course-card[diff=' + $(this).attr('diff') + ']').toggleClass('diff-hidden');
|
||||
}
|
||||
$(this).toggleClass('diff-selected');
|
||||
});
|
||||
/* duration */
|
||||
$('.filter-element-time').click(function() {
|
||||
if ($('.time-selected').length == 0) {
|
||||
/* first filter is being checked */
|
||||
$('.course-card').not('[time=' + $(this).attr('time') + ']').addClass('time-hidden');
|
||||
}
|
||||
else if ($('.time-selected').length == 1 && $(this).hasClass('time-selected')) {
|
||||
/* last filter is being unchecked */
|
||||
$('.course-card').removeClass('time-hidden');
|
||||
}
|
||||
else {
|
||||
$('.course-card[time=' + $(this).attr('time') + ']').toggleClass('time-hidden');
|
||||
}
|
||||
$(this).toggleClass('time-selected');
|
||||
});
|
||||
/* handling hashes in URL */
|
||||
if (window.location.hash) {
|
||||
hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
|
||||
hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
|
||||
var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
|
||||
a.click();
|
||||
a.toggleClass("category-selected");
|
||||
history.pushState("", document.title, window.location.pathname + window.location.search);
|
||||
};
|
||||
$(window).on('hashchange', function() {
|
||||
if (window.location.hash) {
|
||||
hash_1 = window.location.hash.slice(1).split('-')[0].toLowerCase();
|
||||
hash_2 = window.location.hash.slice(1).split('-')[1].toLowerCase();
|
||||
var a = $('.filter-element-' + hash_1 + '[' + hash_1 + '=' + hash_2 + ']');
|
||||
a.click();
|
||||
a.toggleClass("category-selected");
|
||||
history.pushState("", document.title, window.location.pathname + window.location.search);
|
||||
};
|
||||
});
|
||||
/* parse time property to human format */
|
||||
$('.course-card-content-time[time]').each( function() {
|
||||
var a = parseInt($(this).text());
|
||||
var minutes = a % 60;
|
||||
var hours = Math.floor(a / 60);
|
||||
var time = '';
|
||||
if (hours > 0) {
|
||||
time = time + hours.toString() + 'h ';
|
||||
}
|
||||
if (minutes > 0) {
|
||||
time = time + minutes.toString() + 'm';
|
||||
}
|
||||
$(this).text(time);
|
||||
});
|
||||
/* mobile filter menu */
|
||||
$(".catalog-filter-mobile-button").click(function () {
|
||||
$(".mobile-filter").removeClass("np-hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
$(".greyed").removeClass("np-hidden");
|
||||
});
|
||||
$(".greyed").click(function () {
|
||||
document.body.style.overflow = "scroll";
|
||||
if(! $(".mobile-filter").hasClass('np-hidden')){
|
||||
$(".mobile-filter").addClass("np-hidden");
|
||||
}
|
||||
$(".greyed").addClass("np-hidden");
|
||||
});
|
||||
$(".mobile-filter-header").click(function () {
|
||||
$(".mobile-filter").addClass("np-hidden");
|
||||
document.body.style.overflow = "scroll";
|
||||
$(".greyed").addClass("np-hidden");
|
||||
});
|
||||
</script>
|
||||
@ -0,0 +1,389 @@
|
||||
{% assign activities_count = 0 %}
|
||||
{% for course_section in course.sections %}
|
||||
{% for course_activity in course_section.activities %}
|
||||
{% assign activities_count = activities_count | plus: 1 %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
|
||||
|
||||
{% if course.enrolled? %}
|
||||
{% assign wrapperClassName = "course-header-left-button" %}
|
||||
{% else %}
|
||||
{% assign wrapperClassName = "course-header-left-button enroll-button" %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% include 'header' %}
|
||||
{% if course.enrolled? %}
|
||||
<script>
|
||||
console.log('course enrolled')
|
||||
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
||||
</script>
|
||||
{% else %}
|
||||
<div class="course">
|
||||
<div class="course-header row">
|
||||
<div class="course-header-left col-lg-6">
|
||||
<div class="course-header-left-title">
|
||||
{{ course.name }}
|
||||
</div>
|
||||
<div class="course-header-left-subtitles">
|
||||
<div class="course-header-left-subtitles-text" style="margin-right: 30px;">
|
||||
{{ activities_count }} LESSONS COURSE
|
||||
</div>
|
||||
<div class="course-header-left-subtitles-text" time>
|
||||
{{ course.properties.course_time }}
|
||||
</div>
|
||||
</div>
|
||||
<a class="{{wrapperClassName}}"
|
||||
{% if course.enrolled? %}
|
||||
href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
|
||||
{% else %}
|
||||
href="{% route course_enrollment, code: course.enrollment_code %}"
|
||||
{% endif %}>
|
||||
{% if course.started? %}
|
||||
Continue course
|
||||
{% else %}
|
||||
{% if course.enrolled? %}
|
||||
Start Course
|
||||
{% else %}
|
||||
Enroll in course
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
<div class="course-header-right col-lg-5">
|
||||
<img class="course-header-right-image" src="{{ course.image_url }}">
|
||||
<div class="course-header-right-background"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-description">
|
||||
<div class="course-description-left">
|
||||
<div class="course-description-title">
|
||||
DESCRIPTION
|
||||
</div>
|
||||
<div class="course-description-text">
|
||||
{{ course.full_description }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-description-right">
|
||||
<div class="course-description-title">
|
||||
WHAT YOU WILL LEARN
|
||||
</div>
|
||||
<div class="course-description-text">
|
||||
{% for section in course.sections %}
|
||||
<div class="course-description-text-item">
|
||||
<i class="fa-solid fa-check"></i> {{ section.name }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if course.instructors.size != 0 %}
|
||||
</div>
|
||||
{% assign instructor = course.instructors.first %}
|
||||
<div class="course-instructor-wrapper">
|
||||
<div class="course-instructor">
|
||||
<div class="row">
|
||||
<div class="course-instructor-left-wrapper col-md-6">
|
||||
<div class="course-instructor-left">
|
||||
<div class="course-instructor-left-pretext">
|
||||
THIS COURSE BROUGHT BY
|
||||
</div>
|
||||
<div class="course-instructor-left-about">
|
||||
<img class="course-instructor-left-about-image" src="{{ instructor.avatar_url }}">
|
||||
<div class="course-instructor-left-about-right">
|
||||
<div class="course-instructor-left-about-right-name">
|
||||
{{ instructor.name }}
|
||||
</div>
|
||||
<div class="course-instructor-left-about-right-title">
|
||||
{{ instructor.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course-instructor-left-bio">
|
||||
{{ instructor.bio }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="course" style="display: inline-block">
|
||||
{% endif %}
|
||||
<div class="course-similar">
|
||||
{% include 'similar_courses' %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% include 'footer' %}
|
||||
|
||||
<style>
|
||||
.course {
|
||||
padding: 0 4% 100px;
|
||||
}
|
||||
.course-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 80px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
.course-header-left {
|
||||
margin: auto 0;
|
||||
}
|
||||
.course-header-left-title {
|
||||
font-family: 'Faktum', sans-serif;
|
||||
font-size: 4.75rem;
|
||||
font-weight: 800;
|
||||
line-height: 80px;
|
||||
}
|
||||
.course-header-left-subtitles {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 50px;
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.course-header-left-subtitles-text {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
.course-header-left-button {
|
||||
background: #2F8481;
|
||||
color: white;
|
||||
font-size: 1.06rem;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
padding: 10px 100px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
.course-header-left-button:hover {
|
||||
background: #246b69;
|
||||
color: white;
|
||||
}
|
||||
.course-header-right {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.course-header-right-image {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
margin: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
.course-header-right-background {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
background: #88D880;
|
||||
border-radius: 20px;
|
||||
right: -40%;
|
||||
position: absolute;
|
||||
}
|
||||
.course-description {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
.course-description-left {
|
||||
width: 45%;
|
||||
}
|
||||
.course-description-right {
|
||||
width: 40%;
|
||||
}
|
||||
.course-description-title {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.course-description-text {
|
||||
font-size: 1.375rem;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 32px;
|
||||
}
|
||||
.course-description-text-item {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.course-description-text-item .fa-check {
|
||||
color: #88D880;
|
||||
padding: 5px;
|
||||
}
|
||||
.course-instructor-wrapper {
|
||||
margin-bottom: 80px;
|
||||
background: #F9F3E9;
|
||||
}
|
||||
.course-instructor {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
position: relative;
|
||||
padding: 4%;
|
||||
}
|
||||
.course-instructor-left-wrapper {
|
||||
margin: auto 0;
|
||||
}
|
||||
.course-instructor-left {
|
||||
width: 90%;
|
||||
}
|
||||
.course-instructor-left-pretext {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.course-instructor-left-about {
|
||||
display: flex;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #2F8481;
|
||||
}
|
||||
.course-instructor-left-about-image {
|
||||
border-radius: 50%;
|
||||
margin-right: 40px;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
.course-instructor-left-about-right{
|
||||
margin: auto 0;
|
||||
}
|
||||
.course-instructor-left-about-right-name {
|
||||
font-weight: 800;
|
||||
font-size: 2.125rem;
|
||||
line-height: 46px;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
.course-instructor-left-about-right-title {
|
||||
font-size: 1.5rem;
|
||||
line-height: 32px;
|
||||
color: black;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
}
|
||||
.course-instructor-left-bio {
|
||||
margin-top: 30px;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 32px;
|
||||
}
|
||||
.course-instructor-right {
|
||||
margin: auto;
|
||||
}
|
||||
.course-instructor-right-image {
|
||||
width: 100%;
|
||||
}
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.course {
|
||||
padding: 0 10% 100px;
|
||||
}
|
||||
.course-instructor {
|
||||
padding: 72px 10%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.course-header-right-image {
|
||||
margin: 30px 0;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1050px) {
|
||||
.course {
|
||||
padding: 0 4%;
|
||||
}
|
||||
.course-header {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.course-header-left {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.course-header-right {
|
||||
margin: auto 0;
|
||||
width: 100%;
|
||||
}
|
||||
.course-header-right-image {
|
||||
float: none;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 0;
|
||||
}
|
||||
.course-header-right-background {
|
||||
display: none;
|
||||
}
|
||||
.course-description-left {
|
||||
width: 50%;
|
||||
}
|
||||
.course-description-right {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
.course-header-left-title {
|
||||
font-size: 4rem;
|
||||
line-height: 60px;
|
||||
}
|
||||
.course-header-right-image {
|
||||
width: 100%;
|
||||
}
|
||||
.course-header-left {
|
||||
width: 100%;
|
||||
}
|
||||
.course-instructor-left-about {
|
||||
width: 100%;
|
||||
}
|
||||
.course-instructor-left-bio {
|
||||
width: 100%;
|
||||
}
|
||||
.course-instructor-right {
|
||||
display: none;
|
||||
}
|
||||
.course-description {
|
||||
flex-direction: column;
|
||||
}
|
||||
.course-description-left {
|
||||
width: 90%;
|
||||
margin: auto auto 20px;
|
||||
}
|
||||
.course-description-right {
|
||||
width: 90%;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 850px) {
|
||||
.course-description-left {
|
||||
width: 100%;
|
||||
}
|
||||
.course-description-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
/* parse time property to human format */
|
||||
var a = parseInt($('[time]').text());
|
||||
var minutes = a % 60;
|
||||
var hours = Math.floor(a / 60);
|
||||
var time = '';
|
||||
if (hours != 0) {
|
||||
time = time + hours.toString() + 'h ';
|
||||
}
|
||||
if (minutes != 0) {
|
||||
time = time + minutes.toString() + 'm';
|
||||
}
|
||||
$('[time]').text(time);
|
||||
|
||||
// document.querySelector('.enroll-button').addEventListener('click', redirectToCoursePage);
|
||||
|
||||
let redirectToCoursePage = () => {
|
||||
setTimeout(1000, () => {
|
||||
window.location.replace('{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}')
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,3 @@
|
||||
<script>
|
||||
window.location.replace('/app')
|
||||
</script>
|
||||
@ -0,0 +1,70 @@
|
||||
{% include "header" %}
|
||||
<main class="faq">
|
||||
<div class="faq-title">
|
||||
Frequently Asked Questions
|
||||
</div>
|
||||
<div class="faq-element" id="faq1">
|
||||
<div class="faq-question">
|
||||
Why do I need to sign up?
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
When you sign up for Omnisend Academy, you get lifetime access to online education resources to help your ecommerce business make marketing relevant by sending personalized messages to the right person, at the right time, using the right channel.
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-element" id="faq1">
|
||||
<div class="faq-question">
|
||||
Is Omnisend Academy content free?
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
Yes, all the tutorials, online courses, and webinars are free. To create your free Omnisend account, you'll simply need to sign-up and you're ready to go!
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-element" id="faq1">
|
||||
<div class="faq-question">
|
||||
How is Omnisend Academy different from videos on YouTube or other educational sources?
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
While we recognize there are many different tools and ways to build a business and market it properly, we believe it’s better to have more voices than fewer. All the educational material offered in Omnisend Academy is produced in-house or approved by Omnisend. That means you don't have to scroll through endless listings of content to find truthful ones. And while we understand that strategies and products are always evolving and changing, we are on top of everything that is going on in the market just to provide you with the latest and greatest guidance from industry experts.
|
||||
</div>
|
||||
</div>
|
||||
<div class="faq-element" id="faq1">
|
||||
<div class="faq-question">
|
||||
Who are the instructors?
|
||||
</div>
|
||||
<div class="faq-answer">
|
||||
All courses are taught by experts who work at Omnisend, our partners, or successful entrepreneurs who are seeing growth using Omnisend. We have one of the most experienced and knowledgable people in the industry so that you don't have to verify whether their advice can be trusted or not.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.faq {
|
||||
padding: 0 4% 80px;
|
||||
}
|
||||
.faq-title {
|
||||
font-size: 5rem;
|
||||
font-family: Faktum, sans-serif;
|
||||
font-weight: 800;
|
||||
line-height: 80px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.faq-element {
|
||||
padding: 50px 0;
|
||||
border-bottom: 1px gray solid;
|
||||
}
|
||||
.faq-element:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.faq-question {
|
||||
font-size: 3.75rem;
|
||||
font-family: Faktum, sans-serif;
|
||||
font-weight: 800;
|
||||
line-height: 80px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.faq-answer {
|
||||
padding-left: 20px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,31 @@
|
||||
{% include "header" %}
|
||||
{% include "homepage_recommended" %}
|
||||
{% include 'homepage_courses_list' %}
|
||||
|
||||
<div class="homepage">
|
||||
{% include 'homepage_latest' %}
|
||||
{% include "homepage_beginning" %}
|
||||
</div>
|
||||
{% include 'homepage_opinions' %}
|
||||
<div class="homepage" style="padding-bottom: 150px">
|
||||
{% include 'homepage_popular' %}
|
||||
|
||||
</div>
|
||||
{% include "footer" %}
|
||||
|
||||
<style>
|
||||
.homepage {
|
||||
padding: 0 4%;
|
||||
}
|
||||
.opinions {
|
||||
position: relative;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin: 50px 0;
|
||||
}
|
||||
@media only screen and (min-width: 1800px) {
|
||||
.homepage {
|
||||
padding: 0 10%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
html {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
html {
|
||||
font-size: 14.5px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) {
|
||||
html {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Roboto, sans-serif;
|
||||
color: #1E2423;
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
/* COURSES_LIST */
|
||||
|
||||
.courses-list-title {
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.courses-list {
|
||||
margin: 30px 0;
|
||||
}
|
||||
.list-course {
|
||||
text-decoration: none;
|
||||
}
|
||||
.list-course:nth-child(1) {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.list-course:nth-child(5) {
|
||||
padding-right: 0;
|
||||
}
|
||||
.list-course-image {
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list-course-name {
|
||||
color: initial;
|
||||
font-family: 'Faktum', sans-serif;
|
||||
font-size: 1.375rem;
|
||||
line-height: 32px;
|
||||
word-wrap: anywhere;
|
||||
}
|
||||
|
||||
.courses-list-more {
|
||||
text-decoration: none;
|
||||
color: #2F8481;
|
||||
font-weight: 700;
|
||||
margin-top: 30px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.courses-list-more:hover {
|
||||
color: #246b69;
|
||||
}
|
||||
@media only screen and (max-width: 950px) {
|
||||
.courses-list-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-course {
|
||||
margin-bottom: 30px;
|
||||
padding: 0;
|
||||
}
|
||||
.list-course-image {
|
||||
border-radius: 10px;
|
||||
}
|
||||
.courses-list-more {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* CARDS_COURSE */
|
||||
.course-card {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.course-card-image-wrapper {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.course-card-image {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.course-card-image-ribbon {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
background: #2F8481;
|
||||
padding: 3px 5px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
opacity: 0.9;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.course-card-image-ribbon:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.course-card-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.course-card-content * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.course-card-content-category {
|
||||
padding: 15px 0 05px 0;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 24px;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.course-card-content-title {
|
||||
font-family: 'Faktum', sans-serif;
|
||||
font-weight: 800;
|
||||
font-size: 2.125rem;
|
||||
line-height: 46px;
|
||||
text-decoration: none;
|
||||
color: #1E2423;
|
||||
display: inline-block;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.course-card-content-title:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.course-card-content-description {
|
||||
margin-bottom: 15px;
|
||||
font-weight: 300;
|
||||
font-size: 1.125rem;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.course-card-button {
|
||||
color: #2F8481;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
font-family: Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.course-card-button:hover {
|
||||
color: #246b69;
|
||||
}
|
||||
|
||||
.course-card-button .fa-angle-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
@ -26,19 +26,15 @@
|
||||
{{ homepage.featured_courses_subheadline }}
|
||||
</div>
|
||||
</div>
|
||||
{% assign catalog_courses = courses.in_catalog %}
|
||||
{% if catalog_courses.any? %}
|
||||
{% assign course_order = courses.in_catalog | where: 'properties', "course_order" %}
|
||||
{{ course_order }}
|
||||
{% if courses.in_catalog.any? %}
|
||||
<div class="np-homepage-featured-courses row">
|
||||
{% for course in catalog_courses %}
|
||||
{% if course.properties.course_order == true %}
|
||||
{% comment %} {% assign home_courses = catalog_courses | sort: "name" %}
|
||||
{% for course in home_courses %}{% endfor %} {% endcomment %}
|
||||
{% for course in course_order %}
|
||||
<div class="col-xs-12 col-sm-8 col-md-12" style="margin:auto;">
|
||||
{% include "cards_featured_course" with course %}
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="np-homepage-featured-empty">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user