WIP #2647 @7:00

diff --git a/images/logohome.svg b/images/logohome.svg
new file mode 100644 (file)
index 0000000..822cf69
--- /dev/null
+++ b/images/logohome.svg
@@ -0,0 +1,208 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+        viewBox="0 0 206.67 135.51" style="enable-background:new 0 0 206.67 135.51;" xml:space="preserve">
+<style type="text/css">
+       .st0{fill:#FFFFFF;}
+</style>
+<g>
+       <g>
+               <path class="st0" d="M200.66,15.85c3.36,0,6.01-2.63,6.01-5.95c0-3.31-2.65-5.96-6.01-5.96c-3.35,0-6.01,2.64-6.01,5.96
+                       C194.66,13.22,197.31,15.85,200.66,15.85 M200.66,14.94c-2.74,0-5.08-2.23-5.08-5.04c0-2.81,2.34-5.04,5.08-5.04
+                       c2.74,0,5.09,2.23,5.09,5.04C205.75,12.71,203.4,14.94,200.66,14.94 M201.54,10.12c1.16-0.03,2.07-0.5,2.07-1.79
+                       c0-1.41-1.16-1.73-2.33-1.73h-2.86v6.52h0.93v-3h1.1l1.97,3h1.1L201.54,10.12z M199.35,9.2V7.52h1.74c0.71,0,1.6,0.12,1.6,0.79
+                       c0,1.04-1.43,0.89-2.24,0.89H199.35z"/>
+               <path class="st0" d="M164.06,41.39c0-2.41,2.36-3.71,4.81-4.12c5.74-0.95,7.99-2.24,7.99-2.24c-1.16,6.35-3.8,9.43-8.06,9.77
+                       C165.93,45.05,164.06,43.91,164.06,41.39 M168.62,26.95c0.82-2.91,2.97-4.63,6.05-4.69c2.26-0.05,4.66,0.74,4.66,3.07
+                       c0,3.94-8.31,3.9-12.51,4.36c-11.2,1.22-18.87,3.82-18.87,14.07c0,7.42,5.94,10.69,12.62,10.69c4.23,0,9.54-0.31,13.36-3.73
+                       c-0.16,0.9,0,1.89,0.21,2.74h16.23c-0.56-1.38-0.83-3.37-0.21-6.32l4.06-19.46c2.68-12.82-10.85-14.08-20.02-14.08
+                       c-9.55,0-19.34,3-21.67,13.34H168.62z"/>
+               <path class="st0" d="M57.45,36.25c0,13.65,9.07,18.21,20.25,18.21c18.69,0,24.47-13.86,24.47-23.83c0-11.76-7.82-17.01-19.7-17.01
+                       C65.89,13.63,57.45,24.43,57.45,36.25 M73.09,33.78c0.94-5.63,4.14-10.1,8.47-10.1c4.48,0,6.02,4.64,5.08,10.27
+                       c-0.94,5.62-4.13,10.1-8.48,10.1C73.71,44.04,72.15,39.41,73.09,33.78"/>
+               <path class="st0" d="M13.72,0L2.6,53.46h34.14c2.67,0,5.59-0.55,8.32-1.64c7.28-2.96,12.6-12.12,9.17-19.9
+                       c-1.26-2.87-3.08-4.56-5.44-5.94c4.64-1.75,8.13-5.71,8.68-11.2C58.28,6.96,52.08,0,43.78,0H13.72z M23.44,30.75h9.58
+                       c3.46,0,6.64,0.61,6.39,4.57c-0.26,4.14-4.05,5.4-6.98,5.4H21.39L23.44,30.75z M27.32,12.08h9.91c2.94,0,5.57,0.88,5.23,4.13
+                       c-0.39,3.63-3.9,4.57-6.15,4.57H25.56L27.32,12.08z"/>
+               <path class="st0" d="M123.13,14.55h-14.37l-8.11,38.9h15.5l4.42-20.9c0.9-4.05,2.89-7.42,7.63-7.42c2.66,0,5.22,1.23,4.33,5.42
+                       l-4.78,22.89h15.38l4.61-21.97c0.71-3.35,1.08-5.7,1.08-7.42c0-7.64-6.81-10.49-13.66-10.49c-3.9,0-8.73,1.58-12.04,4.91V14.55z"
+                       />
+               <path class="st0" d="M38.17,80.32h5.29c0.98,0,1.76,0.22,2.35,0.67c0.59,0.45,0.88,1.12,0.88,2.03c0,0.55-0.14,1.02-0.4,1.41
+                       c-0.27,0.39-0.65,0.69-1.15,0.91v0.03c0.67,0.14,1.18,0.46,1.52,0.95c0.35,0.49,0.52,1.11,0.52,1.85c0,0.43-0.08,0.83-0.23,1.2
+                       c-0.15,0.37-0.39,0.69-0.72,0.96c-0.32,0.27-0.74,0.48-1.25,0.64c-0.51,0.16-1.11,0.24-1.82,0.24h-5V80.32z M40.07,84.88h3.11
+                       c0.46,0,0.84-0.13,1.14-0.39c0.31-0.26,0.46-0.63,0.46-1.12c0-0.55-0.14-0.93-0.41-1.16c-0.27-0.22-0.67-0.34-1.19-0.34h-3.11
+                       V84.88z M40.07,89.65h3.37c0.58,0,1.03-0.15,1.35-0.45c0.32-0.3,0.48-0.72,0.48-1.27c0-0.54-0.16-0.95-0.48-1.24
+                       c-0.32-0.29-0.77-0.43-1.35-0.43h-3.37V89.65z"/>
+               <path class="st0" d="M49.6,80.32h5.2c1.2,0,2.1,0.26,2.7,0.78c0.6,0.52,0.9,1.24,0.9,2.16c0,0.52-0.08,0.95-0.23,1.29
+                       c-0.15,0.34-0.33,0.62-0.53,0.82c-0.2,0.21-0.4,0.36-0.6,0.45c-0.2,0.09-0.34,0.15-0.43,0.18v0.03c0.16,0.02,0.34,0.07,0.53,0.15
+                       c0.19,0.08,0.36,0.21,0.53,0.39c0.16,0.18,0.3,0.41,0.4,0.69c0.11,0.28,0.16,0.64,0.16,1.07c0,0.64,0.05,1.22,0.14,1.75
+                       c0.1,0.52,0.25,0.9,0.45,1.12h-2.04c-0.14-0.23-0.23-0.49-0.25-0.78c-0.03-0.28-0.04-0.56-0.04-0.82c0-0.5-0.03-0.93-0.09-1.29
+                       c-0.06-0.36-0.17-0.66-0.33-0.9c-0.16-0.24-0.38-0.41-0.66-0.53c-0.28-0.11-0.64-0.17-1.08-0.17h-2.8v4.48H49.6V80.32z
+                        M51.51,85.28h3.12c0.61,0,1.07-0.14,1.39-0.43c0.31-0.29,0.47-0.73,0.47-1.3c0-0.35-0.05-0.63-0.15-0.85
+                       c-0.1-0.22-0.24-0.39-0.42-0.51c-0.18-0.12-0.38-0.2-0.61-0.24c-0.23-0.04-0.47-0.06-0.71-0.06h-3.09V85.28z"/>
+               <rect x="61.04" y="80.32" class="st0" width="1.91" height="10.89"/>
+               <polygon class="st0" points="65.9,80.32 67.91,80.32 72.88,88.34 72.91,88.34 72.91,80.32 74.73,80.32 74.73,91.21 72.72,91.21 
+                       67.76,83.2 67.72,83.2 67.72,91.21 65.9,91.21            "/>
+               <path class="st0" d="M87.18,91.21h-1.22l-0.29-1.28c-0.51,0.58-1.02,0.98-1.53,1.2c-0.51,0.22-1.09,0.34-1.75,0.34
+                       c-0.81,0-1.54-0.15-2.19-0.45c-0.65-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.82c-0.24-0.69-0.36-1.43-0.36-2.21
+                       c0-0.77,0.12-1.5,0.36-2.19c0.24-0.69,0.58-1.3,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.24c0.64-0.3,1.37-0.46,2.19-0.46
+                       c0.59,0,1.15,0.08,1.69,0.24c0.53,0.16,1.01,0.39,1.42,0.7s0.76,0.7,1.04,1.17c0.28,0.47,0.45,1.01,0.52,1.62H85.2
+                       c-0.05-0.35-0.16-0.67-0.33-0.94c-0.17-0.27-0.38-0.5-0.63-0.68c-0.25-0.18-0.54-0.32-0.85-0.41c-0.32-0.09-0.65-0.14-0.99-0.14
+                       c-0.58,0-1.08,0.12-1.5,0.35c-0.42,0.23-0.77,0.55-1.03,0.94c-0.26,0.39-0.46,0.84-0.59,1.33c-0.13,0.5-0.19,1.01-0.19,1.52
+                       s0.06,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33c0.26,0.39,0.61,0.7,1.03,0.94c0.42,0.23,0.92,0.35,1.5,0.35
+                       c0.49,0.01,0.92-0.05,1.3-0.19c0.38-0.14,0.69-0.34,0.95-0.6c0.26-0.26,0.46-0.58,0.59-0.95c0.13-0.38,0.2-0.79,0.21-1.25h-2.9
+                       v-1.45h4.63V91.21z"/>
+               <rect x="89.96" y="80.32" class="st0" width="1.91" height="10.89"/>
+               <polygon class="st0" points="94.82,80.32 96.83,80.32 101.81,88.34 101.84,88.34 101.84,80.32 103.65,80.32 103.65,91.21 
+                       101.64,91.21 96.68,83.2 96.64,83.2 96.64,91.21 94.82,91.21              "/>
+               <path class="st0" d="M116.11,91.21h-1.22l-0.29-1.28c-0.51,0.58-1.02,0.98-1.53,1.2c-0.51,0.22-1.09,0.34-1.75,0.34
+                       c-0.81,0-1.54-0.15-2.19-0.45c-0.65-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.82c-0.24-0.69-0.36-1.43-0.36-2.21
+                       c0-0.77,0.12-1.5,0.36-2.19c0.24-0.69,0.58-1.3,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.24c0.64-0.3,1.37-0.46,2.19-0.46
+                       c0.59,0,1.15,0.08,1.69,0.24c0.53,0.16,1.01,0.39,1.42,0.7s0.76,0.7,1.04,1.17c0.28,0.47,0.45,1.01,0.52,1.62h-1.86
+                       c-0.05-0.35-0.16-0.67-0.33-0.94c-0.17-0.27-0.38-0.5-0.63-0.68c-0.25-0.18-0.54-0.32-0.85-0.41c-0.32-0.09-0.65-0.14-0.99-0.14
+                       c-0.58,0-1.08,0.12-1.5,0.35c-0.42,0.23-0.77,0.55-1.03,0.94c-0.26,0.39-0.46,0.84-0.59,1.33c-0.13,0.5-0.19,1.01-0.19,1.52
+                       s0.06,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33c0.26,0.39,0.61,0.7,1.03,0.94c0.42,0.23,0.92,0.35,1.5,0.35
+                       c0.49,0.01,0.92-0.05,1.3-0.19c0.38-0.14,0.69-0.34,0.95-0.6c0.26-0.26,0.46-0.58,0.59-0.95c0.13-0.38,0.2-0.79,0.21-1.25h-2.9
+                       v-1.45h4.63V91.21z"/>
+               <path class="st0" d="M128.45,80.06c0.81,0,1.54,0.15,2.19,0.46c0.65,0.3,1.19,0.72,1.64,1.23c0.45,0.52,0.79,1.12,1.03,1.82
+                       c0.24,0.69,0.36,1.42,0.36,2.2c0,0.78-0.12,1.52-0.36,2.21c-0.24,0.69-0.58,1.3-1.03,1.82c-0.45,0.52-0.99,0.93-1.64,1.23
+                       c-0.64,0.3-1.37,0.45-2.19,0.45c-0.81,0-1.54-0.15-2.19-0.45c-0.65-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.82
+                       c-0.24-0.69-0.36-1.43-0.36-2.21c0-0.77,0.12-1.5,0.36-2.2c0.24-0.69,0.58-1.3,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.23
+                       C126.91,80.21,127.64,80.06,128.45,80.06 M128.45,81.62c-0.58,0-1.08,0.12-1.5,0.35c-0.42,0.23-0.77,0.55-1.03,0.94
+                       c-0.26,0.39-0.46,0.84-0.59,1.33c-0.13,0.5-0.19,1.01-0.19,1.52s0.07,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33
+                       c0.26,0.39,0.61,0.7,1.03,0.94c0.42,0.23,0.92,0.35,1.5,0.35c0.58,0,1.08-0.12,1.5-0.35c0.42-0.23,0.76-0.55,1.03-0.94
+                       c0.27-0.39,0.46-0.84,0.59-1.33c0.13-0.5,0.19-1.01,0.19-1.53s-0.06-1.03-0.19-1.52c-0.13-0.5-0.32-0.94-0.59-1.33
+                       c-0.26-0.39-0.61-0.7-1.03-0.94S129.03,81.62,128.45,81.62"/>
+               <path class="st0" d="M135.99,80.32h1.91v6.34c0,0.37,0.02,0.74,0.05,1.11c0.04,0.38,0.14,0.71,0.31,1.01
+                       c0.17,0.3,0.42,0.55,0.76,0.74c0.34,0.19,0.82,0.29,1.44,0.29c0.62,0,1.1-0.1,1.44-0.29c0.34-0.19,0.6-0.44,0.76-0.74
+                       c0.17-0.3,0.27-0.64,0.3-1.01c0.04-0.38,0.05-0.75,0.05-1.11v-6.34h1.91v6.97c0,0.7-0.11,1.31-0.32,1.83
+                       c-0.21,0.52-0.52,0.95-0.91,1.3c-0.39,0.35-0.86,0.61-1.41,0.78c-0.55,0.17-1.16,0.26-1.83,0.26s-1.28-0.09-1.83-0.26
+                       c-0.55-0.17-1.02-0.43-1.41-0.78c-0.39-0.35-0.7-0.79-0.91-1.3c-0.21-0.52-0.32-1.13-0.32-1.83V80.32z"/>
+               <polygon class="st0" points="146.78,80.32 155.59,80.32 155.59,81.97 152.13,81.97 152.13,91.21 150.23,91.21 150.23,81.97 
+                       146.78,81.97            "/>
+               <polygon class="st0" points="0,102.34 8.81,102.34 8.81,103.99 5.35,103.99 5.35,113.23 3.45,113.23 3.45,103.99 0,103.99          "/>
+               <polygon class="st0" points="10.73,102.34 12.64,102.34 12.64,106.67 17.6,106.67 17.6,102.34 19.5,102.34 19.5,113.23 
+                       17.6,113.23 17.6,108.32 12.64,108.32 12.64,113.23 10.73,113.23          "/>
+               <polygon class="st0" points="22.49,102.34 30.33,102.34 30.33,103.99 24.39,103.99 24.39,106.84 29.88,106.84 29.88,108.4 
+                       24.39,108.4 24.39,111.58 30.43,111.58 30.43,113.23 22.49,113.23                 "/>
+               <path class="st0" d="M37.73,102.34h5.29c0.97,0,1.76,0.22,2.35,0.67c0.59,0.45,0.88,1.12,0.88,2.03c0,0.55-0.14,1.02-0.4,1.41
+                       c-0.27,0.39-0.65,0.69-1.15,0.91v0.03c0.67,0.14,1.18,0.46,1.53,0.95c0.35,0.49,0.52,1.11,0.52,1.85c0,0.43-0.08,0.83-0.23,1.2
+                       c-0.15,0.37-0.39,0.69-0.72,0.96c-0.33,0.27-0.74,0.48-1.25,0.64c-0.51,0.16-1.11,0.24-1.81,0.24h-5V102.34z M39.64,106.9h3.11
+                       c0.46,0,0.84-0.13,1.14-0.39c0.3-0.26,0.46-0.63,0.46-1.12c0-0.55-0.14-0.93-0.41-1.16c-0.27-0.22-0.67-0.34-1.19-0.34h-3.11
+                       V106.9z M39.64,111.67h3.37c0.58,0,1.03-0.15,1.35-0.45s0.48-0.72,0.48-1.27c0-0.54-0.16-0.95-0.48-1.24
+                       c-0.32-0.29-0.77-0.43-1.35-0.43h-3.37V111.67z"/>
+               <polygon class="st0" points="49.17,102.34 57.01,102.34 57.01,103.99 51.07,103.99 51.07,106.84 56.56,106.84 56.56,108.4 
+                       51.07,108.4 51.07,111.58 57.11,111.58 57.11,113.23 49.17,113.23                 "/>
+               <path class="st0" d="M62.39,102.34h2.03l4.19,10.89h-2.04l-1.02-2.88H61.2l-1.02,2.88h-1.97L62.39,102.34z M61.72,108.9h3.32
+                       l-1.63-4.68h-0.05L61.72,108.9z"/>
+               <path class="st0" d="M70.22,102.34h1.91v6.34c0,0.37,0.02,0.74,0.05,1.11c0.04,0.38,0.14,0.71,0.31,1.01
+                       c0.17,0.3,0.42,0.55,0.76,0.74c0.34,0.19,0.82,0.29,1.44,0.29c0.62,0,1.1-0.1,1.44-0.29c0.34-0.19,0.6-0.44,0.76-0.74
+                       c0.17-0.3,0.27-0.64,0.3-1.01c0.04-0.38,0.05-0.75,0.05-1.11v-6.34h1.91v6.97c0,0.7-0.11,1.31-0.32,1.83
+                       c-0.21,0.52-0.52,0.95-0.91,1.3c-0.39,0.35-0.86,0.61-1.41,0.79c-0.55,0.17-1.16,0.26-1.83,0.26s-1.28-0.09-1.83-0.26
+                       c-0.55-0.17-1.02-0.43-1.41-0.79c-0.39-0.35-0.7-0.78-0.91-1.3c-0.21-0.52-0.32-1.13-0.32-1.83V102.34z"/>
+               <polygon class="st0" points="81.02,102.34 89.83,102.34 89.83,103.99 86.37,103.99 86.37,113.23 84.46,113.23 84.46,103.99 
+                       81.02,103.99            "/>
+               <polygon class="st0" points="94.63,108.96 90.55,102.34 92.76,102.34 95.64,107.22 98.47,102.34 100.61,102.34 96.54,108.96 
+                       96.54,113.23 94.63,113.23               "/>
+               <rect x="107.32" y="102.34" class="st0" width="1.91" height="10.89"/>
+               <polygon class="st0" points="112.18,102.34 114.19,102.34 119.16,110.36 119.19,110.36 119.19,102.34 121.01,102.34 
+                       121.01,113.23 119,113.23 114.04,105.22 113.99,105.22 113.99,113.23 112.18,113.23                "/>
+               <polygon class="st0" points="128.9,102.34 136.42,102.34 136.42,103.99 130.81,103.99 130.81,106.84 135.73,106.84 135.73,108.4 
+                       130.81,108.4 130.81,113.23 128.9,113.23                 "/>
+               <polygon class="st0" points="138.65,102.34 140.55,102.34 140.55,111.58 146.09,111.58 146.09,113.23 138.65,113.23                "/>
+               <path class="st0" d="M152.73,102.08c0.81,0,1.54,0.15,2.19,0.46c0.65,0.3,1.19,0.72,1.64,1.23c0.45,0.52,0.79,1.12,1.03,1.82
+                       c0.24,0.69,0.36,1.42,0.36,2.2c0,0.78-0.12,1.52-0.36,2.21s-0.58,1.29-1.03,1.81c-0.45,0.52-0.99,0.93-1.64,1.23
+                       c-0.64,0.3-1.38,0.45-2.19,0.45c-0.81,0-1.54-0.15-2.19-0.45c-0.65-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.81
+                       c-0.24-0.69-0.36-1.43-0.36-2.21c0-0.77,0.12-1.5,0.36-2.2c0.24-0.69,0.58-1.3,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.23
+                       C151.19,102.24,151.92,102.08,152.73,102.08 M152.73,103.64c-0.58,0-1.08,0.12-1.5,0.35s-0.76,0.55-1.03,0.94
+                       c-0.27,0.39-0.46,0.84-0.59,1.33c-0.13,0.5-0.19,1.01-0.19,1.52s0.06,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33
+                       c0.26,0.39,0.61,0.7,1.03,0.94c0.42,0.23,0.92,0.35,1.5,0.35c0.58,0,1.08-0.12,1.5-0.35c0.42-0.23,0.76-0.55,1.03-0.94
+                       c0.26-0.39,0.46-0.84,0.59-1.33c0.13-0.5,0.19-1.01,0.19-1.53s-0.07-1.03-0.19-1.52c-0.13-0.5-0.32-0.94-0.59-1.33
+                       c-0.26-0.39-0.61-0.7-1.03-0.94S153.31,103.64,152.73,103.64"/>
+               <path class="st0" d="M165.02,102.08c0.81,0,1.54,0.15,2.19,0.46c0.65,0.3,1.19,0.72,1.64,1.23c0.45,0.52,0.79,1.12,1.03,1.82
+                       c0.24,0.69,0.36,1.42,0.36,2.2c0,0.78-0.12,1.52-0.36,2.21s-0.58,1.29-1.03,1.81c-0.45,0.52-0.99,0.93-1.64,1.23
+                       c-0.64,0.3-1.37,0.45-2.19,0.45c-0.81,0-1.54-0.15-2.19-0.45c-0.64-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.81
+                       c-0.24-0.69-0.36-1.43-0.36-2.21c0-0.77,0.12-1.5,0.36-2.2c0.24-0.69,0.58-1.3,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.23
+                       C163.48,102.24,164.21,102.08,165.02,102.08 M165.02,103.64c-0.58,0-1.08,0.12-1.5,0.35c-0.42,0.23-0.76,0.55-1.03,0.94
+                       c-0.27,0.39-0.46,0.84-0.59,1.33c-0.13,0.5-0.19,1.01-0.19,1.52s0.06,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33
+                       c0.26,0.39,0.61,0.7,1.03,0.94c0.42,0.23,0.92,0.35,1.5,0.35c0.58,0,1.08-0.12,1.5-0.35c0.42-0.23,0.76-0.55,1.03-0.94
+                       c0.26-0.39,0.46-0.84,0.59-1.33c0.13-0.5,0.19-1.01,0.19-1.53s-0.07-1.03-0.19-1.52c-0.13-0.5-0.32-0.94-0.59-1.33
+                       c-0.26-0.39-0.61-0.7-1.03-0.94C166.1,103.76,165.6,103.64,165.02,103.64"/>
+               <path class="st0" d="M172.68,102.34h5.2c1.2,0,2.1,0.26,2.7,0.78c0.6,0.52,0.9,1.24,0.9,2.17c0,0.52-0.08,0.95-0.23,1.29
+                       c-0.15,0.34-0.33,0.62-0.53,0.82c-0.2,0.21-0.4,0.36-0.6,0.45c-0.2,0.09-0.34,0.15-0.43,0.18v0.03c0.16,0.02,0.34,0.07,0.53,0.15
+                       c0.19,0.08,0.36,0.21,0.53,0.39c0.16,0.18,0.3,0.41,0.4,0.7c0.11,0.28,0.16,0.64,0.16,1.07c0,0.64,0.05,1.22,0.15,1.75
+                       c0.1,0.52,0.25,0.9,0.45,1.12h-2.04c-0.14-0.23-0.23-0.49-0.25-0.78c-0.03-0.29-0.04-0.56-0.04-0.82c0-0.5-0.03-0.93-0.09-1.29
+                       c-0.06-0.36-0.17-0.66-0.33-0.9c-0.17-0.24-0.38-0.41-0.66-0.53c-0.28-0.11-0.64-0.17-1.07-0.17h-2.81v4.48h-1.91V102.34z
+                        M174.58,107.3h3.13c0.61,0,1.07-0.14,1.39-0.43c0.31-0.29,0.47-0.73,0.47-1.3c0-0.35-0.05-0.63-0.15-0.85
+                       c-0.1-0.22-0.24-0.39-0.42-0.51c-0.18-0.12-0.38-0.2-0.61-0.24c-0.23-0.04-0.47-0.06-0.71-0.06h-3.09V107.3z"/>
+               <path class="st0" d="M185.36,109.6c0,0.42,0.07,0.77,0.21,1.07c0.14,0.3,0.34,0.54,0.59,0.72c0.26,0.19,0.55,0.33,0.88,0.41
+                       c0.33,0.08,0.69,0.13,1.07,0.13c0.42,0,0.77-0.05,1.07-0.14c0.29-0.1,0.54-0.22,0.72-0.37c0.18-0.15,0.31-0.33,0.4-0.53
+                       c0.08-0.2,0.12-0.4,0.12-0.6c0-0.42-0.09-0.72-0.28-0.92c-0.19-0.2-0.39-0.34-0.62-0.42c-0.39-0.14-0.84-0.28-1.35-0.4
+                       c-0.51-0.13-1.15-0.29-1.9-0.5c-0.47-0.12-0.86-0.28-1.17-0.48c-0.31-0.2-0.56-0.42-0.74-0.66c-0.18-0.24-0.31-0.5-0.39-0.78
+                       c-0.08-0.27-0.11-0.55-0.11-0.84c0-0.55,0.11-1.03,0.34-1.43c0.23-0.4,0.53-0.73,0.91-1c0.38-0.26,0.8-0.46,1.28-0.59
+                       c0.48-0.13,0.96-0.19,1.45-0.19c0.57,0,1.11,0.07,1.61,0.22c0.5,0.15,0.95,0.37,1.33,0.66s0.68,0.66,0.91,1.09
+                       c0.22,0.43,0.33,0.93,0.33,1.5h-1.91c-0.05-0.7-0.29-1.2-0.72-1.49c-0.43-0.29-0.97-0.44-1.63-0.44c-0.22,0-0.45,0.02-0.69,0.07
+                       c-0.23,0.05-0.45,0.12-0.64,0.23c-0.19,0.11-0.35,0.25-0.48,0.43c-0.13,0.18-0.19,0.41-0.19,0.69c0,0.39,0.12,0.69,0.36,0.91
+                       c0.24,0.22,0.55,0.38,0.94,0.49c0.04,0.01,0.2,0.05,0.48,0.13c0.28,0.08,0.59,0.16,0.94,0.25c0.34,0.09,0.68,0.18,1.01,0.27
+                       c0.33,0.08,0.57,0.15,0.71,0.19c0.36,0.11,0.66,0.26,0.93,0.46c0.26,0.19,0.49,0.41,0.66,0.66c0.18,0.25,0.31,0.52,0.4,0.8
+                       c0.09,0.29,0.13,0.57,0.13,0.85c0,0.61-0.13,1.13-0.37,1.56c-0.25,0.43-0.58,0.79-0.98,1.06c-0.4,0.28-0.87,0.48-1.39,0.6
+                       c-0.52,0.13-1.05,0.19-1.59,0.19c-0.62,0-1.2-0.08-1.75-0.23c-0.55-0.15-1.03-0.39-1.43-0.7c-0.41-0.32-0.73-0.72-0.98-1.21
+                       c-0.24-0.49-0.37-1.08-0.38-1.75H185.36z"/>
+               <path class="st0" d="M54.34,131.62c0,0.42,0.07,0.77,0.21,1.07c0.14,0.3,0.34,0.54,0.6,0.72c0.25,0.19,0.55,0.33,0.88,0.41
+                       c0.33,0.09,0.69,0.13,1.07,0.13c0.42,0,0.77-0.05,1.07-0.14c0.29-0.1,0.53-0.22,0.72-0.37c0.18-0.15,0.32-0.33,0.4-0.53
+                       c0.08-0.2,0.12-0.4,0.12-0.6c0-0.42-0.09-0.73-0.28-0.92c-0.19-0.2-0.4-0.34-0.62-0.42c-0.38-0.14-0.83-0.28-1.35-0.4
+                       c-0.51-0.13-1.15-0.29-1.9-0.49c-0.47-0.12-0.85-0.28-1.17-0.48c-0.31-0.2-0.55-0.42-0.74-0.66c-0.18-0.24-0.31-0.5-0.39-0.78
+                       c-0.08-0.27-0.11-0.55-0.11-0.84c0-0.55,0.11-1.02,0.34-1.43s0.53-0.73,0.91-1c0.38-0.26,0.8-0.46,1.28-0.59
+                       c0.48-0.13,0.96-0.19,1.45-0.19c0.57,0,1.11,0.07,1.61,0.22c0.5,0.15,0.94,0.37,1.33,0.66c0.38,0.3,0.68,0.66,0.91,1.09
+                       c0.22,0.43,0.33,0.93,0.33,1.5h-1.9c-0.05-0.7-0.29-1.2-0.72-1.49c-0.43-0.29-0.97-0.43-1.63-0.43c-0.23,0-0.45,0.02-0.69,0.07
+                       c-0.23,0.05-0.45,0.12-0.64,0.23c-0.19,0.11-0.35,0.25-0.48,0.43c-0.13,0.18-0.19,0.41-0.19,0.69c0,0.39,0.12,0.69,0.36,0.91
+                       c0.24,0.22,0.55,0.38,0.94,0.5c0.04,0.01,0.2,0.05,0.48,0.13c0.28,0.08,0.59,0.16,0.94,0.25c0.34,0.09,0.68,0.18,1.01,0.27
+                       c0.33,0.09,0.57,0.15,0.71,0.19c0.36,0.11,0.67,0.26,0.93,0.46c0.26,0.19,0.49,0.41,0.66,0.66c0.18,0.25,0.31,0.52,0.4,0.8
+                       c0.09,0.29,0.13,0.57,0.13,0.85c0,0.61-0.12,1.13-0.37,1.56c-0.25,0.43-0.57,0.79-0.98,1.06c-0.41,0.27-0.87,0.48-1.39,0.6
+                       c-0.52,0.13-1.05,0.19-1.58,0.19c-0.62,0-1.2-0.08-1.75-0.23c-0.55-0.15-1.03-0.39-1.43-0.7c-0.41-0.32-0.73-0.72-0.98-1.21
+                       c-0.24-0.49-0.37-1.08-0.38-1.75H54.34z"/>
+               <rect x="63.74" y="124.36" class="st0" width="1.91" height="10.89"/>
+               <polygon class="st0" points="68.66,124.37 70.67,124.37 75.64,132.38 75.67,132.38 75.67,124.37 77.49,124.37 77.49,135.25 
+                       75.48,135.25 70.52,127.25 70.47,127.25 70.47,135.25 68.66,135.25                "/>
+               <path class="st0" d="M87.85,127.83c-0.08-0.31-0.19-0.6-0.33-0.87c-0.14-0.26-0.33-0.49-0.55-0.69c-0.22-0.19-0.49-0.34-0.79-0.45
+                       c-0.3-0.11-0.65-0.16-1.04-0.16c-0.58,0-1.08,0.12-1.5,0.35c-0.42,0.23-0.76,0.55-1.03,0.94c-0.26,0.39-0.46,0.84-0.59,1.33
+                       c-0.13,0.5-0.19,1.01-0.19,1.52c0,0.52,0.06,1.03,0.19,1.53c0.13,0.5,0.32,0.94,0.59,1.33c0.27,0.39,0.61,0.7,1.03,0.94
+                       s0.92,0.35,1.5,0.35c0.43,0,0.8-0.07,1.13-0.22c0.33-0.15,0.6-0.35,0.84-0.61c0.23-0.26,0.42-0.56,0.55-0.91
+                       c0.13-0.35,0.22-0.72,0.26-1.11h1.86c-0.04,0.65-0.18,1.25-0.42,1.78c-0.24,0.54-0.56,1-0.97,1.4c-0.41,0.39-0.89,0.69-1.43,0.91
+                       c-0.55,0.21-1.15,0.32-1.82,0.32c-0.81,0-1.54-0.15-2.19-0.45c-0.65-0.3-1.19-0.71-1.64-1.23c-0.45-0.52-0.79-1.12-1.03-1.82
+                       c-0.24-0.69-0.36-1.43-0.36-2.21c0-0.77,0.12-1.5,0.36-2.2c0.24-0.69,0.58-1.29,1.03-1.82c0.45-0.52,0.99-0.93,1.64-1.23
+                       c0.64-0.3,1.38-0.46,2.19-0.46c0.61,0,1.18,0.08,1.72,0.25c0.54,0.17,1.02,0.41,1.43,0.73c0.41,0.32,0.74,0.71,1,1.17
+                       c0.25,0.46,0.41,0.98,0.47,1.57H87.85z"/>
+               <polygon class="st0" points="92.28,124.37 100.11,124.37 100.11,126.01 94.18,126.01 94.18,128.86 99.67,128.86 99.67,130.42 
+                       94.18,130.42 94.18,133.6 100.22,133.6 100.22,135.25 92.28,135.25                "/>
+               <path class="st0" d="M107.29,126.35c0.36,0,0.72-0.03,1.07-0.09s0.66-0.16,0.94-0.3c0.28-0.14,0.52-0.33,0.72-0.55
+                       c0.2-0.22,0.33-0.5,0.39-0.82h1.42v10.67h-1.9v-7.53h-2.62V126.35z"/>
+               <path class="st0" d="M117.42,132.55c0.04,0.44,0.2,0.79,0.47,1.06c0.27,0.27,0.63,0.4,1.09,0.4c0.47,0,0.84-0.12,1.12-0.37
+                       c0.28-0.25,0.5-0.56,0.65-0.93c0.15-0.37,0.26-0.77,0.31-1.19c0.06-0.42,0.1-0.81,0.13-1.17l-0.03-0.03
+                       c-0.23,0.42-0.55,0.73-0.96,0.95c-0.41,0.22-0.85,0.33-1.34,0.33c-0.51,0-0.97-0.09-1.38-0.26c-0.41-0.17-0.77-0.41-1.06-0.72
+                       c-0.3-0.31-0.52-0.69-0.69-1.13c-0.16-0.44-0.24-0.94-0.24-1.49c0-0.52,0.08-1,0.24-1.44c0.16-0.44,0.4-0.83,0.72-1.16
+                       c0.31-0.33,0.7-0.59,1.16-0.77c0.46-0.18,0.97-0.27,1.55-0.27c0.75,0,1.37,0.14,1.86,0.43c0.49,0.29,0.87,0.69,1.15,1.19
+                       c0.28,0.5,0.48,1.1,0.59,1.78c0.11,0.68,0.17,1.41,0.17,2.18c0,0.64-0.07,1.29-0.21,1.94c-0.14,0.65-0.36,1.24-0.68,1.78
+                       c-0.31,0.53-0.73,0.97-1.24,1.3c-0.51,0.34-1.15,0.5-1.9,0.5c-0.43,0-0.83-0.07-1.2-0.21c-0.38-0.14-0.71-0.34-1-0.6
+                       c-0.29-0.25-0.53-0.56-0.71-0.92c-0.18-0.35-0.29-0.75-0.31-1.19H117.42z M119.08,125.81c-0.32,0-0.59,0.06-0.82,0.18
+                       c-0.24,0.12-0.43,0.28-0.58,0.48c-0.15,0.2-0.27,0.44-0.35,0.7c-0.08,0.26-0.11,0.54-0.11,0.82c0,0.29,0.04,0.58,0.11,0.85
+                       c0.08,0.27,0.19,0.51,0.35,0.71c0.15,0.2,0.34,0.37,0.58,0.49c0.23,0.13,0.51,0.19,0.82,0.19c0.32,0,0.61-0.06,0.85-0.18
+                       c0.24-0.12,0.44-0.29,0.6-0.49c0.16-0.21,0.28-0.45,0.36-0.72c0.08-0.27,0.12-0.55,0.12-0.85c0-0.29-0.04-0.56-0.12-0.82
+                       c-0.08-0.26-0.2-0.49-0.36-0.69c-0.16-0.2-0.36-0.36-0.6-0.48C119.69,125.87,119.4,125.81,119.08,125.81"/>
+               <path class="st0" d="M124.63,126.35c0.36,0,0.72-0.03,1.07-0.09s0.66-0.16,0.94-0.3c0.28-0.14,0.52-0.33,0.72-0.55
+                       c0.2-0.22,0.33-0.5,0.39-0.82h1.42v10.67h-1.91v-7.53h-2.62V126.35z"/>
+               <path class="st0" d="M134.75,132.55c0.04,0.44,0.2,0.79,0.47,1.06c0.27,0.27,0.63,0.4,1.09,0.4c0.47,0,0.84-0.12,1.12-0.37
+                       c0.28-0.25,0.5-0.56,0.65-0.93c0.15-0.37,0.26-0.77,0.31-1.19c0.06-0.42,0.1-0.81,0.13-1.17l-0.03-0.03
+                       c-0.23,0.42-0.55,0.73-0.96,0.95c-0.41,0.22-0.85,0.33-1.34,0.33c-0.51,0-0.97-0.09-1.38-0.26c-0.41-0.17-0.77-0.41-1.06-0.72
+                       c-0.3-0.31-0.52-0.69-0.69-1.13c-0.16-0.44-0.24-0.94-0.24-1.49c0-0.52,0.08-1,0.24-1.44c0.16-0.44,0.4-0.83,0.72-1.16
+                       c0.31-0.33,0.7-0.59,1.16-0.77c0.46-0.18,0.97-0.27,1.55-0.27c0.75,0,1.37,0.14,1.86,0.43c0.49,0.29,0.87,0.69,1.15,1.19
+                       c0.28,0.5,0.48,1.1,0.59,1.78c0.11,0.68,0.17,1.41,0.17,2.18c0,0.64-0.07,1.29-0.2,1.94c-0.14,0.65-0.37,1.24-0.68,1.78
+                       c-0.31,0.53-0.73,0.97-1.24,1.3c-0.51,0.34-1.15,0.5-1.9,0.5c-0.43,0-0.83-0.07-1.2-0.21c-0.38-0.14-0.71-0.34-1-0.6
+                       c-0.29-0.25-0.52-0.56-0.71-0.92c-0.18-0.35-0.29-0.75-0.31-1.19H134.75z M136.41,125.81c-0.32,0-0.59,0.06-0.82,0.18
+                       c-0.24,0.12-0.43,0.28-0.58,0.48c-0.15,0.2-0.27,0.44-0.35,0.7c-0.08,0.26-0.11,0.54-0.11,0.82c0,0.29,0.04,0.58,0.11,0.85
+                       c0.08,0.27,0.19,0.51,0.35,0.71c0.15,0.2,0.34,0.37,0.58,0.49c0.23,0.13,0.51,0.19,0.82,0.19c0.32,0,0.61-0.06,0.85-0.18
+                       c0.24-0.12,0.44-0.29,0.6-0.49c0.16-0.21,0.28-0.45,0.36-0.72c0.08-0.27,0.12-0.55,0.12-0.85c0-0.29-0.04-0.56-0.12-0.82
+                       c-0.08-0.26-0.2-0.49-0.36-0.69c-0.16-0.2-0.36-0.36-0.6-0.48C137.02,125.87,136.74,125.81,136.41,125.81"/>
+       </g>
+</g>
+</svg>

diff --git a/images/projector.svg b/images/projector.svg
new file mode 100644 (file)
index 0000000..9995d68
--- /dev/null
+++ b/images/projector.svg
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Mode_Isolation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+        y="0px" viewBox="0 0 136.5 64.58" style="enable-background:new 0 0 136.5 64.58;" xml:space="preserve">
+<style type="text/css">
+       .st0{opacity:0.5;fill:url(#SVGID_1_);}
+       .st1{opacity:0.5;fill:url(#SVGID_2_);}
+       .st2{opacity:0.5;fill:url(#SVGID_3_);}
+       .st3{opacity:0.5;fill:url(#SVGID_4_);}
+       .st4{fill:#FFFFFF;}
+</style>
+<g>
+       <g>
+               <g>
+                       
+                               <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="237.4519" y1="64.3323" x2="237.4519" y2="5.8132" gradientTransform="matrix(-1 0 0 1 267.4514 0)">
+                               <stop  offset="0" style="stop-color:#FFFFFF"/>
+                               <stop  offset="0.0234" style="stop-color:#FFFFFF;stop-opacity:0.9766"/>
+                               <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+                       </linearGradient>
+                       <polygon class="st0" points="60,64.33 52,64.33 0,5.81 35.5,5.81                         "/>
+                       
+                               <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="222.7866" y1="64.3323" x2="222.7866" y2="3.748473e-07" gradientTransform="matrix(-1 0 0 1 267.4514 0)">
+                               <stop  offset="0" style="stop-color:#FFFFFF"/>
+                               <stop  offset="0.0234" style="stop-color:#FFFFFF;stop-opacity:0.9766"/>
+                               <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+                       </linearGradient>
+                       <polygon class="st1" points="76.5,64.33 64.5,64.33 12.83,0 63,5.81                      "/>
+                       
+                               <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="188.9983" y1="64.3323" x2="188.9983" y2="5.8132" gradientTransform="matrix(1 0 0 1 -82.5 0)">
+                               <stop  offset="0" style="stop-color:#FFFFFF"/>
+                               <stop  offset="0.097" style="stop-color:#FFFFFF;stop-opacity:0.903"/>
+                               <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+                       </linearGradient>
+                       <polygon class="st2" points="76.5,64.33 84.5,64.33 136.5,5.81 101,5.81                  "/>
+                       
+                               <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="175.2138" y1="64.3323" x2="175.2138" y2="-9.094947e-13" gradientTransform="matrix(1 0 0 1 -82.5 0)">
+                               <stop  offset="0" style="stop-color:#FFFFFF"/>
+                               <stop  offset="0.0234" style="stop-color:#FFFFFF;stop-opacity:0.9766"/>
+                               <stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+                       </linearGradient>
+                       <polygon class="st3" points="60,64.33 72,64.33 125.43,0 73.5,5.81                       "/>
+               </g>
+               <g>
+                       <path class="st4" d="M87.68,64.58H48.82c-0.14,0-0.25-0.11-0.25-0.25s0.11-0.25,0.25-0.25h38.86c0.14,0,0.25,0.11,0.25,0.25
+                               S87.82,64.58,87.68,64.58z"/>
+               </g>
+       </g>
+</g>
+</svg>

diff --git a/index.php b/index.php
index feb981f5696db7f8e7708f0953a51ba38c4d032a..3af73e1aa3e9d737eb83466c3aa243910f50ee39 100644 (file)
--- a/index.php
+++ b/index.php
@@ -19,6 +19,7 @@ $question = [
 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>The Bona 100-year anniversary quiz</title>
     <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="style/style.css">
@@ -26,17 +27,115 @@ $question = [
     <script type="text/javascript" src="js/bonaquiz.js"></script>
 </head>
 <body>
-<div id="background" data-section="home">
+<!--<div id="background" data-section="home">-->
+<!--    <div id="projector">-->
+<!---->
+<!--    </div>-->
+<!--</div>-->
+<!--<section class="home">-->
+<!--    <h1>The Bona 100&#8209;year</h1>-->
+<!--    <h2>anniversary quiz</h2>-->
+<!--    <h3>Think you know Bona?<br>Put it to the test by taking part in our short quiz.</h3>-->
+<!--    <a href="#" class="button">Start</a>-->
+<!--    <img src="images/logohome.svg" class="logo"/>-->
+<!--</section>-->
+
+<!-- **************************************** SECTION QUESTION 1 *******************************-------------->
+<!--<div id="background" class="backgroundQuestion" >-->
+<!--    <div id="projector">-->
+<!---->
+<!--    </div>-->
+<!--</div>-->
+<!--<section class="home questions">-->
+<!--    <h4 id="questionNumber">Question 1/10</h4>-->
+<!---->
+<!--    <h4 id="questionAsk">What kind of business was Bona founder Wilhelm Edner <br>-->
+<!--        running when he started to sell floor wax ?</h4>-->
+<!--    <ul>-->
+<!--        <li class="questions__list"><div class="questions__list--circle">-->
+<!--                <span class="questions__list--letter">A</span>-->
+<!--            </div>-->
+<!--            <span class="questions__list--text">Pharmacy</span>-->
+<!--        </li>-->
+<!--        <li class="questions__list">-->
+<!--            <div class="questions__list--circle">-->
+<!--                <span class="questions__list--letter">B</span>-->
+<!--            </div>-->
+<!--            <span class="questions__list--text">Coffee and grocer</span>-->
+<!--        </li>-->
+<!--        <li class="questions__list">-->
+<!--            <div class="questions__list--circle">-->
+<!--                <span class="questions__list--letter">C</span>-->
+<!--            </div>-->
+<!--            <span class="questions__list--text">Shoe shop</span>-->
+<!--        </li>-->
+<!--    </ul>-->
+<!---->
+<!--    <div class="progressbar"></div>-->
+<!--</section>-->
+
+<!-- **************************** SECTION 2 QUESTION1 REPONSE ********************-->
+
+
+<!--<div id="background" class="backgroundQuestion" >-->
+<!--    <div id="projector">-->
+<!---->
+<!--    </div>-->
+<!--</div>-->
+<!--<section class="home questions">-->
+<!--    <h4 id="questionNumber">Question 1/10</h4>-->
+<!---->
+<!--    <h4 id="questionAsk">What kind of business was Bona founder Wilhelm Edner <br>-->
+<!--        running when he started to sell floor wax ?</h4>-->
+<!---->
+<!--    <span class="correctInfo">Correct answer : </span>-->
+<!---->
+<!--    <ul>-->
+<!--        <li class="questions__list correctAnswer">-->
+<!--            <div class="questions__list--circle">-->
+<!--                <span class="questions__list--letter">B</span>-->
+<!--            </div>-->
+<!--            <span class="questions__list--text">Coffee and grocer</span>-->
+<!--        </li>-->
+<!--    </ul>-->
+<!---->
+<!--    <p class="response"> Wilhelm had a passion for coffee, which had been hard to come by during the previous war years.-->
+<!--        Floor wax was part of a wide range of products he offered through his general grocer business.</p>-->
+<!---->
+<!--    <a href="#" class="button next">Next</a>-->
+<!---->
+<!--    <div class="progressbar"></div>-->
+<!--</section>-->
+
+<!-- ********************************* SECTION 3 QUESTION 2 **********************************-->
+
+<div id="background" class="backgroundQuestion" >
     <div id="projector">
 
     </div>
 </div>
-<section class="home">
-    <h1>The Bona 100&#8209;year</h1>
-    <h2>anniversary quiz</h2>
-    <h3>Think you know Bona?<br>Put it to the test by taking part in our short quiz.</h3>
-    <a href="#" class="button">Start</a>
-    <img src="images/logohome.svg" class="logo"/>
+<section class=" questions">
+    <h4 id="questionNumber">Question 2/10</h4>
+
+    <h4 id="questionAsk">Which photo is the Austrian Chancellor's Office, Vienna, where
+        we had the opportunity to bring out the beauty in the floor?</h4>
+    <ul class="roundedQuestions">
+        <div>
+            <li class="questions__roundedList">
+            </li>
+            <li class="questions__roundedList">
+            </li>
+        </div>
+        <div>
+            <li class="questions__roundedList">
+            </li>
+            <li class="questions__roundedList">
+            </li>
+        </div>
+
+    </ul>
+
+    <div class="progressbar"></div>
 </section>
 </body>
 </html>
\ No newline at end of file

diff --git a/js/bonaquiz.js b/js/bonaquiz.js
index 2dc10356af4207e19b7fb39678f310414b5c668c..fbb1624bd0468bbe70e921654304ae43ea7547dc 100644 (file)
--- a/js/bonaquiz.js
+++ b/js/bonaquiz.js
@@ -12,17 +12,18 @@ function resize() {
     var hh = $(window).outerHeight();
 
     var vs = $("section:visible");
-    var home = vs.hasClass('home')
+    var home = vs.hasClass('home');
     $("section:visible").css('font-size', 10);
     var sh = vs.outerHeight();
     sh *= 1.1; // Margins
     if (home) {
         sh *= 1.1;
     }
-    console.log(sh, hh);
+    console.log('resize',sh, hh);
     var cssSection = {};
     if (sh > hh) {
         var scale = hh / sh;
+        console.log('scale',scale);
         $("section:visible").css('font-size', 10 * scale);
         sh = vs.outerHeight();
         if (home) {

diff --git a/question1.php b/question1.php
new file mode 100644 (file)
index 0000000..a9e170a
--- /dev/null
+++ b/question1.php
@@ -0,0 +1,64 @@
+<?php
+$question = [
+    ['id' => 1,
+        'type' => 'text',
+        'label' => 'What kind of business was Bona founder Wilhelm Edner running when he started to sell  floor wax?',
+        'choices' => ['Pharmacy', 'Coffee and grocer', 'Shoe shop'],
+        'right' => 2,
+        'explaination' => ' Wilhelm had a passion for coffee, which had been hard to come by during the previous war years. Floor wax was part of a wide range of products he offered through his general grocer business.',
+    ],
+    ['id'=>2,
+        'type'=>'images',
+        'label'=>'Which photo is the Austrian Chancellor\'s Office, Vienna, where we had the opportunity to bring out the beauty in the floor?',
+        'imagesnb'=>4,
+        'right'=>4,
+        'explaination'=>'']
+];
+?>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>The Bona 100-year anniversary quiz</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="style/style.css">
+    <script type="text/javascript" src="js/jquery.min.js"></script>
+    <script type="text/javascript" src="js/bonaquiz.js"></script>
+</head>
+<body>
+<div id="background" class="backgroundQuestion" >
+    <div id="projector">
+
+    </div>
+</div>
+<section class="home questions">
+    <h4 id="questionNumber">Question 1/10</h4>
+
+    <h4 id="questionAsk">What kind of business was Bona founder Wilhelm Edner <br>
+    running when he started to sell floor wax ?</h4>
+
+
+    <ul>
+        <li class="questions__list"><div class="questions__list--circle">
+                <span class="questions__list--letter">A</span>
+            </div>
+            <span class="questions__list--text">Pharmacy</span>
+        </li>
+        <li class="questions__list">
+            <div class="questions__list--circle">
+                <span class="questions__list--letter">B</span>
+            </div>
+            <span class="questions__list--text">Coffee and grocer</span>
+        </li>
+        <li class="questions__list">
+            <div class="questions__list--circle">
+                <span class="questions__list--letter">C</span>
+            </div>
+            <span class="questions__list--text">Shoe shop</span>
+        </li>
+    </ul>
+
+    <div class="progressbar"></div>
+</section>
+</body>
+</html>
\ No newline at end of file

diff --git a/style/style.sass b/style/style.sass
new file mode 100644 (file)
index 0000000..f46b122
--- /dev/null
+++ b/style/style.sass
@@ -0,0 +1,222 @@
+$green : #669933
+$darkblue: #18264f
+*
+  margin: 0
+  padding: 0
+  box-sizing: border-box
+  font-weight: 300
+@font-face
+  font-family: Helvetica
+  src: url("../HelveticaNeueLight.woff")
+html
+  font-family: Helvetica, sans-serif
+  height: 100%
+  max-height: 100%
+
+body
+  font-family: Helvetica, sans-serif
+  height: 100%
+  max-height: 100%
+  background-color: #0a246e
+  color: #fff
+  overflow: hidden
+  width: 100%
+  max-width: 100%
+  opacity: 0
+  transition: opacity 500ms
+  &.loaded
+    opacity: 1
+
+section
+  z-index: 1
+  position: relative
+  max-width: 1200px
+  padding: 0 2em
+  margin: 0 auto
+  font-size: 10px
+  text-align: center
+  h1
+    font-size: 9em
+  h2
+    font-size: 6em
+  h3
+    font-size: 3.7em
+    margin-top: 1.62em
+    line-height: 1.5em
+  h4
+    font-size: 2.45em
+    line-height: 1.5em
+  a.button
+    display: inline-block
+    font-size: 5.6em
+    color: #fff
+    background-color: $green
+    border-radius: 1.25em
+    border: 0
+    padding: 0.54em 1.96em
+    margin-top: 2.14em
+    cursor: pointer
+    text-decoration: none
+  .logo
+    display: block
+    width: 26em
+    text-align: center
+    margin: 0 auto
+    margin-top: 10em
+
+#background
+  position: absolute
+  top: 0
+  left: 0
+  width: 100%
+  height: 100%
+  #projector
+    position: absolute
+    bottom: 0
+    width: 100%
+    height: 100%
+    left: 0
+    background-image: url("../images/projector.svg")
+    background-repeat: no-repeat
+    background-position: 50% 100%
+    background-size: auto 100%
+    opacity: 0.5
+  &[data-section="home"]
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, #000000 100%)
+
+.backgroundQuestion #projector
+    bottom: 0px!important
+.questions
+  position: static
+  padding-top: 3em
+  #questionNumber
+    margin-top: 1em
+    text-transform: uppercase
+    margin-bottom: 20px
+    &::after
+      content: ''
+      display: block
+      position: relative
+      background: $green
+      width: 3.125em
+      height: 0.375em
+      margin: 0 auto
+      top: 1.250em
+  #questionAsk
+    margin: 4em auto 2em auto
+    max-width: 31em
+  ul
+    list-style: none
+  &__list
+    position: relative
+    max-width: 40em
+    height: 10em
+    padding: 3em
+    background: white
+    margin: 0 auto
+    border-radius: 5.25em
+    display: flex
+    align-items: center
+    margin-bottom: 2em
+    cursor: pointer
+    transition: 400ms all ease
+    &--text
+      font-size: 2.3em
+      color: $darkblue
+      padding-left: 0.5em
+    &--letter
+      color: white
+      left: 1.8em
+      font-size: 2.2em
+    &--circle
+      width: 5em
+      height: 5em
+      background: $green
+      border-radius: 50%
+      position: relative
+      left: -0.8em
+      display: flex
+      justify-content: center
+      align-items: center
+.questions__list:hover
+  background: $green
+  transition: 400ms all ease
+  .questions__list--circle
+    background: white
+    transition: 400ms all ease
+  .questions__list--letter
+    color: $green
+    transition: 400ms all ease
+  .questions__list--text
+    color: white
+    transition: 400ms all ease
+
+.progressbar
+  width: 50em
+  margin: 0 auto
+  position: absolute
+  bottom: 3em
+  height: 1em
+  background: white
+  left: 0
+  right: 0
+  &::before
+    content: ''
+    position: absolute
+    width: 10%
+    height: 100%
+    background: $green
+    left: 0
+.correctInfo
+  font-size: 2em
+.correctAnswer
+  margin-top: 2em
+  background: $green
+  .questions__list--circle
+    background: white
+  .questions__list--letter
+    color: $green
+  .questions__list--text
+    color: white
+.response
+  font-size: 2.2em
+  max-width: 27em
+  margin: 2em auto 0 auto
+
+section.questions a.button.next
+  font-size: 3.6em
+  z-index: 5
+  position: relative
+  margin-top: 1.14em
+
+.roundedQuestions
+  display: flex
+  justify-content: center
+  align-items: center
+  position: relative
+  width: 100%
+  .questions__roundedList
+    position: relative
+    background: white
+    height: 5em
+    padding: 10em
+    width: 5em
+    border-radius: 50%
+    margin: 2em 2em 2em 2em
+    display: inline-block
+    cursor: pointer
+  div
+    display: inline-block
+
+@media only screen and (max-width: 529px)
+  #background #projector
+    background-size: 150% auto
+  .progressbar
+    width: 25em
+    height: 0.5em
+  //.roundedQuestions
+  //  .questions__roundedList
+  //    width: 5em
+  //    height: 5em
+  //    padding: 8em
+