New version.

JSON/1.json

@@ -0,0 +1,13 @@
+{
+    "NikolaTesla" : [
+        {  "Image" : "./img/1.jpg"   },
+        {  "Image" : "./img/2.jpg"   },
+        {  "Image" : "./img/3.jpg"   },
+        {  "Image" : "./img/4.jpg"   },
+        {  "Image" : "./img/5.jpg"   },
+        {  "Image" : "./img/6.jpg"   },
+        {  "Image" : "./img/7.jpg"   },
+        {  "Image" : "./img/8.jpg"   },
+        {  "Image" : "./img/9.jpg"   }
+    ]
+}

JSON/2.json

@@ -0,0 +1,12 @@
+{
+    "NikolaTesla" : [
+        {  "Image" : "./img/10.jpg"  },
+        {  "Image" : "./img/11.jpg"  },
+        {  "Image" : "./img/12.jpg"  },
+        {  "Image" : "./img/13.jpg"  },
+        {  "Image" : "./img/14.jpg"  },
+        {  "Image" : "./img/15.jpg"  },
+        {  "Image" : "./img/16.jpg"  },
+        {  "Image" : "./img/17.jpg"  }
+    ]
+}

index.html

@@ -11,8 +11,19 @@
             <header>
                 <h1>Nikola Tesla</h1>
             </header>
-            <main id="main"></main>
-            <footer></footer>
+            <main>
+                <div class="day">
+                    <p>28/09/2023</p>
+                    <div class="content" id="2"></div>
+                </div>
+
+                <div class="day">
+                    <p>26/09/2023</p>
+                    <div class="content" id="1"></div>
+                </div>
+
+            </main>
+            <footer><p>By <a href="https://github.com/lucas-catto/" target="blank">Lucas Catto</a></p></footer>
         </div>
 
         <script src="./script.js"></script>

script.js

@@ -1,19 +1,35 @@
 
 document.addEventListener("DOMContentLoaded", function(){
 
-    fetch('Nikola-Tesla.json')
+    fetch('./JSON/1.json')
 
         .then(response => response.json())
         .then(data => {
 
             let tesla = '';
 
             data.NikolaTesla.forEach(nikola => {
-
                 tesla += ` <img src="${nikola.Image}"> `;
-
             });
-            document.getElementById('main').innerHTML = tesla;
+            document.getElementById('1').innerHTML = tesla;
         })
         .catch(error = console.error('Error to load the images: ', error));
+
 });
+
+document.addEventListener("DOMContentLoaded", function(){
+
+    fetch('./JSON/2.json')
+
+        .then(response => response.json())
+        .then(data => {
+
+            let tesla = '';
+
+            data.NikolaTesla.forEach(nikola => {
+                tesla += ` <img src="${nikola.Image}"> `;
+            });
+            document.getElementById('2').innerHTML = tesla;
+        })
+        .catch(error = console.error('Error to load the images: ', error));
+});

style.css

@@ -1,6 +1,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap');
 
+:root {
+    --default: rgb(24, 24, 53);
+}
+
 * {
     border:                0;
     padding:               0;
@@ -29,7 +33,7 @@ body {
     max-width:             1200px;
     height:                auto;
     min-height:            100%;
-    background-color:      rgb(24, 24, 53);
+    background-color:      var(--default);
 }
 
 header {
@@ -41,12 +45,36 @@ header {
 }
 
 main {
+    width:                 100%;
+    height:                auto;
+    min-height:            100vh;
+    padding:               14px 0;
+}
+
+.day {
+    width:                 100%;
+    height:                auto;
+
     display:               flex;
-    justify-content:       space-evenly;
+    flex-direction:        column;
     align-items:           center;
+}
+
+.day p {
+    text-align:            center;
+    width:                 92%;
+    font-size:             16pt;
+    border-bottom:         2px solid white;
+    margin:                15px 0;
+    padding:               0 0 6px 0;
+}
+
+.content {
+    display:               flex;
     flex-wrap:             wrap;
-    gap:                   20px;
-    padding:               30px 20px;
+    justify-content:       center;
+    gap:                   25px;
+    padding:               0 15px;
 }
 
 img {
@@ -55,5 +83,21 @@ img {
     height:                auto;
     vertical-align:        middle;
     border:                1px solid white;
-    transition:            .2s;
 }
+
+footer {
+    width:                 100%;
+    height:                auto;
+    padding:               15px 0;
+    text-align:            center;
+    border-top:            1px solid white;
+}
+
+a { text-decoration: none; }
+
+a:hover {
+    color:                 var(--default);
+    background-color:      white;
+    border-radius:         3px;
+    padding:               0 2px;
+}