Update careers.html

ayush-that · Nov 3, 2024 · 6639a17 · 6639a17
1 parent ea32a8b
commit 6639a17
Showing 1 changed file with 84 additions and 29 deletions.
diff --git a/careers.html b/careers.html
@@ -981,33 +981,9 @@ <h2>Jobs in Finance</h2>
     </style>
 
 
-    <main>
-      <img style="position: absolute;left: 900px; top: 1200px;mix-blend-mode: multiply;" src="assets/images/roadmap.jpg" alt="roadmap">
-      <section class="roadmap">
-        <h2 class="h2">Career Roadmap 🛣️</h2>
-        <div class="roadmap-step">
-          <div class="roadmap-title">Step 1: Pursue a Relevant Degree</div>
-          <p>Consider obtaining a degree in finance, accounting, economics, or business administration.</p>
-        </div>
-        <div class="roadmap-step">
-          <div class="roadmap-title">Step 2: Gain Experience</div>
-          <p>Look for internships or entry-level positions in finance to gain practical experience.</p>
-        </div>
-        <div class="roadmap-step">
-          <div class="roadmap-title">Step 3: Network</div>
-          <p>Attend finance-related events, workshops, and seminars to connect with professionals in the field.</p>
-        </div>
-        <div class="roadmap-step">
-          <div class="roadmap-title">Step 4: Get Certified</div>
-          <p>Consider pursuing professional certifications like CFA, CPA, or CFP to enhance your qualifications.</p>
-        </div>
-        <div class="roadmap-step">
-          <div class="roadmap-title">Step 5: Stay Informed</div>
-          <p>Keep up with the latest trends and developments in the finance industry through articles and news.</p>
-        </div>
-      </section>
-      <style>
-        /* Container styling */
+   <main>
+<style>
+   /* Container styling */
 .roadmap {
   padding: 2rem;
   background: linear-gradient(135deg, #e0f7fa, #e8f5e9);
@@ -1138,10 +1114,89 @@ <h2 class="h2">Career Roadmap 🛣️</h2>
   }
 }
 
-      </style>
+  /* Dark theme styles */
+/* Dark theme styles */
+.dark-mode body {
+  background-color: #1b1b2f;
+  color: #f5f5f5;
+}
 
+.dark-mode .roadmap {
+  background: linear-gradient(135deg, #243b55, #2e4053);
+  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
+}
 
-    </main>
+.dark-mode .roadmap .h2 {
+  color: #f5f5f5; /* Fallback color for gradient text */
+  background: linear-gradient(45deg, #ffffff, #e9e7e7); /* White to grey gradient */
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); /* Shadow for contrast */
+}
+
+.dark-mode .roadmap-step {
+  background: linear-gradient(135deg, #2e4053, #1b1b2f);
+  border-left: 5px solid #8e44ad;
+}
+
+.dark-mode .roadmap-step:hover {
+  background: linear-gradient(135deg, #1b1b2f, #8e44ad);
+}
+
+.dark-mode .roadmap-title {
+  color: #f39c12;
+}
+
+.dark-mode .roadmap-step p {
+  color: #f5f5f5;
+}
+
+/* Theme toggle button */
+#theme-toggle {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 10px 15px;
+  font-size: 1.2rem;
+  border: none;
+  background: #3498db;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+#theme-toggle.dark {
+  background: #8e44ad;
+}
+
+</style>
+
+  <img style="position: absolute; left: 900px; top: 1200px; mix-blend-mode: multiply;" src="assets/images/roadmap.jpg" alt="roadmap">
+  <section class="roadmap">
+    <h2 class="h2">Career Roadmap </h2>
+    <div class="roadmap-step">
+      <div class="roadmap-title">Step 1: Pursue a Relevant Degree</div>
+      <p>Consider obtaining a degree in finance, accounting, economics, or business administration.</p>
+    </div>
+    <div class="roadmap-step">
+      <div class="roadmap-title">Step 2: Gain Experience</div>
+      <p>Look for internships or entry-level positions in finance to gain practical experience.</p>
+    </div>
+    <div class="roadmap-step">
+      <div class="roadmap-title">Step 3: Network</div>
+      <p>Attend finance-related events, workshops, and seminars to connect with professionals in the field.</p>
+    </div>
+    <div class="roadmap-step">
+      <div class="roadmap-title">Step 4: Get Certified</div>
+      <p>Consider pursuing professional certifications like CFA, CPA, or CFP to enhance your qualifications.</p>
+    </div>
+    <div class="roadmap-step">
+      <div class="roadmap-title">Step 5: Stay Informed</div>
+      <p>Keep up with the latest trends and developments in the finance industry through articles and news.</p>
+    </div>
+  </section>
+</main>
 
     <section class="books-section">
       <img style="position: absolute; mix-blend-mode: multiply; left: 100px;height: 130px;" src="assets/images/careers-book-img.jpg" alt="photo">