Adds html and css to section 2 gallery page (#306)

NoroffFEU · Apr 5, 2024 · da67501 · da67501
1 parent 5f25382
commit da67501
Showing 1 changed file with 109 additions and 1 deletion.
diff --git a/pages/gallery-page.html b/pages/gallery-page.html
@@ -172,7 +172,6 @@ <h2 id="search-label" class="sr-only">Search Bar</h2>
         <!-- JS intention: On click, add -translate-y-full to section id="search-drawer-from-header" and remove translate-y-0 -->
       </div>
     </section>
-
     <main>
       <!-- Section one starts here -->
       <section>
@@ -229,6 +228,115 @@ <h1 class="text-center text-[150px] font-justAnotherHand">Gallery</h1>
         </p>
       </section>
       <!-- Section one ends here -->
+
+      <!-- Section two starts here -->
+      <section class="w-[1400px] m-auto py-10 px-6">
+        <div class="flex justify-center gap-28 py-10">
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_5348.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_7424.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_3605.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+        </div>
+        <div class="flex justify-center gap-28 pb-10">
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_3205.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_4202.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_1457.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+        </div>
+        <div class="flex justify-center gap-28 pb-10">
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_6391.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_7542.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_7544.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+        </div>
+        <div class="flex justify-center gap-28 pb-10">
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_3637.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_3634.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+          <div class="text-center font-inter text-xl">
+            <img
+              class="h-[350px]"
+              src="../assets/placeholder-images/IMG_7511.webp"
+              alt=""
+            />
+            <p class="pt-2">Lorem ipsum dolor sit amet</p>
+          </div>
+        </div>
+      </section>
+      <!-- Section two ends here -->
     </main>
   </body>
 </html>