Basic responsive site with nav and footer

NKkrisz · Feb 27, 2024 · d6f060c · d6f060c
1 parent 575089d
commit d6f060c
Show file tree

Hide file tree

Showing 13 changed files with 93 additions and 259 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+old/
diff --git a/components/changePage.js b/components/changePage.js
diff --git a/components/footer.js b/components/footer.js
diff --git a/components/navbar.js b/components/navbar.js
diff --git a/functions/home.js b/functions/home.js
diff --git a/index.html b/index.html
@@ -4,14 +4,31 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>NKkrisz</title>
-    <link rel="stylesheet" href="style.css">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👨‍💻</text></svg>">
+    <link rel="stylesheet" href="style/main.css">
+    <link rel="stylesheet" href="style/navbar.css">
+    <link rel="stylesheet" href="style/footer.css">
 </head>
 <body>
-    <script type="module" src="components/navbar.js"></script>
+    <nav>
+        <h3>NKkrisz</h3>
+        <ul>
+            <li><a href="#" onclick="changePage('Home')">Home</a></li>
+            <li><a href="#" onclick="changePage('Projects')">Projects</a></li>
+            <li><a href="#" onclick="changePage('Contact')">Contact</a></li>
+        </ul>
+    </nav>    
 
     <div class="container"></div>
 
-    <script src="components/footer.js"></script>
+    <footer>
+        <ul>
+            <li>Socials:</li>
+            <li><a href="https://github.com/NKkrisz"><img src="img/icons/github.svg" alt="Github"></a></li>
+            <li><a href="https://www.reddit.com/user/NKkrisz"><img src="img/icons/reddit.svg" alt="Reddit"></a></li>
+            <li><a href="https://x.com/nkkrisz"><img src="img/icons/x.svg" alt="X"></a></li>
+        </ul>
+        <p>Icons made by: <a href="https://icons8.com/">Icons8</a></p>
+    </footer>
 </body>
 </html>
diff --git a/pages/contact.html b/pages/contact.html
diff --git a/pages/home.html b/pages/home.html
diff --git a/pages/projects.html b/pages/projects.html
diff --git a/style.css b/style.css
diff --git a/style/footer.css b/style/footer.css
@@ -0,0 +1,21 @@
+footer{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+    padding: 10px;
+    border-top: 1px solid white;
+}
+
+footer img{
+    filter: invert(1);
+    padding-top: 3px;
+    background-color: #e2e2e2;
+}
+
+footer ul{
+    display: flex;
+    list-style: none;
+    gap: 10px;
+    align-items: center;
+}
diff --git a/style/main.css b/style/main.css
@@ -0,0 +1,35 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    color: white;
+    font-family: Georgia, 'Times New Roman', serif;
+}
+
+body{
+    background-color: #1d1d1d;
+    display: flex;
+    height: 100vh;
+    flex-direction: column;
+    align-items: center;
+    margin: auto;
+}
+
+nav, body, footer{
+    max-width: 1200px;
+    width: 100%;
+}
+
+a:hover{
+    text-decoration: none;
+    background-color: #e2e2e2;
+    color: black;
+}
+
+a:hover img{
+    filter: invert(0);
+}
+
+.container{
+    padding: 10px;
+}
diff --git a/style/navbar.css b/style/navbar.css
@@ -0,0 +1,16 @@
+nav{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    font-size: large;
+    border-bottom: 1px solid white;
+}
+
+nav ul{
+    list-style: none;
+}
+
+nav li{
+    text-align: end;
+}