198 lines
3.8 KiB
Plaintext
198 lines
3.8 KiB
Plaintext
<div class="beginning container">
|
|
<div class="beginning-cloud">
|
|
BEFORE YOU START
|
|
</div>
|
|
<div class="beginning-title">
|
|
Learn the fundamentals
|
|
</div>
|
|
<div class="beginning-text">
|
|
Whether it's sign-up forms, automation workflows or designing and sending your first email campaign - we got you covered.
|
|
</div>
|
|
<a class="beginning-button" href="/app/courses/f64b66d0-5def-42b0-981c-a9d8dcd74cb3">
|
|
Start learning
|
|
</a>
|
|
{% assign beginner_courses = 0 | times: 1 %}
|
|
<div class="beginning-courses row">
|
|
{% for course in courses.in_catalog %}
|
|
{% if course.properties.beginner %}
|
|
{% include 'homepage_beginning_course_card' with course %}
|
|
{% assign beginner_courses = beginner_courses | plus: 1 %}
|
|
{% if beginner_courses == 3 %} {% break %} {% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.beginning {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
max-width: none;
|
|
}
|
|
.beginning-cloud {
|
|
border-radius: 20px;
|
|
background-color: #E2E8E7;
|
|
cursor: auto;
|
|
margin: auto;
|
|
line-height: 30px;
|
|
margin-bottom: 35px;
|
|
letter-spacing: 3px;
|
|
font-weight: 500;
|
|
padding: 0 18px;
|
|
width: max-content;
|
|
}
|
|
.beginning-title {
|
|
font-weight: 800;
|
|
font-size: 3.75rem;
|
|
font-family: 'Faktum', sans-serif;
|
|
line-height: 4.5rem;
|
|
}
|
|
.beginning-text {
|
|
margin: auto;
|
|
width: 45%;
|
|
margin-top: 30px;
|
|
margin-bottom: 50px;
|
|
font-size: 1.125rem;
|
|
font-weight: 300;
|
|
line-height: 32px;
|
|
}
|
|
.beginning-button {
|
|
margin-bottom: 80px;
|
|
color: black;
|
|
border-radius: 10px;
|
|
border: #2F8481 1px solid;
|
|
padding: 10px 20px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
.beginning-button:hover {
|
|
background-color: #2F8481;
|
|
color: white
|
|
}
|
|
.beginning-courses {
|
|
display: flex;
|
|
}
|
|
.beginning-courses:nth-child(1) {
|
|
margin-left: 0;
|
|
}
|
|
.beginning-courses:nth-child(3) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
@media only screen and (max-width: 950px) {
|
|
.beginning-text {
|
|
width: 65%;
|
|
}
|
|
.beginning-courses {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 500px) {
|
|
.beginning-text {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 380px) {
|
|
.beginning-title {
|
|
font-size: 3rem;
|
|
}
|
|
}
|
|
/* CARDS_COURSE */
|
|
|
|
.course-card-image-wrapper {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
|
|
.course-card-image {
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.course-card-image-ribbon {
|
|
text-decoration: none;
|
|
color: white;
|
|
background: #2F8481;
|
|
padding: 3px 5px;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 0;
|
|
opacity: 0.9;
|
|
border-radius: 2px;
|
|
}
|
|
.course-card-image-ribbon:hover {
|
|
color: white;
|
|
}
|
|
|
|
.course-card-content {
|
|
text-align: left;
|
|
}
|
|
|
|
.course-card-content * {
|
|
text-align: left;
|
|
}
|
|
|
|
.course-card-content-category {
|
|
padding: 15px 0 05px 0;
|
|
font-weight: 500;
|
|
font-size: 0.9375rem;
|
|
line-height: 24px;
|
|
letter-spacing: 3px;
|
|
}
|
|
|
|
.course-card-content-title {
|
|
font-family: 'Faktum', sans-serif;
|
|
font-weight: 800;
|
|
font-size: 2.125rem;
|
|
line-height: 46px;
|
|
text-decoration: none;
|
|
color: #1E2423;
|
|
display: inline-block;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.course-card-content-title:hover {
|
|
color: black;
|
|
}
|
|
|
|
.course-card-content-description {
|
|
margin-bottom: 15px;
|
|
font-weight: 300;
|
|
font-size: 1.125rem;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.course-card-button {
|
|
color: #2F8481;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 1.125rem;
|
|
font-family: Roboto, sans-serif;
|
|
}
|
|
|
|
.course-card-button:hover {
|
|
color: #246b69;
|
|
}
|
|
|
|
.course-card-button .fa-angle-right {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
@media only screen and (max-width: 540px) {
|
|
.course-card-content-description {
|
|
line-height: 26px;
|
|
max-height: 80px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
$('.course-card-content-title').each(function() {
|
|
$clamp($(this)[0], {clamp: 2})
|
|
})
|
|
$('.course-card-content-description').each(function() {
|
|
$(this).text($(this).text().trim())
|
|
$clamp($(this)[0], {clamp: 3})
|
|
})
|
|
</script>
|