Zenjob Notes, and new Templates
This commit is contained in:
Norm Rasmussen
@ -0,0 +1,212 @@
|
||||
<footer class="main-footer width-limit">
|
||||
<section class="footer-links">
|
||||
<div class="footer-links-section">
|
||||
<p class="footer-links-section-title">
|
||||
Pipedrive
|
||||
</p>
|
||||
<a class="footer-links-section-item" href="">
|
||||
About
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Pricing
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Jobs
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Blog
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Newsroom
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-links-section">
|
||||
<p class="footer-links-section-title">
|
||||
Product
|
||||
</p>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Features
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Marketplace
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Mailigen
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Status
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
API
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-links-section">
|
||||
<p class="footer-links-section-title">
|
||||
Discover
|
||||
</p>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Partner Program
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Get our newsletter
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Sales Pipeline Course
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
What is CRM?
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
CRM comparison
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Resources
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-links-section">
|
||||
<p class="footer-links-section-title">
|
||||
Help Center
|
||||
</p>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Home
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Community
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Community
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Academy
|
||||
</a>
|
||||
<a class="footer-links-section-item" href="">
|
||||
Support
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footer-bottom">
|
||||
<div class="footer-bottom-row">
|
||||
<div class="footer-bottom-desktop-language np-hidden-mobile">
|
||||
<i class="fal fa-globe"></i>
|
||||
English
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom-social">
|
||||
{% if website_footer.show_social_media_links? %}
|
||||
<div class="footer-bottom-social-list">
|
||||
{% for social_media_link in website_footer.social_media_links %}
|
||||
<a
|
||||
class="footer-bottom-social-item"
|
||||
href="{{ social_media_link.link }}"
|
||||
target="_blank" title="{{ social_media_link.name }}"
|
||||
>
|
||||
<i class="fab fa-{{ social_media_link.name }}"></i>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom-row">
|
||||
<div class="footer-bottom-links">
|
||||
<p class="footer-bottom-link-text">
|
||||
© {{ "now" | date: "%Y" }} Pipedrive
|
||||
</p>
|
||||
<p class="footer-button-link-separator">
|
||||
|
|
||||
</p>
|
||||
<a class="footer-bottom-link" href="">
|
||||
Terms of service
|
||||
</a>
|
||||
<p class="footer-button-link-separator">
|
||||
|
|
||||
</p>
|
||||
<a class="footer-bottom-link" href="">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<p class="footer-button-link-separator">
|
||||
|
|
||||
</p>
|
||||
<a class="footer-bottom-link" href="">
|
||||
Site map
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom-text">
|
||||
Pipedrive is a Web-based Sales
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.main-footer {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.footer-links-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
.footer-links-section-title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
.footer-links-section-item {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.footer-bottom-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.footer-bottom-social-list {
|
||||
gap: 20px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.footer-bottom-links > * {
|
||||
white-space: nowrap;
|
||||
margin: 0;
|
||||
line-height: 25px;
|
||||
}
|
||||
.footer-button-link-separator {
|
||||
padding: 0 6px;
|
||||
}
|
||||
.footer-links-section-title {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.footer-bottom-link, .footer-bottom-social-item, .footer-bottom-text, .footer-button-link-separator {
|
||||
color: #656E7A;
|
||||
}
|
||||
.footer-bottom-social-item {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.footer-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.footer-bottom-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-bottom-row:first-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.footer-bottom-links, .footer-bottom-social-list {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,18 @@
|
||||
<div class="green-banner-wrapper green-banner-wrapper-image">
|
||||
<div class="green-banner width-limit">
|
||||
<img class="green-banner-image" alt="banner image" src="{{ banner_image_url }}">
|
||||
<div class="green-banner-content">
|
||||
<div class="green-banner-title">
|
||||
{{ banner_title }}
|
||||
</div>
|
||||
<div class="green-banner-text">
|
||||
{{ banner_text }}
|
||||
</div>
|
||||
<div class="green-banner-button button-large button-1">
|
||||
<a href="{{ banner_button_link }}">
|
||||
{{ banner_button_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="green-banner-wrapper green-banner-wrapper-text">
|
||||
<div class="green-banner width-limit">
|
||||
<div class="green-banner-title">
|
||||
{{ banner_title }}
|
||||
</div>
|
||||
<div class="green-banner-text">
|
||||
{{ banner_text }}
|
||||
</div>
|
||||
<div class="green-banner-button button-large button-1">
|
||||
<a href="{{ banner_button_link }}">
|
||||
{{ banner_button_text }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,6 @@
|
||||
{% styles default %}
|
||||
{% styles colors %}
|
||||
{% styles custom %}
|
||||
|
||||
<!-- fontawesome inclusion -->
|
||||
<script src="https://kit.fontawesome.com/41a3aee3ad.js" crossorigin="anonymous"></script>
|
||||
@ -0,0 +1,94 @@
|
||||
<header class="main-header width-limit">
|
||||
<section class="header-left header-flex">
|
||||
<img
|
||||
class="header-mobile-menu-button np-hidden-desktop"
|
||||
src="https://s3.amazonaws.com/static.northpass.com/pipedrive/hamburger.png"
|
||||
alt="menu"
|
||||
>
|
||||
<a class="header-logo" href="/app">
|
||||
<img class="header-logo-image"
|
||||
alt="{{ current_school.name }}"
|
||||
src="{{ current_school.logo_url }}"
|
||||
>
|
||||
</a>
|
||||
<div class="header-desktop-navigation np-hidden-mobile header-flex">
|
||||
<a class="header-navigation-item" href="">
|
||||
Academy Courses
|
||||
</a>
|
||||
<a class="header-navigation-item" href="">
|
||||
Video Tutorials
|
||||
</a>
|
||||
<a class="header-navigation-item" href="">
|
||||
Webinars
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="header-right header-flex">
|
||||
<div class="header-desktop-buttons np-hidden-mobile header-flex">
|
||||
<a class="header-navigation-item" href="https://www.pipedrive.com">
|
||||
go to pipedrive.com
|
||||
</a>
|
||||
<div class="header-search-button">
|
||||
<i class="fal fa-search"></i>
|
||||
</div>
|
||||
<div class="header-language-selection">
|
||||
<i class="fal fa-globe"></i>
|
||||
<i class="fal fa-angle-down"></i>
|
||||
</div>
|
||||
<a class="header-navigation-item" href="">
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
<a class="header-register-button button-1 button-small" href="">
|
||||
Register
|
||||
</a>
|
||||
</section>
|
||||
</header>
|
||||
{% include "messages" %}
|
||||
|
||||
<style>
|
||||
.header-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.main-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
background: #FFF;
|
||||
}
|
||||
.header-mobile-menu-button {
|
||||
height: 100%;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.header-logo {
|
||||
height: 100%;
|
||||
}
|
||||
.header-logo-image {
|
||||
height: 32px;
|
||||
}
|
||||
.header-navigation-item {
|
||||
padding: 5px 10px;
|
||||
margin: auto 10px;
|
||||
}
|
||||
.header-search-button {
|
||||
cursor: pointer;
|
||||
background: #F4F5F6;
|
||||
border-radius: 50%;
|
||||
margin-right: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.header-search-button > i {
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
}
|
||||
.header-search-button > i::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<div class="homepage-courses container width-limit">
|
||||
{% include "course_filter" %}
|
||||
<section class="homepage-courses-section">
|
||||
<div class="homepage-courses-title">
|
||||
Featured courses
|
||||
</div>
|
||||
<div class="homepage-courses-list row">
|
||||
{% for course in courses.enrolled %}
|
||||
<div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
|
||||
{% include "cards_course" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -0,0 +1,12 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
<main class="np-main np-homepage">
|
||||
{% assign banner_title = "Academy Courses" %}
|
||||
{% assign banner_text = "Welcome to Pipedrive Academy! Pipedrive Academy features CRM training videos and tutorials to help you level up your CRM and sales skills, from quick CRM courses to in-depth tutorials on specific features." %}
|
||||
{% assign banner_button_text = "Unlock courses" %}
|
||||
{% assign banner_button_link = "/app" %}
|
||||
{% assign banner_image_url = "https://s3.amazonaws.com/static.northpass.com/pipedrive/homepage_banner_image.png" %}
|
||||
{% include "green_banner_text" %}
|
||||
{% include "homepage_courses" %}
|
||||
</main>
|
||||
{% include "footer" %}
|
||||
@ -0,0 +1,135 @@
|
||||
/* brand colors */
|
||||
:root {
|
||||
--green: #017737;
|
||||
--green-dark: #014722;
|
||||
--green-light: #D7F9D3;
|
||||
--purple: #6861F2;
|
||||
--purple-dark: #393A97;
|
||||
--purple-light: #CFD0F9;
|
||||
--yelow: #FFDE00;
|
||||
--black-digital: #192435;
|
||||
}
|
||||
/* general styling */
|
||||
body {
|
||||
color: var(--black-digital);
|
||||
background: #FFF;
|
||||
}
|
||||
a, a:hover, a:focus, a:active {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
.container {
|
||||
width: auto
|
||||
}
|
||||
.width-limit {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.width-limit {
|
||||
padding-left: 3rem;
|
||||
padding-right: 3rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1500px) {
|
||||
.width-limit {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
max-width: 1404px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
.button-small, .button-large {
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
.button-small {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
}
|
||||
.button-large {
|
||||
padding: 15px 20px;
|
||||
font-size: 22px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.button-1 {
|
||||
background: var(--purple);
|
||||
color: #FFF;
|
||||
border: none;
|
||||
}
|
||||
.button-1:hover {
|
||||
background: #413D99;
|
||||
color: white;
|
||||
}
|
||||
.button-2 {
|
||||
background: #E1E1FF;
|
||||
color: #413D99;
|
||||
border: none;
|
||||
}
|
||||
.button-2:hover {
|
||||
background: #C4C2FF;
|
||||
color: #413D99;
|
||||
}
|
||||
|
||||
.np-button:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.green-banner-wrapper {
|
||||
background: var(--green-light);
|
||||
}
|
||||
.green-banner {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
.green-banner-image {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.green-banner-title {
|
||||
font-size: 32px;
|
||||
color: var(--green);
|
||||
font-weight: 700;
|
||||
line-height: 42px;
|
||||
}
|
||||
.green-banner-text {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
@media only screen and (min-width: 768px) {
|
||||
.green-banner-wrapper-text .green-banner-title,
|
||||
.green-banner-wrapper-text .green-banner-text {
|
||||
text-align: center;
|
||||
}
|
||||
.green-banner-wrapper-text .green-banner-button {
|
||||
margin: auto;
|
||||
}
|
||||
.green-banner-wrapper-image .green-banner {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
gap: 40px;
|
||||
}
|
||||
.green-banner-image {
|
||||
margin-bottom: 0;
|
||||
flex: 1 1 0px;
|
||||
width: 0;
|
||||
object-fit: contain;
|
||||
}
|
||||
.green-banner-wrapper-image .green-banner-content {
|
||||
flex: 1 1 0px;
|
||||
width: 0;
|
||||
align-self: center;
|
||||
}
|
||||
.green-banner-title {
|
||||
font-size: 60px;
|
||||
line-height: 78px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.green-banner-button {
|
||||
width: max-content;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user