Added images and and made a page to display images

2026-04-17 22:08:06 +02:00 · 2026-04-17 22:08:06 +02:00 · 53bc13d468
commit 53bc13d468
parent 964a2759cb
63 changed files with 63 additions and 99 deletions
--- a/css/style.css
+++ b/css/style.css
@ -131,6 +131,39 @@ background: linear-gradient(0deg, rgba(9, 38, 38, 1) 0%, rgba(20, 52, 66, 1) 64%
    touch-action: manipulation;
 }

+.gallery-container {
+    max-width: 1920px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: repeat(2, minmax(250px, 1fr));
+    gap: 15px;
+    padding: 20px;
+    grid-template-rows: 300px;
+
+    @media screen and (min-width: 1440px) {
+         grid-template-columns: repeat(4, minmax(250px, 1fr));
+    }
+}
+
+.gallery-item {
+    height: 300px;
+    width: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    p {
+        height: 10%;
+    }
+
+    img {
+        width: 100%;
+        height: 90%;
+        object-fit: contain;
+    }
+}
+
 footer {
    position: absolute;
    bottom: 0;
--- a/images.php
+++ b/images.php
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="sv">    
+    <head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/style.css">
+    </head>
+    <body>
+        <div class="gallery-container">
+            <?php 
+            $dir = 'img/';
+            $images = glob($dir . "*.{jpg,jpeg,png,gif,webp,svg}", GLOB_BRACE);    
+            foreach ($images as $image) {
+                echo '<div class="gallery-item">';
+                echo '<img src="' . $image . '" alt="Photo">';
+                echo '<p>' . $image . '</p>';
+                echo '</div>';
+            }
+            ?>
+        </div>
+    </body>
+</html>
--- a/img/1.webp
+++ b/img/1.webp
--- a/img/10.gif
+++ b/img/10.gif
--- a/img/11.gif
+++ b/img/11.gif
--- a/img/12.webp
+++ b/img/12.webp
--- a/img/13.gif
+++ b/img/13.gif
--- a/img/14.gif
+++ b/img/14.gif
--- a/img/15.gif
+++ b/img/15.gif
--- a/img/16.gif
+++ b/img/16.gif
--- a/img/17.gif
+++ b/img/17.gif
--- a/img/18.gif
+++ b/img/18.gif
--- a/img/19.gif
+++ b/img/19.gif
--- a/img/2.gif
+++ b/img/2.gif
--- a/img/20.gif
+++ b/img/20.gif
--- a/img/21.webp
+++ b/img/21.webp
--- a/img/22.gif
+++ b/img/22.gif
--- a/img/23.webp
+++ b/img/23.webp
--- a/img/24.gif
+++ b/img/24.gif
--- a/img/25.gif
+++ b/img/25.gif
--- a/img/26.gif
+++ b/img/26.gif
--- a/img/27.gif
+++ b/img/27.gif
--- a/img/28.gif
+++ b/img/28.gif
--- a/img/29.gif
+++ b/img/29.gif
--- a/img/3.gif
+++ b/img/3.gif
--- a/img/30.webp
+++ b/img/30.webp
--- a/img/31.gif
+++ b/img/31.gif
--- a/img/32.webp
+++ b/img/32.webp
--- a/img/33.gif
+++ b/img/33.gif
--- a/img/34.webp
+++ b/img/34.webp
--- a/img/35.gif
+++ b/img/35.gif
--- a/img/36.gif
+++ b/img/36.gif
--- a/img/37.gif
+++ b/img/37.gif
--- a/img/38.gif
+++ b/img/38.gif
--- a/img/39.gif
+++ b/img/39.gif
--- a/img/4.webp
+++ b/img/4.webp
--- a/img/40.webp
+++ b/img/40.webp
--- a/img/41.gif
+++ b/img/41.gif
--- a/img/43.webp
+++ b/img/43.webp
--- a/img/44.webp
+++ b/img/44.webp
--- a/img/45.webp
+++ b/img/45.webp
--- a/img/46.webp
+++ b/img/46.webp
--- a/img/47.gif
+++ b/img/47.gif
--- a/img/48.gif
+++ b/img/48.gif
--- a/img/49.gif
+++ b/img/49.gif
--- a/img/5.gif
+++ b/img/5.gif
--- a/img/50.webp
+++ b/img/50.webp
--- a/img/51.gif
+++ b/img/51.gif
--- a/img/52.gif
+++ b/img/52.gif
--- a/img/53.gif
+++ b/img/53.gif
--- a/img/54.gif
+++ b/img/54.gif
--- a/img/55.gif
+++ b/img/55.gif
--- a/img/6.webp
+++ b/img/6.webp
--- a/img/7.gif
+++ b/img/7.gif
--- a/img/8.webp
+++ b/img/8.webp
--- a/img/9.gif
+++ b/img/9.gif
--- a/index.php
+++ b/index.php
@ -1,6 +1,6 @@

-            <?php 
-                $dir = 'pages/*.php';
+<?php 
+    $dir = 'pages/*.html';
    $files = glob($dir);    

    if(empty($files)) {
@ -10,5 +10,5 @@
    $randomPage = $files[array_rand($files)];

    echo file_get_contents($randomPage);
-            ?>
+?>
       
--- a/pages/1.html
+++ b/pages/1.html
--- a/pages/2.php
+++ b/pages/2.php
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="sv">    
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../css/style.css">
-    </head>
-    <body>
-        <main>
-            <div>Hej från 2.php</div>
-        </main>
-        <footer>
-             <a href="/info.php">Vad är detta för nåt?</a>
-             <div class="footer-text">
-                vBytes | vbytes.se
-             </div>
-        </footer>
-    </body>
-</html>
--- a/pages/3.php
+++ b/pages/3.php
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="sv">    
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../css/style.css">
-    </head>
-    <body>
-        <main>
-            <div>Hej från 3.php</div>
-        </main>
-        <footer>
-             <a href="/info.php">Vad är detta för nåt?</a>
-             <div class="footer-text">
-                vBytes | vbytes.se
-             </div>
-        </footer>
-    </body>
-</html>
--- a/pages/4.php
+++ b/pages/4.php
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="sv">    
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../css/style.css">
-    </head>
-    <body>
-        <main>
-             <div>Hej från 4.php</div>
-        </main>
-        <footer>
-             <a href="/info.php">Vad är detta för nåt?</a>
-             <div class="footer-text">
-                vBytes | vbytes.se
-             </div>
-        </footer>
-    </body>
-</html>
--- a/pages/5.php
+++ b/pages/5.php
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="sv">    
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../css/style.css">
-    </head>
-    <body>
-        <main>
-            <div>Hej från 5.php</div>
-        </main>
-        <footer>
-             <a href="/info.php">Vad är detta för nåt?</a>
-             <div class="footer-text">
-                vBytes | vbytes.se
-             </div>
-        </footer>
-    </body>
-</html>
--- a/pages/6.php
+++ b/pages/6.php
@ -1,18 +0,0 @@
-<!DOCTYPE html>
-<html lang="sv">    
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="../css/style.css">
-    </head>
-    <body>
-        <main>
-            <div>Hej från 6.php</div>
-        </main>
-        <footer>
-             <a href="/info.php">Vad är detta för nåt?</a>
-             <div class="footer-text">
-                vBytes | vbytes.se
-             </div>
-        </footer>
-    </body>
-</html>