487 lines
17 KiB
Plaintext
487 lines
17 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.featured %}
|
|
<main class="np-main np-homepage">
|
|
<div class="homepage-title" >
|
|
<div class="homepage-title-text">
|
|
<div class="homepage-title-text-headline">
|
|
<span class="isogreen" style="font-size: 1.4rem; white-space: nowrap;">EDUCATION & TRAINING CENTER</span>
|
|
IsoPlexis <span class="isogreen">UNIVERSITY</span>
|
|
</div>
|
|
<div class="homepage-title-text-subline">
|
|
Transform your immunotherapy programs with the latest data & insights from our <span class="isogreen">cutting edge work </span>in single-cell proteomics.
|
|
</div>
|
|
</div>
|
|
<img class="homepage-title-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-home-hero-logo%402x.png">
|
|
</div>
|
|
<img class="homepage-main-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-hero-home-wide%402x(1).jpg"></img>
|
|
|
|
<div class="homepage-advantage">
|
|
<div class="homepage-advantage-slide">
|
|
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index1.png">
|
|
<div class=homepage-advantage-slide-right>
|
|
<div class="homepage-advantage-slide-right-top">HD Video Protocols</div>
|
|
<div class="homepage-advantage-slide-right-bottom">Watch short step-by-step protocol videos to simplify your workflow</div>
|
|
</div>
|
|
</div>
|
|
<div class="homepage-advantage-slide" style="padding: 15px 30px;">
|
|
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index.png">
|
|
<div class=homepage-advantage-slide-right>
|
|
<div class="homepage-advantage-slide-right-top">Support Resources</div>
|
|
<div class="homepage-advantage-slide-right-bottom">Download detailed guides, tech notes & reference new publications</div>
|
|
</div>
|
|
</div>
|
|
<div class="homepage-advantage-slide">
|
|
<img class="homepage-advantage-slide-left" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/index2.png">
|
|
<div class=homepage-advantage-slide-right>
|
|
<div class="homepage-advantage-slide-right-top">Expert Webinars</div>
|
|
<div class="homepage-advantage-slide-right-bottom">Hear from thought leaders in single-cell biology & functional proteomics</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% assign LP = learning_paths.available | where: "name", "Experiment Run" %} {% assign LP = LP.first %}
|
|
<div class="homepage-content" style="padding-top: 70px;">
|
|
<div class="homepage-training">
|
|
<div class="homepage-training-headline">
|
|
<div class="homepage-training-headline-textes">
|
|
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem;">GET STARTED</span>
|
|
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
|
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
|
</div>
|
|
<div class="homepage-training-headline-right">
|
|
<span class="isogreen" style="font-weight: 800; font-size: 1.3rem; padding-bottom: 10px;">MASTER THE ISOU</span>
|
|
<button class="homepage-training-headline-right-button green-gradient-button"> <img src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isou-icon-certification-badge-lg-flat-dark%402x.png" height="30px">
|
|
<span style="align-self: center;padding-left: 10px;">Get Certified</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign descriptions = ". Accelerate yours sample prep with how-to videos&protocols. Learn how to run your samples on the automated IsoLight system. Generate meaningful data in seconds, not days. Accelerate your sample prep with how-to videos & protocols" | split: ". " %}
|
|
<div class="homepage-content-modules">
|
|
{% for LPC in LP.items %}
|
|
<div style="display: none;">{% increment my_counter1 %}</div>
|
|
{% if my_counter1 == 1 or my_counter1 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
|
<a class="homepage-content-modules-module module-1" href="/../../app/courses/{{LPC.id}}">
|
|
<div class="homepage-content-modules-module-number">
|
|
MODULE {{my_counter1}}
|
|
</div>
|
|
<div class=homepage-content-modules-module-circle>
|
|
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules1-{{my_counter1}}.png">
|
|
</div>
|
|
<div class="homepage-content-modules-module-title">
|
|
{{LPC.name}}
|
|
</div>
|
|
<div class="homepage-content-modules-module-description">
|
|
{{descriptions[my_counter1]}}
|
|
</div>
|
|
</a>
|
|
{% if my_counter1 == 2 or my_counter1 == 4 %} </div> {%endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
{% assign LP = learning_paths.available | where: "name", "How the IsoLight Works" %} {% assign LP = LP.first %}
|
|
<div class="homepage-content" style="padding-top: 70px;">
|
|
<div class="homepage-training">
|
|
<div class="homepage-training-headline">
|
|
<div class="homepage-training-headline-textes">
|
|
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
|
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign descriptions = ". Learn how CO2 supports incubation and fluidics on the IsoLight System. Fluidics are at the core of the IsoLight platform. Disposal of used reagents is critical. How IsoPlexis' unique single-cell and CodePlex chips works" | split: ". " %}
|
|
<div class="homepage-content-modules">
|
|
{% for LPC in LP.items %}
|
|
<div style="display: none;">{% increment my_counter2 %}</div>
|
|
{% if my_counter2 == 1 or my_counter2 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
|
<a class="homepage-content-modules-module module-2" href="/../../app/courses/{{LPC.id}}">
|
|
<div class="homepage-content-modules-module-number">
|
|
MODULE {{my_counter2}}
|
|
</div>
|
|
<div class=homepage-content-modules-module-circle>
|
|
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules2-{{my_counter2}}.png">
|
|
</div>
|
|
<div class="homepage-content-modules-module-title">
|
|
{{LPC.name}}
|
|
</div>
|
|
<div class="homepage-content-modules-module-description">
|
|
{{descriptions[my_counter2]}}
|
|
</div>
|
|
</a>
|
|
{% if my_counter2 == 2 or my_counter2 == 4 %} </div> {%endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% assign LP = learning_paths.available | where: "name", "System Troubleshooting" %} {% assign LP = LP.first %}
|
|
<div class="homepage-content" style="padding-top: 70px;">
|
|
<div class="homepage-training">
|
|
<div class="homepage-training-headline">
|
|
<div class="homepage-training-headline-textes">
|
|
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
|
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign descriptions = ". The barcode scanner reads QR labels on each individual chip. Fluidics maintenance and upkeep. Proper lase function is essential for imaging. Airflow and appropriate waste disposal procedures" | split: ". " %}
|
|
<div class="homepage-content-modules">
|
|
{% for LPC in LP.items %}
|
|
<div style="display: none;">{% increment my_counter3 %}</div>
|
|
{% if my_counter3 == 1 or my_counter3 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
|
<a class="homepage-content-modules-module module-3" href="/../../app/courses/{{LPC.id}}">
|
|
<div class="homepage-content-modules-module-number">
|
|
MODULE {{my_counter3}}
|
|
</div>
|
|
<div class=homepage-content-modules-module-circle>
|
|
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules3-{{my_counter3}}.png">
|
|
</div>
|
|
<div class="homepage-content-modules-module-title">
|
|
{{LPC.name}}
|
|
</div>
|
|
<div class="homepage-content-modules-module-description">
|
|
{{descriptions[my_counter3]}}
|
|
</div>
|
|
</a>
|
|
{% if my_counter3 == 2 or my_counter3 == 4 %} </div> {%endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
{% assign LP = learning_paths.available | where: "name", "Network Troubleshooting" %} {% assign LP = LP.first %}
|
|
<div class="homepage-content" style="padding-top: 70px;">
|
|
<div class="homepage-training">
|
|
<div class="homepage-training-headline">
|
|
<div class="homepage-training-headline-textes">
|
|
<span style="font-size: 2.4rem;">{{LP.name}}</span>
|
|
<span style="font-size: 20px; color: #a7aed1">{{LP.description}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% assign descriptions = ". What a correctly configured home screen should look like. Networking FAQs and answers to common questions. Steps to take when encountering network issues. Data managment is a critical component of instrument maintenance" | split: ". " %}
|
|
<div class="homepage-content-modules">
|
|
{% for LPC in LP.items %}
|
|
<div style="display: none;">{% increment my_counter4 %}</div>
|
|
{% if my_counter4 == 1 or my_counter4 == 3 %} <div class="homepage-content-modules-group"> {%endif%}
|
|
<a class="homepage-content-modules-module module-4" href="/../../app/courses/{{LPC.id}}">
|
|
<div class="homepage-content-modules-module-number">
|
|
MODULE {{my_counter4}}
|
|
</div>
|
|
<div class=homepage-content-modules-module-circle>
|
|
<img class="homepage-content-modules-module-circle-image" src="https://s3.amazonaws.com/static.northpass.com/Isoplex/isoplex-modules4-{{my_counter4}}.png">
|
|
</div>
|
|
<div class="homepage-content-modules-module-title">
|
|
{{LPC.name}}
|
|
</div>
|
|
<div class="homepage-content-modules-module-description">
|
|
{{descriptions[my_counter4]}}
|
|
</div>
|
|
</a>
|
|
{% if my_counter4 == 2 or my_counter4 == 4 %} </div> {%endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.np-homepage {
|
|
background: none;
|
|
max-width: 1300px;
|
|
margin: auto;
|
|
}
|
|
.homepage-title {
|
|
height: auto;
|
|
height: auto;
|
|
padding-bottom: 70px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
.homepage-main-image {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 1490px;
|
|
top: 0;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.7;
|
|
top: 100px;
|
|
height: 570px;
|
|
mix-blend-mode: lighten;
|
|
right: calc(calc(100vw - 1300px)/2);
|
|
}
|
|
.homepage-title-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding-left: 4%;
|
|
}
|
|
.homepage-title-text-headline{
|
|
font-size: calc(6vw + 30px);
|
|
max-width: 200px;
|
|
line-height: 1;
|
|
}
|
|
.homepage-title-text-subline {
|
|
padding-top: 20px;
|
|
max-width: 730px;
|
|
font-size: 1.5rem;
|
|
}
|
|
.homepage-title-image {
|
|
height: 400px;
|
|
margin-top: 20px;
|
|
margin-right: 5%;
|
|
}
|
|
.homepage-advantage{
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 20px 10px;
|
|
}
|
|
.homepage-advantage-slide{
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 15px 0;
|
|
}
|
|
.homepage-advantage-slide-left {
|
|
height: 72px;
|
|
width: 72px;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
.homepage-advantage-slide-right {
|
|
align-self: center;
|
|
max-width: 300px;
|
|
}
|
|
.homepage-advantage-slide-right-top {
|
|
font-weight: 600;
|
|
color: #fff;
|
|
padding-bottom: 5px;
|
|
}
|
|
.homepage-advantage-slide-right-bottom {
|
|
color: #a7aed1;
|
|
line-height: 1.3;
|
|
}
|
|
.homepage-training-headline {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
}
|
|
.homepage-training-headline-textes {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 50%;
|
|
}
|
|
.homepage-training-headline-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: center;
|
|
}
|
|
.homepage-training-headline-right-button {
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
.homepage-content-modules {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
margin-top: 50px;
|
|
align-items: center;
|
|
}
|
|
.homepage-content-modules-group {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
.homepage-content-modules-module-number {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-top: 10px;
|
|
padding-bottom: 15px;
|
|
font-size: 25px;
|
|
font-weight: 900;
|
|
margin-top: 10px;
|
|
}
|
|
.homepage-content-modules-module {
|
|
background-position-x: 0%;
|
|
background-position-y: 0%;
|
|
background-size: auto;
|
|
background-size: auto 200% !important;
|
|
background-position: center top !important;
|
|
transition: all .6s ease !important;
|
|
transition-duration: .2s;
|
|
transition-timing-function: linear;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 15px;
|
|
flex-direction: column;
|
|
width: 300px;
|
|
}
|
|
.module-1 {
|
|
background: linear-gradient(180deg,#0DD1DB 0%,#2AAFDD 10%,#528DE2 20%,#264CAC 45%,#25359E 65%,#6533A4 90%);
|
|
}
|
|
.module-2 {
|
|
background: linear-gradient(180deg,#4053EE 0%, #5942CA 50%, #762EA3 100%);
|
|
}
|
|
.module-3 {
|
|
background: linear-gradient(180deg,#1AF1A1 0%, #08D5AC 50%, #228193 100%);
|
|
}
|
|
.module-4 {
|
|
background: linear-gradient(180deg,#FCBC02 0%, #FDA14C 50%, #FF4B01 100%);
|
|
}
|
|
.homepage-content-modules-module-circle-image{
|
|
height: 100px;
|
|
width: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: auto;
|
|
}
|
|
.homepage-content-modules-module-circle {
|
|
background-color: #000;
|
|
border-radius: 50%;
|
|
width: 120px;
|
|
height: 120px;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 0 auto;
|
|
}
|
|
.homepage-content-modules-module-title {
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
font-size: 28px;
|
|
font-weight: 500;
|
|
min-height: 95px;
|
|
width: 90%;
|
|
margin: auto;
|
|
}
|
|
.homepage-content-modules-module-description {
|
|
display: flex;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding-bottom: 20px;
|
|
width: 75%;
|
|
margin: auto;
|
|
font-size: 20px;
|
|
min-height: 89px;
|
|
}
|
|
.homepage-content-modules-module:hover {
|
|
background-position: 100% 50% !important;
|
|
}
|
|
@media only screen and (min-width: 1400px) {
|
|
.homepage-title-text-headline {
|
|
font-size: 114px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1320px) {
|
|
.homepage-content-modules-module {
|
|
width: 250px;
|
|
}
|
|
.homepage-content-modules-module-title {
|
|
font-size: 20px;
|
|
min-height: 76px;
|
|
}
|
|
.homepage-content-modules-module-description {
|
|
font-size: 16px;
|
|
min-height: 76px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1300px) {
|
|
.homepage-main-image {
|
|
right: 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1100px) {
|
|
.homepage-content-modules {
|
|
flex-direction: column;
|
|
}
|
|
.homepage-content-modules-group {
|
|
padding-top: 30px;
|
|
}
|
|
.homepage-content-modules-module {
|
|
width: 300px;
|
|
}
|
|
.homepage-content-modules-module-title {
|
|
font-size: 28px;
|
|
min-height: 95px;
|
|
}
|
|
.homepage-content-modules-module-description {
|
|
font-size: 20px;
|
|
min-height: 89px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 850px) {
|
|
.homepage-title-image {
|
|
display: none;
|
|
}
|
|
.homepage-main-image {
|
|
display: none;
|
|
}
|
|
.homepage-title-text-subline {
|
|
max-width: 60%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 700px) {
|
|
.homepage-content-modules-module {
|
|
width: 250px;
|
|
}
|
|
.homepage-content-modules-module-title {
|
|
font-size: 20px;
|
|
min-height: 76px;
|
|
}
|
|
.homepage-content-modules-module-description {
|
|
font-size: 16px;
|
|
min-height: 76px;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 650px) {
|
|
.homepage-advantage-slide {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 550px) {
|
|
.homepage-title-text-subline {
|
|
max-width: 80%;
|
|
}
|
|
.homepage-content-modules-module {
|
|
margin: 5px;
|
|
width: 50%;
|
|
}
|
|
.homepage-content-modules-module-description {
|
|
display: none;
|
|
}
|
|
.homepage-training-headline {
|
|
flex-direction: column;
|
|
}
|
|
.homepage-training-headline-textes {
|
|
max-width: 100%;
|
|
}
|
|
.homepage-training-headline-right {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.homepage-content-modules-group {
|
|
width: 95%;
|
|
justify-content: center;
|
|
padding-top: 0;
|
|
}
|
|
}
|
|
.homepage-title-image {
|
|
animation-duration: 3s;
|
|
animation-name: levitation;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
@keyframes levitation {
|
|
from {
|
|
margin-top: 20px;
|
|
}
|
|
50% {
|
|
margin-top: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
to {
|
|
margin-top: 20;
|
|
}
|
|
}
|
|
</style> |