Prepare for Chapter 3

tpo/web/tpo#117

templates/privchat.html

@@ -21,6 +21,110 @@
 
 </div>
 
+
+<div class="container py-3 mt-5">
+    <p class="h2 text-primary" target="_blank">Chapter #3 - Upcoming</p>
+    <div>
+      <p><span class="text-primary nick" style="font-size:18px;"><mark>Date ∙ Time Pacific Time ∙ UTC ∙ Eastern Time ∙ <a href="#" title="Tor Project You Tube Channel" target="_blank"><i class="fab fa-youtube"></i> @torproject YouTube channel</a></mark></span></p>
+    </div>
+    <a class="btn btn-small bg-primary text-light my-4" href="#" target="_blank"><i class="mr-2 pt-1 fas fa-thumbtack-png"></i> {{ _("Save the Date") }} </a>
+    <div>
+    <p class="font-family-serif">
+      Excerpt
+    </p>
+    </div>
+</div>
+
+<div class="container pt-5 justify-content-center">
+
+    <h4>Host</h4>
+
+    <div class="row">
+      <div class="container">
+      <div class="card flex-row flex-wrap py-3">
+        <div class="col-3">
+            <img class="card-img-top" src="{{ '/static/images/privchat/pic.png' }}" alt="">
+        </div>
+        <div class="col">
+          <div class="card-block px-2">
+              <div class="pb-4">
+                <h4 class="display-4 text-primary">Host Name</h4>
+                <strong class="display-5 text-primary mb-4">Title, role, insitution</strong>
+              </div>
+              <p class="text-tpo">Bio</p>
+          </div>
+        </div>
+      </div>
+      </div>
+    </div>
+
+  <h4 class="mt-5">Participants</h4>
+
+  <div class="row">
+    <div class="container">
+
+    <div class="card flex-row flex-wrap py-3 mb-5">
+      <div class="col-3">
+          <img class="card-img-top" src="{{ '/static/images/privchat/pic.png' }}" alt="">
+      </div>
+      <div class="col">
+        <div class="card-block px-2">
+            <div class="pb-4">
+              <h4 class="display-4 text-primary">Participant</h4>
+              <strong class="display-5 text-primary mb-4">Title, role, insitution</strong>
+            </div>
+            <p class="text-tpo">Bio</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="card flex-row flex-wrap py-3 mb-5">
+      <div class="col-3">
+          <img class="card-img-top" src="{{ '/static/images/privchat/pic.png' }}" alt="">
+      </div>
+      <div class="col">
+        <div class="card-block px-2">
+            <div class="pb-4">
+              <h4 class="display-4 text-primary">Participant</h4>
+              <strong class="display-5 text-primary mb-4">Title, role, insitution</strong>
+            </div>
+            <p class="text-tpo">Bio</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="card flex-row flex-wrap py-3 mb-5">
+      <div class="col-3">
+          <img class="card-img-top" src="{{ '/static/images/privchat/pic.png' }}" alt="">
+      </div>
+      <div class="col">
+        <div class="card-block px-2">
+            <div class="pb-4">
+              <h4 class="display-4 text-primary">Participant</h4>
+              <strong class="display-5 text-primary mb-4">Title, role, insitution</strong>
+            </div>
+            <p class="text-tpo">Bio</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="card flex-row flex-wrap py-3 mb-5">
+      <div class="col-3">
+          <img class="card-img-top" src="{{ '/static/images/privchat/pic.png' }}" alt="">
+      </div>
+      <div class="col">
+        <div class="card-block px-2">
+            <div class="pb-4">
+              <h4 class="display-4 text-primary">Participant</h4>
+              <strong class="display-5 text-primary mb-4">Title, role, insitution</strong>
+            </div>
+            <p class="text-tpo">Bio</p>
+        </div>
+      </div>
+    </div>
+
+</div>
+
 <div class="container">
   <div class="row bg-secondary p-5 mx-1 my-5">
     <h1><i class="fas fa-hand-holding-usd px-5 text-light"></i></h1>