Page History

   <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);
    }

    .qr-code-imagesection-image:has(a + .image-caption) {
      display: flex;
    }

    .qr-code-image img {flex-direction: column;
      maxalign-widthitems: 100pxcenter;
    }

  gap:  /* SECTION #1 */var(--gap-default);
    }

    .sectionqr-code-1image {
      colordisplay: var(--color 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 #4 */
    .section-4 {
      background: var(--color-white);
    }

    .section-4:after {
      border-top-color: var(--color-white);
    }


    /* 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 #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>New to CAE LearningSpace?</h1>
        <h2>Let Us Show You Around!</h2>
        <p>Here is what you can expect after you have purchased any of our CAE LearningSpace products, have it installed
          on your premises and are ready to go.</p>
        <p class="semiBold brightGreenColor">CAE LearningSpace Support will be there for you!</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">Warranty Specifications</a>
        </div>
      </div>
    </section>

    <section class="section-3">
      <div class="section-wrapper">
        <h3>How to Contact Us?</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">Support Email</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">Support Phone</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 Live</div>
            <div class="content-value">
              <div class="flexBox flexWrap alignItemsCenter">
                <a href="https://help.caelearningspace.com" target="_blank">https://help.caelearningspace.com</a>
                <span class="inlineIndent">‐</span>
                <p class="italic">Live Help Available</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section-4">
      <div class="section-wrapper">
        <h3>Customer Support</h3>
        <div class="flexBox alignItemsStart responsiveSection">
          <div class="section-image">
            <a href="https://help.caelearningspace.com/cf/download/attachments/90309956/support-timezones-cities.png" target="_blank"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/support-timezones-cities.png"></a>
          </div>
          <div class="section-content">
            <div class="row flexBox">
              <div class="content-label semiBold gap-inline-end-3">AVS Support</div>
              <div class="content-value semiBold">Business Hours (EST)</div>
            </div>
            <div class="row flexBox">
              <div class="content-label gap-inline-end-3">Monday - Friday</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">Saturday - Sunday</div>
              <div class="content-value">Available if purchased additionally and scheduled with team</div>
            </div>
            <div class="row flexBox">
              <div class="content-label gap-inline-end-3">US Holidays</div>
              <div class="content-value">Email and chat-based support from 2:00 a.m. to 4:00 p.m. (EST)</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section-5">
      <div class="section-wrapper">
        <h3>Technical Support</h3>
        <div class="section-content">
          <div class="flexBox alignItemsStart responsiveSection">
            <div class="column mimicSectionImageWidth">
              <div class="row">
                <div class="content-list">Usability Assistance</div>
              </div>
              <div class="row">
                <div class="content-list">Short Webinars (can be scheduled for assistance)</div>
              </div>
              <div class="row">
                <div class="content-list">Extra Training (can be purchased)</div>
              </div>
            </div>
            <div class="column">
              <div class="row">
                <div class="content-list">Server Monitoring</div>
              </div>
              <div class="row">
                <div class="content-list">Daily Maintenance</div>
              </div>
              <div class="row">
                <div class="content-list">Live Monitoring for Events</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section-6">
      <div class="section-wrapper">
        <h3>CAE LearningSpace Help Site</h3>
        <div class="flexBox alignItemsStart responsiveSection">
          <div class="section-image">
            <a href="https://help.caelearningspace.com/cf/download/attachments/90309956/helpsite.png" target="_blank"><img src="https://help.caelearningspace.com/cf/download/attachments/90309956/helpsite.png"></a>
          </div>
   <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/" target="_blank">Visit Help Site for articles and short videos</a>
            </div>
          </div>
          <div class="section-content">
            <div class="row">
              <div class="row">
                <div class="content-list">A Regularly Updated Knowledge Base</div>
              </div>
              <div class="row">
                <div class="content-list">Webinar Videos, Training Videos</div>
              </div>
              <div class="row">
                <div class="content-list">Notification Emails About New Features and Releases</div>
              </div>
              <div class="row">
                <div class="content-list">Tips and Tricks</div>
              </div>
              <div class="flexBox alignItemsCenteralignItemsStart">
                <div class="row gap-inline-end-3">
                  <div class="colorBlue gap-block-start-2">Have no time to read Help site articles?</div>">
                  <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://help.caelearningspacevimeo.com/822051965" target="_blank">Watch our short videos on the Help site!<promo video</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/" target="_blank"><img
                src="https://help.caelearningspace.com/cf/download/attachments/90309956/cae-logo-white.svg"></a></div>
          <p>©CAE Inc. 2023. All rights reserved.</p>
        </div>
      </div>
    </footer>
  </main>