constructorlabs · oilyquack · Jun 2, 2018 · Jun 2, 2018 · Jun 2, 2018 · Jun 2, 2018
diff --git a/.DS_Store b/.DS_Store
diff --git a/assets/.DS_Store b/assets/.DS_Store
diff --git a/assets/images/.DS_Store b/assets/images/.DS_Store
diff --git a/assets/images/aditya-vyas-542857-unsplash.jpg b/assets/images/aditya-vyas-542857-unsplash.jpg
diff --git a/assets/images/desktop-background.jpg b/assets/images/desktop-background.jpg
diff --git a/assets/images/ferdinand-stohr-229736-unsplash.jpg b/assets/images/ferdinand-stohr-229736-unsplash.jpg
diff --git a/assets/images/github.png b/assets/images/github.png
diff --git a/assets/images/linkedin.png b/assets/images/linkedin.png
diff --git a/assets/images/profile-pic.png b/assets/images/profile-pic.png
diff --git a/assets/images/twitter.png b/assets/images/twitter.png
diff --git a/index.css b/index.css
@@ -0,0 +1,56 @@
+body{
+  background: url("assets/images/aditya-vyas-542857-unsplash.jpg") no-repeat center center fixed;
+  background-size: cover;
+  font-family: 'Ubuntu', sans-serif;
+}
+
+.intro-card{
+  margin: auto;
+  width: 50%;
+  text-align: center;
+  padding: 10px;
+  color: #F7F7F7;
+}
+
+h1{
+  font-weight: normal;
+}
+
+.profile-pic{
+  border-radius: 50%;
+  border: 5px solid #644439;
+}
+
+.row {
+  display: flex;
+}
+
+.column {
+  flex: 33.33%;
+  padding: 50px;
+  display: block;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.icon{
+  opacity: 0.6;
+  transition: opacity 1s ease-in-out;
+}
+
+.icon:hover{
+  opacity: 1;
+  transition: opacity 1s ease-in-out;
+}
+
+.footer{
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: #011C27;
+  opacity: 0.5;
+  color: #C0C1CD;
+  text-align: center;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="index.css">
+    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
+    <title>Ollie Crook</title>
+  </head>
+
+  <body>
+    <div class="intro-card">
+      <h1>Hi! My name is Ollie Crook.</h1>
+      <img class="profile-pic" src="assets/images/profile-pic.png"
+      width="200" height="200" alt="Ollie Crook">
+      <h2>Right now I'm learning how to work as a software engineer</h2>
+      <h4>Over the next few weeks I'll be learning JavaScript, React,
+      Ajax, SQL, Redux and more.</h4>
+      <p>Bare with me. It's a work in progress.</p>
+    </div>
+  </body>
+
+  <div class="row">
+
+    <div class="column">
+      <a href="https://twitter.com/oilyquack" target="_blank">
+        <img class="icon" src="assets/images/twitter.png" height="64" width="64">
+      </a>
+    </div>
+
+    <div class="column">
+      <a href="https://www.linkedin.com/in/ollie-crook/" target="_blank">
+        <img class="icon" src="assets/images/linkedin.png">
+      </a>
+    </div>
+
+    <div class="column">
+      <a href="https://github.com/oilyquack" target="_blank">
+        <img class="icon" src="assets/images/github.png">
+      </a>
+    </div>
+
+  </div>
+
+  <div class="footer">
+    <p>Background Photo by Aditya Vyas on Unsplash</p>
+    <p>Web Design &copy; Oliver Crook 2018</p>
+  </div>
+</html>