From 52fdfc1bdb71a464a3d938e288d4311144e59ed5 Mon Sep 17 00:00:00 2001 From: Brandon Rodriguez <brodriguez8774@gmail.com> Date: Sat, 1 Oct 2016 22:23:57 -0400 Subject: [PATCH] Create most of ch4pt2. At least visually, it looks nearly identical --- .../chapter04-project02.scssc | Bin 3041 -> 16037 bytes chapter04/chapter04-project02.html | 91 +++++++++++++++++- chapter04/css/chapter04-project02.css | 42 ++++++++ chapter04/css/chapter04-project02.css.map | 2 +- chapter04/css/sass/chapter04-project02.scss | 82 +++++++++++++++- 5 files changed, 213 insertions(+), 4 deletions(-) diff --git a/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc b/chapter04/.sass-cache/bc09dc3f807ea0746b92f31c499ba8070e402fc5/chapter04-project02.scssc index 29b17291a9627ef70c7a00983b848beb717c35fe..4c8d2becd716aa47f69327912d91359508dc040f 100644 GIT binary patch literal 16037 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 P8tp|Ut#rARWP!f`ik}Q6 delta 118 zcmZ2l`%rv>lzLL4ftf{WTB1>^k%384a!Qhsk)fqQs)3<}fw@6ys%4^is*zb@@<c~< zM$V0yY+Qm8`dSLEc_|9%nPsVY3dzOAljn08C<s^!W{O!0JMdYHItW<HIEY&DIh3U4 W7UU$Bq<Shb-k7}J;>P40J4*oinj*IV diff --git a/chapter04/chapter04-project02.html b/chapter04/chapter04-project02.html index 4a33b06..f026349 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 d883533..20746eb 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 3aedc8a..aae8439 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 23c03bf..d7067d2 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; + } +} -- GitLab