diff --git a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc index 4c8d2becd716aa47f69327912d91359508dc040f..1f0b6924877c8f1857458c2db5e338e5cd962f5a 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 f0263498ac74fc325b80de42274d251fc22e51ca..0039bf1ef6dfcb464f7735f478ad384d34503f94 100644 --- a/chapter04/chapter04-project02.html +++ b/chapter04/chapter04-project02.html @@ -8,28 +8,24 @@ </head> <body> - <form action="http://www.randyconnolly.com/tests/process.php" method="get"> + <form action="http://www.randyconnolly.com/tests/process.php" method="post"> <div class="page-top-div"> - <input type="text" placeholder="Search titles"> + <input type="text" name="search" 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> + <select name="actions"> + <option value="0">Actions</option> + <option value="1">Archive</option> + <option value="2">Delete</option> + </select> <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> + <select name="filter"> + <option value="0">Genre</option> + <option value="1">Baroque</option> + <option value="2">Renaissance</option> + <option value="3">Realism</option> + </select> <input type="submit" value="Filter"> </div> <div class="painting-div"> @@ -48,49 +44,49 @@ </tr> </thead> <tr> - <td><input type="checkbox"></td> - <td><img src="images/05030.jpg"></td> - <td>Death of Marat</td> + <td><input type="checkbox" name="index[]" value="10"></td> + <td><img src="images/05030.jpg" alt="Is smol image. ...a drum or something?"></td> + <td class="title">Death of Marat</td> <td>David, Jacques-Louis</td> <td>1793</td> <td>Romanticism</td> - <td></td> + <td><button type="button"><img src="images/edit16.png" alt="Edit"><br><a href="#">Edit</a></button></td> </tr> <tr> - <td><input type="checkbox"></td> - <td><img src="images/120010.jpg"></td> - <td>Portrait of Eleanor of Toledo</td> + <td><input type="checkbox" name="index[]" value="20"></td> + <td><img src="images/120010.jpg" alt="Really small guy and his wife, maybe?"></td> + <td class="title">Portrait of Eleanor of Toledo</td> <td>Bronzino, Agnolo</td> <td>1545</td> <td>Mannerism</td> - <td></td> + <td><button type="button"><img src="images/edit16.png" alt="Edit"><br><a href="#">Edit</a></button></td> </tr> <tr> - <td><input type="checkbox"></td> - <td><img src="images/07020.jpg"></td> - <td>Liberty Leading the People</td> + <td><input type="checkbox" name="index[]" value="30"></td> + <td><img src="images/07020.jpg" alt="Uhh...maybe that popular washington picture? I'm guessing at this point"></td> + <td class="title">Liberty Leading the People</td> <td>Delacroix, Eugene</td> <td>1830</td> <td>Romanticism</td> - <td></td> + <td><button type="button"><img src="images/edit16.png" alt="Edit"><br><a href="#">Edit</a></button></td> </tr> <tr> - <td><input type="checkbox"></td> - <td><img src="images/13030.jpg"></td> - <td>Arrangement in Grey and Black</td> + <td><input type="checkbox" name="index[]" value="40"></td> + <td><img src="images/13030.jpg" alt="That black dress lady from the last assigment!"></td> + <td class="title">Arrangement in Grey and Black</td> <td>Whistler, James</td> <td>1871</td> <td>Realism</td> - <td></td> + <td><button type="button"><img src="images/edit16.png" alt="Edit"><br><a href="#">Edit</a></button></td> </tr> <tr> - <td><input type="checkbox"></td> - <td><img src="images/06010.jpg"></td> - <td>Mademoiselle Caroline Riviere</td> + <td><input type="checkbox" name="index[]" value="50"></td> + <td><img src="images/06010.jpg" alt="Wierd character lady from last assignment!"></td> + <td class="title">Mademoiselle Caroline Riviere</td> <td>Ingres, Jean-Auguste</td> <td>1806</td> <td>Neo-Classicism</td> - <td></td> + <td><button type="button"><img src="images/edit16.png" alt="Edit"><br><a href="#">Edit</a></button></td> </tr> </table> </div> diff --git a/chapter04/css/chapter04-project02.css b/chapter04/css/chapter04-project02.css index 20746eb8f64f03d965d52e895fbe70281ce27184..3fdf53e12b4e0b365e0246ba353ee7122911df0c 100644 --- a/chapter04/css/chapter04-project02.css +++ b/chapter04/css/chapter04-project02.css @@ -12,7 +12,8 @@ body { margin-top: 1%; } form { - width: 90%; } + width: 90%; + margin-bottom: 1.5%; } .page-top-div { display: flex; @@ -21,6 +22,11 @@ form { background-color: #ecf3fb; border: 1px solid #cad4de; } +.page-top-div select { + margin-right: 5px; } +.page-top-div input { + margin-right: 5px; } + .painting-div { margin-top: 2%; background: linear-gradient(#ffffff, #ecf3fb); @@ -45,6 +51,12 @@ table .th-title { background-color: #94bef0; } table td { padding: 1%; - border-top: 1px solid #94bef0; } + border-top: 1px solid #94bef0; + font-weight: bold; } +table .title { + font-style: italic; } +table button { + padding-right: 15px; + padding-left: 15px; } /*# sourceMappingURL=chapter04-project02.css.map */ diff --git a/chapter04/css/chapter04-project02.css.map b/chapter04/css/chapter04-project02.css.map index aae8439cfdcf4e2d2ae58c62817bac0719b51896..7635adcbd7226ebd482ea45c15eaac9e3c217fd9 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;;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", +"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;EACV,aAAa,EAAE,IAAI;;AAGvB,aAAc;EACV,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,IAAI;EACnB,OAAO,EAAE,EAAE;EAEX,gBAAgB,EAzBF,OAAO;EA2BrB,MAAM,EAAE,iBAA2B;;AAKnC,oBAAO;EACH,YAAY,EAAE,GAAG;AAGrB,mBAAM;EACF,YAAY,EAAE,GAAG;;AAIzB,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,EA7DN,OAAO;EA+DjB,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,EA1ER,OAAO;AA6EnB,QAAG;EACC,OAAO,EAAE,EAAE;EAEX,UAAU,EAAE,iBAAwB;EAEpC,WAAW,EAAE,IAAI;AAGrB,YAAO;EACH,UAAU,EAAE,MAAM;AAGtB,YAAO;EACH,aAAa,EAAE,IAAI;EACnB,YAAY,EAAE,IAAI", "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 d7067d2d9ba7b1ee970c60e96ba9c5e45f4ba384..a642a01cecc4f7287bb4e7a23cd10659c78040b9 100644 --- a/chapter04/css/sass/chapter04-project02.scss +++ b/chapter04/css/sass/chapter04-project02.scss @@ -34,6 +34,7 @@ body { form { width: 90%; + margin-bottom: 1.5%; } .page-top-div { @@ -46,6 +47,17 @@ form { border: 1px solid $color-blueBorder; } +.page-top-div { + + select { + margin-right: 5px; + } + + input { + margin-right: 5px; + } +} + .painting-div { margin-top: 2%; @@ -87,5 +99,18 @@ table { padding: 1%; border-top: 1px solid $color-blueMid; + + font-weight: bold; + } + + .title { + font-style: italic; + } + + button { + padding-right: 15px; + padding-left: 15px; + + } }