feat: change the profile icon at the footer to a rounded shape

also seperate all inline style in html to external

index.html

@@ -57,8 +57,8 @@
     </div>
   </section>
   <footer>
-    <div class="row text-muted py-3 me-3 float-end" style="text-align: right;">
-      <h5>made by <b>LifeAdventurer</b> <a href="https://github.com/LifeAdventurer"><img src="./images/lifeadventurer.jpg" alt="footer image" style="width: 4%;"></a></h5>
+    <div class="row text-muted py-3 me-3 float-end" id="footer-author">
+      <h5>made by <b>LifeAdventurer</b> <a href="https://github.com/LifeAdventurer"><img id="footer-author-icon" src="./images/lifeadventurer.jpg" alt="footer image"></a></h5>
     </div>
   </footer>
   <script src="./scripts.js"></script>

styles.css

@@ -15,4 +15,14 @@ h1 {
 .card-footer {
   background-color: #343a40;
   color: #adb5bd; 
+}
+
+#footer-author {
+  text-align: right;
+}
+
+#footer-author-icon {
+  width: 4%;
+  border-radius: 50%;
+  overflow: hidden;
 }