747 lines
20 KiB
Plaintext
747 lines
20 KiB
Plaintext
{% comment %} skip-auth {% endcomment %}
|
|
{% include "header" %}
|
|
<div class="page-container">
|
|
{% if current_person.signed_in? %}
|
|
<div class="np-hidden-mobile custom-sub-navigation">
|
|
{% include "sub_navigation" %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
|
|
<main class="np-main np-subpage-container np-max-width certification-page">
|
|
{% comment %}================================================ REGISTRATION HEADER ============================================={% endcomment %}
|
|
|
|
{%- comment -%} <div class="base-state">
|
|
<div class="np-resource-title">Getting Started</div>
|
|
<div class="register-button">Register Now</div>
|
|
</div> {%- endcomment -%}
|
|
|
|
{% comment %}=================================================== TEXT HEADER ==================================================={% endcomment %}
|
|
|
|
{%- comment -%} <div class="np-resource-title skuid-cert-reg-header">Skuid Certification Registration</div> {%- endcomment -%}
|
|
|
|
{% comment %}================================================= HEADER BUBBLES ==================================================={% endcomment %}
|
|
|
|
<div class="cert-step-bubbles col-xs-12">
|
|
<div class="cert-bubble col-xs-3">GET STARTED</div>
|
|
<div class="cert-bubble col-xs-3">EXAM PREP</div>
|
|
<div class="cert-bubble col-xs-3">COMPLETION STATUS</div>
|
|
<div class="cert-bubble col-xs-3">RECERTIFICATION</div>
|
|
</div>
|
|
|
|
{% comment %}=================================================== IFRAME =========================================================={% endcomment %}
|
|
|
|
{%- comment -%} <iframe></iframe> {%- endcomment -%}
|
|
|
|
{% comment %}=========================================== CERTIFICATION REGISTRATION =============================================={% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Ready to be Skuid Certified?</div>
|
|
<div class="np-resource-subtitle cert-sub-header registration-sub-header">
|
|
{%- comment -%} <div>The Skuid - Certified Builder Exam assumes knowledge in topics from Levels 1 and 2 of Skuid Skool.</div> {%- endcomment -%}
|
|
<div>The Skuid - Certified Builder Exam assumes knowledge in topics from <a href="https://www.skuidskool.com/app/learning_paths/46ae5253-8c64-426b-a638-e80c08ce29da" class="registration-sub-header-link" target="_blank">Level 1</a>, <a href="https://www.skuidskool.com/app/learning_paths/e7d6e7ca-39ad-4a40-b75c-83d382715c4a" class="registration-sub-header-link" target="_blank">Level 2</a>, <a href="https://www.skuidskool.com/app/learning_paths/e15cd738-8681-4171-9d09-ba3d31c02005" class="registration-sub-header-link" target="_blank">Deploy and Manage Skuid Apps in Salesforce</a>, and the <a href="https://www.skuidskool.com/app/learning_paths/e76d07d4-984b-41a9-b53f-2c300f8eeba9" class="registration-sub-header-link" target="_blank">Explore More</a> learning paths within <a href="/app" class="registration-sub-header-link" target="_blank">Skuid Skool</a>.</div>
|
|
<br>
|
|
<div>Click below to register for your exam.</div>
|
|
</div>
|
|
|
|
<a class="cert-button-big register-cert-button" href="#">Register Now</a>
|
|
|
|
<img src="https://cdn.northpass.io/Skuid/images/cert_registration.svg" alt="exam-registration-image" class="exam-status-image exam-registration-image">
|
|
</img>
|
|
</div>
|
|
|
|
|
|
{% comment %}================================================ EXAM PREP ==================================================={% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Skuid Certification Exam Prep</div>
|
|
<div class="np-resource-subtitle cert-sub-header">Prep, practice, or schedule you exam.</div>
|
|
|
|
<div class="cert-exam-prep-cards col-xs-9 col-sm-12">
|
|
<div class="cert-card col-xs-12 col-md-3">
|
|
<a class="cert-button" href="#">Prep Guide</a>
|
|
<div class="cert-card-blurb">
|
|
View courses, documentation, and other resources to prep for the certification exam.
|
|
</div>
|
|
</div>
|
|
<div class="cert-card col-xs-12 col-md-3">
|
|
<a class="cert-button" href="#">Practice Exam</a>
|
|
<div class="cert-card-blurb">
|
|
Take a practice exam to test what you've learned.
|
|
</div>
|
|
</div>
|
|
<div class="cert-card col-xs-12 col-md-3">
|
|
<a class="cert-button" href="#">Schedule Exam</a>
|
|
<div class="cert-card-blurb">
|
|
Ready? Schedule your exam to become certified.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% comment %}============================================ EXAM NOT STARTED =================================================={% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Exam not started</div>
|
|
<div class="np-resource-subtitle cert-sub-header">See email for instructions or schedule your exam below</div>
|
|
|
|
<div class="cert-card col-xs-9 col-sm-5">
|
|
<a class="cert-button completion-status-card-button" href="#">Schedule Exam</a>
|
|
<div class="cert-card-blurb completion-status-card-blurb">
|
|
Ready? Schedule your exam to become certified.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% comment %}============================================ EXAM COMPLETE ===================================================={% endcomment %}
|
|
|
|
{%- comment -%} <div class="np-resource-title cert-header">Exam complete</div>
|
|
<div class="np-resource-subtitle cert-sub-header">Results are still pending. Check back in 10 business days from your exam date.</div> {%- endcomment -%}
|
|
|
|
<div class="cert-content-container col-xs-12 exam-status-container">
|
|
<img src="https://cdn.northpass.io/Skuid/images/exam_complete_background.svg" alt="exam-complete-background" class="exam-status-image">
|
|
</div>
|
|
|
|
{% comment %}============================================== PASSED ========================================================{% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12 exam-status-container">
|
|
<img src="https://cdn.northpass.io/Skuid/images/exam_passed_background.svg" alt="exam-passed-background" class="exam-status-image">
|
|
<a class="cert-button-big share-cert-button" href="#">Share your certification</a>
|
|
</img>
|
|
</div>
|
|
|
|
{% comment %}=============================================== FAILED ======================================================{% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Exam failed.</div>
|
|
<div class="np-resource-subtitle cert-sub-header">If you'd like to try again, register to retake the exam below.</div>
|
|
|
|
<a class="cert-button-big retake-cert-button" href="#">Register to retake the exam</a>
|
|
</div>
|
|
|
|
{% comment %}============================================= CERTIFIED ======================================================{% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12 exam-status-container">
|
|
<img src="https://cdn.northpass.io/Skuid/images/cert_recert.svg" alt="cert-recert-background" class="exam-status-image">
|
|
<div class="cert-recert-content-container">
|
|
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
|
<a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
|
|
</div>
|
|
</img>
|
|
</div>
|
|
|
|
{%- comment -%} <div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Congratulations you're certified!</div>
|
|
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
|
|
|
<a class="cert-button-med download-cert-button" href="#">Download Certificate</a>
|
|
</div> {%- endcomment -%}
|
|
|
|
{% comment %}============================================ RECERTIFIED ====================================================={% endcomment %}
|
|
|
|
<div class="cert-content-container col-xs-12">
|
|
<div class="np-resource-title cert-header">Time for your recertification!</div>
|
|
<div class="np-resource-subtitle cert-sub-header">Recertification is due on 1/1/2024</div>
|
|
|
|
<a class="cert-button-med re-cert-button" href="#">Get recertified</a>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% include "footer" %}
|
|
|
|
<!-- Hotjar Tracking Code for Skool Staging/test site -->
|
|
<script>
|
|
(function(h,o,t,j,a,r){
|
|
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
|
|
h._hjSettings={hjid:3393511,hjsv:6};
|
|
a=o.getElementsByTagName('head')[0];
|
|
r=o.createElement('script');r.async=1;
|
|
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
|
|
a.appendChild(r);
|
|
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
|
|
</script>
|
|
|
|
<style>
|
|
.certification-page{
|
|
height: 100%;
|
|
padding: 40px 15px 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.cert-header,
|
|
.cert-sub-header{
|
|
text-align: center;
|
|
}
|
|
|
|
.cert-sub-header{
|
|
font-weight: 500;
|
|
}
|
|
|
|
.register-cert-button{
|
|
margin-top: -4px !important;
|
|
}
|
|
|
|
.cert-recert-content-container{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
position: absolute;
|
|
padding-top: 12%;
|
|
left: -5px;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 8px;
|
|
}
|
|
|
|
.registration-sub-header-link{
|
|
text-decoration: none;
|
|
}
|
|
|
|
@media screen and (min-width: 450px){
|
|
.cert-recert-content-container{
|
|
padding-top: 13%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 550px){
|
|
.cert-recert-content-container{
|
|
padding-top: 14%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 14px;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.certification-page{
|
|
padding: 30px 3% 75px;
|
|
}
|
|
|
|
.cert-recert-content-container{
|
|
left: unset;
|
|
margin-right: 10px;
|
|
padding-top: 8%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 900px){
|
|
.cert-recert-content-container{
|
|
padding-top: 9%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1150px){
|
|
.cert-recert-content-container{
|
|
padding-top: 10%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 18px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1280px){
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1440px){
|
|
.cert-recert-content-container{
|
|
padding-top: 11%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 22px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1950px){
|
|
.cert-recert-content-container{
|
|
padding-top: 10%;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 2150px){
|
|
.cert-recert-content-container{
|
|
padding-top: 200px;
|
|
}
|
|
|
|
.cert-recert-content-container .cert-sub-header{
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
|
|
/* TOP ELEMENT STYLES */
|
|
|
|
.base-state{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.base-state .np-resources-title{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.register-button{
|
|
background: #603DD8;
|
|
color: #FFFFFF;
|
|
border-radius: 16px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
height: 35px;
|
|
padding: 5px;
|
|
text-align: center;
|
|
width: 150px;
|
|
}
|
|
|
|
.cert-step-bubbles{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 73px;
|
|
justify-content: space-between;
|
|
margin-bottom: 12px;
|
|
padding: 0;
|
|
}
|
|
|
|
.cert-bubble{
|
|
align-items: center;
|
|
background: #B195F4;
|
|
border-radius: 8px;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
font-size: 9px;
|
|
font-weight: 500;
|
|
height: 100%;
|
|
justify-content: center;
|
|
max-width: 24%;
|
|
text-align: center;
|
|
}
|
|
|
|
.current-cert-bubble{
|
|
background: #603DD8;
|
|
}
|
|
|
|
@media screen and (min-width: 450px){
|
|
.cert-bubble{
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 650px){
|
|
.cert-bubble{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 750px){
|
|
.cert-bubble{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.base-state{
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.cert-bubble{
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 850px){
|
|
.cert-bubble{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1100px){
|
|
.cert-bubble{
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px){
|
|
.cert-bubble{
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
/* CONTENT STYLES ===================================================================================================================================================== */
|
|
iframe,
|
|
.cert-content-container{
|
|
background: #F7F5FD;
|
|
width: 100%;
|
|
}
|
|
|
|
.cert-content-container{
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-bottom: 127px;
|
|
padding-top: 91px;
|
|
}
|
|
|
|
.exam-status-container{
|
|
padding: 0;
|
|
}
|
|
|
|
.exam-status-image{
|
|
width: 100%;
|
|
}
|
|
|
|
.exam-registration-image{
|
|
margin-left: -15%;
|
|
}
|
|
|
|
.cert-exam-prep-cards{
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-evenly;
|
|
}
|
|
|
|
.cert-card{
|
|
align-items: center;
|
|
background: #E7E3F4;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.cert-button{
|
|
margin-bottom: 24px;
|
|
margin-top: 40px;
|
|
width: 55%;
|
|
}
|
|
|
|
.cert-button-med{
|
|
width: 45%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
font-size: 18px;
|
|
height: 40px;
|
|
padding: 5px;
|
|
width: 70%;
|
|
}
|
|
|
|
.cert-button,
|
|
.cert-button-med{
|
|
font-size: 14px;
|
|
height: 35px;
|
|
padding: 7px
|
|
}
|
|
|
|
.cert-button-med,
|
|
.cert-button-big{
|
|
margin-top: 25px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cert-button,
|
|
.cert-button-med,
|
|
.cert-button-big{
|
|
background: #603DD8;
|
|
border-radius: 16px;
|
|
color: #FFFFFF;
|
|
font-weight: 500;
|
|
margin-bottom: 24px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.retake-cert-button{
|
|
font-size: 16px;
|
|
padding: 7px;
|
|
}
|
|
|
|
.cert-button:hover,
|
|
.cert-button-big:hover{
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.cert-card-blurb{
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
min-height: 100px;
|
|
margin-bottom: 19px;
|
|
padding: 0 25px;
|
|
text-align: center;
|
|
}
|
|
|
|
.completion-status-card-blurb{
|
|
min-height: 70px;
|
|
}
|
|
|
|
.share-cert-button{
|
|
font-size: 12px !important;
|
|
height: 40px;
|
|
margin-top: -38%;
|
|
margin-bottom: calc(38% + 24px);
|
|
max-width: 275px;
|
|
padding: 11px 0px;
|
|
width: 38% !important;
|
|
}
|
|
|
|
.download-cert-button{
|
|
font-size: 12px;
|
|
height: 27px;
|
|
margin-top: -25px;
|
|
max-width: 210px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
@media screen and (min-width: 450px){
|
|
.cert-button{
|
|
font-size: 16px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.cert-button-med{
|
|
width: 40%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 55%;
|
|
}
|
|
|
|
.download-cert-button{
|
|
font-size: 14px;
|
|
height: unset;
|
|
margin-top: -15px;
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 500px){
|
|
.retake-cert-button{
|
|
font-size: 18px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.share-cert-button{
|
|
font-size: 14px;
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 550px){
|
|
.cert-button-med{
|
|
width: 35%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 50%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 600px){
|
|
.cert-button-med{
|
|
width: 30%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 45%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 650px){
|
|
.cert-button-big{
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 700px){
|
|
.cert-button-med{
|
|
width: 27%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 35%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
.cert-exam-prep-cards{
|
|
width: 100%;
|
|
}
|
|
|
|
.cert-card-blurb{
|
|
min-height: 130px;
|
|
}
|
|
|
|
.completion-status-card-button{
|
|
width: 75%;
|
|
}
|
|
|
|
.cert-button-med{
|
|
width: 35%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 50%;
|
|
}
|
|
|
|
.retake-cert-button{
|
|
font-size: 16px;
|
|
padding: 7px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 850px){
|
|
.completion-status-card-button{
|
|
width: 65%;
|
|
}
|
|
|
|
.cert-button-med{
|
|
width: 30%;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 45%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 900px){
|
|
.completion-status-card-button{
|
|
width: 60%;
|
|
}
|
|
|
|
.share-cert-button{
|
|
font-size: 18px !important;
|
|
padding: 5px !important;
|
|
}
|
|
|
|
.cert-button-big{
|
|
width: 40%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 950px){
|
|
.cert-button-med{
|
|
width: 25%;
|
|
}
|
|
|
|
.completion-status-card-button{
|
|
width: 55%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1000px){
|
|
.cert-button-big{
|
|
width: 35%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1024px){
|
|
.cert-exam-prep-cards{
|
|
flex-direction: row;
|
|
}
|
|
|
|
.cert-button{
|
|
font-size: 14px;
|
|
padding: 0;
|
|
padding-top: 7px;
|
|
width: 80%;
|
|
}
|
|
|
|
.cert-card-blurb{
|
|
min-height: 190px;
|
|
}
|
|
|
|
.completion-status-card-blurb{
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1100px){
|
|
.cert-button{
|
|
font-size: 14px;
|
|
padding: 7px;
|
|
width: 75%;
|
|
}
|
|
|
|
.cert-button-med{
|
|
width: 22%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1150px){
|
|
.cert-button-big{
|
|
width: 30%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1200px){
|
|
.cert-button{
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1300px){
|
|
.cert-button{
|
|
width: 65%;
|
|
}
|
|
|
|
.cert-button-med{
|
|
max-width: 170px;
|
|
}
|
|
|
|
.cert-button-big{
|
|
max-width: 230px;
|
|
width: 25%;
|
|
}
|
|
|
|
.download-cert-button{
|
|
margin-top: 25px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1350px){
|
|
.cert-button{
|
|
font-size: 16px;
|
|
padding: 6px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 1440px){
|
|
.cert-button{
|
|
width: 55%;
|
|
}
|
|
|
|
.cert-card-blurb{
|
|
min-height: 140px;
|
|
}
|
|
|
|
.completion-status-card-blurb{
|
|
min-height: 80px;
|
|
}
|
|
}
|
|
</style> |