Homepage update

Web-Dev-Dan · May 26, 2023 · eb6a0db · eb6a0db
1 parent c450028
commit eb6a0db
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -9,7 +9,24 @@
     <link rel="stylesheet" href="./styles/style.css" />
   </head>
   <body>
-    <h1>Test App</h1>
+    <!-- 
+        NOTE:
+        Change version in serviceworker.js each time updates are made to GitHub (or it won't update the cache)
+    -->
+    <!-- Navigation -->
+    <nav class="nav">
+      <h1>MyApp</h1>
+    </nav>
+
+    <!-- Content -->
+    <div class="content-container">
+      <p>Welcome to MyApp!</p>
+    </div>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <p>MyApp. &copy; Copyright 2023.</p>
+    </footer>
 
     <script>
       if (navigator.serviceWorker) {

diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -1,6 +1,6 @@
 {
-  "name": "Test App",
-  "short_name": "TESTAPP",
+  "name": "MyApp",
+  "short_name": "MyApp",
   "description": "A Test Progressive Web App (PWA)",
   "scope": "/Test-App/",
   "start_url": "/Test-App/",

diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,47 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html,
+body {
+  font-family: Verdana, Geneva, Tahoma, sans-serif;
+  font-size: 62.5%;
+}
+
+/* --- Navigation --- */
+.nav {
+  background-color: orange;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  padding: 0 50px;
+}
+
+.nav h1 {
+  font-size: 2rem;
+}
+
+.content-container {
+  min-height: calc(100vh - 160px);
+  padding: 50px;
+}
+
+.content-container p {
+  font-size: 1.6rem;
+}
+
+/* --- Footer --- */
+.footer {
+  background-color: orange;
+  height: 80px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 50px;
+}
+
+.footer p {
+  font-size: 1.6rem;
+}