GBCBlockchain · MarkCBall · Sep 17, 2018 · Sep 18, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+
+<head>
+    <title>GBC Blockchain</title>
+    <link rel="stylesheet" href="styles/style.css">
+    <!-- internal styles -->
+
+</head>
+
+<body>
+    <h1 class="header">INTRO TO BLOCKCHAIN COURSE</h1>
+    <h1 class="header" id="awesome-header">Hello</h1>
+
+    <h2 id="gbc">Please click on the links below to view the work of our awesome students!</h2><br><br><br>
+
+    <ul id="navmenu">
+        <li><a href="Adam/index.html">Adam</a></li>
+        <li><a href=Anastasiia/index.html">Anastasiia</a></li>
+        <li><a href=Dylan/index.html">Dylan</a></li>
+        <li>
+            <a href="mark/index.html">Mark</a>
+            <span class="darrow">▼</span>
+            <ul class="sub1">
+                <li><a href="mark/resume.html">Resume</a></li>
+                <li>
+                    <a href="mark/index.html#social">Mark</a><!-- note it links to bottom of page-->
+                    <span class="rarrow">▶</span>
+                    <ul class="sub2">
+                        <li><a href="http://www.camballconsulting.com/">Personal Webpage</a></li>
+                        <li><a href="https://ca.linkedin.com/in/mark-camball">Linkedin</a></li>
+                    </ul>
+                </li>
+            </ul>
+        </li>
+        <li><a href=Ronnie/index.html">Ronnie</a></li>
+        <li><a href=Wei/index.html">Wei</a></li>
+        <li><a href=Yanesh/index.html">Yanesh</a></li>
+
+    </ul>
+
+    <br><br><br><br><br><br><br><br><br>
+
+    <p class="body-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
+
+    <p class="body-text">dhfksdjahfdsahfjkldshfjdshfdshfsdhfjksdhfdhsk</p>
+
+    <p id="priom">Priom Chowdhury</p>
+</body>
diff --git a/mark/assets/profile.jpeg b/mark/assets/profile.jpeg
diff --git a/mark/assets/profile_f4I_icon.ico b/mark/assets/profile_f4I_icon.ico
diff --git a/mark/css/app.css b/mark/css/app.css
@@ -0,0 +1,12 @@
+/*p {
+  background-color: color:yellow;
+}
+*/
+
+#social {
+  font-size: 20px;
+}
+
+p .aboutmeborder{  /* p . with space only selects what has been spanned inside p */
+  border: 1px solid red;
+}
diff --git a/Mark.html → mark/index.html b/Mark.html → mark/index.html
@@ -3,7 +3,7 @@
 
 
 <head>
-  <title> My bio pagee</title>
+  <title> My bio page</title>
   <!-- -->
   <LINK REL="SHORTCUT ICON" HREF="assets/profile_f4I_icon.ico">
   <link rel="stylesheet" type="text/css" href="css/app.css">
@@ -19,11 +19,14 @@ <h1>Mark Camball, P.Eng.</h1>
 <p>Mark is <span class="aboutmeborder"> a </span> ________</p>
 
 <hr>
-<p> Mark likes ___ </p>
+<p> Mark likes sailing and his <a href="resume.html">resume</a> can be found here </p>
 
 <hr>
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 <div id="social">
-<p> His social media accounts are: <a href="https://ca.linkedin.com/in/mark-camball">Linkedin</a></p>
+<p> His social media accounts are: <br>
+  <a href="http://www.camballconsulting.com/">Personal Webpage</a><br>
+  <a href="https://ca.linkedin.com/in/mark-camball">Linkedin</a></p>
 </div>
 
 </body>

diff --git a/mark/resume.html b/mark/resume.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+
+<head>
+  <title> Placeholder for Mark's resume</title>
+  <!-- -->
+  <LINK REL="SHORTCUT ICON" HREF="assets/profile_f4I_icon.ico">
+ </head>
+
+<body>
+    <h1>MARK'S RESUME SHOULD GO HERE!<br>To be completed later!!!</h1>
+</body>
+</html>
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,106 @@
+<style>
+        * {
+            margin: 0px;
+            padding: 0px;
+            }
+
+        body {
+            font-family: verdana;
+            background-color: #ABC;
+            padding: 50px;
+            }
+
+        h1 {
+            text-align: center;
+            border-bottom: 2px solid #009;
+            margin-bottom: 50px;
+            }
+
+        /* rules for navigation menu */
+        /* ========================================== */
+
+        ul#navmenu {
+            width: 645px;
+            margin: 0px auto;
+        }
+
+        ul#navmenu, ul.sub1, ul.sub2 {
+            list-style-type: none;
+            font-size: 9pt;
+            }
+
+        ul#navmenu li {
+            width: 80px;
+            text-align: center;
+            position: relative;
+            float: left;
+            margin-right: 4px;
+            }
+
+        ul#navmenu a {
+            text-decoration: none;
+            display: block;
+            width: 80px;
+            height: 25px;
+            line-height: 25px;
+            background-color: #FFF;
+            border: 1px solid #CCC;
+            border-radius: 5px;
+            }
+
+        ul#navmenu .sub1 li {
+            }
+
+        ul#navmenu .sub1 a {
+            margin-top: 5px;
+            }
+
+        ul#navmenu .sub2 a {
+            margin-left: 3px;
+            }
+
+        ul#navmenu li:hover > a {
+            background-color: #CFC;
+            }
+
+        ul#navmenu li:hover a:hover {
+            background-color: #FF0;
+            }
+
+        ul#navmenu ul.sub1 {
+            display: none;
+            position: absolute;
+            top: 26px;
+            left: 0px;
+            }
+
+        ul#navmenu ul.sub2 {
+            display: none;
+            position: absolute;
+            top: 0px;
+            left: 50px;
+            }
+
+        ul#navmenu li:hover .sub1 {
+            display: block;
+            }
+
+        ul#navmenu .sub1 li:hover .sub2 {
+            display: block;
+            }
+
+        .darrow {
+            font-size: 11pt;
+            position: absolute;
+            top: 5px;
+            right: 4px;
+            }
+
+        .rarrow {
+            font-size: 13pt;
+            position: absolute;
+            top: 6px;
+            right: 4px;
+            }
+
+        </style>