From 63ec9baf94f7ba385790ef4b6dc9604ba268543a Mon Sep 17 00:00:00 2001
From: Brandon Rodriguez <brodriguez8774@gmail.com>
Date: Sun, 2 Oct 2016 00:24:16 -0400
Subject: [PATCH] Visually set up ch4pt3

---
 .../chapter04-project03.scssc                 | Bin 3043 -> 16747 bytes
 chapter04/chapter04-project03.html            | 121 +++++++++++++++++-
 chapter04/css/chapter04-project03.css         |  40 ++++++
 chapter04/css/chapter04-project03.css.map     |   2 +-
 chapter04/css/sass/chapter04-project03.scss   |  92 +++++++++++++
 5 files changed, 251 insertions(+), 4 deletions(-)

diff --git a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc
index 8b47664ba0f262b9471af1c3d11536036ac4715f..8df2320d37cc43dca7243111ec2b8b19e7406c8e 100644
GIT binary patch
literal 16747
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
OrFXZom6mgIn)`q2lcl-<

delta 119
zcmaFe#Q0czf~1CNQmSQ&L6UJ=l0|Z=adJ|cse!41p+TC3iLseEP{KSl*)rME!eXMM
zIwR-COg65``a-Ncc_|9%nPsVY3dzOAljn08C<s^!W{O!0JMdYHItW<HIEY&DIh3U4
W7UU$Bq<Shb-kLnc>gHraM=Jn4Y9kE*

diff --git a/chapter04/chapter04-project03.html b/chapter04/chapter04-project03.html
index f1ca1c5..7f68d76 100644
--- a/chapter04/chapter04-project03.html
+++ b/chapter04/chapter04-project03.html
@@ -3,10 +3,125 @@
 <head lang="en">
    <meta charset="utf-8">
    <title>Chapter 4</title>
-   <link rel="stylesheet" href="reset.css" />
-   <link rel="stylesheet" href="chapter04-project03.css" />
+   <link rel="stylesheet" href="css/reset.css" />
+   <link rel="stylesheet" href="css/chapter04-project03.css" />
 </head>
 <body>
-
+    <form action="http://www.randyconnolly.com/tests/process.php" method="get">
+        <fieldset>
+            <legend>Photo Details</legend>
+            <table>
+                <tbody>
+                    <tr>
+                        <td colspan="6">
+                            <label for="title-text-input">Title</label><br>
+                            <input type="text" id="title-text-input" class="input-wide" placeholder="Greater Kalamazoo">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="5">
+                            <label for="description-textarea">Description</label><br>
+                            <textarea id="description-textarea" class="input-wide" rows="4" placeholder="Kalamazoo and Great Lakes."></textarea>
+                        </td>
+                        <td></td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <label for="continent-select">Continent</label><br>
+                            <select>
+                                <option>North America</option>
+                                <option></option>
+                            </select>
+                        </td>
+                        <td></td>
+                        <td></td>
+                        <td colspan="2">
+                            <fieldset>
+                                <label>Copyright?</label><br>
+                                <input type="radio" id="all-rights-radio">
+                                <label for="all-rights-radio">All Rights Reserved</label><br>
+                                <input type="radio" id="creative-commons-radio">
+                                <label for="creative-commons-radio">Creative Commons</label>
+                            </fieldset>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <label for="country-select">Country</label><br>
+                            <select>
+                                <option>United States</option>
+                                <option></option>
+                            </select>
+                        </td>
+                        <td></td>
+                        <td></td>
+                        <td colspan="2" rowspan="2">
+                            <fieldset>
+                                <label>Creative Commons Types</label><br>
+                                <input type="checkbox" id="attri-check-input">
+                                <label for="attr-check-input">Attribution</label><br>
+                                <input type="checkbox" id="noncommer-check-input">
+                                <label for="noncommer-check-input">Noncommercial</label><br>
+                                <input type="checkbox" id="no-derrivative-check-input">
+                                <label for="no-derrivative-check-input">No Derrivative Works</label><br>
+                                <input type="checkbox" id="share-check-input">
+                                <label for="share-check-input">Share Alike</label>
+                            </fieldset>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="4">
+                            <label for="city-text-input">City</label><br>
+                            <input type="text" id="city-text-input" class="input-wide" placeholder="Kalamazoo">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="6" class="table-backcolor">
+                            <label for="software-lic-checkbox">I accept the software license</label>
+                            <input type="checkbox" id="software-lic-checkbox">
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <label for="rate-number-input">Rate this photo:</label><br>
+                            <input type="number" id="rate-number-input" placeholder="5">
+                        </td>
+                        <td></td>
+                        <td></td>
+                        <td colspan="2" rowspan="2">
+                            <fieldset>
+                                <label for="taken-date-input">Date Taken:</label><br>
+                                <input type="date" id="taken-date-input"><br>
+                                <label for="taken-time-input">Time Taken:</label><br>
+                                <input type="time" id="taken-time-input">
+                            </fieldset>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <label for="collection-color-input">Color Collections:</label><br>
+                            <input type="color" id="collection-color-input" value="#0080ff">
+                        </td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                </tbody>
+                <tfoot>
+                    <tr class="table-backcolor">
+                        <td></td>
+                        <td></td>
+                        <td>
+                            <input type="submit" value="Submit">
+                        </td>
+                        <td>
+                            <input type="reset" value="Clear Form">
+                        </td>
+                        <td></td>
+                        <td></td>
+                    </tr>
+                </tfoot>
+            </table>
+        </fieldset>
+    </form>
 </body>
 </html>
\ No newline at end of file
diff --git a/chapter04/css/chapter04-project03.css b/chapter04/css/chapter04-project03.css
index 42404f3..453c567 100644
--- a/chapter04/css/chapter04-project03.css
+++ b/chapter04/css/chapter04-project03.css
@@ -5,4 +5,44 @@ body {
   font-family: "Lucida Sans", Verdana, Arial, sans-serif;
   font-size: 100%; }
 
+form {
+  max-width: 600px;
+  margin-top: 2%;
+  margin-right: auto;
+  margin-bottom: 2%;
+  margin-left: auto;
+  background-color: #fafcff; }
+
+legend {
+  width: 90%;
+  font-size: 1.5em;
+  text-align: center;
+  font-weight: bold;
+  background-color: #ebf4fb; }
+
+table {
+  width: 100%;
+  background-color: #fafcff;
+  border-collapse: collapse; }
+
+table td {
+  padding: 1%; }
+table .input-wide {
+  width: 90%; }
+table .input-long {
+  min-height: 100px; }
+table fieldset {
+  border: 1px solid #adcdf3; }
+table fieldset input {
+  margin-top: 2%;
+  margin-bottom: 2%; }
+table .table-backcolor {
+  background-color: #ebf4fb; }
+table tfoot input {
+  padding: 10px;
+  color: #ffffff;
+  background-color: #8c9cbf;
+  border: 1px solid #000000;
+  border-radius: 0.7em; }
+
 /*# sourceMappingURL=chapter04-project03.css.map */
diff --git a/chapter04/css/chapter04-project03.css.map b/chapter04/css/chapter04-project03.css.map
index 3460ed4..94ad92c 100644
--- a/chapter04/css/chapter04-project03.css.map
+++ b/chapter04/css/chapter04-project03.css.map
@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AAEA,uBAAwB;EACvB,WAAW,EAAE,0CAA0C;;AAExD,IAAK;EACF,WAAW,EAAE,yCAAyC;EACtD,SAAS,EAAE,IAAI",
+"mappings": "AAEA,uBAAwB;EACvB,WAAW,EAAE,0CAA0C;;AAExD,IAAK;EACF,WAAW,EAAE,yCAAyC;EACtD,SAAS,EAAE,IAAI;;AA0BlB,IAAK;EACD,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,EAAE;EACd,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,EAAE;EACjB,WAAW,EAAE,IAAI;EAEjB,gBAAgB,EArBG,OAAO;;AAwB9B,MAAO;EACH,KAAK,EAAE,GAAG;EAEV,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,IAAI;EAEjB,gBAAgB,EA9BD,OAAO;;AAiC1B,KAAM;EACF,KAAK,EAAE,IAAI;EAEX,gBAAgB,EArCG,OAAO;EAuC1B,eAAe,EAAE,QAAQ;;AAKzB,QAAG;EACC,OAAO,EAAE,EAAE;AAGf,iBAAY;EACR,KAAK,EAAE,GAAG;AAGd,iBAAY;EACR,UAAU,EAAE,KAAK;AAGrB,cAAS;EACL,MAAM,EAAE,iBAA2B;AAKnC,oBAAM;EACF,UAAU,EAAE,EAAE;EACd,aAAa,EAAE,EAAE;AAIzB,sBAAiB;EACb,gBAAgB,EApEL,OAAO;AAyElB,iBAAM;EACF,OAAO,EAAE,IAAI;EAEb,KAAK,EAhFH,OAAO;EAkFT,gBAAgB,EA5EP,OAAO;EA6EhB,MAAM,EAAE,iBAAsB;EAC9B,aAAa,EAAE,KAAK",
 "sources": ["sass/chapter04-project03.scss"],
 "names": [],
 "file": "chapter04-project03.css"
diff --git a/chapter04/css/sass/chapter04-project03.scss b/chapter04/css/sass/chapter04-project03.scss
index 9b6db78..ff7d120 100644
--- a/chapter04/css/sass/chapter04-project03.scss
+++ b/chapter04/css/sass/chapter04-project03.scss
@@ -9,4 +9,96 @@ body {
 }
 
 // End given css
+//
+//
+//
+// Declare variables.
 
+$color-white: #ffffff;
+$color-black: #000000;
+
+$color-blueBackground: #fafcff;
+$color-blueHeader: #ebf4fb;
+$color-blueBorder: #adcdf3;
+$color-purpleButton: #8c9cbf;
+
+
+// Actual CSS. Organization simplified due to simplicity of project.
+
+// DEBUGGING, REMOVE
+td {
+    //border: 1px solid #c0c0c0;
+}
+// END DEBUGGING
+
+form {
+    max-width: 600px;
+    margin-top: 2%;
+    margin-right: auto;
+    margin-bottom: 2%;
+    margin-left: auto;
+    
+    background-color: $color-blueBackground;
+}
+
+legend {
+    width: 90%;
+    
+    font-size: 1.5em;
+    text-align: center;
+    font-weight: bold;
+    
+    background-color: $color-blueHeader;
+}
+
+table {
+    width: 100%;
+
+    background-color: $color-blueBackground;
+    
+    border-collapse: collapse;
+}
+
+table {
+    
+    td {
+        padding: 1%;
+    }
+    
+    .input-wide {
+        width: 90%;
+    }
+    
+    .input-long {
+        min-height: 100px;
+    }
+    
+    fieldset {
+        border: 1px solid $color-blueBorder;
+    }
+    
+    fieldset {
+        
+        input {
+            margin-top: 2%;
+            margin-bottom: 2%;
+        }
+    }
+    
+    .table-backcolor {
+        background-color: $color-blueHeader;
+    }
+    
+    tfoot {
+        
+        input {
+            padding: 10px;
+            
+            color: $color-white;
+            
+            background-color: $color-purpleButton;
+            border: 1px solid $color-black;
+            border-radius: 0.7em;
+        }
+    }
+}
-- 
GitLab