Add: Icons

udontur · May 2, 2024 · adbda2a · adbda2a
1 parent 645786c
commit adbda2a
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 30 deletions.
diff --git a/404.html b/404.html
@@ -6,9 +6,9 @@
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-
         gtag('config', 'G-BFMPNKTZ2E');
         </script>
+        <script src="https://kit.fontawesome.com/de55c4cca3.js" crossorigin="anonymous"></script>
         <title>404 Not Found</title>
         <link rel="icon" type="image/x-icon" href="/image/udontur.png">
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -32,14 +32,14 @@
             }
             h1{
                 margin-top: 15%;
-                font-size: 100px;
+                font-size: 80px;
                 cursor: default;
             }
             button{
                 background-color: #a3dbce;
                 font-family: "JetBrains Mono", monospace;
                 font-size: 30px;
-                color: #181818;
+                color: #455f1d;
                 padding: 10px;
                 padding-left: 20px;
                 padding-right: 20px;
@@ -49,7 +49,7 @@
                 cursor: pointer;
                 transition-duration: 0.3s;
                 height: 80px;
-                width: 500px;
+                width: 608px;
             }
             button:hover{
                 background-color: #e0e0e0;
@@ -59,9 +59,11 @@
     </head>
     <body>
         <center><h1>404 Not found</h1></center>
-        <center><a href="https://hadrianlau.com/"><button>Back to Home</button></a></center>
+        <center><a href="https://hadrianlau.com/">
+            <button>
+                <i class="fa-solid fa-arrow-up"></i> Back
+        </button></a></center>
         <script>
-
         </script>
     </body>
 </html>
diff --git a/clock/clock_nos.html b/clock/clock_nos.html
@@ -6,9 +6,9 @@
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-
         gtag('config', 'G-BFMPNKTZ2E');
         </script>
+        <script src="https://kit.fontawesome.com/de55c4cca3.js" crossorigin="anonymous"></script>
         <title>Clock (no s)</title>
         <link rel="icon" type="image/x-icon" href="/image/udontur.png">
         <style>

diff --git a/clock/clock_s.html b/clock/clock_s.html
@@ -6,9 +6,9 @@
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-
         gtag('config', 'G-BFMPNKTZ2E');
         </script>
+        <script src="https://kit.fontawesome.com/de55c4cca3.js" crossorigin="anonymous"></script>
         <title>Clock</title>
         <link rel="icon" type="image/x-icon" href="/image/udontur.png">
         <style>

diff --git a/index.html b/index.html
@@ -6,9 +6,9 @@
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
-
         gtag('config', 'G-BFMPNKTZ2E');
         </script>
+        <script src="https://kit.fontawesome.com/de55c4cca3.js" crossorigin="anonymous"></script>
         <title>Hadrian</title>
         <link rel="icon" type="image/x-icon" href="/image/udontur.png">
         <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -50,7 +50,7 @@
                 background-color: #a3dbce;
                 font-family: "JetBrains Mono", monospace;
                 font-size: 30px;
-                color: #181818;
+                color: #455f1d;
                 padding: 10px;
                 padding-left: 20px;
                 padding-right: 20px;
@@ -152,7 +152,7 @@
                 background-color: #a3dbce;
                 font-family: "JetBrains Mono", monospace;
                 font-size: 20px;
-                color: #181818;
+                color: #455f1d;
                 padding: 10px;
                 padding-left: 20px;
                 padding-right: 20px;
@@ -174,7 +174,7 @@
                 box-shadow: 3px 3px 3px #acacac;
             }
             .Hadrian{
-                color: #00ffc3;
+                color: #aedd69;
                 font-size: 30px;
                 font-size: 70px;
                 margin-top: 0px;
@@ -190,7 +190,8 @@
                 text-align: center;
                 max-width: none !important;
                 width: auto;
-                border-radius: 12px;
+                border-top-right-radius: 12px;
+                border-top-left-radius: 12px;
                 cursor: default;
             }
             .container {
@@ -202,7 +203,7 @@
         <br>
         <div class="container">
             <h1 class="WebsiteTitle">
-                Hello World!👋
+                Hello World!<i style="color: #aedd69;" class="fa-solid fa-face-laugh-beam"></i>
             </h1>
         </div>
         <div class="container">
@@ -219,74 +220,74 @@ <h1 class="Hadrian">
         </div>
         <div class="container">
             <button class="TitleBox">
-                🖥️ Programming
+                <i class="fa-solid fa-code"></i> Code
             </button>
         </div>
         <div class="container">
             <button onclick="window.location='https://www.linkedin.com/in/hadrianlaucs';"
             class="MainButton">
-                LinkedIn
+                <i class="fa-brands fa-linkedin"></i> LinkedIn
             </button>
             <button onclick="window.location='https://github.com/udontur';" class="MainButtonMiddle">
-                GitHub
+                <i class="fa-brands fa-github"></i> GitHub
             </button>
             <button onclick="window.location='https://leetcode.com/udontur';" class="MainButton">
-                LeetCode
+                <i class="fa-solid fa-computer"></i> LeetCode
             </button>
         </div>
         <div class="container">
             <button onclick="window.location='https://codeforces.com/profile/udontur';"
             class="MainButtonLeftBottom">
-                CodeForces
+                <i class="fa-solid fa-chart-simple"></i> CodeForces
             </button>
             <button onclick="window.location='https://judge.hkoi.org/user/wy_hadrianlau';"
             class="MainButtonMiddle">
-                HKOI
+                <i class="fa-solid fa-brain"></i> HKOI
             </button>
             <button onclick="window.location='https://www.khanacademy.org/profile/udontur';"
             class="MainButtonRightBottom">
-                Khan
+                <i class="fa-solid fa-calculator"></i> Khan
             </button>
         </div>
         <div class="container">
             <button class="TitleBox">
-                ⚒️ Projects
+                <i class="fa-solid fa-screwdriver-wrench"></i> Projects
             </button>
         </div>
         <div class="container">
             <button onclick="window.location='https://github.com/udontur/cp';" class="MainButtonLeftBottom">
-                Code Vault
+                <i class="fa-solid fa-database"></i> Code Vault
             </button>
             <button onclick="window.location='https://udontur.github.io/clock/clock_s.html';"
             class="MainButtonMiddle">
-                Clock
+                <i class="fa-regular fa-clock"></i> Clock
             </button>
             <button onclick="window.location='https://udontur.github.io/clock/clock_nos.html';"
             class="MainButtonRightBottom">
-                Clock (no s)
+                <i class="fa-regular fa-clock"></i> Clock (mn)
             </button>
         </div>
         <div class="container">
             <button class="TitleBox">
-                🤝 Socials
+                <i class="fa-solid fa-handshake"></i> Socials
             </button>
         </div>
         <div class="container">
             <button onclick="window.location='https://www.linkedin.com/in/hadrianlaucs';"
             class="MainButtonLeftBottom">
-                LinkedIn
+                <i class="fa-brands fa-linkedin"></i> LinkedIn
             </button>
             <button onclick="window.location='https://github.com/udontur';" class="MainButtonMiddle">
-                GitHub
+                <i class="fa-brands fa-github"></i> GitHub
             </button>
             <button onclick="window.location='https://www.instagram.com/udon.tur';"
             class="MainButtonRightBottom">
-                Instagram
+                <i class="fa-brands fa-instagram"></i> Instagram
             </button>
         </div>
         <center>
             <button onclick="window.scrollTo({top: 0, behavior: 'smooth'});" class="BackToTopButton">
-                Back to top
+                <i class="fa-solid fa-arrow-up"></i> Back
             </button>
         </center>
         <footer class="footer">