add margin to images so that everything looks less cluttered

mulab-mir · Aug 9, 2024 · b057bc0 · b057bc0
1 parent c44fb55
commit b057bc0
Showing 1 changed file with 11 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -46,6 +46,13 @@
     <script src="static/js/bulma-carousel.min.js"></script>
     <script src="static/js/bulma-slider.min.js"></script>
     <script src="static/js/index.js"></script>
+
+    <style>
+        .spaced-image {
+            margin-top: 20px;
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
 <body>
 
@@ -199,7 +206,7 @@ <h2 class="title is-3">Dataset</h2>
                     <!-- side by side images-->
                     <div class="columns is-centered">
                         <img src="./static/images/generation_example.png" alt="QA generation example"
-                             class="teaser-image"
+                             class="teaser-image spaced-image"
                              width="60%" height="100%" class="center"/>
                     </div>
                     <p>
@@ -209,7 +216,7 @@ <h2 class="title is-3">Dataset</h2>
                         To ensure the dataset’s accuracy, every question was rigorously validated by human annotators, who filtered out any ambiguous or incorrect options.
                     </p>
                     <div class="columns is-centered">
-                        <img src="./static/images/eval_dims.png" alt="Evaluation dimensions" class="teaser-image"
+                        <img src="./static/images/eval_dims.png" alt="Evaluation dimensions" class="teaser-image spaced-image"
                              width="60%" height="100%" class="center"/>
                     </div>
                     <p>
@@ -236,7 +243,7 @@ <h2 class="title is-3">Results</h2>
                     <!-- side by side images-->
                     <div class="columns is-centered">
                         <img src="./static/images/finegrained_results.png" alt="Finegrained Results"
-                             class="teaser-image"
+                             class="teaser-image spaced-image"
                              width="60%" height="100%" class="center"/>
                     </div>
                     <p>
@@ -246,7 +253,7 @@ <h2 class="title is-3">Results</h2>
                         everyday sounds.
                     </p>
                     <div class="columns is-centered">
-                        <img src="./static/images/results.png" alt="Overview of Results" class="teaser-image"
+                        <img src="./static/images/results.png" alt="Overview of Results" class="teaser-image spaced-image"
                              width="60%" height="100%" class="center"/>
                     </div>
                 </div>