Development

_includes/header.html

 <header class="default-header" id="top" role="banner">
-  <div class="nav-wrapper">
-    <a href="#top"><img class="site-title" src="assets/images/Logo_tekethics.png" alt="{{ site.title | escape }}"></a>
-    <nav>
-      <input type="checkbox" id="nav-trigger" class="nav-trigger" />
-      <label for="nav-trigger">
-        <span class="menu-icon">
-          <svg viewBox="0 0 18 15" width="18px" height="15px">
-            <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
-            <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
-            <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
-          </svg>
-        </span>
-      </label>
-      <div class="trigger">
-        <a class="page-link" href="#start">Let's Get Started</a>
-        <a class="page-link" href="#course">About The Course</a>
-        <a class="page-link" href="#about">About Us</a>
-      </div>
-    </nav>
+  <div class="navigation">
+    <div class="nav-wrapper">
+      <a href="#top"><img class="logo" src="assets/images/Logo_tekethics.png" alt="{{ site.title | escape }}"></a>
+      <nav>
+        <input type="checkbox" id="nav-trigger" class="nav-trigger" />
+        <label for="nav-trigger">
+          <span class="menu-icon">
+            <svg viewBox="0 0 18 15" width="18px" height="15px">
+              <path fill="#424242" d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.031C17.335,0,18,0.665,18,1.484L18,1.484z"/>
+              <path fill="#424242" d="M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0c0-0.82,0.665-1.484,1.484-1.484 h15.031C17.335,6.031,18,6.696,18,7.516L18,7.516z"/>
+              <path fill="#424242" d="M18,13.516C18,14.335,17.335,15,16.516,15H1.484C0.665,15,0,14.335,0,13.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.031C17.335,12.031,18,12.696,18,13.516L18,13.516z"/>
+            </svg>
+          </span>
+        </label>
+        <div class="trigger">
+          <a class="page-link" href="#start">Let's Get Started</a>
+          <a class="page-link" href="#course">About The Course</a>
+          <a class="page-link" href="#about">About Us</a>
+        </div>
+      </nav>
+    </div>
   </div>
+
+  <h3 class="center">Have you ever wondered...</h3>
+
+  <div class="symbols_wrapper">
+    <a class="symbolbox" href="#course">
+      <span class="fa-stack fa-lg fa-5x">
+        <i class="fa fa-circle-thin fa-stack-2x circle"></i>
+        <i class="fa fa-cog fa-stack-1x" aria-hidden="true"></i>
+      </span>
+      <h2 class="center">... should we <span class="bold">fear robots</span> to become sort of <span class="bold">terminators</span> in a not too distant <span class="bold">future?</span></h2>
+    </a>
+    <a class="symbolbox" href="#course">
+      <span class="fa-stack fa-lg fa-5x">
+        <!--  <i class="fa fa-user-circle-o fa-stack-1x" aria-hidden="true"></i> -->
+        <i class="fa fa-circle-thin fa-stack-2x circle"></i>
+        <i class="fa fa-user fa-stack-1x" aria-hidden="true"></i>
+      </span>
+      <h2 class="center">... how far should <span class="bold">human enhancement</span> go?</h2>
+    </a>
+
+    <a class="symbolbox" href="#course">
+      <span class="fa-stack fa-lg fa-5x">
+        <i class="fa fa-circle-thin fa-stack-2x circle"></i>
+        <i class="fa fa-leaf fa-stack-1x" aria-hidden="true"></i>
+      </span>
+      <h2 class="center">... what kind of <span class="bold">duties</span> do we have <span class="bold">towards nature,</span> and why?</h2>
+    </a>
+  </div>
+
   <div class="arrowBox">
     <div class="downArrow"><a href="#start"><i class="fa fa-chevron-down fa-2x" aria-hidden="true"></i></a></div>
   </div>