asubilu

npz-web · Dec 16, 2023 · 60e88a7 · 60e88a7
1 parent d142f52
commit 60e88a7
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 37 deletions.
diff --git a/characters.html b/characters.html
@@ -2,11 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Characters | Silent Hill 2</title>
     <meta name="description" content="An overview of the game, its themes, characters, and monster designs.">
     <meta name="author" content="Leigh Joiner">
     <link rel="icon" type="image/png" href="favicon.ico">
     <link rel="stylesheet" href="styles.css">
+     <!-- fonts -->
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
 </head>
 
 <body>
@@ -19,12 +24,8 @@
             <a href="monsters.html">Monsters</a>
         </nav>
 
-        <!-- fonts -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
     </header>
-
+    
     <main>
         <div class="wrapper">
             <h1>Characters</h1>

diff --git a/endings.html b/endings.html
@@ -2,11 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Endings | Silent Hill 2</title>
     <meta name="description" content="An overview of the game, its themes, characters, and monster designs.">
     <meta name="author" content="Leigh Joiner">
     <link rel="icon" type="image/png" href="favicon.ico">
     <link rel="stylesheet" href="styles.css">
+     <!-- fonts -->
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
 </head>
 
 <body>
@@ -18,11 +23,7 @@
             <a href="endings.html">Endings</a>
             <a href="monsters.html">Monsters</a>
         </nav>
-
-        <!-- fonts -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
+
     </header>
 
     <main>
@@ -36,19 +37,7 @@ <h3>Spoilers Ahead</h3>
                 all of these could be the "true" ending, depending on the player's play-style and preference.
             </p>
             <br>
-
-            <h3 class="toc">Table of Contents</h3>
-                <a href="#leave">Leave</a>
-                <br>
-                <a href="#maria">Maria</a>
-                <br>
-                <a href="#water">In Water</a>
-                <br>
-                <a href="#rebirth">Rebirth</a>
-                <br>
-                <a href="#dog">Dog</a>
-                <br>
-                <a href="#ufo">UFO</a>
+
             <br>
             <br>
 
@@ -99,6 +88,22 @@ <h2 id="ufo">UFO</h2>
 
         </div>
     </main>
+    <footer>
+
+            <h3 class="toc">Table of Contents</h3>
+                <a href="#leave">Leave</a>
+                <br>
+                <a href="#maria">Maria</a>
+                <br>
+                <a href="#water">In Water</a>
+                <br>
+                <a href="#rebirth">Rebirth</a>
+                <br>
+                <a href="#dog">Dog</a>
+                <br>
+                <a href="#ufo">UFO</a>
+
+    </footer>
 
 </body>
 </html>     
diff --git a/favicon_io/favicon.ico → favicon.ico b/favicon_io/favicon.ico → favicon.ico
diff --git a/index.html b/index.html
@@ -2,27 +2,29 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Main | Silent Hill 2</title>
     <meta name="description" content="An overview of the game, its themes, characters, and monster designs.">
     <meta name="author" content="Leigh Joiner">
     <link rel="icon" type="image/png" href="favicon.ico">
     <link rel="stylesheet" href="styles.css">
+     <!-- fonts -->
+     <link rel="preconnect" href="https://fonts.googleapis.com">
+     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+     <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
 </head>
 
 <body>
     <header>
 
         <nav>
-            <a href="index.html">Main</a>
+            <a href="index.html"><img src="favicon_io/android-chrome-192x192.png" alt="Silent Hill 2"></a>
             <a href="characters.html">Characters</a>
             <a href="endings.html">Endings</a>
             <a href="monsters.html">Monsters</a>
         </nav>
 
-        <!-- fonts -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
+
     </header>
 
     <main>

diff --git a/monsters.html b/monsters.html
@@ -2,11 +2,16 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Monsters | Silent Hill 2</title>
     <meta name="description" content="An overview of the game, its themes, characters, and monster designs.">
     <meta name="author" content="Leigh Joiner">
     <link rel="icon" type="image/png" href="favicon.ico">
     <link rel="stylesheet" href="styles.css">
+    <!-- fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
 </head>
 
 <body>
@@ -19,12 +24,6 @@
             <a href="monsters.html">Monsters</a>
         </nav>
 
-        <!-- fonts -->
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500&family=Gravitas+One&display=swap" rel="stylesheet">
-    </header>
-
     <main>
         <div class="wrapper">
             <h1>Monsters</h1>

diff --git a/styles.css b/styles.css
@@ -1,12 +1,23 @@
 /* your styles will go here!! */
 
+html, body {
+    max-width: 100vw;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
 body {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 0;
     font-family: 'Akshar', sans-serif;
     font-size: 18px;
+    background: url("Pyramid Head.webp");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+
 }
 
 h1, h2, h3 {
@@ -23,25 +34,36 @@ header {
     height: 100px;
     display: flex;
     align-items: center;
+    position: fixed;
 
 }
 
 header nav {
     width: 100%;
     display: flex;
     justify-content: space-around;
-
+    align-items: center;
 }
 
-header nav a {
+a {
     color: #fff;
+    transition: 0.5s color ease;
+}
+
+a:hover, a:focus {
+    color: rgb(234, 25, 25);
+}
+
+header nav a img {
+    max-height: 100px;
 }
 
 main {
     max-width: 1000px;
     background-color: #313131;
     color: #fff;
     padding: 30px 35px;
+    margin-top: 100px;
 }
 
 main img {
@@ -58,7 +80,9 @@ main img {
 }
 
 footer {
-
+   position: fixed;
+   width: 100vw;
+   bottom: 0;
 }
 
 /* Char Page */