init

dmd-3440 · Sep 19, 2024 · e2e1aca · e2e1aca
commit e2e1aca
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 0 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,62 @@
+body {
+  margin: 0;
+  background-color: lightblue;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.home-page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-page {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: auto auto;
+  align-items: center;
+  justify-items: center;
+  gap: 1em;
+}
+
+.about-page img {
+  max-width: 50%;
+  display: inline-block;
+  text-align: center;
+  transform: scale(1);
+  transition: transform 0.5s;
+}
+
+.about-page img:hover {
+  transform: scale(1.5);
+}
+
+.home-page ul {
+  margin: 0;
+  padding: 0;
+  width: 75%;
+  background-color: white;
+  list-style-type: none;
+  text-align: center;
+}
+
+.home-page li {
+  border-bottom: 1px solid lightblue;
+}
+
+li a {
+  display: block;
+  padding: 1em 0;
+  font-size: 2em;
+  background-color: darkslateblue;
+  color: white;
+  text-decoration: none;
+}
+
+li a:hover {
+  color: darkslateblue;
+  background-color: white;
+  transition: all 0.5s;
+}
diff --git a/gallery.html b/gallery.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Gallery | Offline First Demo</title>
+    <script src="js/script.js"></script>
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body class="about-page">
+    <img src="images/antelope.jpg" alt="" />
+    <img src="images/bobcat.jpg" alt="" />
+    <img src="images/caracal.jpg" alt="" />
+    <img src="images/caribou-bulls.jpg" alt="" />
+    <img src="images/caribou.jpg" alt="" />
+    <img src="images/cheetah.jpg" alt="" />
+    <img src="images/coyote.jpg" alt="" />
+    <img src="images/ferrets.jpg" alt="" />
+    <img src="images/ox.jpg" alt="" />
+    <img src="images/tiger.jpg" alt="" />
+  </body>
+</html>
diff --git a/images/antelope.jpg b/images/antelope.jpg
diff --git a/images/bear.jpg b/images/bear.jpg
diff --git a/images/bison.jpg b/images/bison.jpg
diff --git a/images/bobcat.jpg b/images/bobcat.jpg
diff --git a/images/caracal.jpg b/images/caracal.jpg
diff --git a/images/caribou-bulls.jpg b/images/caribou-bulls.jpg
diff --git a/images/caribou.jpg b/images/caribou.jpg
diff --git a/images/cheetah.jpg b/images/cheetah.jpg
diff --git a/images/coyote.jpg b/images/coyote.jpg
diff --git a/images/ferrets.jpg b/images/ferrets.jpg
diff --git a/images/ox.jpg b/images/ox.jpg
diff --git a/images/tiger.jpg b/images/tiger.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Home | Offline First Demo</title>
+    <script>
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('../sw.js');
+      }
+    </script>
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body class="home-page">
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="gallery.html">Photo Gallery</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/js/script.js b/js/script.js