diff --git a/heimaerbest/app/footer.js b/heimaerbest/app/footer.js new file mode 100644 index 0000000..76d7f16 --- /dev/null +++ b/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 diff --git a/heimaerbest/app/index.js b/heimaerbest/app/index.js index 2df4d3f..f822788 100644 --- a/heimaerbest/app/index.js +++ b/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='; diff --git a/heimaerbest/app/site_frontpage.js b/heimaerbest/app/site_frontpage.js index fef22d4..9fd2ed3 100644 --- a/heimaerbest/app/site_frontpage.js +++ b/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('h3', 'Want to know how much your property is worth?'), + m('a.link', { href: 'https://verdmat.is', target: '_blank' }, 'verdmat.is'), + 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'), ]), diff --git a/heimaerbest/public/assets/img/house_3.png b/heimaerbest/public/assets/img/house_3.png index aed21e5..0dd45ed 100644 Binary files a/heimaerbest/public/assets/img/house_3.png and b/heimaerbest/public/assets/img/house_3.png differ diff --git a/heimaerbest/public/index.html b/heimaerbest/public/index.html index 4238fe8..cf772d0 100644 --- a/heimaerbest/public/index.html +++ b/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 {