WIP

andrewetobin · Jul 12, 2018 · 3062327 · 3062327
1 parent 69d3cdc
commit 3062327
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 6 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -39,7 +39,7 @@ a:hover {
 .content-wrap {
   max-width: 950px;
   margin: 0 auto;
-  padding: 50px;
+  padding: 60px 50px;
   overflow: auto;
 }
 .col-narrow {
@@ -62,6 +62,9 @@ header, footer {
   color: #FDF5E6;
 }
 /* header */
+header {
+  padding-top: 50px;
+}
 .profile-img {
   border-radius: 50%;
 }
@@ -79,6 +82,23 @@ footer {
   display: inline-block;
 }
 
+/* Navigation
+--------------------------------*/
+nav {
+  text-align: center;
+  background: white;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+nav a {
+  display: inline-block;
+  padding: 15px 20px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
 /* Work Experience
 --------------------------------*/
 
@@ -99,6 +119,9 @@ h3 ~ p{
 .education {
   background: #F2FBED;
 }
+p + h3 {
+  margin-top: 30px;
+}
 /* Hobbies
 --------------------------------*/
 .hobbies {

diff --git a/index.html b/index.html
@@ -7,7 +7,15 @@
     <link rel="stylesheet" href="css/styles.css">
 </head>
 <body>
-    <header>
+  <!-- // Intro -->
+    <header id="about">
+      <nav>
+        <a href="#about">About</a>
+        <a href="#work">Work Experience</a>
+        <a href="#education">Education</a>
+        <a href="#hobbies">Hobbies</a>
+        <a href="#contact">Contact</a>
+      </nav>
       <div class="content-wrap">
         <img class = "profile-img col-narrow" src="images/head_shot.png" alt="Andrew Tobin">
         <div class="col-wide">
@@ -20,7 +28,7 @@ <h2>Software Developer | Counselor | Musician</h2>
 
     <main>
       <!-- // Work Experience -->
-        <section class = "work">
+        <section id = "work" class = "work">
           <div class="content-wrap">
             <h2>Work Experience</h2>
 
@@ -75,7 +83,7 @@ <h3>Residence Life Coordinator</h3>
         </section>
 
         <!-- // Education -->
-        <section class = "education">
+        <section id="education" class = "education">
           <div class="content-wrap">
             <h2>Education</h2>
 
@@ -98,7 +106,7 @@ <h3>University of Oklahoma - Norman, 1996 - 1998</h3>
         </section>
 
         <!-- // Hobbies -->
-        <section class = "hobbies">
+        <section id="hobbies" class = "hobbies">
           <div class="content-wrap">
             <h2>Hobbies</h2>
             <h3>Running</h3>
@@ -118,7 +126,7 @@ <h3>Saxophone</h3>
     </main>
 
     <!-- // Footer -->
-    <footer>
+    <footer id="contact">
       <div class="content-wrap">
         <h2>Let's Keep in Touch!</h2>
         <div class = "contact-info">