Updated image view

joemarch010 · Oct 24, 2024 · accde14 · accde14
1 parent 6bae012
commit accde14
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -1,14 +1,86 @@
-<h1>Hello! </h1>
-
-<div class="row">
-    <div class="column">
-      <img src="3b/gain-enhanced/1_gain_enhanced_region_1.png" alt="Snow" style="width:100%">
-    </div>
-    <div class="column">
-      <img src="3b/gain-enhanced/1_gain_enhanced_region_2.png" alt="Forest" style="width:100%">
-    </div>
-    <div class="column">
-      <img src="3b/gain-enhanced/1_gain_enhanced_region_3.png" alt="Mountains" style="width:100%">
-    </div>
-  </div>
-
+<!DOCTYPE html>
+<html>
+<head>
+<link rel="stylesheet" href="main.css">
+</head>
+<body>
+
+<div class="scroll-container">
+      <img src="3b/gain-enhanced/1_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+      <img src="3b/gain-enhanced/1_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+      <img src="3b/gain-enhanced/1_gain_enhanced_region_3.png" alt="Mountains" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/2_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/2_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/3_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/3_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/3_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/4_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/4_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/4_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_4.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_5.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_6.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_7.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/6_gain_enhanced_region_8.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/7_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/7_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/7_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/8_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/8_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/8_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/8_gain_enhanced_region_4.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/9_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/9_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/9_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/10_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/10_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/11_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/11_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/11_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/11_gain_enhanced_region_4.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/12_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/12_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+    <img src="3b/gain-enhanced/12_gain_enhanced_region_3.png" alt="Forest" style="width:25%">
+</div>
+
+<div class="scroll-container">
+    <img src="3b/gain-enhanced/13_gain_enhanced_region_1.png" alt="Snow" style="width:25%">
+    <img src="3b/gain-enhanced/13_gain_enhanced_region_2.png" alt="Forest" style="width:25%">
+</div>
+
+
+</body>
+</html>
diff --git a/main.css b/main.css
@@ -11,4 +11,15 @@
     clear: both;
     display: table;
   }
+
+  div.scroll-container {
+    background-color: #333;
+    overflow: auto;
+    white-space: nowrap;
+    padding: 10px;
+  }
+
+  div.scroll-container img {
+    padding: 10px;
+  }