Montana-Code-School · MikeDMontana · Mar 28, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,155 @@
-.myDiv{
-
+@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);
+
+a {
+  text-decoration:none !important;
+}
+
+body {
+   background-color:#303D45;
+  width:100%;
+}
+
+main {
+  margin:auto;
+  width:80%;
+  background-color:black;
+}
+h1, h2, h3, h4, h5, h6 {
+  text-transform: uppercase;
+  font-family:'Alfa Slab One', sans-serif;
+
+}
+
+nav {
+  position:fixed;
+  z-index:1000;
+  background-color:#2D6385;
+  width:100%;
+  height:100px;
+  color:white !important;
+  padding:15px 5% 15px 10%;
+}
+
+nav a {
+    color:white !important;
+}
+
+nav a:hover{
+  color:yellow !important;
+}
+
+nav ul{
+  float:right;
+  list-style-type:none;
+  margin-right:10%;
+  margin-top:20px;
+}
+
+nav ul li {
+  display:inline;
+  padding-right:20px;
+}
+
+#intro {
+  text-align:center;
+  font-size:larger;
+  padding:150px 20px 40px 20px;
+  width:90%;
+  margin:0px auto !important;
+  background-color:black;
+  background-image: url('http://www.planwallpaper.com/static/images/1916561.jpg');
+  background-position: left top;
+  background-repeat: no-repeat;
+  line-height:200%;
+
+}
+
+#intro h1 {
+  color:#303D45;
+  padding:10px 0;
+}
+
+.titleHolder {
+  height:60px;
+  background-color:yellow;
+  margin:20px auto;
+}
+
+.tagline {
+  color:yellow;
+  font-size:20px;
+  font-weight:600;
+}
+
+#about {
+  background-color: black;
+  padding:20px 40px 20px 40px;
+  text-align:center;
+  width:90%;
+  margin:0px auto !important;
+}
+
+#about h2 {
+  color:white;
+  letter-spacing: 2px;
+}
+
+.second {
+  padding:75px;
+  color:white !important;
+}
+
+.imageRow {
+  padding:0px 50px 0px 50px;
+  margin-top:20px;
+}
+
+.imageRow img {
+  border-radius:150px;
+}
+
+.imageRow figcaption {
+  height:40px;
+  background-color:yellow;
+  font-size:20px;
+  text-transform: uppercase;
+  width:70%;
+  margin: 10px auto 20px auto;
+  padding-top: 5px;
+}
+
+hr.hrStyle1 {
+	border-top: 4px dotted white;
+}
+
+#facts {
+  font-size:larger;
+  padding:20px 100px 20px 100px;
+  width:90%;
+  margin:0px auto !important;
+  background-color:#95ae9a;
+  background-image:url('img/blueWatercolor.jpg');
+}
+
+#facts figcaption {
+  height:40px;
+  text-align:center;
+  background-color:yellow;
+  font-size:20px;
+  text-transform: uppercase;
+  margin: 10px auto 20px auto;
+  padding-top: 5px;
+}
+
+footer {
+  background-color:black;
+  width:100%;
+  height:50px;
+  color:white !important;
+  padding:10px 100px 5px 100px;
+}
+
+footer img {
+  margin-left:10px;
+  width:30px;
 }
diff --git a/img/behanceIcon.png b/img/behanceIcon.png
diff --git a/img/blueWatercolor.jpg b/img/blueWatercolor.jpg
diff --git a/img/case.jpg b/img/case.jpg
diff --git a/img/dunken.jpg b/img/dunken.jpg
diff --git a/img/gitHub.png b/img/gitHub.png
diff --git a/img/grayTexture.jpg b/img/grayTexture.jpg
diff --git a/img/katea.jpg b/img/katea.jpg
diff --git a/img/linkedIn.png b/img/linkedIn.png
diff --git a/img/mikedreiling2015.jpg b/img/mikedreiling2015.jpg
diff --git a/img/nameLogo.png b/img/nameLogo.png
diff --git a/img/twitter.png b/img/twitter.png
diff --git a/index.html b/index.html
@@ -1,90 +1,98 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>My Site Title</title>
+<head>
+  <meta charset="UTF-8">
+  <!-- Latest compiled and minified CSS -->
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
-    <!-- Below is a link to your stylesheet, which should be located within your css folder -->
-    <link rel="stylesheet" type="text/css" href="css/style.css" />
+<!-- jQuery library -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
-  </head>
-  <body>
-
-    <!--
-      A DIV is a major structural element representing a division or a section in HTML,
-      allowing you to group together other elements within it. If you have a panel,
-      or a group of elements that pertain to one section of the page, wrap them in
-      a div like this.
-    -->
-    <div id="container">
-      <div class="myDiv">
-
-        <!--
-          An H1 serves as the main title for the page. It is not the site title, which you
-          will want to update in the head section of your HTML.
-
-          An H1 should reflect what THIS page is about, and it is very important to adhere to
-          this standard for search engines.
-        -->
-        <h1>My Page Title</h1>
-
-        <!--
-          An IMG tag will allow you to display an image, either on your computer, or from
-          a url.
-
-          The alt attribute is important to include on every image. It should describe what the
-          picture is, and allows those using screen readers, or those who don't allow images to
-          display, to understand your site better. Search engines will penalize you if you
-          exclude them as well.
-
-          You can also use the site, lorempixel, to display random images. It can be great for
-          prototyping your design
+<!-- Latest compiled JavaScript -->
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
-          <img src="http://lorempixel.com/400/200" alt="My random image"/>
-        -->
-        <img src="img/Peggy.jpg" alt="A picture of my grumpy cat, Peggy"/>
-
-        <!--
-          A P tag designates a paragraph of text. It will allow you to automatically indent sections,
-          and will format the text correctly for content.
-        -->
-        <p>
-          This is a paragraph. It will have line breaks if there is enough text. This is a fundamental element for creating page content.
-          Sometimes you will need <strong>bold</strong> text, and sometimes you will need <em>italicized</em> text.
-        </p>
-      </div>
-
-      <div class="myDiv">
-        <h2>My Second Most Important Heading</h2>
+<link rel="stylesheet" type="text/css" href="css/style.css">
+  <title>Mike Dreiling's Site</title>
+</head>
+<html>
+  <body>
+      <nav>
+        <img src="img/nameLogo.png" />
 
-        <!--
-          A UL tag designates an UNORDERED LIST. You can fill these with <li> elements, which
-          represent LIST ITEMS, which by default will be displayed with bullet points.
-        -->
         <ul>
-          <li>An unordered list item</li>
-          <li>An unordered list item</li>
-          <li>An unordered list item</li>
+          <li><a href="#intro">HOME</a></li>
+          <li>|</li>
+          <li><a href="#about">ABOUT</a></li>
+          <li>|</li>
+          <li><a href="#facts">FACTS</a></li>
         </ul>
+      </nav>
+
+     <div id="intro" class="row">
+       <div class="col-md-6">
+                  <img src="img/mikedreiling2015.jpg" />
+       </div>
+       <div class="second col-md-6">
+         <div class="titleHolder">
+           <h1>Hi, I'm Mike</h1></div>
+           <p class="tagline">DESIGNER • DEVELOPER WANNABE</p>
+           <p>I am a Montana Native who has spent the past decade as a graphic designer and marketing coordinator in Missoula, Montana.  I'm learning to become a developer through The Montana Code School. Thank you for visiting!</p>
+         </div>
+     </div>
+
+     <div id="about" class="row">
+       <div class="col-md-12">
+        <h2>My Family</h2>
+        <br>
+        <hr class="hrStyle1">
+        <br>
+       </div>
+       <div class="row imageRow">
+       <div class="col-md-4">
+                  <img src="img/katea.jpg" />
+                  <figcaption>Katea Dreiling</figcaption>
+       </div>
+       <div class="col-md-4">
+                  <img src="img/dunken.jpg" />
+                  <figcaption>Dunken Dreiling</figcaption>
+       </div>
+       <div class="col-md-4">
+                  <img src="img/case.jpg" />
+                  <figcaption>Case Dreiling</figcaption>
+       </div>
+     </div>
+     <br>
+     <hr class="hrStyle1">
+     <br>
+   </div>
+  </div>
 
-        <!--
-          An OL tag designates an ORDERED LIST. This is similar to a UL, but will be shown with
-          numbers to their left instead of bullet points.
-        -->
-        <ol>
-          <li>My first list item</li>
-          <li>My second list item</li>
-          <li>My third list item</li>
-        </ol>
-      </div>
-    </div>
+<div id="facts" class="row">
+<div class="col-md-6">
+  <h2>Some Facts About Me</h2>
+    <ul>
+      <li>My wife's name is Katea</li>
+      <li>I have two sons named Dunken and Case</li>
+      <li>I was born in Plains, Montana in 1982</li>
+      <li>I have lived in Montana, Missouri, and Washington</li>
+      <li>I Spend the winters skiing and summers camping</li>
+      <li>I love being creative, specifically designing, drawing, and cooking</li>
+    </ul>
+</div>
+<div class="col-md-6">
+    <img src="http://www.glaciermt.com/blog/wp-content/uploads/2013/11/LTterrain.jpg" width="100%">
+    <figcaption>Lost Trail, My Favorite Ski Area</figcaption>
+  </div>
+</div>
 
-    <!--
-      Below we link to a javascript file, located within our js folder
+<footer>
+  <div class="social">
+    <a href="https://twitter.com/designermiked" target="_blank"><img src="img/twitter.png" width="40px"></a>
+    <a href="https://www.linkedin.com/in/mikedreiling/" target="_blank"><img src="img/linkedIn.png" width="40px"></a>
+    <a href="https://github.com/MikeDMontana" target="_blank"><img src="img/gitHub.png" width="40px"></a>
+    <a href="https://www.behance.net/mdartscd89" target="_blank"><img src="img/behanceIcon.png" width="40px"></a>
+  </div>
+</footer>
 
-      It is important to include your scripts here at the bottom of your body, allowing the
-      entire page to load before calling any of your javascript methods. It also speeds up page load times.
-    -->
-    <script type="text/javascript" src="js/script.js"></script>
-  </body>
+   </body>
 </html>
diff --git a/style.css b/style.css