Merge pull request #212 from RAVICHANDRALS507/icons

Added Social Media icons and alignments to Text and Button in Landing page
anuragverma108 · Oct 2, 2024 · c981991 · c981991
2 parents fb0ea5c + 66200b3
commit c981991
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 44 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -215,6 +215,11 @@ body {
   transition: var(--transition-2);
 }
 
+#center{
+  align-items: center;
+  margin: 0 auto;
+}
+
 .btn ion-icon {
   --ionicon-stroke-width: 55px;
   font-size: 1.8rem;
@@ -417,9 +422,9 @@ body {
 }
 
 .hero .section-subtitle {
-  --color: var(--white);
+  /* --color: var(--white);
   --ff: var(--ff-inter);
-  --fs: var(--fs-7);
+  --fs: var(--fs-7); */
 }
 
 .hero-title {
@@ -434,6 +439,9 @@ body {
   letter-spacing: -1px;
   max-width: 50ch;
   margin-block-end: 30px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 /*-----------------------------------*\
@@ -992,6 +1000,49 @@ body {
   #FOOTER
 \*-----------------------------------*/
 
+.footer-list {
+  list-style-type: none; /* Remove bullet points */
+  padding: 0;           /* Remove padding */
+  margin: 20px;            /* Remove margin */
+  text-align: center;   /* Center the list */
+}
+
+.footer-list li {
+  margin: 0 30px;       /* Space between each list item */
+}
+
+.footer-link {
+  text-decoration: none; /* Remove underline */
+  color: #333;          /* Set text color */
+  font-weight: bold;    /* Make text bold */
+  transition: color 0.3s ease, transform 0.3s ease; /* Transition effect for color and transform */
+}
+
+.footer-link:hover {
+  color: #007bff;       /* Change color on hover */
+  transform: translateY(-3px); /* Lift the link slightly on hover */
+}
+
+.social-icons {
+  display: flex;           /* Use flexbox for alignment */
+  justify-content: center; /* Center the icons */
+  margin-top: 10px;       /* Space above the icons */
+}
+
+.social-link {
+  text-decoration: none; /* Remove underline */
+  color: #555;          /* Set icon color */
+  margin: 0 10px;      /* Space between icons */
+  font-size: 28px;     /* Icon size */
+  transition: color 0.3s ease, transform 0.3s ease; /* Transition effect for color and transform */
+}
+
+.social-link:hover {
+  color: #007bff;       /* Change color on hover */
+  transform: scale(1.2); /* Scale up the icon on hover */
+}
+
+
 .footer {
   background-color: var(--raisin-black);
   color: var(--white);

diff --git a/index.html b/index.html
@@ -201,7 +201,7 @@ <h2 class="h1 hero-title">
 
             <p class="hero-text">Defending Wildlife, One Paw at a Time</p>
 
-            <button class="btn btn-primary">
+            <button class="btn btn-primary" id="center">
               <span>Donation</span>
 
               <ion-icon name="heart-outline" aria-hidden="true"></ion-icon>
@@ -1340,52 +1340,21 @@ <h3>Share This Event</h3>
       </article>
     </main>
 
-    <!-- 
-    - #FOOTER
-  -->
-
-    <footer class="footer">
-      <div class="container">
-        <ul class="footer-list">
-          <li>
-            <a href="./terms-of-use.html" class="footer-link">Terms of use</a>
-          </li>
-
-          <li>
-            <a href="./privacy-policy.html" class="footer-link"
-              >Privacy & Policy</a
-            >
-          </li>
-        </ul>
-
-
-      </section>
-
-    </article>
-  </main>
-
-
-
-
-
-  <!-- 
-    - #FOOTER
-  -->
 
+  <!-- - #FOOTER -->
   <footer class="footer">
     <div class="container">
-
       <ul class="footer-list">
-
-        <li>
-          <a href="./terms-of-use.html" class="footer-link">Terms of use</a>
-        </li>
-
-        <li>
-          <a href="./privacy-policy.html" class="footer-link">Privacy & Policy</a>
-        </li>
-
+        <li><a href="./terms-of-use.html" class="footer-link">Terms of use</a></li>
+        <li><a href="./privacy-policy.html" class="footer-link">Privacy & Policy</a></li>
       </ul>
+      <div class="social-icons">
+        <a href="https://github.com/anuragverma108/WildGuard" target="_blank" class="social-link"><i class="fab fa-github"></i></a>
+        <a href="https://instagram.com" target="_blank" class="social-link"><i class="fab fa-instagram"></i></a>
+        <a href="https://facebook.com" target="_blank" class="social-link"><i class="fab fa-facebook"></i></a>
+        <a href="https://linkedin.com" target="_blank" class="social-link"><i class="fab fa-linkedin"></i></a>
+        <a href="https://twitter.com" target="_blank" class="social-link"><i class="fab fa-twitter"></i></a>
+    </div>
 
       <p class="copyright">
         Copyright © 2024 <a href="#" class="copyright-link">Anurag Bytes</a>. All Rights Reserved.