BUG: Align Social Media and GitHub Icons in a Single Row on Login Page …

…anuragverma108#2908
kundana29 · Oct 13, 2024 · 71d12b6 · 71d12b6
1 parent b78301e
commit 71d12b6
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 104 deletions.
diff --git a/assets/html/login.html b/assets/html/login.html
@@ -320,17 +320,18 @@
 
 .socialmediaicons {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     justify-content: center;
     align-items: center;
-    position: fixed;
     margin-top: 120px;;
-    width: 40px;
-    height: 150px;
+    width: auto;
+    height: 40px;
+    position: relative;
 
 }#quicklinks {
   display: flex;
-  justify-content: space-between; /* Ensures columns are evenly spaced */
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 #quicklinks .col-md-6 ul {
@@ -371,7 +372,7 @@
       color: rgba(255, 255, 255, 0.6); 
     }
 .socialmediaicons a {
-    display: inline;
+    display: inline-block;
     text-align: center;
     padding: 5px;
     transition: all 0.3s ease;

diff --git a/desktop.ini b/desktop.ini
@@ -0,0 +1,2 @@
+[.ShellClassInfo]
+LocalizedResourceName=@SwapReads,0
diff --git a/lol.html b/lol.html
@@ -739,57 +739,54 @@ <h4>How can I download a free  book?</h4>
   </script>
   <br /><br />
 
-  <!--
-    - #FOOTER
-  -->
-
-  <!-- <footer>
-    <div class="foot-top">
-      <div class="foot-left">
-        <div class="desc">
-          <a href="#" class="logo">SwapReads</a>
-          <p style="text-align: justify;">SwapReads.com is the ultimate destination for book lovers seeking to swap and
-            discover new literary gems.
-            Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the
-            world of literature—all on one convenient platform. Join us and dive into a universe of endless
-            possibilities!
-          </p>
-        </div>
-      </div>
-      <div class="foot-middle">
-        <h2>Quick Links</h2>
-        <ul>
-          <li class="foot-quick"><a href="#home">Home</a></li>
-          <li class="foot-quick"><a href="#benefits">Benefits</a></li>
-          <li class="foot-quick"><a href="#chapters">Literary Realms</a></li>
-          <li class="foot-quick"><a href="#pricing">Pricing</a></li>
-          <li class="foot-quick"><a href="#contact">Contact Us</a></li>
-          <li class="foot-quick"><a href="#faqq">Faq</a></li>
-        </ul>
+  <!-- FOOTER -->
+<footer>
+  <div class="foot-top">
+    <div class="foot-left">
+      <div class="desc">
+        <a href="#" class="logo">SwapReads</a>
+        <p style="text-align: justify;">
+          SwapReads.com is the ultimate destination for book lovers seeking to swap and discover new literary gems. Connect with fellow enthusiasts, exchange your favorite reads, and embark on exciting new adventures in the world of literature—all on one convenient platform. Join us and dive into a universe of endless possibilities!
+        </p>
       </div>
-      <div class="social-icons">
-        <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
-        <div class="input-newletter">
-          <input placeholder="EMAIL ADDRESS" type="email" class="in-css"></input> <br>
-          <button class="btn-signup">Subscribe</button> <br>
-        </div>
-        <div class="icons">
-          <a href=""><img class="icon-set" src="./assets/images/FB icon.png" alt=""></a>
-          <a href=""><img class="icon-set" src="./assets/images/insta icon.png" alt=""></a>
-          <a href=""><i class="fa-brands fa-x-twitter fa-2xl" style="color: #deb887;"></i></a>
-          <a href=""><img class="icon-set" src="./assets/images/YT icon.png" alt=""></a>
-        </div>
+    </div>
+    <div class="foot-middle">
+      <h2>Quick Links</h2>
+      <ul>
+        <li class="foot-quick"><a href="#home">Home</a></li>
+        <li class="foot-quick"><a href="#benefits">Benefits</a></li>
+        <li class="foot-quick"><a href="#chapters">Literary Realms</a></li>
+        <li class="foot-quick"><a href="#pricing">Pricing</a></li>
+        <li class="foot-quick"><a href="#contact">Contact Us</a></li>
+        <li class="foot-quick"><a href="#faqq">Faq</a></li>
+      </ul>
+    </div>
+    <div class="social-icons">
+      <h5>SUBSCRIBE TO OUR NEWSLETTER</h5>
+      <div class="input-newsletter">
+        <input placeholder="EMAIL ADDRESS" type="email" class="in-css" /><br>
+        <button class="btn-signup">Subscribe</button><br>
       </div>
+      <div class="icons">
+        <a href="#"><img class="icon-set" src="./assets/images/FB icon.png" alt="Facebook"></a>
+        <a href="#"><img class="icon-set" src="./assets/images/insta icon.png" alt="Instagram"></a>
+        <a href="#"><i class="fa-brands fa-x-twitter icon"></i></a>
+        <a href="#"><img class="icon-set" src="./assets/images/YT icon.png" alt="YouTube"></a>
+        <a href="#"><i class="fa-brands fa-github icon"></i></a>
     </div>
-    <div class="footer-bottom">
-      <p class="copyright" style="text-align: center">
-        &copy;
-        <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
-      </p>
+
+
     </div>
-  </footer> -->
-  <!-- Footer ended-->
-   <footer>
+  </div>
+  <div class="footer-bottom">
+    <p class="copyright" style="text-align: center">
+      &copy; <script>document.write(new Date().getFullYear())</script> All Rights Reserved. Made with ❤ by Guardian Hackers.
+    </p>
+  </div>
+</footer>
+<!-- Footer ended -->
+
+
     <div class="foot-top">
       <div class="foot-left">
 
@@ -903,6 +900,12 @@ <h2>Quick Links</h2>
             </div>
           </a>
 
+          <a href="https://github.com/anuragverma" title="GitHub">
+            <div class="icon">
+                <i class="fab fa-github" style="cursor: pointer;"></i>
+            </div>
+          </a>
+
         </div>
 
 

diff --git a/profile.css b/profile.css
@@ -15,14 +15,14 @@ body {
 
 .profile-container {
   background-color: rgba(254, 247, 247, 0.8);
-  width: 60%;
-  height: 95%;
   max-width: 1000px;
+  width: 100%; /* Ensure it takes full width of the screen */
+  display: flex;
+  justify-content: center;
+  height: 95%;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
   border-radius: 15px;
-  overflow: hidden;
-  display: flex;
-  flex-wrap: wrap;
+  overflow: hidden; /* Allow wrapping if necessary */
 }
 
 .profile-sidebar {
@@ -79,54 +79,36 @@ body {
 
 .icons {
   display: flex;
-  align-items: center;
   justify-content: center;
-  cursor: pointer;
-  gap: 15px;
-}
-
-.icons .icon i {
-  font-size: 20px;
-  transition: all 0.9s ease;
-  color: rgb(55, 55, 54);
-  margin-top: 280px;
+  align-items: center;
+  gap: 10px; /* Wrap icons if the screen size is too small */
+  width: 100%; /* Ensure it takes full width */
+  margin-top: 1rem; /* Add margin on top */
 }
 
-.icons .icon:hover i {
-  transform: scale(1.2);
+.icon-set {
+  width: 30px; /* Set size for image icons */
+  height: 30px; /* Maintain size consistency */
 }
 
-.icons .icon:hover .fab.fa-facebook {
-  color: #3b5998;
+.icons i {
+  font-size: 30px; /* Set size for font icons */
+  color: #deb887; /* Align with image icons */
 }
 
-.icons .icon:hover .fab.fa-twitter {
-  color: #090e11;
+.icons a {
+  display: inline-block; /* Ensure each anchor behaves as a block element */
 }
 
-.icons .icon:hover .fab.fa-instagram {
-  background: radial-gradient(
-    circle at 30% 107%,
-    #fdf497 0%,
-    #fdf497 5%,
-    #fd5949 45%,
-    #d6249f 60%,
-    #285aeb 90%
-  );
-  background-clip: text;
-  border-radius: 20%;
-  transform: scale(1.5);
-  color: transparent;
+a {
+  margin: 0; /* Remove default margin */
+  padding: 0; /* Remove default padding */
 }
 
-.icons .icon:hover .fab.fa-youtube {
-  color: #c31a1e;
-}
-.icons .icon:hover .fab.fa-github {
-  color: #333;
-}
-.icons .icon:hover .fab.fa-linkedin {
-  color: #0077b5;
+img {
+  margin: 0; /* Remove default margin */
+  padding: 0; /* Remove default padding */
+  display: block; /* Prevent extra spacing caused by inline images */
 }
 
 .profile-main {
@@ -208,10 +190,6 @@ body {
     padding: 8px 16px;
   }
 
-  .icons .icon i {
-    font-size: 18px;
-    margin-top: 20px;
-  }
 
   .profile-section h2 {
     font-size: 16px;
@@ -247,11 +225,6 @@ body {
     font-size: 12px;
   }
 
-  .icons .icon i {
-    font-size: 16px;
-    margin-top: 10px;
-  }
-
   .profile-section h2 {
     font-size: 14px;
   }