60 lines
1.2 KiB
Plaintext
60 lines
1.2 KiB
Plaintext
{% include "header" %}
|
|
{% include "course_version_outdated_alert", courses: courses.in_catalog %}
|
|
|
|
<div class="hero-homepage">
|
|
<div class="np-max-width">
|
|
<div class="hero-text">Course Catalog</div>
|
|
<div class="hero-subheading">Get the skills and knowledge you need at the moment you need them. Explore our full course catalog.</div>
|
|
</div>
|
|
</div>
|
|
<main class="np-main np-catalog np-max-width catalog-container">
|
|
<div class="filter-container">
|
|
{% include 'filters_catalog' %}
|
|
</div>
|
|
<div class="catalog-content-wrapper">
|
|
<div class="catalog-courses-container">
|
|
{% include "courses_catalog" %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.catalog-container {
|
|
display: flex;
|
|
gap: 20px;
|
|
padding: 5% 20px;
|
|
}
|
|
.filter-container {
|
|
width: 25%;
|
|
margin: 10px;
|
|
}
|
|
.catalog-content-wrapper {
|
|
display: flex;
|
|
gap: 20px;
|
|
width: 75%;
|
|
}
|
|
.filters-container {
|
|
width: 20%;
|
|
border: 3px solid #002e6e;
|
|
border-radius: 25px;
|
|
}
|
|
.catalog-courses-container {
|
|
width: 100%;
|
|
}
|
|
@media only screen and (max-width: 768px) {
|
|
.catalog-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.filter-container {
|
|
width: 100%;
|
|
}
|
|
.catalog-content-wrapper {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|