grid

arielchuri · Feb 26, 2024 · 4610cd7 · 4610cd7
1 parent 5a8562e
commit 4610cd7
Show file tree

Hide file tree

Showing 13 changed files with 1,379 additions and 0 deletions.
diff --git a/template_files/grid.html b/template_files/grid.html
diff --git a/template_files/layout_grid/galleryStyle.css b/template_files/layout_grid/galleryStyle.css
@@ -0,0 +1,16 @@
+.gallery-container {
+  /* Set the display property to grid for the .gallery-container class */
+  display: grid;
+  /* Define the grid template columns to repeat and adjust based on available space */
+  /* Define the minimum and maximum size for the grid items */
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  /* Set the minimum and maximum size for the grid rows */
+  grid-auto-rows: minmax(100px, auto);
+  /* Set the gap between the columns */
+  grid-column-gap: 32px;
+  /* Set the gap between the rows */
+  grid-row-gap: 32px;
+}
+
+.gallery-item .caption {
+}
diff --git a/template_files/layout_grid/grid.html b/template_files/layout_grid/grid.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Place Title of Page Here</title>
+  <!-- normalize.css is a freeley available css that unifies the default styles across browsers before you customize it for your design -->
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">
+  <link rel="preconnect" href="https://fonts.gstatic.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="normalize.css">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <link rel="stylesheet" type="text/css" href="galleryStyle.css">
+</head>
+<body>
+  <header>
+    <nav>
+    </nav>
+  </header>
+  <main>
+    <section>
+      <div class="gallery-container">
+        <div class="gallery-item">
+          <img src="images/image1.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image2.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image3.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image4.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image5.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image6.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image1.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image2.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image3.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image4.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image5.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+        <div class="gallery-item">
+          <img src="images/image6.jpg">
+          <div class="caption">
+            <h3>This is a caption.</h3>
+            <p>
+            This is some copy about the gallery item.
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+  </footer>
+  <script src="myscript.js"></script>
+</body>
+</html>
diff --git a/template_files/layout_grid/images/image1.jpg b/template_files/layout_grid/images/image1.jpg
diff --git a/template_files/layout_grid/images/image2.jpg b/template_files/layout_grid/images/image2.jpg
diff --git a/template_files/layout_grid/images/image3.jpg b/template_files/layout_grid/images/image3.jpg
diff --git a/template_files/layout_grid/images/image4.jpg b/template_files/layout_grid/images/image4.jpg
diff --git a/template_files/layout_grid/images/image5.jpg b/template_files/layout_grid/images/image5.jpg
diff --git a/template_files/layout_grid/images/image6.jpg b/template_files/layout_grid/images/image6.jpg