HTML/CSS changes

pamelafox · Mar 30, 2014 · af343a1 · af343a1
1 parent b44c668
commit af343a1
Show file tree

Hide file tree

Showing 63 changed files with 14,918 additions and 2 deletions.
diff --git a/backbone/exercise_steps/step4/models.js b/backbone/exercise_steps/step4/models.js
@@ -18,7 +18,8 @@ var ChatMessage = Backbone.Model.extend({
 
 var ChatMessages = Backbone.Collection.extend({
     model: ChatMessage,
+    url: 'http://backchat-backend.appspot.com/messages',
     comparator: function(message) {
         return message.get('time');
     }
-});
+});
diff --git a/htmlcss-1day/css-boxmodel/exercise_descrip.html b/htmlcss-1day/css-boxmodel/exercise_descrip.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>CSS 2: Box Model Exercise</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
+    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="container">
+        <h1>CSS 2: Box Model Exercise</h1> 
+        <p>The goal is to create a webpage that looks like the screenshot below. Follow these steps:</p>
+        <ul>
+         <li>Copy <a href="../css-grouping/exercise_solution.html">this webpage</a> (the solution from the first exercise).
+         <li>Add appropriate margin, border, and padding to the text div.
+         <li>Add appropriate border to the image.
+         <li>Create a div for all of the page content and center that in the middle of the page.
+         <li>Add appropriate border and padding to that div.
+        </ul>
+        <p>
+         <img src="exercise_screenshot.png" style="border:1px solid black">
+        </p>
+
+   <button class="btn" onclick="showSolution();">Show Solution</button>
+
+   <div id="solution" style="display:none; margin-top: 20px;">
+   <a href="exercise_boxmodel_solution.html" target="_blank">View Solution in New Window</a>
+   </p>
+
+    <script>
+function showSolution() {
+  if (confirm('You surrrrre?')) {
+    document.getElementById('solution').style.display = 'block';
+    window.scrollTo(0, document.body.scrollHeight);
+  }
+}
+  	</script>
+   </div>
+ </body>
+</html>
diff --git a/htmlcss-1day/css-boxmodel/exercise_screenshot.png b/htmlcss-1day/css-boxmodel/exercise_screenshot.png
diff --git a/htmlcss-1day/css-boxmodel/exercise_solution.html b/htmlcss-1day/css-boxmodel/exercise_solution.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html>
+ <head>
+  <meta charset="utf-8">
+  <title>Fox</title>
+  <style>
+  #text {
+    width: 300px;
+    background-color: yellow;
+    height: 200px;
+    overflow: auto;
+    margin-top: 20px;
+    padding-left: 5px;
+    padding-right: 5px;
+    border: 6px dashed orange;
+  }
+
+  .important {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+
+  .picture {
+    width: 310px;
+    height: 100px;
+    border: 6px inset orange;
+  }
+
+  #main {
+    margin: auto;
+    width: 400px;
+    background-color: lightyellow;
+    border: 3px solid brown;
+    padding: 10px;
+  }
+  </style>
+ </head>
+ <body>
+<div id="main">
+<h1>Fox</h1>
+
+<img class="picture" src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Looking_Foxy.jpg/220px-Looking_Foxy.jpg">
+
+<div id="text">
+ <p>
+ <span class="important">Fox is a common name for many species of carnivorous mammals belonging to the Canidae family</span>. Foxes are small to medium-sized canids (slightly smaller than the median-sized domestic dog), characterized by possessing a long narrow snout, and a bushy tail (or brush).
+ </p>
+
+ <p>
+<span class="important">Members of about 37 species are referred to as foxes, of which only 12 species actually belong to the Vulpes genus of 'true foxes'</span>. By far the most common and widespread species of fox is the red fox (Vulpes vulpes), although various species are found on almost every continent. The presence of fox-like carnivores all over the globe has led to their appearance in both popular culture and folklore in many cultures around the world (see also Foxes in culture). The gray fox is one of only two canine species known to climb trees; the other is the raccoon dog.
+ </p>
+</div>
+
+</div>
+
+ </body>
+</html>