Finalise "swallow the key" illustration and layout

customize.dist/pages/register.js

@@ -21,13 +21,14 @@ define([
                 h('div.row.cp-page-title', h('h1', Msg.register_header)),
                 h('div.row.cp-register-det', [
                 h('div#data.hidden.col-md-6', [
-                    h('img.img-fluid', {
-                        src: '/customize/images/illustration-swallow-the-key.png?' + urlArgs
-                    }),
                     h('h2', Msg.register_notes_title),
                     Pages.setHTML(h('div.cp-register-notes'), Msg.register_notes)
                 ]),
-                h('div#userForm.form-group.hidden.col-md-6', [
+                h('div.cp-reg-form.col-md-6', [
+                    h('img.img-fluid', {
+                        src: '/customize/images/swallow-the-key.png?' + urlArgs
+                    }),
+                    h('div#userForm.form-group.hidden', [
                         h('a', {
                             href: '/features.html'
                         }, Msg.register_whyRegister),
@@ -58,6 +59,7 @@ define([
                     ])
                 ]),
                 ]),
+            ]),
 
             Pages.infopageFooter(),
         ])];

customize.dist/src/less2/pages/page-register.less

@@ -56,10 +56,19 @@
                 margin-bottom: 1em;
             }
         }
+        .cp-reg-form {
+            img {
+                margin-top: 0px;
+                position: relative;
+                z-index: 0;
+            }
+        }
         #userForm {
             padding: 15px;
             background-color: white;
-            height: min-content; // XXX why does the form expand without this?
+            position: relative;
+            z-index: 2;
+            margin-bottom: 100px;
             .cp-shadow();
             .form-control {
                 border-radius: 0;