Pretty!

mcwarman · mcwarman · commit 6048c907a238 · 2017-09-20T14:12:36.000+01:00
diff --git a/README.md b/README.md
@@ -4,3 +4,6 @@
 
 This site includes third party open source components, which has its own license:
 * [DashingCode/front-cover](https://github.com/dashingcode/front-cover) - [DashingCode-LICENSE.txt](etc/DashingCode-LICENSE.txt).
+
+Background images:
+* [Old workshop!](https://www.flickr.com/photos/adriano-1973/12663229044/in/photolist-ki1mPf-ar7fme-ar78tZ-ar9M37-zRcVpa-7Uizd8-ar7kmF-ar79ug-ozpsiq-c12bp7-edXdKh-bzmLiA-fm4NXA-oq2qM8-pXiroQ-rbuoFw-8Pzhk7-8PznyJ-7Ya7E6-o5yUju-8fStup-o5p92g-juLGNi-nyqHw2-oMC3cJ-py7hEo-FhFVo3-m2xG6B-m2x5Pe-bminP9-p7a6Hn-a7SwxG-p1prat-og5WXJ-pCwyEr-qiBEjc-m2vLek-p1njvW-ogUc6x-8EjaWH-prc1vz-e7nkL8-jRWJE6-bgEUwT-oo1EPS-9voDrj-aXYsCc-maAKrn-b5aing-r9PTes) by [Adriano BIDOLI](https://www.flickr.com/photos/adriano-1973/) is licensed under [CC BY-NC-CD 2.0](https://creativecommons.org/licenses/by-nc-nd/2.0/)
diff --git a/css/main.css b/css/main.css
@@ -1,9 +1,41 @@
-h1 {
+html { 
+  background: url(../images/background.jpg) no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+body {
   font-family: "Open Sans", sans-serif;
+  color: #FFF;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: 0;
+}
+
+h1 {
   font-size: 48px;
   font-weight: normal;
   margin: 10px;
+}
+#content {
+   position: absolute;
   text-align: center;
+  background-color: rgba(0, 0, 0, 0.4);
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  margin: 0;
+}
+#avatar img {
+  height: 180px;
+  border-radius: 100%;
+  border: 3px solid white;
+  margin-top:10px;
 }
 #navigation ul{
   text-align: center;
@@ -14,21 +46,21 @@ h1 {
   list-style: none;
   display: inline-block;
   border-radius: 100%;
-  border: 2px solid #000;
+  border: 1px solid #FFF;
   height:50px;
   width: 50px;
   margin: 8px;
 }
 #navigation ul li:hover {
-  color: #000;
+  color: #FFF;
   text-decoration: none;
   -webkit-transition: 500ms;
   -moz-transition: 500ms;
   transition: 500ms;
   background-color: rgba(0, 0, 0, 0.25);
 }
 #navigation ul li a {
-  color: #000;
+  color: #FFF;
 }
 #navigation ul li a i {
   padding: 9px;
diff --git a/images/background.jpg b/images/background.jpg
diff --git a/index.html b/index.html
@@ -19,8 +19,10 @@
     <title>Matthew Warman - warman.io</title>
   </head>
   <body>
-    <div>
+    <div id="content">
+      <div id="avatar"><img src="https://avatars2.githubusercontent.com/u/7236500"/></div>
       <h1>Matthew Warman</h1>
+      <h3>Technical Swiss Army Knife</h3>
       <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
