update animation

css/style.css

@@ -17,9 +17,6 @@ color: rgba(255, 255, 255, 0.3);
 .hidden.menu {
     display: none;
 }
-.masthead.segment {
-    min-height: 300px;
-}
 .masthead a h1 {
     color: #fff;
     font-weight: bold;
@@ -42,11 +39,11 @@ color: rgba(255, 255, 255, 0.3);
 }
 .masthead h3 {
     background-color: black;
-    padding: 5em 0;
+    padding: 42.5vh 0;
     font-size: 5rem;
 }
 
-.masthead .divider {
+.masthead .ui.horizontal.divider {
     padding: 3em;
     margin: 0;
 }
@@ -87,7 +84,6 @@ color: rgba(255, 255, 255, 0.3);
 .ui.vertical.stripe .horizontal.divider {
     margin: 3em 0em;
 }
-
 .quote.stripe.segment {
     padding: 0em;
 }
@@ -109,20 +105,23 @@ color: rgba(255, 255, 255, 0.3);
 }
 
 @media only screen and (max-width: 700px) {
-.ui.fixed.menu {
-    display: none !important;
-}
-.secondary.pointing.menu .item,
-.secondary.pointing.menu .menu {
-    display: none;
-}
-.secondary.pointing.menu .toc.item {
-    display: block;
-}
-#demo-result > .row > .column,
-#showcase .ui.stackable.grid > .row > .column {
-    width: 33.3% !important;
-}
+    .ui.fixed.menu {
+        display: none !important;
+    }
+    .secondary.pointing.menu .item,
+    .secondary.pointing.menu .menu {
+        display: none;
+    }
+    .secondary.pointing.menu .toc.item {
+        display: block;
+    }
+    #demo-result > .row > .column,
+    #showcase .ui.stackable.grid > .row > .column {
+        width: 33.3% !important;
+    }
+    .masthead h3 {
+        font-size: 2em;
+    }
 }
 
 .what-provides {

index.html

@@ -36,14 +36,14 @@
     <div class="pusher">
         <div class="ui inverted instagram vertical masthead center aligned segment">
             <h3>
-                What is my <a href="#ua-txt-info"><span class="ui massive white label">{ device.type }</span></a> ?
+                What is my <a href="#ua-txt-info"><span class="ui black huge label">User-Agent</span></a>
             </h3>
             <div class="ui horizontal inverted divider">
                 Introducing
             </div>
             <div class="ui text container">
                     <a href="https://uaparser.dev"><h1>UAParser.js</h1></a>
-                    <h2>Abstract Away The Hassle of User-Agent Detection</h2>
+                    <h2>Abstracts Away The Hassle of User-Agent Detection</h2>
                 <div class="ui massive buttons">
                     <a href="#try" class="ui violet button"><i class="magic icon"></i>Try Demo</a>
                     <a href="https://docs.uaparser.dev" class="ui green button"><i class="book icon"></i>Read Docs</a>
@@ -54,7 +54,7 @@
         </div>
 
 
-        <div id="try" class="ui text container">
+        <!--div id="try" class="ui text container">
             <div class="ui horizontal divider">
                 FEATURED : OUR SPONSORS
             </div>
@@ -67,7 +67,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div-->
 
 
         <div class="ui text container">
@@ -83,13 +83,13 @@
                     </div>
                     <div class="ui basic segment center aligned">
                         <p class="what-provides" id="ua-txt-info">
-                            What your browser provides = 😱😵‍💫❓
+                            What your browser provides = 😱😵‍💫❌
                         </p>
                         <div class="ui horizontal divider">
                             VS
                         </div>
                         <p class="what-provides">
-                            What {UAParser.js} provides = 🙂👍🎉
+                            What {UAParser.js} provides = 🙂💰✅
                         </p>
                     </div>
                     <pre><code id="ua-result" class="language-json"></code></pre>

js/script.js

@@ -6,12 +6,13 @@ $(document)
         $('.masthead h3 .label').transition('fly down', function () {
             $(this).text(labels[counter++]).transition('fade up', 100, function (){
             if(counter>=labels.length)counter=0;
-            $(this).transition('jiggle');
+            $(this).transition('tada');
             });
         });
-    }
+    };
+    $('.masthead h3').transition({animation: 'slide up', interval: 9000});
     rotateLabel();
-    setInterval(rotateLabel, 3000);
+    setInterval(rotateLabel, 1000);
 
     var updateDemo = function (result) {
         if(!result) return;
@@ -107,8 +108,8 @@ $(document)
         qs = new URLSearchParams(window.location.search).get('ua');
     }
     if (qs) {
-        $('#ua-txt-info').text('What the browser provides = 😱😵‍💫❓');
-        $('#ua-txt').get(0).scrollIntoView();
+        $('#ua-txt-info').text('What the browser provides = 😱😵‍💫❌');
+        $('#demo-result').get(0).scrollIntoView();
         updateDemo(UAParser(qs));
     } else {
         UAParser().withClientHints().then(function(result) {