Photo Gallery (#289)

* Add photo gallery page. * Update hyperlink to add photo. * Merge changes from main branch into album-gallery * Add photo gallery button
KendallDoesCoding · Apr 25, 2022 · 4337976 · 4337976
1 parent af82818
commit 4337976
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 0 deletions.
diff --git a/photo-gallery/LICENSE b/photo-gallery/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 KendallDoesCoding Websites
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/photo-gallery/images/1.png b/photo-gallery/images/1.png
diff --git a/photo-gallery/images/2.jpg b/photo-gallery/images/2.jpg
diff --git a/photo-gallery/images/3.png b/photo-gallery/images/3.png
diff --git a/photo-gallery/images/3.webp b/photo-gallery/images/3.webp
diff --git a/photo-gallery/images/4.png b/photo-gallery/images/4.png
diff --git a/photo-gallery/images/4.webp b/photo-gallery/images/4.webp
diff --git a/photo-gallery/images/5.jpg b/photo-gallery/images/5.jpg
diff --git a/photo-gallery/images/6.jpg b/photo-gallery/images/6.jpg
diff --git a/photo-gallery/index.html b/photo-gallery/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Photo Gallery - A Very Mogul Christmas!</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+      <h1>A VERY MOGUL CHRISTMAS PHOTO GALLERY</h1>
+      <h2>PLEASE ADD YOUR PHOTO <a href="https://github.com/KendallDoesCoding/mogul-christmas/tree/main/photo-gallery/images">HERE AND MAKE A PULL REQUEST</a></h2>
+    <div class="row">
+      <div class="column">
+        <img src="images/3.png" />
+        <img src="images/4.png" />
+        </div>
+        <div class="column">
+          <img src="images/1.png" />
+          <img src="images/6.jpg" />
+        </div>
+        <div class="column">
+          <img src="images/5.jpg" />
+          <img src="images/2.jpg" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/photo-gallery/styles.css b/photo-gallery/styles.css
@@ -0,0 +1,55 @@
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+/* Create four equal columns that sits next to each other */
+.column {
+  flex: 25%;
+  max-width: 25%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+/* Responsive layout - makes a two column-layout instead of four columns */
+@media screen and (max-width: 800px) {
+  .column {
+    flex: 50%;
+    max-width: 50%;
+  }
+}
+
+/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+@media screen and (max-width: 600px) {
+  .column {
+    flex: 100%;
+    max-width: 100%;
+  }
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+
+h1 {
+  color: red;
+}
+
+h2 {
+  color: lightcoral;
+}
+
+a {
+  color: lightcoral;
+}
+
+a:hover {
+  color: orange;
+}
diff --git a/styles.css b/styles.css
@@ -284,6 +284,24 @@ a:active {
   font-family: "Handlee", cursive;
 }
 
+.gallery-button {
+  background-image: linear-gradient(
+    180.4deg,
+    rgba(188, 120, 236, 1) -2.2%,
+    rgba(29, 133, 163, 1) 83.5%
+  );
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  justify-content: space-between;
+  font-size: 16px;
+  margin-bottom: 10px;
+  font-family: "Handlee", cursive;
+}
+
 .credits-button {
   background-image: radial-gradient(
     circle farthest-corner at 10% 20%,