diff --git a/hw1/claudio_maggioni/3d_print_service.html b/hw1/claudio_maggioni/3d_print_service.html
index 2ce74a7..9a38f11 100644
--- a/hw1/claudio_maggioni/3d_print_service.html
+++ b/hw1/claudio_maggioni/3d_print_service.html
@@ -26,26 +26,29 @@
           <li><a href="index.html">Home</a></li>
           <li><a href="blog.html">Blog</a></li>
           <li><a href="3d_print_service.html">3D prints</a></li>
+          <li><a href="gallery.html">Gallery</a></li>
         </ul>
       </nav>
       <main>
         <h2>3D print work order form</h2>
         <form>
-          <fieldset>
-            <legend>Customer details</legend>
+          <!-- note that I am not using fieldset / legend here since the implementation of grid
+            in chrome is bugged: https://bugs.chromium.org/p/chromium/issues/detail?id=854565 -->
+          <div class="fieldset">
+            <h3>Customer details</h3>
             <label for="username">Username</label>
             <input type="text" name="username" maxlength="100" placeholder="Username" required>
             <label for="email">Email</label>
             <input type="email" name="email" maxlength="100" placeholder="Email" required>
             <label for="address">Address</label>
             <textarea name="address" maxlength="500" placeholder="Address" required></textarea>
-          </fieldset>
-          <fieldset>
-            <legend>Work order</legend>
+          </div>
+          <div class="fieldset">
+            <h3>Work order</h3>
             <label for="file">File to print (OBJ)</label>
             <input type="file" name="file" accept=".obj" required>
-            <label for="urgent">Urgency</label>
-            <input type="checkbox" name="urgency">
+            <label for="urgent">Urgent</label>
+            <input type="checkbox" name="urgent">
             <label for="copies"># of copies</label>
             <div class="range-10">
               <div>1</div>
@@ -58,9 +61,9 @@
               <div>8</div>
               <div>9</div>
               <div>10</div>
-              <input type="range" name="copies" min="1" max="10" step="1" list="tickmarks">
+              <input type="range" name="copies" min="1" max="10" step="1">
             </div>
-          </fieldset>
+          </div>
           <button type="submit">Send the order</button>
         </form>
       </main>
@@ -91,7 +94,7 @@
                                        content="CH" about="[_:publisher]">
           Switzerland</span>.
         </p>
-        <p>Page last updated on ####-##-##</p>
+        <p>Page last updated on 2019-09-22</p>
       </section>
     </footer>
   </body>
diff --git a/hw1/claudio_maggioni/blog.html b/hw1/claudio_maggioni/blog.html
index ecfdba5..a4a4e79 100644
--- a/hw1/claudio_maggioni/blog.html
+++ b/hw1/claudio_maggioni/blog.html
@@ -23,6 +23,7 @@
           <li><a href="index.html">Home</a></li>
           <li><a href="blog.html">Blog</a></li>
           <li><a href="3d_print_service.html">3D prints</a></li>
+          <li><a href="gallery.html">Gallery</a></li>
         </ul>
       </nav>
       <main>
@@ -308,7 +309,7 @@ exit $?</pre>
             the last one with systemd. Let's give a look to the service file:
             </p>
 
-            <figure>
+            <figure class="right">
               <figcaption>The <code>btkbd.service</code> file</figcaption>
               <pre>[Unit]
 Description=systemd Unit to automatically start a \
@@ -387,7 +388,7 @@ WantedBy=bluetooth.target</pre>
                                        content="CH" about="[_:publisher]">
           Switzerland</span>.
         </p>
-        <p>Page last updated on ####-##-##</p>
+        <p>Page last updated on 2019-09-22</p>
       </section>
     </footer>
   </body>
diff --git a/hw1/claudio_maggioni/css/form.css b/hw1/claudio_maggioni/css/form.css
index 61f42ed..7de7a84 100644
--- a/hw1/claudio_maggioni/css/form.css
+++ b/hw1/claudio_maggioni/css/form.css
@@ -8,42 +8,47 @@ input::placeholder, textarea::placeholder {
   color: #ccc;
 }
 
-fieldset {
+.fieldset {
   display: grid;
-  grid-template-columns: 7em 1fr;
+  grid-template-columns: 7rem 1fr;
   grid-gap: 1rem;
   border: none;
-  margin: .5rem 0;
+  margin: .5rem auto;
+  padding: .5rem;
   background: #eee;
   border-radius: .5rem;
+  max-width: 600px;
+}
+
+form {
+  text-align: center;
+}
+
+form .fieldset {
+  text-align: left;
 }
 
 @media screen and (max-width: 768px) {
-  fieldset {
+ .fieldset {
     grid-template-columns: 1fr;
     grid-gap: .5rem;
   }
 }
 
-fieldset legend {
-  position: relative;
-  top: 10%;
-  background: #333;
-  color: white;
-  padding: .25rem .5rem;
-  border-radius: .25rem;
+.fieldset h3 {
+  grid-column: 1 / 3;
 }
 
-fieldset label {
+.fieldset label {
   font-weight: bold;
   font-size: .9rem;
 }
 
-fieldset label::after {
+.fieldset label::after {
   content: ":";
 }
 
-fieldset input, fieldset textarea {
+.fieldset input, .fieldset textarea {
   padding: .5rem;
   font-family: 'Fira Sans', sans-serif;
   font-size: .85rem;
@@ -51,11 +56,11 @@ fieldset input, fieldset textarea {
   background: white;
 }
 
-fieldset textarea[name="address"] {
+.fieldset textarea[name="address"] {
   height: 4em;
 }
 
-fieldset input[type="checkbox"] {
+.fieldset input[type="checkbox"] {
   margin-left: 0;
   padding-left: 0;
   max-width: 1em;
diff --git a/hw1/claudio_maggioni/css/gallery.css b/hw1/claudio_maggioni/css/gallery.css
new file mode 100644
index 0000000..f6a2e6d
--- /dev/null
+++ b/hw1/claudio_maggioni/css/gallery.css
@@ -0,0 +1,28 @@
+/* vim: set ts=2 sw=2 et tw=80 */
+
+main {
+  display: grid;
+  grid-template-columns: repeat( auto-fill, minmax(200px, 1fr) );
+  grid-gap: .5rem;
+  align-items: center;
+  justify-items: stretch;
+}
+
+@media screen and (min-width: 768px) {
+  max-width: calc(100vw - 20rem);
+}
+
+main a {
+  text-align: center;
+}
+
+main h2, main h4 {
+  grid-column: 1 / -1;
+}
+
+main img {
+  max-width: 200px;
+  max-height: 200px;
+  min-width: 80px;
+  min-height: 80px;
+}
diff --git a/hw1/claudio_maggioni/css/main.css b/hw1/claudio_maggioni/css/main.css
index 9ff2db9..bc9332a 100644
--- a/hw1/claudio_maggioni/css/main.css
+++ b/hw1/claudio_maggioni/css/main.css
@@ -7,8 +7,9 @@ body {
   margin: 0;
   min-height: 100vh;
 
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content 1fr max-content;
 }
 
 header, footer {
@@ -18,35 +19,18 @@ header, footer {
   background: rgba(255,0,0,0.5);
 }
 
-@media screen and (min-width: 769px) {
-  .content {
-    display: flex;
-    flex-direction: row;
-  }
-
-  nav, aside {
-    flex: 0 1 10rem;
-  }
-
-  main {
-    flex: 1 2;
-    max-width: 80%;
-  }
+.content {
+  height: 100%;
+  display: grid;
+  grid-template-rows: 1fr;
+  grid-template-columns: 10rem 1fr 10rem;
 }
 
 @media screen and (max-width: 768px) {
   .content {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-columns: 1fr;
   }
-
-  main {
-    flex-grow: 1;
-  }
-}
-
-.content {
-  flex-grow: 1;
 }
 
 nav, aside {
@@ -165,7 +149,7 @@ main section {
 
 footer {
   display: flex;
-  align-itemss: center;
+  align-items: center;
   flex-direction: row;
 }
 
diff --git a/hw1/claudio_maggioni/gallery.html b/hw1/claudio_maggioni/gallery.html
new file mode 100644
index 0000000..ea7e687
--- /dev/null
+++ b/hw1/claudio_maggioni/gallery.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+
+<!-- vim: set ts=2 sw=2 et tw=120: -->
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>maggicl - Atelier INF (gallery)</title>
+    <meta name="author" content="Claudio Maggioni (maggicl@usi.ch)">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
+          rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Fira+Mono&display=swap"
+          rel="stylesheet">
+    <link href="css/main.css" rel="stylesheet">
+    <link href="css/gallery.css" rel="stylesheet">
+  </head>
+  <body>
+    <header>
+      <h1><code>maggicl</code> - Atelier INF</h1>
+    </header>
+    <div class="content">
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="blog.html">Blog</a></li>
+          <li><a href="3d_print_service.html">3D prints</a></li>
+          <li><a href="gallery.html">Gallery</a></li>
+        </ul>
+      </nav>
+      <main>
+        <h2>Gallery</h2>
+        <h4>Images from <a href="https://sbb.ch">sbb.ch</a> and
+          <a href="https://commons.wikimedia.org">Wikimedia commons</a></h4>
+        <a href="img/gallery/astoro.jpg">
+          <img src="img/gallery/astoro.jpg" alt="astoro">
+        </a>
+        <a href="img/gallery/giruno.jpg">
+          <img src="img/gallery/giruno.jpg" alt="giruno">
+        </a>
+        <a href="img/gallery/flirt.jpg">
+          <img src="img/gallery/flirt.jpg" alt="flirt">
+        </a>
+        <a href="img/gallery/dstock.jpg">
+          <img src="img/gallery/dstock.jpg" alt="dstock">
+        </a>
+        <a href="img/gallery/astoro2.jpg">
+          <img src="img/gallery/astoro2.jpg" alt="giruno2">
+        </a>
+        <a href="img/gallery/regio.jpg">
+          <img src="img/gallery/regio.jpg" alt="regio">
+        </a>
+        <a href="img/gallery/dtz.jpg">
+          <img src="img/gallery/dtz.jpg" alt="dtz">
+        </a>
+        <a href="img/gallery/domino.jpg">
+          <img src="img/gallery/domino.jpg" alt="domino">
+        </a>
+      </main>
+      <aside>
+        <ul>
+          <li><a href="https://reddit.com/u/Praticamentetilde">
+              <i class="fa fa-reddit" aria-hidden="true"></i> Praticamentetilde
+            </a></li>
+        </ul>
+      </aside>
+    </div>
+    <footer xmlns:dct="http://purl.org/dc/terms/"
+            xmlns:vcard="http://www.w3.org/2001/vcard-rdf/3.0#">
+      <a rel="license"
+         href="http://creativecommons.org/publicdodiv/zero/1.0/">
+        <img width="88" height="31"
+                        src="http://i.creativecommons.org/p/zero/1.0/88x31.png"
+                        alt="CC0" />
+      </a>
+      <section>
+        <p>To the extent possible under law,
+        <span resource="[_:publisher]" rel="dct:publisher">
+          <span property="dct:title">Claudio Maggioni</span></span>
+        has waived all copyright and related or neighboring rights to
+        <span property="dct:title">SA3 AS1 Website</span>.
+        This work is published from:
+        <span property="vcard:Country" datatype="dct:ISO3166"
+                                       content="CH" about="[_:publisher]">
+          Switzerland</span>.
+        </p>
+        <p>Page last updated on 2019-09-22</p>
+      </section>
+    </footer>
+  </body>
+</html>
diff --git a/hw1/claudio_maggioni/img/gallery/astoro.jpg b/hw1/claudio_maggioni/img/gallery/astoro.jpg
new file mode 100644
index 0000000..d466b86
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/astoro.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/astoro2.jpg b/hw1/claudio_maggioni/img/gallery/astoro2.jpg
new file mode 100644
index 0000000..5c6f700
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/astoro2.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/domino.jpg b/hw1/claudio_maggioni/img/gallery/domino.jpg
new file mode 100644
index 0000000..ff1d47f
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/domino.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/dstock.jpg b/hw1/claudio_maggioni/img/gallery/dstock.jpg
new file mode 100644
index 0000000..2bae53d
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/dstock.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/dtz.jpg b/hw1/claudio_maggioni/img/gallery/dtz.jpg
new file mode 100644
index 0000000..bd06836
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/dtz.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/flirt.jpg b/hw1/claudio_maggioni/img/gallery/flirt.jpg
new file mode 100644
index 0000000..1f5c940
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/flirt.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/giruno.jpg b/hw1/claudio_maggioni/img/gallery/giruno.jpg
new file mode 100644
index 0000000..1d20c30
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/giruno.jpg differ
diff --git a/hw1/claudio_maggioni/img/gallery/regio.jpg b/hw1/claudio_maggioni/img/gallery/regio.jpg
new file mode 100644
index 0000000..ed74f15
Binary files /dev/null and b/hw1/claudio_maggioni/img/gallery/regio.jpg differ
diff --git a/hw1/claudio_maggioni/index.html b/hw1/claudio_maggioni/index.html
index 7ab0dc9..d20ebf0 100644
--- a/hw1/claudio_maggioni/index.html
+++ b/hw1/claudio_maggioni/index.html
@@ -25,6 +25,7 @@
           <li><a href="index.html">Home</a></li>
           <li><a href="blog.html">Blog</a></li>
           <li><a href="3d_print_service.html">3D prints</a></li>
+          <li><a href="gallery.html">Gallery</a></li>
         </ul>
       </nav>
       <main>
@@ -102,7 +103,7 @@
                                        content="CH" about="[_:publisher]">
           Switzerland</span>.
         </p>
-        <p>Page last updated on ####-##-##</p>
+        <p>Page last updated on 2019-09-22</p>
       </section>
     </footer>
   </body>