Montana-Code-School · brigitta-lee · Mar 26, 2017 · Mar 29, 2017 · Apr 9, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/About.html b/About.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Brigitta's Site</title>
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+    <link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Roboto" rel="stylesheet">
+  </head>
+  <body>
+    <main>
+    <!-- This is the heading -->
+    <div class="topnav" id="myTopnav">
+      <a href="index.html">Home</a>
+      <a href="#timeline">Timeline</a>
+      <a href="About.html">About</a>
+    </div>
+      <!-- This following is a section with bio info and a photo-->
+    <div id="middlebox">
+      <div class="boxStyle">
+      <h2>A Little About Me</h2>
+      <p>I grew up in Missoula, left for a number of years, but now have moved back to town.
+      I decided to do the Montana Code Camp because higher education, the sector in which I had been working,
+      is increasingly being transformed by new web technologies and the use of other kinds of software.
+      I wanted to learn more about it so that I might find new ways of applying it in teaching and research.</p>
+
+      <p>Having made the decision to move back to Missoula, I also knew I needed to be more flexible in looking
+     for jobs outside of education. I heard that Missoula's tech scene is growing, so given my interests, I
+     thought it would be good to develop some technical proficiency.</p>
+    </div>
+  </div>
+
+    <!-- The following is a section with a list -->
+    <div id="bottombox">
+      <div class="boxStyle">
+        <h3>Here is a list of some things I like in Missoula (in no particular order):</h3>
+        <ul>
+          <li>Black Coffee Roasting Company</li>
+          <li>University of Montana</li>
+          <li>Bearcussions Studio</li>
+        </ul>
+        <button class="button"><a href="www.linkedin.com/in/brigittalee">Click here for my LinkedIn Profile</a></button>
+      </div>
+    </div>
+
+  </main>
+  </body>
+  </html>
diff --git a/README.md b/README.md
@@ -1,51 +1,37 @@
-# Our First Demo Site
+## Welcome to GitHub Pages
 
-This site serves as a simple introduction to HTML, CSS, and you can feel free to use it as a starting point for your simple HTML, CSS, and JS websites. Make the site your introduction, fill it
-with pictures, facts, a bio, etc.
+You can use the [editor on GitHub](https://github.com/AcademicPilot/test-website/edit/master/README.md) to maintain and preview the content for your website in Markdown files.
 
----
+Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files.
 
-## Standards
+### Markdown
 
-### File Structure
+Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for
 
-You will always want to keep all of your files organized properly. I would recommend you follow this structure while we work on basic projects. You can feel free to name the files and the project root as whatever you would like, but keep this structure:
+```markdown
+Syntax highlighted code block
 
-```
-My-Project-Folder (folder)
-
-  img (folder)
-    myImage.jpg
+# Header 1
+## Header 2
+### Header 3
 
-  css (folder)
-    style.css
+- Bulleted
+- List
 
-  js (folder)
-    main.js
+1. Numbered
+2. List
 
-  index.html
+**Bold** and _Italic_ and `Code` text
 
+[Link](url) and ![Image](src)
 ```
 
-"My-Project-Folder" is considered **the root project folder**, which is a term you will see often (I.E Navigate to your project root).
-
-### Spaces vs Dashes
-
-Along with this, I would like to see you all use dashes in folder and filenames, in place of
-spaces. Spaces don't work as well when you are navigating using the command line. [You can find a great discussion about this over at Jeff Atwood's blog.](https://blog.codinghorror.com/of-spaces-underscores-and-dashes/)
-
-(You should bookmark this blog, he is a great blogger, and co-founder of [Stack Overflow](http://stackoverflow.com))
-
-### Previewing your Site
-
-You can preview your site by dragging the html file into your browser, or right-clicking on it and selecting "Open With Chrome".
+For more details see [GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/).
 
----
+### Jekyll Themes
 
-## Resources
+Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/AcademicPilot/test-website/settings). The name of this theme is saved in the Jekyll `_config.yml` configuration file.
 
-Some resources that will be helpful as you work on your introduction website.
+### Support or Contact
 
-* [W3Schools](https://www.w3schools.com)
-* [Stack Overflow](http://stackoverflow.com)
-* [CSS Tricks](https://css-tricks.com)
+Having trouble with Pages? Check out our [documentation](https://help.github.com/categories/github-pages-basics/) or [contact support](https://github.com/contact) and we’ll help you sort it out.
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,142 @@
-.myDiv{
-
+body {
+background-color: #5b9aa0;
+width: 100%;
+}
+
+main {
+  width: 100%;
+    text-align: center;
+}
+
+/* Add a black background color to the top navigation */
+.topnav {
+    background-color: #333;
+    overflow: hidden;
+}
+
+/* Style the links inside the navigation bar */
+.topnav a {
+    -webkit-transition: height 2s; /* Safari */
+    transition: height 2s;
+    float: left;
+    display: block;
+    color: #f2f2f2;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+/* Change the color of links on hover */
+.topnav a:hover {
+    height: 200px; 
+    background-color: #ddd;
+    color: black;
+}
+
+/* Add a color to the active/current link */
+.topnav a.active {
+    background-color: #4CAF50;
+    color: white;
+}
+
+h1 {
+  position: relative;
+  text-align: center;
+  font-family: 'Fascinate Inline', cursive;
+  font-size: 2.5em;
+
+}
+
+p {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.25em;
+  text-align:left;
+}
+
+p.center {
+  text-align: center;
+
+}
+
+h2 {
+  font-family: 'Fascinate Inline', cursive;
+  font-size: 1.75em;
+  text-align: center;
+
+}
+
+h3 {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.5em;
+  text-align: center;
+  font-weight: "strong";
+
+}
+
+ul {
+
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.25em;
+}
+
+li {
+
+font-family: 'Roboto', sans-serif;
+font-size:1em;
+text-align: left;
+}
+
+#header {
+  height: auto;
+  padding: 20px;
+ margin: auto;
+ width: 60%;
+}
+
+#middlebox {
+  margin: auto;
+  width: 80%;
+  height: auto;
+  padding: 20px;
+}
+
+#bottombox {
+  margin: auto;
+  width: 40%;
+  height: auto;
+  padding: 20px;
+
+}
+
+.boxStyle {
+  padding: 50px;
+  margin: 10px;
+  border: 10px;
+  border-style: groove;
+  border-color: #622569;
+  background-color: #d6d4e0;
+}
+
+.imgStyle {
+  margin: auto;
+  width: 70%;
+}
+
+.captionStyle {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1em;
+}
+
+.button {
+  background-color: #b8a9c9;
+  border: none;
+  color: #d6d4e0;
+  text-decoration-color: #622569;
+  display: inline-block;
+  text-align: center;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+
 }
diff --git a/img/IMG_0299_copy.jpg b/img/IMG_0299_copy.jpg
diff --git a/img/Peggy.jpg b/img/Peggy.jpg
diff --git a/index.html b/index.html
@@ -2,89 +2,25 @@
 <html>
   <head>
     <meta charset="UTF-8">
-    <title>My Site Title</title>
-
-    <!-- Below is a link to your stylesheet, which should be located within your css folder -->
+    <title>Brigitta's Site</title>
     <link rel="stylesheet" type="text/css" href="css/style.css" />
-
+    <link href="https://fonts.googleapis.com/css?family=Fascinate+Inline|Roboto" rel="stylesheet">
   </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
-
-          <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>
-
-        <!--
-          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>
-        </ul>
-
-        <!--
-          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>
+    <main>
+    <!-- This is the heading -->
+    <div class="topnav" id="myTopnav">
+      <a href="#home">Home</a>
+      <a href="#timeline">Timeline</a>
+      <a href="About.html">About</a>
+    </div>
+    <div id="header">
+      <div class="boxStyle">
+        <h1>Welcome to Brigitta's Page</h1>
+        <p class="center">I'm new to coding and this is my first website.</br></br>
+          <img class="imgStyle" src="img/IMG_0299_copy.jpg" alt="Image of my cat Nimr"/><figcaption class="captionStyle">My Cat Nimr</figcaption></p>
       </div>
     </div>
-
-    <!--
-      Below we link to a javascript file, located within our js folder
-
-      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>
+  </main>
   </body>
-</html>
+  </html>
diff --git a/js/main.js b/js/main.js
diff --git a/js/script.js b/js/script.js