175 lines
4.1 KiB
Plaintext
175 lines
4.1 KiB
Plaintext
<div class="recommended-courses-carousel">
|
|
{% if courses.featured.any? %}
|
|
{% for course in courses.featured %}
|
|
{% include 'homepage_recommended_course_card' with course %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<style>
|
|
.rcmmnd-card {
|
|
display: flex !important;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
--bs-gutter-x: 0;
|
|
}
|
|
.rcmmnd-card-left-wrapper {
|
|
display: flex;
|
|
padding-left: 0;
|
|
}
|
|
.rcmmnd-card-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-self: center;
|
|
justify-content: center;
|
|
margin-left: 8%;
|
|
width: 90%;
|
|
}
|
|
.rcmmnd-card-left-lessons {
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
line-height: 24px;
|
|
letter-spacing: 3px;
|
|
}
|
|
.rcmmnd-card-left-title {
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
font-family: 'Faktum', sans-serif;
|
|
height: 220px;
|
|
width: 95%;
|
|
overflow: clip;
|
|
|
|
}
|
|
.rcmmnd-card-left-subtitle {
|
|
font-size: 1.375rem;
|
|
font-weight: 300;
|
|
line-height: 33px;
|
|
margin: 40px 0;
|
|
max-height: 100px;
|
|
overflow: clip;
|
|
width: 80%;
|
|
}
|
|
.rcmmnd-card-left-button {
|
|
background-color: #2F8481;
|
|
border-radius: 10px;
|
|
font-weight: 500px;
|
|
font-size: 1.06rem;
|
|
line-height: 20px;
|
|
padding: 10px 70px;
|
|
border: none;
|
|
color: white;
|
|
|
|
}
|
|
.rcmmnd-card-left-button:hover {
|
|
background: #246b69;
|
|
}
|
|
.rcmmnd-card-right-wrapper {
|
|
display: flex;
|
|
}
|
|
.rcmmnd-card-right {
|
|
position: relative;
|
|
overflow-x: clip;
|
|
margin: auto;
|
|
margin-right: 0;
|
|
display: flex;
|
|
justify-content: end;
|
|
}
|
|
.rcmmnd-card-right-image {
|
|
width: 100%;
|
|
top: 15%;
|
|
position: relative;
|
|
margin: 30px 0;
|
|
border-radius: 10px 0 0 10px;
|
|
}
|
|
.rcmmnd-card-right-background {
|
|
height: 100%;
|
|
top: 0;
|
|
z-index: -1;
|
|
width: 100%;
|
|
background: #88D880;
|
|
border-radius: 20px;
|
|
left: 20%;
|
|
position: absolute;
|
|
}
|
|
.tns-nav {
|
|
text-align: center;
|
|
}
|
|
.tns-nav > * {
|
|
width: 9px;
|
|
height: 9px;
|
|
padding: 0;
|
|
margin: 0 5px;
|
|
border-radius: 50%;
|
|
background: #ddd;
|
|
border: 0;
|
|
}
|
|
.tns-nav-active {
|
|
background: gray;
|
|
}
|
|
|
|
@media only screen and (min-width: 1800px) {
|
|
.rcmmnd-card-left {
|
|
margin-left: 20%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 991px) {
|
|
.rcmmnd-card-right {
|
|
display: none;
|
|
}
|
|
.rcmmnd-card-left {
|
|
width: 92%;
|
|
margin: 4%;
|
|
height: auto;
|
|
}
|
|
.rcmmnd-card-left-title {
|
|
width: 90%; }
|
|
.rcmmnd-card-left-subtitle {
|
|
width: 90%;
|
|
margin: 20px 0;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 476px) {
|
|
.rcmmnd-card-left-button {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.textFitted {
|
|
white-space: normal !important;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
var slider = tns({
|
|
container: '.recommended-courses-carousel',
|
|
mouseDrag: true,
|
|
autoHeight: true,
|
|
autoplay: true,
|
|
controls: false,
|
|
autoplayButtonOutput: false,
|
|
navPosition: 'bottom'
|
|
});
|
|
function resizeTitle() {
|
|
for (element of document.getElementsByClassName('rcmmnd-card-left-title')) {
|
|
if (element.textContent.trim().length < 25 ) {
|
|
minFont = 50
|
|
}
|
|
else {
|
|
minFont = 30
|
|
}
|
|
textFit(element,
|
|
{
|
|
minFontSize: minFont,
|
|
maxFontSize: 76,
|
|
multiline: true
|
|
}
|
|
);
|
|
};
|
|
|
|
$('.rcmmnd-card-left-title').each(function() {
|
|
$(this).height($(this).children().height() + 10)
|
|
});
|
|
}
|
|
window.addEventListener('resize', resizeTitle);
|
|
window.addEventListener('DOMContentLoaded', resizeTitle);
|
|
</script> |