Add training session

_data/trainings-2017.json

@@ -0,0 +1,11 @@
+[
+  {
+    "url" : "https://plus.google.com/u/0/events/c7fv4aoi90hr8gi76afttcs8krs",
+    "image" : "https://lh3.googleusercontent.com/-NMyVPNcNOyA/WXp0L5I8AqI/AAAAAAAAAAA/_XgRQhRfL-MmVn3vUBbIquAFWeZTE7vyQCJgCEAE/w420-h105-p/event_theme.jpg",
+    "trainerProfile" : "https://plus.google.com/u/0/103174616302996282485",
+    "trainerName" : "Matthew Plavcan",
+    "trainerPhoto" : "//lh3.googleusercontent.com/-TnRXdnPuYwY/AAAAAAAAAAI/AAAAAAAAAz4/mcWUJQMLxQI/s120-c/photo.jpg",
+    "type" : "Facilitator",
+    "dateTime" : "Mon, August 7, 4:00 PM UTC"
+  }
+]

_includes/session.html

@@ -0,0 +1,30 @@
+<div eventid="c5kc2oe4sklhj7f2jcmf7rna9ro" class="d-k-l yB kPb mPb">
+    <div class="JN yg">
+        <a href="{{ training.url }}" target="_blank" class="d-s ob" tabindex="0">
+            <div class="ux Fu"><img src="{{ training.image }}" class="Ym">
+                <div class="UH"></div>
+            </div>
+        </a>
+    </div>
+    <div class="xOa">
+        <a href="{{ training.trainerProfile }}" target="_blank" class="ob Jk" oid="103174616302996282485">
+          <img src="{{ training.trainerPhoto }}" width="46px" height="46px" alt="{{ training.trainerName }}'s profile photo" class="we jPb" oid="103174616302996282485">
+        </a>
+    </div>
+    <div class="ow">
+        <a href="{{ training.url }}" target="_blank" class="d-s ob pw" data-tooltip="View event" tabindex="0">
+          Global Day of Coderetreat -
+          {{ training.type }} training session
+        </a>
+        <div class="pD">
+            <div class="qW">
+                <span role="button" class="d-s Fy Ij" tabindex="0" aria-haspopup="true">
+                    <span class="l4"></span>{{ training.dateTime }}<span class="nA d-y-r-c-Qa"></span>
+                </span>
+                <div class="cM"></div>
+            </div>
+            <span role="button" class="d-s aM k4 Ij f2" tabindex="0">
+                <span class="i4"></span>Hangouts, with {{ training.trainerName }}</span>
+        </div>
+    </div>
+</div>

training.scss

@@ -94,3 +94,11 @@
     justify-content: center;
     margin-bottom: 10px;
 }
+
+#past-training .mPb {
+  opacity: 0.6;
+}
+
+#past-training .mPb:hover {
+  opacity: 1;
+}

training/index.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+<div id="main">
+    <div id="content">
+      <h1>Upcoming training sessions</h1>
+      <div class="tip">Like last year, we will have Hangout sessions to help you get started with running and facilitating a coderetreat.</div>
+      <div class="tip">Tip: visit the event page to see the date and time converted to your local timezone.</div>
+
+      <div class="Umd">
+        {% for training in site.data.trainings-2017 %}
+          {% include session.html %}
+        {% endfor %}
+      </div>
+
+      <hr/>
+
+      <div id='past-training'>
+        <h1>Past training sessions - 2016</h1>
+        <div class="Umd">
+          {% for training in site.data.past-trainings-2016 %}
+            {% include session.html %}
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+</div>
+
+<!--/main-->