Merge pull request #1 from tekofx/main

Centered link buttons
DavKiller · Oct 17, 2024 · 681b6a6 · 681b6a6
2 parents 6741069 + 5a516bf
commit 681b6a6
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 47 deletions.
diff --git a/src/index.html b/src/index.html
@@ -5,58 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
     <title>Personal Links</title>
-    <style>
-        body {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            min-height: 100vh;
-            font-family: sans-serif;            
-            margin: 0;
-            background-color: #181818; /* Color de fondo oscuro */
-        }
-
-        .container {
-            background-color: #282828; /* Color de fondo del contenedor */
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-            width: 350px;
-            text-align: center;
-        }
-
-        h1 {
-            color: #ffffff; /* Color del texto */
-            margin-bottom: 20px;
-        }
-         h2 {
-            color: #ffffff; /* Color del texto */
-            margin-bottom: 20px;
-        }
-        .link-button {
-            display: block;
-            width: 100%;
-            padding: 15px;
-            margin-bottom: 10px;
-            background-color: #4CAF50;
-            color: #ffffff; /* Color del texto de los botones */
-            text-decoration: none;
-            border-radius: 5px;
-            transition: background-color 0.3s;
-        }
-
-        .link-button:hover {
-            background-color: #45a049;
-        }
-    </style>
-</head>
+    <link rel="stylesheet" href="styles.css">
 <body>
     <div class="container">
         <h1>DavKiller</h1>
         <img src="./Logo.png" alt="Logo" style="border-radius: 50%; width: 100px; height: 100px; display: block; margin: 0 auto 20px;">    
 
-        <a href="https://github.com/DavKiller" class="link-button"><i class="fa-brands fa-github"></i></i> Github</a>
+        <a href="https://github.com/DavKiller" class="link-button"><i class="fa-brands fa-github"></i> Github</a>
         <a href="https://twitter.com/DavKillerAural" class="link-button"><i class="fa-brands fa-twitter"></i> Twitter</a>
         <a href="https://" class="link-button"><svg xmlns="http://www.w3.org/2000/svg" height="10" width="11.25" viewBox="0 0 576 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="#ffffff" d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z"/></svg> BlueSky</a>
         <a href="https://https://www.furaffinity.net/user/davkiller/" class="link-button"> <i class="fa-solid fa-paw"></i> FurAffinity</a>

diff --git a/src/styles.css b/src/styles.css
@@ -0,0 +1,50 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    font-family: sans-serif;
+    margin: 0;
+    background-color: #181818; /* Color de fondo oscuro */
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: #282828; /* Color de fondo del contenedor */
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    width: 350px;
+}
+
+h1 {
+    color: #ffffff; /* Color del texto */
+    margin-bottom: 20px;
+}
+h2 {
+    color: #ffffff; /* Color del texto */
+    margin-bottom: 20px;
+}
+.link-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap:10px;
+    text-align: center;
+    width: 100%;
+    padding: 15px;
+    margin-bottom: 10px;
+    background-color: #4CAF50;
+    color: #ffffff; /* Color del texto de los botones */
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s;
+}
+
+.link-button:hover {
+    background-color: #45a049;
+}