heimaerbest: more development

heimaerbest/app/footer.js

@@ -0,0 +1,15 @@
+const m = require('mithril')
+
+const Footer = {
+  view: function() {
+    return [
+      m('div.first'),
+      m('div.middle', [
+        
+      ]),
+      m('div'),
+    ]
+  },
+}
+
+module.exports = Footer

heimaerbest/app/index.js

@@ -1,6 +1,6 @@
 const m = require('mithril')
 const Header = require('./header')
-// const Footer = require('./footer')
+const Footer = require('./footer')
 const Frontpage = require('./site_frontpage')
 const NotFound = require('./site_404')
 window.m = m
@@ -36,6 +36,6 @@ AVIF.onload = AVIF.onerror = function () {
 
   m.mount(document.getElementById('header'), Header)
   m.route(document.getElementById('main'), '/', allRoutes)
-  // m.mount(document.getElementById('footer'), Footer)
+  m.mount(document.getElementById('footer'), Footer)
 }
 AVIF.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAABcAAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQAMAAAAABNjb2xybmNseAABAA0ABoAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAAB9tZGF0EgAKCBgAPkgIaDQgMgkf8AAAQAAAr3A=';

heimaerbest/app/site_frontpage.js

@@ -152,10 +152,10 @@ const Frontpage = {
       ]),
       m('section.pricemat', [
         m('div.content', [
-          m('a', { href: 'https://verdmat.is', target: '_blank' }, 'verdmat.is'),
+          m('a.link', { href: 'https://verdmat.is', target: '_blank' }, 'verdmat.is'),
-          m('h3', 'Want to know how much your property is worth?'),
+          m('h2', 'Want to know how much your property is worth?'),
           m('p', 'Við erum með allar upplýsingar um stærð eignarinnar, fasteignamat, brunabótamat, byggingarefni, byggingarár og fleira á skrá hjá okkur. '),
-          m('a.submit', { href: 'https://verdmat.is', target: '_blank' }, 'Visit verðmat.is')
+          m('a.button-white', { href: 'https://verdmat.is', target: '_blank' }, 'Visit verðmat.is')
         ]),
         m('div.image.house3'),
       ]),

heimaerbest/public/index.html

@@ -37,6 +37,8 @@
   --form-radius: 4px;
   --form-input-padding: 0.5rem 0.5rem;
   --form-button-padding: 0.5rem 2rem;
+  --section-blue-bg: #5465FF;
+  --section-blue-fg: white;
   --section-radius: 25px;
 }
 
@@ -142,9 +144,12 @@ header, main, footer {
 
 .button-flat,
 .button-inactive,
-.button-active {
+.button-active,
+.button-white {
   border-radius: var(--form-radius);
-  padding: 0.5rem 2rem;
+  padding: 1rem 2rem;
+  display: inline-block;
+  align-self: flex-start;
 }
 
 .button-flat {
@@ -163,6 +168,11 @@ header, main, footer {
   color: var(--form-inactive-fg);
 }
 
+.button-white {
+  background: var(--section-blue-fg);
+  color: var(--section-blue-bg);
+}
+
 /* ---------------- header ---------------- */
 
 header {
@@ -255,7 +265,7 @@ section.title .form h5 {
 
 section.tips {
   display: flex;
-  margin: 3rem 3rem 14rem;
+  margin: 3rem 3rem 6rem;
 }
 
 section.tips .image {
@@ -293,6 +303,57 @@ section.tips .checkmark {
   font-weight: 600;
 }
 
+
+/* ---------------- pricemat ---------------- */
+
+section.pricemat {
+  display: flex;
+  margin: 3rem 3rem 6rem;
+  background: var(--section-blue-bg);
+  color: var(--section-blue-fg);
+  border-radius: var(--section-radius);
+}
+
+section.pricemat .image {
+  margin-top: 2rem;
+  flex: 1 1 100px;
+  background: url('/assets/img/house_3.png') center top no-repeat;
+  background-size: cover;
+  border-radius: 0 var(--section-radius) 0 0;
+}
+
+section.pricemat a.link {
+  font-weight: 800;
+  font-size: 0.6rem;
+  text-transform: uppercase;
+  color: var(--section-blue-fg);
+  margin-bottom: 1rem;
+  display: block;
+}
+
+section.pricemat .content {
+  flex: 1 1 100px;
+  padding: 3rem 0rem 3rem 3rem;
+}
+
+section.pricemat .space {
+  flex: 0 0 50px;
+}
+
+section.pricemat h2 {
+  margin-bottom: 1rem;
+}
+
+section.pricemat p {
+  font-size: 0.8rem;
+  font-weight: 350;
+  margin-bottom: 1rem;
+}
+
+section.pricemat .button-white {
+  font-size: 0.8rem;
+}
+
 /* ---------------- form ---------------- */
 
 .form-group {