diff --git a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc
index 29b17291a9627ef70c7a00983b848beb717c35fe..4c8d2becd716aa47f69327912d91359508dc040f 100644
Binary files a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc and b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc differ
diff --git a/chapter04/chapter04-project02.html b/chapter04/chapter04-project02.html
index 4a33b06389ae347f612c3caae7fdaf0f654b62ad..f0263498ac74fc325b80de42274d251fc22e51ca 100644
--- a/chapter04/chapter04-project02.html
+++ b/chapter04/chapter04-project02.html
@@ -3,10 +3,97 @@
<head lang="en">
<meta charset="utf-8">
<title>Chapter 4</title>
- <link rel="stylesheet" href="reset.css" />
- <link rel="stylesheet" href="chapter04-project02.css" />
+ <link rel="stylesheet" href="css/reset.css" />
+ <link rel="stylesheet" href="css/chapter04-project02.css" />
</head>
<body>
+ <form action="http://www.randyconnolly.com/tests/process.php" method="get">
+ <div class="page-top-div">
+ <input type="text" placeholder="Search titles">
+ <input type="submit" value="Search">
+ </div>
+ <div class="page-top-div">
+ <input list="top-form-actions">
+ <datalist id="top-form-actions">
+ <option value="Actions">
+ <option value="archive">
+ <option value="Delete">
+ </datalist>
+ </input>
+ <input type="submit" value="Apply">
+ <input list="top-form-genre">
+ <datalist id="top-form-genre">
+ <option value="Genre">
+ <option value="Baroque">
+ <option value="Renaissance">
+ <option value="Realism">
+ </datalist>
+ </input>
+ <input type="submit" value="Filter">
+ </div>
+ <div class="painting-div">
+ <table>
+ <thead>
+ <tr>
+ <th colspan="7" class="th-title">Paintings</th>
+ </tr>
+ <tr>
+ <th colspan="2"></th>
+ <th>Title</th>
+ <th>Artist</th>
+ <th>Year</th>
+ <th>Genre</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tr>
+ <td><input type="checkbox"></td>
+ <td><img src="images/05030.jpg"></td>
+ <td>Death of Marat</td>
+ <td>David, Jacques-Louis</td>
+ <td>1793</td>
+ <td>Romanticism</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><input type="checkbox"></td>
+ <td><img src="images/120010.jpg"></td>
+ <td>Portrait of Eleanor of Toledo</td>
+ <td>Bronzino, Agnolo</td>
+ <td>1545</td>
+ <td>Mannerism</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><input type="checkbox"></td>
+ <td><img src="images/07020.jpg"></td>
+ <td>Liberty Leading the People</td>
+ <td>Delacroix, Eugene</td>
+ <td>1830</td>
+ <td>Romanticism</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><input type="checkbox"></td>
+ <td><img src="images/13030.jpg"></td>
+ <td>Arrangement in Grey and Black</td>
+ <td>Whistler, James</td>
+ <td>1871</td>
+ <td>Realism</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td><input type="checkbox"></td>
+ <td><img src="images/06010.jpg"></td>
+ <td>Mademoiselle Caroline Riviere</td>
+ <td>Ingres, Jean-Auguste</td>
+ <td>1806</td>
+ <td>Neo-Classicism</td>
+ <td></td>
+ </tr>
+ </table>
+ </div>
+ </form>
</body>
</html>
\ No newline at end of file
diff --git a/chapter04/css/chapter04-project02.css b/chapter04/css/chapter04-project02.css
index d8835333a8c189e37c7baa84ca1a086ebcb18c9a..20746eb8f64f03d965d52e895fbe70281ce27184 100644
--- a/chapter04/css/chapter04-project02.css
+++ b/chapter04/css/chapter04-project02.css
@@ -5,4 +5,46 @@ body {
font-family: "Lucida Sans", Verdana, Arial, sans-serif;
font-size: 100%; }
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1%; }
+
+form {
+ width: 90%; }
+
+.page-top-div {
+ display: flex;
+ margin-bottom: 0.5%;
+ padding: 1%;
+ background-color: #ecf3fb;
+ border: 1px solid #cad4de; }
+
+.painting-div {
+ margin-top: 2%;
+ background: linear-gradient(#ffffff, #ecf3fb);
+ border: 1px solid #cad4de; }
+
+table {
+ margin-top: 1.5%;
+ margin-right: 1.5%;
+ margin-left: 1.5%;
+ width: 97%;
+ border-collapse: collapse; }
+
+table th {
+ background-color: #ecf3fb;
+ font-size: 1.5em;
+ text-align: left;
+ border-top: 1px solid #94bef0; }
+table .th-title {
+ width: 100%;
+ font-size: 2em;
+ text-align: center;
+ background-color: #94bef0; }
+table td {
+ padding: 1%;
+ border-top: 1px solid #94bef0; }
+
/*# sourceMappingURL=chapter04-project02.css.map */
diff --git a/chapter04/css/chapter04-project02.css.map b/chapter04/css/chapter04-project02.css.map
index 3aedc8a1eecd684625e0a2ffb17bb8f095cb8e8c..aae8439cfdcf4e2d2ae58c62817bac0719b51896 100644
--- a/chapter04/css/chapter04-project02.css.map
+++ b/chapter04/css/chapter04-project02.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;;AAmBlB,IAAK;EACD,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EAEnB,UAAU,EAAE,EAAE;;AAGlB,IAAK;EACD,KAAK,EAAE,GAAG;;AAGd,aAAc;EACV,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,EAAE;EAEX,gBAAgB,EAxBF,OAAO;EA0BrB,MAAM,EAAE,iBAA2B;;AAGvC,aAAc;EACV,UAAU,EAAE,EAAE;EAEd,UAAU,EAAE,iCAA+C;EAE3D,MAAM,EAAE,iBAA2B;;AAGvC,KAAM;EACF,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,IAAI;EAClB,WAAW,EAAE,IAAI;EACjB,KAAK,EAAE,GAAG;EAEV,eAAe,EAAE,QAAQ;;AAKzB,QAAG;EACC,gBAAgB,EAjDN,OAAO;EAmDjB,SAAS,EAAE,KAAK;EAChB,UAAU,EAAE,IAAI;EAEhB,UAAU,EAAE,iBAAwB;AAGxC,eAAU;EACN,KAAK,EAAE,IAAI;EAEX,SAAS,EAAE,GAAG;EACd,UAAU,EAAE,MAAM;EAElB,gBAAgB,EA9DR,OAAO;AAiEnB,QAAG;EACC,OAAO,EAAE,EAAE;EAEX,UAAU,EAAE,iBAAwB",
"sources": ["sass/chapter04-project02.scss"],
"names": [],
"file": "chapter04-project02.css"
diff --git a/chapter04/css/sass/chapter04-project02.scss b/chapter04/css/sass/chapter04-project02.scss
index 23c03bfef7be2a8a2005eeec628c39c9fb7a298c..d7067d2d9ba7b1ee970c60e96ba9c5e45f4ba384 100644
--- a/chapter04/css/sass/chapter04-project02.scss
+++ b/chapter04/css/sass/chapter04-project02.scss
@@ -8,4 +8,84 @@ body {
font-size: 100%;
}
-// End given css
\ No newline at end of file
+// End given css
+//
+//
+//
+// Declare variables.
+
+$color-white: #ffffff;
+$color-black: #000000;
+
+$color-blueLight: #ecf3fb;
+$color-blueMid: #94bef0;
+$color-blueBorder: #cad4de;
+
+
+// Actual CSS. Organization simplified due to simplicity of project.
+
+body {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ margin-top: 1%;
+}
+
+form {
+ width: 90%;
+}
+
+.page-top-div {
+ display: flex;
+ margin-bottom: 0.5%;
+ padding: 1%;
+
+ background-color: $color-blueLight;
+
+ border: 1px solid $color-blueBorder;
+}
+
+.painting-div {
+ margin-top: 2%;
+
+ background: linear-gradient($color-white, $color-blueLight);
+
+ border: 1px solid $color-blueBorder;
+}
+
+table {
+ margin-top: 1.5%;
+ margin-right: 1.5%;
+ margin-left: 1.5%;
+ width: 97%;
+
+ border-collapse: collapse;
+}
+
+table {
+
+ th {
+ background-color: $color-blueLight;
+
+ font-size: 1.5em;
+ text-align: left;
+
+ border-top: 1px solid $color-blueMid;
+ }
+
+ .th-title {
+ width: 100%;
+
+ font-size: 2em;
+ text-align: center;
+
+ background-color: $color-blueMid;
+ }
+
+ td {
+ padding: 1%;
+
+ border-top: 1px solid $color-blueMid;
+ }
+}