diff --git a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc
index 8b47664ba0f262b9471af1c3d11536036ac4715f..8df2320d37cc43dca7243111ec2b8b19e7406c8e 100644
Binary files a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc and b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project03.scssc differ
diff --git a/chapter04/chapter04-project03.html b/chapter04/chapter04-project03.html
index f1ca1c593236052546602f11c14ba6a22f78a4db..7f68d76a5373ffeff6ed8e078ab875cdbd46f490 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 42404f3c62bd081e199f63779766e84b6003e37a..453c5673312fb15a260094b72e2e7618173d528d 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 3460ed45a16053a09d3b850bcf2f24a3baa85e5f..94ad92c3e3984d3311bfe977f6f07b0a5ea27838 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 9b6db7831c250a01abace59cb90945e50e2a8e69..ff7d120f34cd5a4fc0cb2b5ad06659e32e6440dc 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;
+ }
+ }
+}