Montana-Code-School · jbrizbee · Mar 26, 2017 · Mar 29, 2017 · Mar 30, 2017
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -1,3 +1,36 @@
-.myDiv{
-
+body {
+  background-color: #C0C0C0;
+}
+
+h2 {
+  color: red;
+}
+
+.fam-img-border {
+  border-color: black;
+  border-width: 5px;
+  border-style: solid;
+  border-radius: 20px;
+}
+
+.th {
+  font-size: 20px;
+  font-family: sans-serif;
+}
+
+.label {
+  display: block;
+  padding-left: 15px;
+  text-indent: -15px;
+}
+
+.input {
+  width: 13px;
+  height: 13px;
+  padding: 0;
+  margin:0;
+  vertical-align: bottom;
+  position: relative;
+  top: -1px;
+  *overflow: hidden;
 }
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/LeeFamily.gif b/img/LeeFamily.gif
diff --git a/img/Peggy.jpg b/img/Peggy.jpg
diff --git a/img/freakonomics.jpg b/img/freakonomics.jpg
diff --git a/img/googlebirthday.gif b/img/googlebirthday.gif
diff --git a/img/radiolab.png b/img/radiolab.png
diff --git a/img/secular-buddhism.jpg b/img/secular-buddhism.jpg
diff --git a/img/tedradiohour.jpg b/img/tedradiohour.jpg
diff --git a/img/thisamericanlife.jpg b/img/thisamericanlife.jpg
diff --git a/img/youarenotsosmart.jpg b/img/youarenotsosmart.jpg
diff --git a/index.html b/index.html
@@ -1,90 +1,89 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="UTF-8">
-    <title>My Site Title</title>
+    <meta charset="UTF"-8>
 
-    <!-- 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" />
-
+
+    <title>john.lee website</title>
   </head>
   <body>
+    <center>
+      <h1>Hello <strike>World</strike> Fellow Coders</h1>
+      <h2>John Lee here...</h2>
+        <p></p>
+        <hr>
+        <h3> Never a dull moment at our house. I'm definitely outnumbered,
+           but life is a party! </h3>
+        <img class="fam-img-border" src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/LeeFamily.gif">
+        <hr>
+        <h2> Favorite Podcasts </h2>
+        <h3> App of Choice: STITCHER </h3>
+        <ul> <h4>Listening Stats</h4> </ul>
+          <li> Total Hours: 773 </li>
+          <li> Total Episodes: 5,515 </li>
 
-    <!--
-      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
+<div class"th">
+  <table style="width:100%">
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/tedradiohour.jpg"></th>
+      <th align="left">TED Radio Hour</th>
+    </tr>
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/thisamericanlife.jpg"></th>
+      <th align="left">This American Life</th>
+    </tr>
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/radiolab.png"></th>
+      <th align="left">Radiolab</th>
+    </tr>
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/youarenotsosmart.jpg"></th>
+      <th align="left">You Are Not So Smart</th>
+    </tr>
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/freakonomics.jpg"></th>
+      <th align="left">Freakonomics</th>
+    </tr>
+    <tr>
+      <th align="right"><img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/secular-buddhism.jpg"></th>
+      <th align="left">Secular Buddhism</th>
+    </tr>
+  </table>
+</div>
 
-          <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>
-      </div>
+  <h3>Have you listened to any of these podcasts before?</h3>
+  <form>
+    <div class="label" class="input">
+    <label><input type="checkbox" name="podcasts"> TED Radio Hour</label>
     </div>
+    <label><input type="checkbox" name="podcasts"> This American Life</label>
+    <label><input type="checkbox" name="podcasts"> Radiolab</label>
+    <label><input type="checkbox" name="podcasts"> You Are Not So Smart</label>
+    <label><input type="checkbox" name="podcasts"> Freakonomics</label>
+    <label><input type="checkbox" name="podcasts"> Secular Buddhism</label>
+  <button type="submit">Submit</button>
+  </form>
+
+  <h3>What is your favorite podcast that I should try out?</h3>
+  <input type="text" placeholder="recommendation">
+  <button type="submit">Submit</button>
 
-    <!--
-      Below we link to a javascript file, located within our js folder
+        <hr>
+        <h2> Favorite Quotes </h2>
+          <ul align="left">
+            <li> Mark Twain may have said it best: "It is many times easier to fool
+               a person than to convince them that they have been fooled."</li>
+            <li> Faith is simply the attitude of being open to whatever may be,
+              and not attaching to an idea or belief of how we want or expect things to be.</li>
+            <li> Given the choice, people will choose confirmation over information. </li>
+            <li> No matter what you believe, you might be wrong. </li>
+          </ul>
+        <hr>
+        <h2> Fun fact about myself </h2>
+        <p> I share the same birthday as Google </p>
+        <img src="/Users/john-lee/Code/Projects/Simple-HTML-Site/img/googlebirthday.gif">
 
-      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>
+    </center>
   </body>
 </html>
diff --git a/original-index.html b/original-index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<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 -->
+    <link rel="stylesheet" type="text/css" href="css/style.css" />
+
+  </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>
+      </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>
+  </body>
+</html>
diff --git a/style.css b/style.css