SEA-Design-Dev · KeriBrady · Mar 5, 2015 · Mar 5, 2015 · Mar 5, 2015 · Mar 5, 2015
diff --git a/.sass-cache/7c955074303cf28d294b2fce3b1ca78bfc6a2c40/_layout.scssc b/.sass-cache/7c955074303cf28d294b2fce3b1ca78bfc6a2c40/_layout.scssc
diff --git a/.sass-cache/7c955074303cf28d294b2fce3b1ca78bfc6a2c40/_manifest.scssc b/.sass-cache/7c955074303cf28d294b2fce3b1ca78bfc6a2c40/_manifest.scssc
diff --git a/.sass-cache/8cbe6110b96ed4f67c5162df40078c84a27ea51d/_manifest.scssc b/.sass-cache/8cbe6110b96ed4f67c5162df40078c84a27ea51d/_manifest.scssc
diff --git a/.sass-cache/8cbe6110b96ed4f67c5162df40078c84a27ea51d/_states.scssc b/.sass-cache/8cbe6110b96ed4f67c5162df40078c84a27ea51d/_states.scssc
diff --git a/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_base.scssc b/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_base.scssc
diff --git a/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_manifest.scssc b/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_manifest.scssc
diff --git a/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_reset.scssc b/.sass-cache/c70ab9f3361976df3261c455e5c52ba55c9a7711/_reset.scssc
diff --git a/.sass-cache/dd5c96f33259bb4bd4253dc4a58bde738867502f/_manifest.scssc b/.sass-cache/dd5c96f33259bb4bd4253dc4a58bde738867502f/_manifest.scssc
diff --git a/.sass-cache/dd5c96f33259bb4bd4253dc4a58bde738867502f/_modules.scssc b/.sass-cache/dd5c96f33259bb4bd4253dc4a58bde738867502f/_modules.scssc
diff --git a/.sass-cache/e06ed0e2dee3df070e1b6e748fcc507d75c65ebf/application.scssc b/.sass-cache/e06ed0e2dee3df070e1b6e748fcc507d75c65ebf/application.scssc
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+#HTML5 as a Platform
+
+This project was built to show form styling and validation best practices, as well as playable HTML5 video.
+
+We chose to theme our mini website with a pet adoption form and a video on how to adopt a pet.
diff --git a/adoptionform.html b/adoptionform.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html class="no-js">
+  <head>
+    <meta charset="utf-8">
+    <title>SLU Animal Shelter</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+     <link rel="stylesheet" href="css/application.css">
+    <link href='http://fonts.googleapis.com/css?family=Berkshire+Swash|Quicksand|Josefin+Slab' rel='stylesheet' type='text/css'>
+  </head>
+  <body>
+    <main>
+      <header class="mainHeader">
+      <h1 class="logoFont">SLU Animal Shelter</h1>
+      <nav class="floatRight">
+        <ul>
+          <li class="inlineBlock"><a class="navLinks"href="index.html">Home</a></li>
+          <li class="inlineBlock"><a class="navLinks"href="adoptionform.html"> | </a></li>
+          <li class="inlineBlock"><a class="navLinks"href="">Available Pets</a></li>
+        </ul>
+      </nav>
+    </header>
+      <section class="contentBox catBackground">
+        <h1 class='headerText'>Pet Adoption Form</h1>
+        <form>
+          <fieldset class="border" >
+            <legend>Adopter Information</legend>
+            <ul>
+              <li>
+                <label for="first-name">First Name <span class='red-alert'>*</span></label>
+                <input type="text" id="first-name" required="required">
+              </li>
+              <li>
+                <label for="last-name">Last Name <span class='red-alert'>*</span></label>
+                <input type="text" id="last-name" required="required">
+              </li>
+              <li>
+                <label for="age">Age <span class='red-alert'>*</span></label>
+                <input type="number" id="age" required="required">
+              </li>
+            </ul>
+          </fieldset>
+          <fieldset class="border">
+            <legend>Home Information</legend>
+            <ul>
+              <li>
+                <label for="rent-own">Rent or Own? <span class='red-alert'>*</span></label>
+                <select id="rent-own" required="required">
+                  <option value="">Select one...</option>
+                  <option value="rent">Rent</option>
+                  <option value="own">Own</option>
+                </select>
+              </li>
+            </li>
+              <label for="yard">Fenced Yard? <span class='red-alert'>*</span></label>
+              <select id="yard" required="required">
+                <option value="">Select one...</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </li>
+            <li>
+              <label for="pets">Other pets? <span class='red-alert'>*</span></label>
+              <select id="pets" required="required">
+                <option value="">Select one...</option>
+                <option value="no">No</option>
+                <option value="dogs">Yes, dog(s)</option>
+                <option value="cats">Yes, cat(s)</option>
+                <option value="both">Yes, dog(s) &amp; cat(s)</option>
+              </select>
+            </li>
+          </ul>
+          </fieldset>
+          <fieldset class="border">
+            <legend>Adoption Preferences</legend>
+            <ul>
+              <li>
+                <label for="type">Type <span>*</span></label>
+                <select id="type" required="required">
+                  <option value="">Select one...</option>
+                  <option value="any">Any</option>
+                  <option value="dog">Dog</option>
+                  <option value="cat">Cat</option>
+                  <option value="small-furry">Small &amp; furry</option>
+                </select>
+              </li>
+              <li>
+                <label for="breed">Breed</label>
+                <input type="text" id="breed">
+              </li>
+              <li>
+                <label for="age">Age</label>
+                <select id="age">
+                  <option>Any</option>
+                  <option>Baby</option>
+                  <option>Young</option>
+                  <option>Adult</option>
+                  <option>Senior</option>
+                </select>
+              </li>
+              <li>
+                <label for="gender">Gender</label>
+                <select id="gender">
+                  <option>Either</option>
+                  <option>Male</option>
+                  <option>Female</option>
+                </select>
+              </li>
+            </ul>
+          </fieldset>
+          <button type="submit">Find my pet!</button>
+        </form>
+      </section>
+      <footer class="contentBox grayBackground">
+        <p>511 Boren Ave N. Seattle, WA 98108</p>
+        <p>(206) 111-2222</p>
+      </footer>
+    </main>
+  </body>
+</html>
diff --git a/css/application.css b/css/application.css
diff --git a/css/application.css.map b/css/application.css.map
diff --git a/css/base.css b/css/base.css
@@ -0,0 +1,80 @@
+body {
+  margin: 0px auto;
+  font-family: 'Quicksand', sans-serif;
+}
+
+form {
+  width: 45%;
+  margin: 0px auto;
+  font-size: 1.1em;
+}
+
+legend {
+  font-size: 1.5em;
+}
+
+input {
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  height: 20px;
+  width: 220px;
+  padding: 5px 8px;
+  margin-top: 10px;
+  font-size: 1em;
+}
+
+label {
+  width: 150px;
+  margin-top: 10px;
+  display: inline-block;
+  float: left;
+}
+
+select {
+  border: 1px solid #aaa;
+  background-color: white;
+  border-radius:5px;
+  height: 30px;
+  width: 220px;
+  padding: 5px 8px;
+  margin-top: 10px;
+  font-size: 1rem;
+}
+
+button {
+  padding: 5px 8px;
+  border: 3px solid #616060;
+  background-color: #1f4894;
+  width: 100%;
+  height: 60px;
+  margin-top: 15px;
+  border-radius: 5px;
+  font-size: 1.2rem;
+}
+
+@media screen and (max-width: 690px) {
+
+  .floatRight {
+    float: none;
+  }
+
+  .contentBox {
+    padding: 0;
+  }
+
+  img {
+    width: 100%;
+  }
+
+  .bannerText {
+  position: static;
+  display: block;
+  color: #EEE;
+  font-size: 3em;
+  text-align: center;
+  color: #3333aa;
+  margin: 1em 0 1em 0;
+  }
+
+}
+