Add Font Awesome icons and Discord modal

rrcoder0167 · Dec 7, 2023 · 892817b · 892817b
1 parent a593a63
commit 892817b
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 9 deletions.
diff --git a/index.html b/index.html
@@ -7,16 +7,28 @@
     <link rel="stylesheet" href="styles.css">
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link rel="stylesheet" href="https://unpkg.com/@catppuccin/palette/css/catppuccin.css">
+    <script src="https://kit.fontawesome.com/3e19042953.js" crossorigin="anonymous"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
 </head>
 <body>
 
     <nav>
         <ul>
             <li><a href="index.html" class="nav-link">Home</a></li>
-<li><a href="projects.html" class="nav-link">Projects</a></li>
-<li><a href="contact.html" class="nav-link">Contact</a></li>
+            <li><a href="projects.html" class="nav-link">Projects</a></li>
+            <li><a href="contact.html" class="nav-link">Contact</a></li>
         </ul>
+        <div class="icons">
+            <a href="https://github.com/rrcoder0167" class="fa-brands fa-github"></a>
+            <a class="fa-brands fa-discord" onclick="openModal(); return false;"></a>
+            <div id="discModal" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <p>@rrplayzlife</p>
+            </div>
+            </div>
+            <!-- Add more icons here -->
+        </div>
     </nav>
 
     <header>

diff --git a/script.js b/script.js
@@ -80,3 +80,11 @@ fetch('https://api.lanyard.rest/v1/users/870936028108705803')
       console.error('Error fetching Discord status:', data.error);
     }
   });
+
+  function openModal() {
+    document.getElementById("discModal").style.display = "block";
+  }
+
+  document.getElementsByClassName("close")[0].onclick = function() {
+    document.getElementById("discModal").style.display = "none";
+  }
diff --git a/styles.css b/styles.css
@@ -26,30 +26,92 @@ header {
     box-shadow: 0 0 20px rgb(138, 173, 244);
 }
 
+
+nav {
+    background-color: var(--ctp-mocha-surface0);
+    transition: ease-in-out 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 20px;
+}
+
 nav ul {
     list-style: none;
     display: flex;
-    justify-content: center;
-    background-color: var(--ctp-mocha-surface0);
-    padding: 10px 0;
-    transition: ease-in-out 0.3s;
+    margin: 0; /* Reset default margin */
+    padding: 0; /* Reset default padding */
 }
 
-nav ul:hover {
+nav:hover {
     background-color: var(--ctp-mocha-surface1);
 }
 
-nav a {
+.nav-link {
     text-decoration: none;
-    padding: 10px 20px;
+    padding: 0 20px;
     color: var(--ctp-mocha-text);
     transition: ease-in-out 0.3s;
 }
 
 nav a:hover {
+    cursor: pointer;
     color: var(--ctp-mocha-mauve);
 }
 
+.icons {
+    display: flex;
+    font-size: 1.5em;
+}
+
+.icons a {
+    text-decoration: none;
+    padding: 0 5px;
+    color: var(--ctp-mocha-text);
+    transition: ease-in-out 0.3s;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.3);
+  }
+
+  .modal p {
+    font-size: 0.7em;
+  }
+
+
+  .modal-content {
+    background-color: var(--ctp-mocha-surface0);
+    margin: 15% auto;
+    padding: 20px;
+    width: 25%;
+    height: 15%;
+    border-radius: 10px;
+  }
+
+  .close {
+    color: var(--ctp-mocha-subtext1);
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+
+  .close:hover,
+  .close:focus {
+    color: var(--ctp-mocha-subtext0);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+
 section {
     padding: 40px;
 }