From e86f2110fcd2737c813a5e380f1dcfd85c0f7326 Mon Sep 17 00:00:00 2001
From: MHehdhdh12 <mshahzaibchattha@gmail.com>
Date: Mon, 16 Dec 2024 02:44:06 +0100
Subject: [PATCH] Create index.html

---
 Gallery/index.html | 160 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 Gallery/index.html
diff --git a/Gallery/index.html b/Gallery/index.html
new file mode 100644
index 00000000..8853ae93
--- /dev/null
+++ b/Gallery/index.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.css">
+  <link href="./css/thumbnail-gallery.css" rel="stylesheet" />
+
+  <style>
+    .tz-gallery {
+      padding: 40px;
+    }
+
+    .tz-gallery .thumbnail {
+      padding: 0;
+      margin-bottom: 30px;
+      background-color: #fff;
+      border-radius: 4px;
+      border: none;
+      transition: 0.15s ease-in-out;
+      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06);
+    }
+
+    .tz-gallery .thumbnail:hover {
+      transform: translateY(-10px) scale(1.02);
+    }
+
+    .baguetteBox-button {
+      background-color: transparent !important;
+    }
+
+
+    .carousel-inner>.item>a>img,
+    .carousel-inner>.item>img,
+    .img-responsive,
+    .thumbnail a>img,
+    .thumbnail>img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+  </style>
+
+</head>
+
+<body>
+
+
+  <main>
+
+
+    <section id="gallery">
+      <div class=" gallery-container container">
+        <div class="tz-gallery">
+
+          <div class="row">
+
+            <!---------------------------------------------->
+            <div data-aos="flip-up" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="1.png">
+                  <img src="1.png">
+                </a>
+              </div>
+            </div>
+
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="20" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="2.png">
+                  <img src="2.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="40" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="3.png">
+                  <img src="3.png">
+                </a>
+
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="60" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="4.png">
+                  <img src="4.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="80" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="5.png">
+                  <img src="5.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="100" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="6.png">
+                  <img src="6.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="120" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="7.png">
+                  <img src="7.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="140" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="8.png">
+                  <img src="8.png">
+                </a>
+              </div>
+            </div>
+            <!---------------------------------------------->
+
+            <div data-aos="flip-up" data-aos-delay="160" class="col-sm-6 col-md-4">
+              <div class="thumbnail">
+                <a class="lightbox" href="9.png">
+                  <img src="9.png">
+                </a>
+              </div>
+            </div>
+
+
+
+
+          </div>
+        </div>
+      </div>
+
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.1/baguetteBox.min.js"></script>
+      <script>
+        baguetteBox.run('.tz-gallery');
+      </script>
+
+    </section>
+
+
+  </main>
+
+
+</html>
