constructorlabs · phoebedg · Jun 4, 2018
diff --git a/backgroundimg.jpg b/backgroundimg.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,50 @@
+.container {
+    font-family: 'Indie Flower', cursive;
+}
+
+li {
+    display: inline;
+    position: relative;
+    top: 10px;
+    padding: 20px;
+    align-content: end;
+    font-size: 20px;
+    color: #102542
+}
+
+h1 {
+    padding: 20px;
+    font-family: 'Permanent Marker', cursive;
+    font-size: 75px;
+    color: #102542
+}
+
+.profilephoto {
+    width: 300px;
+    margin: 20px;
+    position: relative;
+    bottom: 10px;
+/* --------------------- Below is temporary - until I sort grid --------------------- */
+    left: 275px;
+}
+
+.profileborder {
+    border-color: white;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+}
+
+p {
+    padding: 20px;
+    font-size: 20px;
+    color: #102542
+}
+
+button {
+    margin: 20px;
+}
+
+.LI-profile-badge {
+    padding: 20px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Phoebe DG</title>
+    <link href="/Users/phoebedg/workspace/weekend-projects/personal-website/index.css" rel="stylesheet" type="text/css">
+    <script src="index.js"></script>
+    <script type="text/javascript" src="https://platform.linkedin.com/badges/js/profile.js" async defer></script>
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Permanent+Marker" rel="stylesheet">
+</head>
+
+<body background="backgroundimg.jpg">
+    <div class="container">
+        <nav>
+            <ul id="home">
+                <li><a href="#home">Home</a></li>
+                <li><a href="#about">About</a></li>
+                <li><a href="#work">Work</a></li>
+                <li><a href="#contact">Contact</a></li>
+            </ul>
+        </nav>
+
+        <h1>Web Developer in-training</h1>
+        <img class="profilephoto profileborder" src="/Users/phoebedg/workspace/weekend-projects/personal-website/profilephoto.jpg" alt="Best photo of myself I could find"/>
+        <p id="about">Hi, my name is Phoebe and I am currently on the
+            <a href="https://constructorlabs.com/" target="_blank">Constructor Labs</a> Full Stack Web Development Course.</p>
+        <hr>
+
+        <p id="work"></p>
+
+        <audio controls><source src="horse.mp3" type="audio/mpeg"></audio>
+
+        <button onclick="runCode()">Click Me</button>
+        <br>
+        <br>
+
+        <div id="contact" class="LI-profile-badge" data-version="v1" data-size="medium" data-locale="en_US" data-type="horizontal" data-theme="light"
+            data-vanity="phoebe-dg-29b795113">
+            <a class="LI-simple-link" href='https://uk.linkedin.com/in/phoebe-dg-29b795113?trk=profile-badge'>Phoebe DG</a>
+        </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,3 @@
+function runCode() {
+    alert("This website is under construction");
+}
diff --git a/profilephoto.jpg b/profilephoto.jpg