Finished the berries task

guscan · Oct 3, 2019 · 21fb050bcce49a936a65894714a4a352a49156c0 · 21fb050
1 parent 429300a
commit 21fb050bcce49a936a65894714a4a352a49156c0
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 0 deletions.
diff --git a/exercises/04_css/02_layout/index.js b/exercises/04_css/02_layout/index.js
@@ -15,6 +15,7 @@ router.get('/boxmodel', async ctx => await ctx.render('boxmodel'))
 router.get('/columns', async ctx => await ctx.render('columns'))
 router.get('/floating', async ctx => await ctx.render('floating'))
 router.get('/menu', async ctx => await ctx.render('menu'))
+router.get('/berries', async ctx => await ctx.render('Berries'))
 
 app.use(router.routes())
 module.exports = app.listen(port, () => console.log(`listening on port ${port}`))
diff --git a/exercises/04_css/02_layout/public/css/berries.css b/exercises/04_css/02_layout/public/css/berries.css
@@ -0,0 +1,83 @@
+.Title {
+    font-size: 8em;
+
+    text-align: center;
+    margin-bottom: 0%
+}
+.Image {
+    border: 3px solid lightgrey;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 5mm; 
+}
+p {
+    text-align: center;
+    font-family: serif;
+}
+table {
+    border: 1px black solid;
+    border-right: 0px;
+    border-left: 0px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2cm;
+    border-collapse: collapse;
+}
+.OneB{
+    font-size: 2.7em;
+    font-family: serif;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+    padding-right: 1em;
+    padding-left: 1em;
+    padding-top: 0.5em;
+    background-color: lightblue;
+}
+.OneS{
+    font-style: italic;
+    font-size: 1.3em;
+    background-color: lightblue;
+    border-bottom: 1px solid black;
+    padding-bottom: 1em;
+    padding-top: 0em;
+    margin-top:0px;
+}
+.TwoB{
+    font-size: 2.7em;
+    font-family: serif;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+    padding-right: 1em;
+    padding-left: 1em;
+    padding-top: 0.5em;
+    background-color: lightsalmon;
+}
+.TwoS{
+    font-style: italic;
+    font-size: 1.3em;
+    background-color: lightsalmon;
+    border-bottom: 1px solid black;
+    padding-bottom: 1em;
+    padding-top: 0em;
+    margin-top:0px;
+}
+.ThreeB{
+    font-size: 2.7em;
+    font-family: serif;
+    margin-bottom: 0px;
+    padding-bottom: 0px;
+    padding-right: 1em;
+    padding-left: 1em;
+    padding-top: 0.5em;
+    background-color: rgb(168, 85, 85);
+}
+.ThreeS{
+    font-style: italic;
+    font-size: 1.3em;
+    background-color: rgb(168, 85, 85);
+    border-bottom: 1px solid black;
+    padding-bottom: 1em;
+    padding-top: 0em;
+    margin-top:0px;
+}
diff --git a/exercises/04_css/02_layout/public/css/boxstyle.css b/exercises/04_css/02_layout/public/css/boxstyle.css
@@ -0,0 +1,25 @@
+p.one {
+    border: 1px solid black;
+    padding: 3em;
+    margin:  1em;
+    margin-bottom: 0em;
+}
+p.two {
+    border: 1px solid black;
+    margin: 5em;
+    margin-top: 0em;
+}
+p.three{
+    border-left: 3px solid black;
+    padding: 1em;
+    padding-top: 0em;
+    margin-top: 2em;
+    margin-bottom: 8em;
+    margin-left: 0em;
+    margin-right: 0em; 
+}
+p.four{
+    border: 5px dotted red;
+    border-radius: 1em;
+    margin: 5px;
+}
diff --git a/exercises/04_css/02_layout/views/Berries.html b/exercises/04_css/02_layout/views/Berries.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link href="css/berries.css" type="text/css" rel="stylesheet" />
+    </head>
+    <body>
+        <h1 class="Title">Berries</h1>
+        <img class="Image" alt="Image: Scott Bauer, USDA AR$, public domain" allign="middle" src="images/berries.png" width="200" />
+        <p><b>Image: Scott Bauer, USDA AR$, public domain</b></p>
+        <table>
+        <tr>
+        <th class="OneB">Blueberry</th>
+        </tr>
+        <tr>
+            <th class="OneS">Vaccinium corymbosum</th>
+        </tr>
+        <tr>
+            <th class="TwoB">Cloudberry</th>
+        </tr>
+        <tr>
+            <th class="TwoS">Rubus chamaemorus</th>
+        </tr>
+        <tr>
+            <th class="ThreeB">Lingonberry</th>
+        </tr>
+        <tr>
+            <th class="ThreeS">Vaccinium vitis-idaea</th>
+        </tr>
+        </table>
+    </body>
+</html>
diff --git a/exercises/04_css/02_layout/views/boxmodel.html b/exercises/04_css/02_layout/views/boxmodel.html
@@ -3,6 +3,7 @@
 <head>
     <title>Illustration of CSS box model</title>
     <meta charset="utf-8" />
+    <link href="css/boxstyle.css" type="text/css" rel="stylesheet" />
 </head>
 <body>