Lenadlm patch 8.4 (#69)

* Update index.html * Update index.html * Update projects.html * Update styles.css * Update styles.css * Update index.html * Update styles.css * Update projects.html * Update index.html
lenadlm · Aug 5, 2024 · 787a141 · 787a141
1 parent 7d51f7a
commit 787a141
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -31,10 +31,10 @@
     </nav>
 
     <!-- Main Content Sections -->
-    <div class="container-fluid text-center my-5" id="home">
+    <div class="container-fluid text-center my-3" id="home">
         <div class="row">
-            <div class="col-md-4 offset-md-4 slide-in-right">
-                <img src="images/leo-100.png" class="img-fluid rounded-circle" alt="Profile Image">
+            <div class="col-md-4 offset-md-6 slide-in-right">
+                <img src="images/leo-100.png" class="img-fluid rounded-circle" alt="profile-image">
                 <h1 class="display-6">Leonard Mbelle</h1>
                 <hr class="border-3 opacity-75">
                 <p class="font-rlw">Web Development<br> & Design.</p>
@@ -79,14 +79,14 @@ <h2>Welcome</h2>
         <div class="text-center p-5">
             <p class="lead">Keep in touch!</p>
             <footer class="footer">
-                <ul class="badge-list">
+                <ul class="badge-list-footer">
                     <li><a href="https://github.com/lenadlm" target="_blank"><i class="fa-brands fa-github fa-3x"></i></a></li>
                     <li><a href="https://twitter.com/intent/follow?screen_name=lenadlm" target="_blank"><i class="fa-brands fa-x-twitter fa-3x"></i></a></li>
                     <li><a href="https://www.linkedin.com/in/lenadlm/" target="_blank"><i class="fa-brands fa-linkedin-in fa-3x"></i></a></li>
                     <li><a href="mailto: "><i class="fa-regular fa-envelope fa-3x"></i></a></li>
                     <li><a href="https://dev.to/lenadlm" target="_blank"><i class="fa-brands fa-dev fa-3x"></i></a></li>                
                 </ul>
-                <div class="badge-container">
+                <div class="d-flex justify-content-center align-items-end mt-auto">
                     <a href="https://hits.seeyoufarm.com" target="_blank">
                         <img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Flenadlm%2F&count_bg=%2379C83D&title_bg=%23555555&icon=github.svg&icon_color=%23E7E7E7&title=hits&edge_flat=true" alt="Hits Badge"/>
                     </a>                  

diff --git a/projects.html b/projects.html
@@ -82,14 +82,14 @@ <h2 class="text-center">Project 3</h2>
         <div class="text-center p-5">
             <p class="lead">Keep in touch!</p>
             <footer class="footer">
-                <ul class="badge-list">
+                <ul class="badge-list-footer">
                     <li><a href="https://github.com/lenadlm" target="_blank"><i class="fa-brands fa-github fa-3x"></i></a></li>
                     <li><a href="https://twitter.com/intent/follow?screen_name=lenadlm" target="_blank"><i class="fa-brands fa-x-twitter fa-3x"></i></a></li>
                     <li><a href="https://www.linkedin.com/in/lenadlm/" target="_blank"><i class="fa-brands fa-linkedin-in fa-3x"></i></a></li>
                     <li><a href="mailto: "><i class="fa-regular fa-envelope fa-3x"></i></a></li>
                     <li><a href="https://dev.to/lenadlm" target="_blank"><i class="fa-brands fa-dev fa-3x"></i></a></li>                
                 </ul>
-                <div class="badge-container">
+                <div class="d-flex justify-content-center align-items-end mt-auto">
                     <a href="https://hits.seeyoufarm.com" target="_blank">
                         <img src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Flenadlm%2F&count_bg=%2379C83D&title_bg=%23555555&icon=github.svg&icon_color=%23E7E7E7&title=hits&edge_flat=true" alt="Hits Badge"/>
                     </a>                  

diff --git a/styles.css b/styles.css
@@ -94,16 +94,13 @@ p.font-rlw {
     transform: scale(1.5); /* Optional: Slightly enlarge on hover */
 }
 
-.badge-list li {
-    margin: 0 25px; /* Increase space between icons */
-}
-
-.badge-container {
+.badge-list-footer li {
+    list-style: none;
+    padding: 0;
+    margin: 0;
     display: flex;
-    justify-content: center;
-    align-items: flex-end; /* Align items to the bottom */
-    gap: 10px; /* Add some space between the badges */
-    margin-top: auto; /* Push the badge-container to the bottom */
+    flex-wrap: wrap;
+    gap: 25px; /* Adjust spacing between icons */
 }
 
 /* Responsive adjustments */