Simple version of /screenshots now final (design similar to original,…

… maybe change to slider for images?)

screenshots/index.html

@@ -32,7 +32,7 @@ <h4>Videos</h4>
                 &bullet; Cross-architecture building an ARM64 disk image:
                 <a href="https://youtu.be/5eZcMTT70rg">
                   Video in english</a>
-                (<a href="fai-5.4-cross-architecture.mp4">download 49MB</a>)
+                (<a href="fai-5.4-cross-architecture.mp4">download 49MB</a>),
                 <a href="https://fai-project.org/logs/armhost/last/">log files</a>
               </li>
               <li>
@@ -55,52 +55,71 @@ <h4>Videos</h4>
                 <a href="https://www.youtube.com/watch?v=1Vw9NJ9KVfE">Video 3</a>
               </li>
               <li>
-                &bullet; <a href="https://www.youtube.com/watch?v=wpLPRG3QA64">Demo video</a>
+                &bullet;
+                <a href="https://www.youtube.com/watch?v=wpLPRG3QA64">Demo video</a>
                 for
                 <a href="https://www.tuxedocomputers.com/TUXEDO-WebFAI.geek">WebFAI</a>
               </li>
               <li>
-                &bullet; <a href="../talks">Videos of talks about FAI</a>
+                &bullet;
+                <a href="../talks">Videos of talks about FAI</a>
               </li>
             </ul>
           </div>
         </div>
 
-        <h4>The fai-monitor GUI</h4>
-        The FAI monitor daemon (fai-monitor) receives small messages from each install client (<a href="/logs/fai-monitor.log">sample log file of fai-monitor</a>), which describes what each client is doing at the moment. The GUI creates a nice table and is showing all actions in real time for all clients.
+        <div class="row">
+          <div class="col s12">
+            <h4>The fai-monitor GUI</h4>
+            <p>The FAI monitor daemon (fai-monitor) receives small messages from each install client (<a href="/logs/fai-monitor.log">sample log file of fai-monitor</a>), which describes what each client is doing at the moment. The GUI creates a nice table and is showing all actions in real time for all clients.</p>
 
-        <a href="fai-monitor.gif"><img alt="An example of the fai-monitor-gui" src="faimond.png" width="600" border="0"/></a>
-        (Click on screenshot for animated gif)
+            <a href="fai-monitor.gif"><img alt="An example of the fai-monitor-gui" src="faimond.png" width="600" border="0"/></a>
+            <p>(Click on screenshot for animated gif)</p>
+          </div>
+        </div>
 
-        <h2>The new autodiscover function of FAI 5.0</h2>
+        <div class="row">
+          <div class="col s12">
+            <h4>The new autodiscover function of FAI 5.0</h4>
 
-        <img alt="FAI autodiscover" src="fai1.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai1.png" width="600"/>
 
-        <img alt="FAI autodiscover" src="fai2.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai2.png" width="600"/>
 
-        <img alt="FAI autodiscover" src="fai3.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai3.png" width="600"/>
 
-        <img alt="FAI autodiscover" src="fai4.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai4.png" width="600"/>
 
-        <img alt="FAI autodiscover" src="fai5.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai5.png" width="600"/>
 
-        <img alt="FAI autodiscover" src="fai10.png" width="600"/>
+            <img alt="FAI autodiscover" src="fai10.png" width="600"/>
 
-        <h2>A slideshow of an installation via CD</h2>
+          </div>
+        </div>
 
-        <a href="/slideshow/"><img alt="slideshow overview" src="slideshow-overview.png" border="0"/></a>
+        <div class="row">
+          <div class="col s12">
+            <h4>A slideshow of an installation via CD</h4>
 
-        <h2>Sample log files</h2>
-        <ul>
-          <li>
-            <a href="fai.txt">fai.log</a>
-            from an installation
-          </li>
-          <li>
-            <a href="/logs">More Log files</a>
-            of successfully installed computers
-          </li>
-        </ul>
+            <a href="/slideshow/"><img alt="slideshow overview" src="slideshow-overview.png" border="0"/></a>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col s12">
+            <h4>Sample log files</h4>
+            <ul>
+              <li>
+                <a href="fai.txt">fai.log</a>
+                from an installation
+              </li>
+              <li>
+                <a href="/logs">More Log files</a>
+                of successfully installed computers
+              </li>
+            </ul>
+          </div>
+        </div>
 
       </div>
     </main>