Add content to about index page

static/src/less/style.less

@@ -42,6 +42,28 @@ a.no-color-change {
 }
 /* @end Global */
 
+/* @group Functional */
+
+p.center-text {
+  text-align: center;
+}
+
+.mega-icon {
+  font-size: 110px;
+  text-align: center;
+  margin-bottom: 0;
+  cursor: default;
+
+  & ~ div.caption {
+    padding-top: 0;
+    h3 {
+      margin: 0;
+    }
+  }
+}
+
+/* @end Functional */
+
 /* @group Footer */
 footer {
   width: 100%;
@@ -156,7 +178,7 @@ footer {
 }
 
 .row {
-  width: 100%;
+  width: initial;
 }
 
 .gh-card iframe {

templates/about/index.html

@@ -1,12 +1,12 @@
 {% extends 'content_base.html' %}
 
-{% block pageTitle %}About{% endblock %}
+{% block pageTitle %}About all the things{% endblock %}
 
 {% block content %}
 <div class="container">
   <div class="panel panel-default">
     <div class="panel-body">
-        h
+        There are 2 parts to this, me and my website. Information for both of which can be found using the links below.
     </div>
   </div>
 </div>
@@ -14,11 +14,13 @@
   <div class="row">
     <div class="col-sm-6">
       <div class="thumbnail">
-        <img src="http://cdn2.itpro.co.uk/sites/itpro/files/server_room.jpg" alt="Server Image" />
+        <p class="center-text mega-icon">
+          <span class="glyphicon glyphicon-hdd" aria-hidden="true"></span>
+        </p>
         <div class="caption">
           <h3>About Website</h3>
           <p>
-            Some info about my website.
+            Some info about my website, which clearly works well as you're using it right now!
           </p>
           <p>
             <a href="" class="btn btn-primary btn-block">More Info</a>
@@ -28,7 +30,9 @@
     </div>
     <div class="col-sm-6">
       <div class="thumbnail">
-        <img src="" alt="" />
+        <p class="center-text mega-icon">
+          <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
+        </p>
         <div class="caption">
           <h3>About Me</h3>
           <p>