File: /var/www/linde-ai/wp-content/themes/linde/static-templates/course-static.php
<?php
/*
* Template Name: Single Course static
*
*/
get_header("static");
?>
<main>
<div class="hero-course">
<div class="hero-course__img-wrap">
<picture>
<source srcset="<?= THEMEROOT ?>/frontend/img/hero-course-desktop.jpg" media="(min-width: 620px)">
<img class="hero-course__img" src="<?= THEMEROOT ?>/frontend/img/hero-course-mobile.jpg" alt="" />
</picture>
</div>
<a href="#" class="btn btn--watch video-trigger" data-video-link="vid1">
<span>Watch trailer</span>
<svg class="icon-play"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-play"></use></svg>
</a>
<div class="container">
<div class="hero-course__content">
<h2 class="hero-course__subtitle h3">Session 02 | Module name</h2>
<h1 class="hero-course__title h2">Manually switching between reactors</h1>
<a href="#" class="btn btn--hollow modal-form-trigger"><span>Sign up for this course</span></a>
</div>
</div>
</div>
<div class="action-bar">
<div class="container">
<div class="action-bar__wrap">
<a href="#" class="action-bar__item">
<svg class="icon-small-arrow-left"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-small-arrow-left"></use></svg>
<span>Back to all courses</span>
</a>
<a href="#" class="action-bar__item js-share">
<svg class="icon-share"><use xlink:href="<?= THEMEROOT ?>/frontend/icons/icons.svg#icon-share"></use></svg>
<span>Share this course</span>
</a>
</div>
</div>
</div>
<article class="course-single">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1 course-single__content">
<div class="floating-element">
<a href="#" class="btn btn--light modal-form-trigger">Sign up now</a>
</div>
<h3>Practicing with a critical operating procedure</h3>
<p>Certain reactors are filled with a catalyst that cannot be regenerated. This means that the catalyst has to be replaced after a certain time, and the operator needs to switch from the non-active reactor to the active one to do this. In this session, you can practice the changeover step flow. This includes isolating, cooling and purging one reactor without impairing ongoing production. The session also covers the steps you need to align with the control room.</p>
<h3>Why take this course</h3>
<p>Incorrect execution of this task could lead to breakthroughs in the product, or material damage. This could result in product impurities, production interruptions or expensive repair work.</p>
<!-- This has to be an element wrapped with the proper classes for the gradient to work. If this is an issue, I can just wrap the element with this div and the respective classes via JS -->
<div class="text-gradient__wrap text-gradient__wrap--center">
<h1 class="course-single__title text-gradient">Training value</h1>
</div>
<div class="training-blocks">
<div class="training-blocks__item">
<div class="training-blocks__img-wrap">
<img class="training-blocks__img" src="<?= THEMEROOT ?>/frontend/img/training-1.png" alt="" />
</div>
<div class="training-blocks__content">
<h2 class="h3 training-blocks__title">Learn about different types of industrial fire and their suitable firefighting extinguishers</h2>
</div>
</div>
<div class="training-blocks__item">
<div class="training-blocks__img-wrap">
<img class="training-blocks__img" src="<?= THEMEROOT ?>/frontend/img/training-2.png" alt="" />
</div>
<div class="training-blocks__content">
<h2 class="h3 training-blocks__title">Practice the response protocol<br/>for a fire emergency</h2>
</div>
</div>
<div class="training-blocks__item">
<div class="training-blocks__img-wrap">
<img class="training-blocks__img" src="<?= THEMEROOT ?>/frontend/img/training-3.png" alt="" />
</div>
<div class="training-blocks__content">
<h2 class="h3 training-blocks__title">Exercise split-second decision<br/>under time pressure</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</article>
<section class="related-courses">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="row">
<div class="col-12 col-md-6">
<div class="related-courses__item">
<h4 class="related-courses__item-title">Previous course</h4>
<div class="course-mini-box">
<div class="course-mini-box__img-wrap">
<img class="course-mini-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-mini-1.png" alt="" />
</div>
<div class="course-mini-box__content">
<h6 class="course-mini-box__subtitle">Session 01 | Module name</h6>
<h4 class="course-mini-box__title">Emergency response to a pump fire</h4>
<a href="#" class="btn btn--gradient-small">Go to course</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="related-courses__item">
<h4 class="related-courses__item-title">Next course</h4>
<div class="course-mini-box">
<div class="course-mini-box__img-wrap">
<img class="course-mini-box__img" src="<?= THEMEROOT ?>/frontend/img/placeholder-mini-2.png" alt="" />
</div>
<div class="course-mini-box__content">
<h6 class="course-mini-box__subtitle">Session 03 | Module name</h6>
<h4 class="course-mini-box__title">Manually switching between reactors</h4>
<a href="#" class="btn btn--gradient-small">Go to course</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-center">
<a href="#" class="btn btn--hollow text-dark"><span>See all courses</span></a>
</div>
</div>
</section>
<div class="get-started__block">
<div class="container">
<div class="row">
<div class="col-12">
<div class="get-started__content">
<p class="h3">Ready to gain practical experience through virtual reality?</p>
<a href="#" class="btn btn--dark modal-form-trigger">Get started now</a>
</div>
</div>
</div>
</div>
</div>
</main>
<?php
get_footer("static");
?>