Files

88 lines
2.0 KiB
Plaintext
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="recommended-wrapper">
<div class="heading lang-en">
Browse all learning paths
</div>
<div class="heading lang-de">
Alle Lernpfade durchsuchen
</div>
<div class="heading lang-fr">
Parcourir tous les parcours dapprentissage
</div>
<div class="heading lang-jp">
すべての学習プログラム
</div>
<div class="all-lp-wrapper">
{% for learning_path in learning_paths.enrolled %}
{% for category in learning_path.categories %}
{% if category.name == userLanguage %}
<div class="carousel-card">
{% include "cards_learning_path" %}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
</div>
<style>
.all-lp-wrapper {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px;
margin-top: 30px;
}
.all-lp-carousel {
position: relative;
}
.slick-arrow {
position: absolute;
top: -30px;
z-index: 111;
cursor: pointer;
}
.right-arrow {
margin-left: 30px;
}
.slick-dots button {
display: block;
width: 10px;
height: 10px;
padding: 0;
border: none;
border-radius: 1px;
background: #8878FF;
text-indent: -9999px;
}
.slick-dots {
list-style-type: none;
}
.slick-dots {
display: flex;
justify-content: center;
margin: 0;
padding-top: 3rem;
list-style-type: none;
gap: 10px;
}
.slick-dots li {
margin: 0 0.25rem;
}
.slick-dots li.slick-active button {
background: #6CF1C9;
}
@media only screen and (max-width: 1170px) {
.all-lp-wrapper {
grid-template-columns: repeat(2,1fr);
}
}
@media only screen and (max-width: 768px) {
.all-lp-wrapper {
grid-template-columns: repeat(1,1fr);
}
}
</style>