updated demo

Author: nk-o

demo/css/demo.css

@@ -77,6 +77,12 @@ a:hover, a:focus {
     }
 }
 
+
+/* Lighter background */
+.lighter-bg {
+    background-color: #0f0f11;
+}
+
 /* hero block */
 .hero {
     display: flex;
@@ -95,8 +101,8 @@ a:hover, a:focus {
     letter-spacing: -0.01em;
     font-weight: 800;
 }
-.hero.jarallax > .jarallax-img,
-.hero.jarallax > .jarallax-container {
+.hero.jarallax > .jarallax-img img,
+.hero.jarallax > .jarallax-container img {
     filter: blur(3px);
 }
 .hero-name {
@@ -108,6 +114,10 @@ a:hover, a:focus {
     margin-bottom: 20px;
     text-transform: uppercase;
 }
+.hero + .demo-gap {
+    min-height: 230px;
+}
+
 .text-center {
     text-align: center;
 }
@@ -124,13 +134,16 @@ a:hover, a:focus {
     flex-wrap: wrap;
     justify-content: center;
     gap: 10px;
+}
+* + .buttons {
     margin-top: 20px;
 }
 a.button {
     display: inline-block;
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
+    text-align: center;
     padding: 12px;
     border-radius: 4px;
     min-width: 200px;
@@ -171,7 +184,6 @@ a.button-outline:focus {
 
 /* Demo Content */
 .demo-content {
-    background-color: #0b0b0b;
     padding: 80px;
 }
 
@@ -185,6 +197,12 @@ a.button-outline:focus {
 }
 
 
+/* Footer */
+.footer {
+    text-align: center;
+}
+
+
 /* Mobile */
 @media screen and (max-width: 500px) {
     .demo-gap,

demo/index.html

@@ -59,7 +59,7 @@ <h2>Different parallax speed</h2>
       <img class="jarallax-img" src="images/image-3.jpg" alt="" loading="lazy" />
     </div>
 
-    <div class="demo-content demo-gap">
+    <div class="demo-gap demo-content lighter-bg">
       <div class="container">
         <p>
           So Give doesn't forth male him. God cattle rule Heaven blessed Beast lesser him so. Fowl
@@ -108,7 +108,14 @@ <h2>Self-Hosted Videos / Youtube / Vimeo</h2>
       <img class="jarallax-img" src="video/video.png" alt="" loading="lazy" />
     </div>
 
-    <div class="demo-gap">
+    <div class="demo-gap lighter-bg">
+      <div class="buttons">
+        <a class="button" href="https://github.com/nk-o/jarallax/blob/master/README.md" target="_blank">Get Started</a>
+        <a class="button button-outline" href="https://github.com/nk-o/jarallax/" target="_blank">GitHub</a>
+      </div>
+    </div>
+
+    <div class="demo-gap footer">
       <p>Jarallax &copy; 2022 nK</p>
       <small>
         All images taken from <a href="https://unsplash.com/">https://unsplash.com/</a>