constructorlabs · HTLuff · Jun 3, 2018 · Jun 3, 2018 · Jun 4, 2018
diff --git a/index.html b/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Personal Portfolio</title>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
+  <link rel="stylesheet"
+        type="text/css"
+        href="myStylesheet.css" />
+  <link href="https://fonts.googleapis.com/css?family=Kalam:700|Lato:300" rel="stylesheet">
+</head>
+<!-- End of Header -->
+<!-- First Section -->
+<body>
+  <div class="container" id="header-section">
+    <div class="row">
+      <div class="col-lg-12">
+        <div class="" id="content">
+          <img id="profile-pic" src="https://bit.ly/2kMVfL4"></img>
+          <h1 id="name-title">Harry Luff</h1>
+          <h4 id="name-subtitle">Fullstack JavaScript Student</h4>
+          <hr>
+          <div class="social-links">
+            <a href="https://bit.ly/2Lj6DcU" target="_blank" class="social-links"><i class="fab fa-linkedin"></i>LinkedIn </a>
+          </div>
+          <div class="social-links">
+            <a href="https://bit.ly/2ss7PU3" target="_blank" class="social-links"><i class="fab fa-github-square"></i>GitHub </a>
+          </div>
+          <div class="social-links">
+            <a href="https://bit.ly/2sCnhwb" target="_blank" class="social-links"><i class="fab fa-codepen"></i>CodeWars </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- Second Section -->
+  <div class="container" id="second-section">
+    <div class="row">
+      <div class="col-lg-12">
+        <div id="welcome-message">
+          <h2>Hi, <span style="color: #0A0A33;">I'm Harry</span>. Nice to meet you.</h2>
+          <hr>
+          <p>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.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- Third Section -->
+  <div class="container" id="skills-section">
+    <div class="row">
+      <div class="col-lg-12">
+        <div id="my-skills-title">
+          <h2>Here are some skills I have & some that I'm working on</h2>
+          <hr>
+        </div>
+        <div class="col-lg-8" id="skill-progress-bars">
+          <div class="progress">
+            <div class="progress-bar" role="progressbar" style="width:45%" aria-valuenow="45" aria-valuemin="0" aria-valuemax="0">HTML</div>
+          </div>
+          <div class="progress">
+            <div class="progress-bar" role="progressbar" style="width:35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="0">CSS</div>
+          </div>
+          <div class="progress">
+            <div class="progress-bar" role="progressbar" style="width:25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="0">JavaScript</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<!-- Quotes Section -->
+  <div class="container" id="quotes-section">
+    <h2 id="coming-soon-notice">Quotes Section Coming Soon...</h2>
+    <!-- <div class="row" id="quote-cards">
+          <div class="card col-lg-4">
+            <div class="card-body">
+              <h5 class="card-title">Peter Jones</h5>
+              <h6 class="card-subtitle mb-2 text-muted">Former Dragon</h6>
+              <p class="card-text">Some quotes about Harry.</p>
+            </div>
+          </div>
+          <div class="card col-lg-4">
+            <div class="card-body">
+              <h5 class="card-title">Peter Jones</h5>
+              <h6 class="card-subtitle mb-2 text-muted">Former Dragon</h6>
+              <p class="card-text">Some quotes about Harry.</p>
+            </div>
+          </div>
+    </div> -->
+  </div>
+<!-- Footer Section -->
+<footer id="footer-section">
+  <div id="goodbye-message">
+    <p>Thank you for visiting!</p>
+  </div>
+</footer>
+</body>
+</html>
diff --git a/myStylesheet.css b/myStylesheet.css
@@ -0,0 +1,85 @@
+/* Global level */
+html {
+  height: 100%;
+}
+body {
+  background: #D8D5Ca;
+  background: linear-gradient(to bottom right, #F2F5EA, #FFF2F2)
+}
+/* Previous bg colors - F2F5EA FFF2F2 */
+/* First section */
+#content {
+  text-align: center;
+  padding-top: 15%;
+  width: 100%;
+  padding-bottom: 15%;
+  color: #0A0A33;
+}
+#profile-pic {
+  border-radius: 50%;
+}
+.social-links {
+  display: inline-block;
+  font-family: sans-serif;
+  color: #0A0A33;
+}
+#name-title {
+  font-family: 'Kalam', cursive;
+  font-size: 3.5em;
+  /* text-shadow: 0px 1px 2px #f8f8f8; */
+}
+#name-subtitle {
+  font-family: 'Lato', sans-serif;
+}
+hr {
+  width: 275px;
+  border-top: 1px solid #f8f8f8;
+  border-bottom: 1px solid rgba(0,0,0,0.2); /* border shadow */
+}
+/* Second section */
+#second-section {
+  width: 100%;
+  background-color: #FF7264;
+}
+#welcome-message {
+  text-align: center;
+  color: white;
+  padding-top: 15%;
+  padding-bottom: 15%;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+/* My Skills Section */
+#skills-section{
+  padding-top: 7.5%;
+  padding-bottom: 7.5%;
+  background-color: #63FFD4;
+  width: 100%;
+}
+#my-skills-title {
+  text-align: center;
+  padding-bottom: 3%;
+}
+.progress-bar {
+  background-color: #0A0A33;
+}
+/* Quotes Section */
+#quotes-section {
+  padding-top: 7.5%;
+  padding-bottom: 7.5%;
+  background-color: #FDDE97;
+  width: 100%;
+}
+#coming-soon-notice {
+  text-align: center;
+}
+/* Footer section */
+#footer-section {
+  background-color: #0A0A33;
+}
+#goodbye-message {
+  color: white;
+  text-align: center;
+  padding-top: 2%;
+  padding-bottom: 1%;
+}