add link for visiting my blog

DavidingPlus · DavidingPlus · commit 9c06e98a9863 · 2024-06-13T18:05:05.000+08:00
diff --git a/index.html b/index.html
@@ -10,8 +10,10 @@
 </head>
 
 <body>
+
     <header>
         <h1><i class="fa fa-code"></i> Code Browser</h1>
+        <p><a href="https://lzx0626.me" class="blog-link">Visit My Blog</a></p>
     </header>
 
     <main id="link-container">
@@ -24,6 +26,7 @@ <h1><i class="fa fa-code"></i> Code Browser</h1>
 
     <script src="./source/js/link-generator.js"></script>
     <script src="./source/js/update-year.js"></script>
+
 </body>
 
 </html>
diff --git a/source/css/styles.css b/source/css/styles.css
@@ -15,9 +15,11 @@ header {
     background-color: #007acc;
     color: white;
     width: 100%;
-    padding: 1.5em 0;
+    padding: 1.5em 0 1em;
+    /* Adjusted padding to reduce bottom margin */
     text-align: center;
-    margin-bottom: 2em;
+    margin-bottom: 1.5em;
+    /* Reduced bottom margin */
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
@@ -26,6 +28,27 @@ header h1 {
     font-size: 2em;
 }
 
+header .blog-link {
+    display: inline-block;
+    margin-top: 1em;
+    padding: 0.5em 1em;
+    text-decoration: none;
+    color: #007acc;
+    font-size: 1em;
+    border: 2px solid white;
+    border-radius: 5px;
+    background-color: white;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
+}
+
+header .blog-link:hover {
+    background-color: #4da6ff;
+    /* Lighter blue for hover */
+    color: white;
+    border-color: #4da6ff;
+    /* Match border with background on hover */
+}
+
 main {
     background-color: white;
     border-radius: 12px;
