ZenHackWebsite/learning.html at main · ZenHackTeam/ZenHackWebsite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
---
title: Learning
layout: default
menu: learning
---

<div class="container py-5">

    <div class="row justify-content-center">
        <div class="col-12 col-lg-8 border-bottom border-zx3">
            <h3 class="text-zx3 text-center text-lg-left"><i class="fas fa-chalkboard-teacher"></i> Learning & training
                materials</h3>
        </div>
    </div>

    <div class="row justify-content-center mt-3">
        <div class="col-12 col-lg-8">
            <div>We are happy to share our ZenHack meetings! We recorded all our lessons, so you can view them on
                Youtube right below!</div>
            <div class="mt-3">Find your favorite topic and go deeper! Have fun ;-)</div>
        </div>
    </div>

    {% for course in site.data.learning %}

    <div class="row justify-content-center mt-5">
        <div class="col-12 col-lg-8 border-bottom border-zx3">
            <h5 class="text-zx3 text-center text-lg-left"><i class="fas fa-chalkboard-teacher"></i> {{ course.title }}
            </h5>


        </div>
    </div>

    <div class="row justify-content-center mt-3">
        <div class="col-12 col-lg-8">

            <div>
                {{ course.description }}
            </div>

            <div class="embed-responsive embed-responsive-16by9 w-100 mt-3 border border-dark shadow">
                <iframe src="{{ course.playlist }}" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen></iframe>
            </div>

            <ul class="list-group mt-3">
                {% for lesson in course.lessons %}
                <li class="list-group-item bg-base01">

                    <!-- Desktop layout -->
                    <span class="d-none d-lg-block">
                        <a href="{{lesson.video}}" target="_blank"> {{lesson.title}}</a>

                        <span class="float-right">
                            <span class="badge badge-info badge-pill">
                                <i class="fas fa-user"></i> {{ lesson.author }}
                            </span>
                            <span class="badge badge-success badge-pill">
                                <i class="fas fa-list-ol"></i> {{forloop.index}}/{{course.lessons | size}}
                            </span>
                            <a href="{{lesson.download}}" target="_blank" class="mx-1 text-decoration-none"
                                data-toggle="tooltip" data-placement="top" title="download">
                                <span class="badge badge-pill badge-primary">
                                    <i class="fas fa-file-download"></i> slides
                                </span>
                            </a>

                        </span>
                    </span>

                    <!-- Mobile layout -->
                    <span class="d-flex d-lg-none row p-0 m-0 align-items-start">
                        <div class="col-3 text-left">
                            <span class="badge badge-success badge-pill ">
                                <i class="fas fa-list-ol"></i> {{forloop.index}}/{{course.lessons | size}}
                            </span>
                        </div>
                        <div class="col-6 text-center">
                            <span class="badge badge-info badge-pill">
                                <i class="fas fa-user"></i> {{ lesson.author }}
                            </span>
                            <br>
                            <a href="{{lesson.video}}" target="_blank">{{lesson.title}}</a>
                            </a>
                        </div>
                        <div class="col-3 text-right">
                            <a href="{{lesson.download}}" target="_blank" class="mx-1 text-decoration-none"
                                data-toggle="tooltip" data-placement="top" title="download">
                                <span class="badge badge-pill badge-primary">
                                    <i class="fas fa-file-download"></i> slides
                                </span>
                            </a>
                        </div>

                    </span>
                </li>
                {% endfor %}
            </ul>

        </div>
    </div>


    {% endfor %}

</div>