✨ Site > Demo > Add labels

site/src/javascript/Demo.js

@@ -77,7 +77,7 @@ export default class Demo
             this.goStep(4)
         }
 
-        if(this.speakerCurrentTime < 17.5 && this.$speakerVideo.currentTime >= 17.5)
+        if(this.speakerCurrentTime < 17.25 && this.$speakerVideo.currentTime >= 17.25)
         {
             this.goStep(5)
         }

site/src/style/header.styl

@@ -92,7 +92,7 @@ section.header
 
     .demo
         position absolute
-        top 520px
+        top 505px
         left 50%
 
         .speaker
@@ -116,6 +116,14 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+                .label
+                    position absolute
+                    top calc(100% + 6px)
+                    left -50px
+                    right -50px
+                    white-space nowrap
+                    text-align center
+
         .audience
             position absolute
             top -150px
@@ -138,6 +146,14 @@ section.header
                 background-repeat no-repeat
                 background-position center center
 
+                .label
+                    position absolute
+                    top calc(100% + 6px)
+                    left -50px
+                    right -50px
+                    white-space nowrap
+                    text-align center
+
             .url-bar
                 position absolute
                 top 1.5%
@@ -173,7 +189,7 @@ section.header
             top 0
             left 0
             opacity 0
-            transition opacity 0.5s
+            transition opacity 0.25s
             will-change opacity
 
             .bar