tutorials/index.html at master · NeCTAR-RC/tutorials · 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
---
layout: default
title: Home
order: 0
---
  <section class="banner banner-with-search bg-dark bg-image">
    <div class="container">
        <div class="row">
            <div class="d-none d-sm-block col-12 col-md-6">
                <div class="banner-content-box">
                    <h1 class="banner-title">ARDC Nectar Research Cloud Tutorials</h1>
                    <p class="h4 banner-subtitle">Build your practical cloud skills with Nectar Research Cloud <span class="d-inline-block">self-paced</span> online tutorials. Our technical tutorials are for <i>beginner</i>, <i>intermediate</i> and <i>advanced</i> users and we also explain some of our <i>non-technical</i> topics.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12 col-lg-8 offset-lg-2">
                <div class="banner-search-box">
                    <div class="input-group">
                        <button id="search-filter-button" class="btn btn-secondary dropdown-toggle rounded-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">All Categories</button>
                        <ul class="dropdown-menu search-filter-menu">
                          <li><a class="dropdown-item" href="#">All Categories</a></li>
                          <li><a class="dropdown-item" href="#">Beginner</a></li>
                          <li><a class="dropdown-item" href="#">Intermediate</a></li>
                          <li><a class="dropdown-item" href="#">Advanced</a></li>
                          <li><a class="dropdown-item" href="#">Non-technical</a></li>
                          <li><a class="dropdown-item" href="#">Series</a></li>
                        </ul>
                        <input id="search-input" type="search" class="form-control border-0 py-2" placeholder="Search tutorials..." aria-label="Search tutorials" />
                    </div>
                </div>
            </div>
        </div>
    </div>
  </section>
  <section class="section">
    <div class="container">
      {% comment %}
        These cards are also rendered in javascript to handle the search form.
        Any changes you make here should be replicated exactly to the showResults
        function in /assets/javascript/main.js
      {% endcomment %}
      <div id="tutorial-list" class="row pt-3 px-0">
        {% include tutorials.html %}
        {% for tutorial in all_tutorials %}
          <div class="card-container col-md-6 col-lg-4 m-lg-0 py-3">
            <a class="card-tut-link" href="{{ tutorial.label | relative_url }}">
              <div class="card h-100">
                <div class="card-header text-white bg-dark">
                  <div class="card-category">
                    <small class="title text-uppercase">{{ tutorial.level }}</small>
                    {% if tutorial.level == "Series" -%}
                      <img src="{{ '/assets/images/series-badge.svg' | relative_url }}" class="series float-right" alt="Nectar Series">
                    {% endif -%}
                  </div>
                </div>
                <div class="card-body">
                  <h5 class="card-title mb-0">{{ tutorial.title }}</h5>
                  <small class="text-muted">{{ tutorial.published | date: "%-d %B %Y" }}</small>
                  <p class="card-text py-2">{{ tutorial.summary }}</p>
                </div>
                <div class="card-footer">
                  <div class="row no-gutters">
                    <div class="col-xs-auto">
                      <small class="text-muted">Difficulty: </small>
                      <span class="difficulty-indicator difficulty-indicator-{{ tutorial.difficulty }}">
                        {{ tutorial.difficulty }} out of 5
                      </span>
                    </div>
                    <div class="col text-right">
                      <small class="text-muted">Duration: {{ tutorial.duration }} minutes</small>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>

  <section class="footer-callout bg-primary py-5">
    <div class="container">
      <div class="row">
        <div class="col-sm-12 col-lg-10 offset-lg-1">
          <div class="card text-center">
            <div class="card-body px-lg-5">
              <h2 class="my-3">Interested in Nectar Research Cloud training?</h2>
              <h4 class="mb-4">Register for a Live Online Training workshop!</h4>
              <a class="btn btn-outline-primary btn-lg mb-3" href="https://support.ehelp.edu.au/support/solutions/articles/6000156761-learning-and-training-resources">Learn More <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>