Merge pull request #128 from verma-jaanvi/resume-footer

Resume footer
Ojas-Arora · Jan 15, 2025 · 09f2261 · 09f2261
2 parents 145b9ee + 06e33e6
commit 09f2261
Show file tree

Hide file tree

Showing 4 changed files with 317 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en"> 
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/resume.css b/resume.css
@@ -8,7 +8,7 @@ body {
   .section1 {
     border: 2px solid var(--border-color);
   }
-
+ 
   :root {
     --body-bg: antiquewhite;
     --primary-color: white;
@@ -531,4 +531,130 @@ html .dark {
         border-radius: 0;
     }
 
+}
+
+/* footer  */
+footer {
+  background-color: rgb(45, 43, 42);
+  color: #fff;
+  text-align: center;
+  padding: 20px 0;
+  position: relative;
+  bottom: 0;
+  width: 100%;
+}
+
+input #email {
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiYmZkZTQxOS00ZGRkLWU5NDYtOWQ2MC05OGExNGJiMTA3N2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RDAyNDkwMkRDOTIyMTFFNkI0MzFGRTk2RjM1OTdENTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RDAyNDkwMkNDOTIyMTFFNkI0MzFGRTk2RjM1OTdENTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTU2NTE1NDItMmIzOC1kZjRkLTk0N2UtN2NjOTlmMjQ5ZGFjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmJiZmRlNDE5LTRkZGQtZTk0Ni05ZDYwLTk4YTE0YmIxMDc3ZiIv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) !important;
+  background-repeat: no-repeat;
+  background-size: 20px;
+  background-position: 97% center;
+  cursor: auto;
+}
+
+.subscribe-section form input[type="email"] {
+  border-radius: 4px;
+  height: 4vh;
+  border: none;
+  padding: 10px;
+}
+
+.subscribe-button {
+  padding: 10px 62px;
+  border: none;
+  border-radius: 5px;
+  background-color: #d6a52b;
+  color: #222;
+  font-weight: 600;
+  cursor: pointer;
+  margin-top: -1rem;
+}
+
+.footer-section h3{
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+  }
+
+#cursor{
+  height: 20px;
+  width:20px;
+  background-color: rgba(234, 169, 84, 0.845);
+  border-radius: 50%;
+  position: fixed;
+  font-size: 7px;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+h3{
+  color: #d6a52b;
+}
+
+.quick-link ul li:hover,
+.resources ul li:hover {
+  text-decoration: underline;
+}
+
+.social-icons div a {
+  transition: all 0.3s ease;
+}
+
+.social-icons div a:hover {
+  scale: 1.3;
+  rotate: 15deg;
+}
+.social-icons div a i.fa-facebook-f:hover {
+  color: rgb(51, 51, 199);
+}
+.social-icons div a i.fa-twitter:hover {
+  color: rgb(51, 98, 199);
+}
+.social-icons div a i.fa-linkedin-in:hover {
+  color: rgb(51, 132, 199);
+}
+.social-icons div a i.fa-instagram:hover {
+  color: rgb(199, 51, 167);
+}
+.subscribe-section form input[type="email"] {
+  border-radius: 4px;
+  height: 4vh;
+  border: none;
+  padding: 10px;
+}
+
+.subscribe-button:hover {
+  background-color: #d7b96b;
+}
+
+.goog-te-gadget-simple {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 768px) {
+  .subscribe-section form input[type="email"] {
+    height: 5vh;
+    width: 69%;
+  }
+  .subscribe-button {
+    width: 69%;
+  }
+}
+
+@media (max-width: 426px) {
+  .subscribe-section form input[type="email"] {
+    text-align: center;
+    padding: 16px 42px;
+  }
+  .subscribe-button {
+    padding: 10px 90px;
+  }
+
+  .option {
+    width: 100%;
+  }
 }
diff --git a/resume.html b/resume.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Resume - Career Website</title>
-    <link
+    <link 
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
     />
@@ -177,6 +177,193 @@ <h2>Resume Detail Entry</h2>
       </section>
     </div>
 
+    <!-- footer  -->
+    <footer style="background-color: #222; color: #fff; padding: 20px 10px">
+      <div
+        class="footer-container"
+        style="
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          gap: 20px;
+          max-width: 1200px;
+          margin: auto;
+        "
+      >
+        <!-- About Section -->
+        <div class="footer-section" style="flex: 1; min-width: 200px">
+          <h3>About Ajivika</h3>
+          <p style="font-size: 14px; line-height: 1.6">
+            Ajivika is your one-stop destination for career growth and learning.
+            From creating professional resumes to applying for top jobs, we
+            provide tools and resources for every career stage.
+          </p>
+        </div>
+
+        <!-- Quick Links -->
+        <div
+          class="footer-section quick-link"
+          style="flex: 1; min-width: 200px"
+        >
+          <h3>Quick Links</h3>
+          <ul
+            style="
+              list-style: none;
+              padding: 0;
+              font-size: 14px;
+              line-height: 1.8;
+            "
+          >
+            <li>
+              <a href="./index.html" style="color: #fff; text-decoration: none"
+                >Home</a
+              >
+            </li>
+            <li>
+              <a href="./about.html" style="color: #fff; text-decoration: none"
+                >About Us</a
+              >
+            </li>
+            <li>
+              <a
+                href="./contact.html"
+                style="color: #fff; text-decoration: none"
+                >Contact</a
+              >
+            </li>
+            <li>
+              <a
+                href="./pricing.html"
+                style="color: #fff; text-decoration: none"
+                >Go Pro</a
+              >
+            </li>
+          </ul>
+        </div>
+
+        <!-- Resources -->
+        <div class="footer-section resources" style="flex: 1; min-width: 200px">
+          <h3>Resources</h3>
+          <ul
+            style="
+              list-style: none;
+              padding: 0;
+              font-size: 14px;
+              line-height: 1.8;
+            "
+          >
+            <li>
+              <a href="./blog.html" style="color: #fff; text-decoration: none"
+                >Blog</a
+              >
+            </li>
+            <li>
+              <a
+                href="./testimonial.html"
+                style="color: #fff; text-decoration: none"
+                >Testimonial</a
+              >
+            </li>
+            <li>
+              <a href="./faq.html" style="color: #fff; text-decoration: none"
+                >FAQs</a
+              >
+            </li>
+            <li>
+              <a href="./terms.html" style="color: #fff; text-decoration: none"
+                >Terms & Conditions</a
+              >
+            </li>
+            <li>
+              <a
+                href="privacy.html"
+                style="color: #fff; text-decoration: none"
+                >Privacy Policy</a
+              >
+            </li>
+          </ul>
+        </div>
+
+        <!-- Social Media -->
+        <div
+          class="footer-section social-icons"
+          style="flex: 1; min-width: 200px"
+        >
+          <h3>Follow Us</h3>
+          <div
+            style="
+              display: flex;
+              justify-content: center;
+              gap: 10px;
+              font-size: 20px;
+            "
+          >
+            <a
+              href="https://facebook.com"
+              target="_blank"
+              style="color: #fff; text-decoration: none"
+            >
+              <i class="fab fa-facebook-f"></i>
+            </a>
+            <a
+              href="https://twitter.com"
+              target="_blank"
+              style="color: #fff; text-decoration: none"
+            >
+              <i class="fab fa-twitter"></i>
+            </a>
+            <a
+              href="https://linkedin.com"
+              target="_blank"
+              style="color: #fff; text-decoration: none"
+            >
+              <i class="fab fa-linkedin-in"></i>
+            </a>
+            <a
+              href="https://instagram.com"
+              target="_blank"
+              style="color: #fff; text-decoration: none"
+            >
+              <i class="fab fa-instagram"></i>
+            </a>
+          </div>
+        </div>
+
+        <!-- Subscribe Section -->
+        <div
+          class="footer-section subscribe-section"
+          style="flex: 1; min-width: 200px"
+        >
+          <h3>Subscribe to Our Newsletter</h3>
+          <form
+            action="#"
+            method="POST"
+            style="
+              display: flex;
+              flex-direction: column;
+              gap: 10px;
+              align-items: center;
+            "
+          >
+            <input
+              id="email"
+              type="email"
+              name="email"
+              placeholder="Enter your email"
+            />
+            </button>
+            <button type="submit" class="subscribe-button">Subscribe</button>
+          </form>
+        </div>
+      </div>
+
+      <hr style="margin: 20px 0; border: 0; border-top: 1px solid #444" />
+      <div style="text-align: center; font-size: 14px; color: #aaa">
+        <p>&copy; 2024 Ajivika™. All rights reserved.</p>
+        <p>Designed and developed with ❤️ by the Ajivika Team.</p>
+      </div>
+    </footer>
+
     <script>
       // hamburger menu js
       function toggleMenu() {

diff --git a/styles.css b/styles.css
@@ -9,7 +9,7 @@ body {
     line-height: 1.6;
     background-color: var(--body-bg);
     color: #333;
-}
+} 
 
 :root {
     --body-bg: antiquewhite;