Page History
HTML |
---|
<style>
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
:root {
/* COLORS */
--color-white: #FFFFFF;
--color-blue: #2969F2;
--color-blue-dark: #06103D;
--color-bright-green: #B4F62A;
--color-grey-light: #F5F6F7;
/* FONT */
--font-family: 'Red Hat Display', sans-serif;
--font-size-base: 16px;
--font-main-title: 24px;
--font-hero-title: 30px;
--font-hero-title-alt: 22px;
/* SIZES */
--max-content-size: 1060px;
--gap-section-block: 30px;
--gap-section-inline: 40px;
--gap-default: 16px;
--border-radius: 6px;
--section-image-width: 390px;
}
.colorBlue {
color: var(--color-blue);
}
.colorBluDark {
color: var(--color-blue-dark);
}
.brightGreenColor {
color: var(--color-bright-green);
}
.semiBold {
font-weight: 600;
}
.italic {
font-style: italic;
}
.flexBox {
display: flex;
}
.alignItemsCenter {
align-items: center;
}
.alignItemsStart {
align-items: flex-start;
}
.alignItemsEnd {
align-items: flex-end;
}
.flexFull {
flex: 1 1 100%;
}
.flexNone {
flex: 0 0 auto;
}
.justifyContentSpaceBetween {
justify-content: space-between;
}
.flexWrap {
flex-wrap: wrap;
}
.inlineIndent {
padding-inline: 5px;
}
main#CAEOnePager {
font-family: var(--font-family);
font-size: var(--font-size-base);
color: var(--color-grey-dark);
max-width: var(--max-content-size);
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
border-radius: 6px;
margin: 3px;
}
#CAEOnePager h1 {
font-size: var(--font-hero-title);
margin-block-start: 0;
margin-block-end: var(--gap-default);
font-weight: normal;
color: var(--color-white);
}
#CAEOnePager h2 {
font-size: var(--font-hero-title-alt);
margin-block-start: 0;
margin-block-end: calc(2 * var(--gap-default));
font-weight: normal;
color: var(--color-white);
}
#CAEOnePager h3 {
font-size: var(--font-main-title);
margin-block-start: 0;
margin-block-end: calc(2 * var(--gap-default));
color: var(--color-blue);
font-weight: normal;
}
#CAEOnePager a:link,
#CAEOnePager a:visited,
#CAEOnePager a:hover,
#CAEOnePager a:active {
font-weight: 600;
color: var(--color-blue);
text-decoration: none;
cursor: pointer;
word-break: break-all;
}
#CAEOnePager a:hover {
text-decoration: underline;
}
#CAEOnePager a.white {
color: var(--color-white);
}
main p,
main span,
main div {
margin: 0;
padding: 0;
}
section,
header,
footer {
position: relative;
}
#CAEOnePager header {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
#CAEOnePager footer {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.row {
position: relative;
}
.row +.row {
margin-block-start: var(--gap-default);
}
.column {
position: relative;
}
.gap-block-start-half {
margin-block-start: calc(var(--gap-default) / 2);
}
.gap-block-start {
margin-block-start: var(--gap-default);
}
.gap-block-start-2 {
margin-block-start: calc(var(--gap-default) * 2);
}
.gap-inline-end-half {
margin-inline-end: calc(var(--gap-default) / 2);
}
.gap-inline-end {
margin-inline-end: var(--gap-default);
}
.gap-inline-end-2 {
margin-inline-end: calc(var(--gap-default) * 2);
}
.gap-inline-end-3 {
margin-inline-end: calc(var(--gap-default) * 3);
}
.gap-inline-end-4 {
margin-inline-end: calc(var(--gap-default) * 4);
}
.gap-inline-end-5 {
margin-inline-end: calc(var(--gap-default) * 5);
}
.content-icon {
display: flex;
align-self: flex-start;
position: relative;
inset-block-start: 3px;
}
.content-icon img {
flex: 0 0 auto;
width: 20px;
object-fit: contain;
}
.content-label {
min-width: 150px;
}
.content-list {
position: relative;
display: flex;
align-items: center;
}
.content-list:before {
content: "";
color: var(--color-blue);
display: inline-block;
width: 6px;
height: 6px;
border: 2px solid var(--color-blue);
border-inline-start: 0;
border-block-end: 0;
transform: rotate(45deg);
margin-inline-end: var(--gap-default);
}
#CAEOnePager section:not(:last-of-type):after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 8px 10px 0 10px;
border-inline-start-color: transparent;
border-block-end-color: transparent;
border-inline-end-color: transparent;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
margin-inline: auto;
inset-block-end: -8px;
z-index: 1;
}
.section-wrapper {
padding: var(--gap-section-block) var(--gap-section-inline);
}
.mimicSectionImageWidth {
max-width: 100%;
width: var(--section-image-width);
}
.responsiveSection {
gap: calc(var(--gap-default) * 3);
}
@media screen and (max-width: 1280px) {
.responsiveSection {
flex-direction: column;
align-items: center;
}
}
.section-image {
display: flex;
}
.section-image > a > img {
max-width: var(--section-image-width);
object-fit: contain;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
@media screen and (max-width: 1280px) {
.section-image > a > img {
width: 100%;
}
}
.section-image > a > img:hover {
border-color: var(--color-blue);
transform: scale(1.015);
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
}
.section-image:has(a + .image-caption) {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-default);
}
.qr-code-image {
display: flex;
}
.qr-code-image img {
max-width: 100px;
}
/* SECTION #1 */
.section-1 {
color: var(--color-white);
background: var(--color-blue-dark);
}
.section-1 > .section-wrapper > * {
position: relative;
}
.section-1 > .section-wrapper figure {
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
margin: 0;
width: 100%;
height: 100%;
padding-right: calc(var(--gap-section-inline) * 9);
box-sizing: border-box;
}
.section-1 > .section-wrapper figure img {
display: block;
object-fit: cover;
height: 100%;
width: 100%;
max-width: 100%;
max-height: 100%;
}
.section-1 > .section-wrapper > p.semiBold {
margin-block-start: var(--gap-default);
}
.section-1 > .section-wrapper {
position: relative;
}
.section-1 > .section-wrapper div {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
height: 100%;
}
@media screen and (max-width: 1280px) {
.section-1 > .section-wrapper div {
display: flex;
justify-content: center;
width: 160px;
height: 120px;
overflow: hidden;
margin: var(--gap-default);
border: 2px solid var(--color-white);
}
.section-1 > .section-wrapper figure {
padding-inline-end: 0;
}
}
.section-1 > .section-wrapper img {
max-height: 100%;
}
.section-1 > .section-wrapper:has(div img) {
padding-inline-end: calc(var(--gap-section-inline) * 10);
}
@media screen and (max-width: 1280px) {
.section-1 > .section-wrapper:has(div img) {
padding-inline-end: var(--gap-section-inline);
}
}
/* SECTION #2 */
.section-2 {
color: var(--color-white);
background: var(--color-blue);
}
.section-2:after {
border-top-color: var(--color-blue);
}
.section-2 > .section-wrapper {
padding: calc(var(--gap-default) / 3);
}
.section-2 .section-bar {
display: flex;
align-items: center;
justify-content: center;
}
/* SECTION #3 */
.section-3 {
background: var(--color-grey-light);
}
.section-3:after {
border-top-color: var(--color-grey-light);
}
.section-3 .content-label {
min-width: 225px;
}
/* SECTION #4 */
.section-4 {
background: var(--color-white);
}
.section-4:after {
border-top-color: var(--color-white);
}
.section-4 .content-label {
min-width: 190px;
}
/* SECTION #5 */
.section-5 {
background: var(--color-grey-light);
}
.section-5:after {
border-top-color: var(--color-grey-light);
}
@media screen and (max-width: 1280px) {
.section-5 .responsiveSection {
flex-direction: column;
align-items: flex-start;
gap: var(--gap-default);
}
.section-5 .responsiveSection .column {
width: auto;
}
}
/* SECTION #6 */
.section-6 {
background: var(--color-white);
}
.section-6 a {
font-size: 15px;
}
.section-6 .content-icon {
inset-block-start: 1px;
}
/* SECTION #7 */
.section-7 {
background: var(--color-blue-dark);
color: var(--color-white);
}
.section-7 .footer-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.content-logo {
display: flex;
}
.content-logo img {
flex: 0 0 auto;
max-width: 70px;
object-fit: contain;
}
</style>
<main id="CAEOnePager">
<header class="section-1">
<div class="section-wrapper">
<figure class="header-image-wrapper"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/cae-lines.svg"></figure>
<h1>Nouveau à CAE LearningSpace ?</h1>
<h2>Laissez-nous vous guider !</h2>
<p>Voici ce à quoi vous pouvez vous attendre après avoir obtenu l'un de nos produits CAE LearningSpace, l'avoir installé dans vos locaux et être prêt à utiliser.</p>
<p class="semiBold brightGreenColor">Le service clientèle de CAE LearningSpace sera là pour vous !</p>
<div><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/hero_thumbs-up.png"></div>
</div>
</header>
<section class="section-2">
<div class="section-wrapper">
<div class="section-bar flexBox alignItemsCenter">
<div class="content-icon gap-inline-end-half"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/warranty.svg"></div>
<a class="white" href="https://www.caehealthcare.com/media/files/2020-1113_Support_and_Maintenance_Specs_LearningSpace.pdf"
target="_blank">Spécifications de la garantie</a>
</div>
</div>
</section>
<section class="section-3">
<div class="section-wrapper">
<h3>Comment nous joindre ?</h3>
<div class="section-content">
<div class="row flexBox">
<div class="content-icon gap-inline-end"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/email.svg"></div>
<div class="content-label semiBold gap-inline-end">Courriel du service clientèle</div>
<div class="content-value"><a href="mailto:avs-support@cae.com" target="_blank">avs-support@cae.com</a></div>
</div>
<div class="row flexBox">
<div class="content-icon gap-inline-end"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/telephone.svg"></div>
<div class="content-label semiBold gap-inline-end">Téléphone du service clientèle</div>
<div class="content-value">
<a href="tel:1-866-462-7920" target="_blank">1-866-462-7920</a><span class="inlineIndent">‐</span><span>Ext. 2</span>
</div>
</div>
<div class="row flexBox">
<div class="content-icon gap-inline-end"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/live-chat.svg"></div>
<div class="content-label semiBold gap-inline-end">Chat en direct</div>
<div class="content-value">
<div class="flexBox flexWrap alignItemsCenter">
<a href="https://help.caelearningspace.com/fr" target="_blank">https://help.caelearningspace.com</a>
<span class="inlineIndent">‐</span>
<p class="italic">Aide en direct disponible</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-4">
<div class="section-wrapper">
<h3>Assistance à la clientèle</h3>
<div class="flexBox alignItemsStart responsiveSection">
<div class="section-image">
<a href="https://help.caelearningspace.com/cf/download/attachments/90309956/support-timezones-cities-fr.png" target="_blank"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/support-timezones-cities-fr.png"></a>
</div>
<div class="section-content">
<div class="row flexBox">
<div class="content-label semiBold gap-inline-end-3">Assistance AVS</div>
<div class="content-value semiBold">Heures d'ouverture (EST)</div>
</div>
<div class="row flexBox">
<div class="content-label gap-inline-end-3">Du lundi au vendredi</div>
<div class="content-value">2:00 a.m. - 8:00 p.m. (EST)</div>
</div>
<div class="row flexBox">
<div class="content-label gap-inline-end-3">Samedi - Dimanche</div>
<div class="content-value">Disponible si acquis en supplément et planifié avec l'équipe</div>
</div>
<div class="row flexBox">
<div class="content-label gap-inline-end-3">Jours fériés aux États-Unis</div>
<div class="content-value">Assistance par courrier électronique et par chat de 2h00 à 16h00 (EST)</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-5">
<div class="section-wrapper">
<h3>Assistance technique</h3>
<div class="section-content">
<div class="flexBox alignItemsStart responsiveSection">
<div class="column mimicSectionImageWidth">
<div class="row">
<div class="content-list">Assistance à l'utilisation</div>
</div>
<div class="row">
<div class="content-list">Courts webinaires (peuvent être planifiés pour l'assistance)</div>
</div>
<div class="row">
<div class="content-list">Formation supplémentaire (peut être achetée)</div>
</div>
</div>
<div class="column">
<div class="row">
<div class="content-list">Surveillance du serveur</div>
</div>
<div class="row">
<div class="content-list">Maintenance quotidienne</div>
</div>
<div class="row">
<div class="content-list">Monitoring en direct pour les événements</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-6">
<div class="section-wrapper">
<h3>Site d'aide de CAE LearningSpace</h3>
<div class="flexBox alignItemsStart responsiveSection">
<div class="section-image">
<a href="https://help.caelearningspace.com/fr" target="_blank"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/helpsite.png"></a>
<div class="image-caption flexBox">
<div class="content-icon gap-inline-end-half"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/link-arrow.svg"></div>
<a href="https://help.caelearningspace.com/fr" target="_blank">Visitez le site d'aide pour des articles et de courtes vidéos</a>
</div>
</div>
<div class="section-content">
<div class="row">
<div class="row">
<div class="content-list">Une base de connaissances régulièrement mise à jour</div>
</div>
<div class="row">
<div class="content-list">Vidéos de webinaires, vidéos de formation</div>
</div>
<div class="row">
<div class="content-list">Courriels de notification sur les nouveautés et les mises à jour</div>
</div>
<div class="row">
<div class="content-list">Conseils et astuces</div>
</div>
<div class="flexBox alignItemsStart">
<div class="row gap-inline-end-3 gap-block-start">
<div class="gap-block-start-half">
<div class="flexBox">
<div class="content-icon gap-inline-end-half"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/play.svg"></div>
<a href="https://vimeo.com/822051965" target="_blank">Regardez notre courte vidéo promotionnelle</a>
</div>
</div>
</div>
<div class="qr-code-image"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/qr-code-help-site.png"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="section-7">
<div class="section-wrapper">
<div class="footer-container section-content">
<div class="content-logo"><a href="http://www.cae.com/fr" target="_blank"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/cae-logo-white.svg"></a></div>
<p>©CAE Inc. 2023. Tous droits réservés.</p>
</div>
</div>
</footer>
</main> |
Overview
Content Tools