Transfer Learning Page Creation

assets/css/main.css

@@ -1843,3 +1843,203 @@ section,
   margin-top: 0.5rem;
   font-style: italic;
 }
+
+/* -------------- */
+/* Start of stuff for transfer learning page */
+.highlight-link {
+  color: #6600cc; 
+  font-weight: bold;
+  text-decoration: underline;
+}
+
+/* keep it purple during click/keyboard focus and once opened */
+.box-title-btn:active,
+.box-title-btn:hover,
+.box-title-btn:focus,
+.box-title-btn:focus-visible,
+.box-title-btn[aria-expanded="true"] {
+  color: #6600cc !important; 
+}
+
+/* Marble-style purple/white background */
+.card {
+  background: linear-gradient(135deg, rgba(240, 230, 255, 0.6), rgba(255, 255, 255, 0.9)),
+              url('https://www.transparenttextures.com/patterns/marble.png');
+  background-size: cover;
+  background-blend-mode: lighten;
+  border-radius: 12px;
+}
+
+/* Box titles */
+.box-title-btn {
+  color: #6600cc;
+  font-size: 1.7rem; 
+}
+
+/* Extra info row inside the button */
+.box-header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.box-extra-text a {
+  color: #000000; 
+}
+
+.box-extra-text a:hover {
+  color: #4b0082;
+}
+
+.box-extra-text {
+  font-size: 1.2rem;  
+  font-weight: 600;    /* a bit bolder */
+  color: #000000; 
+}
+
+/* this defines the images sizes and borders on phones */
+.box-extra-images img {
+  height: 80px;
+  width: auto;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+/* this defines the images sizes and borders on computers and tablets */
+@media (min-width: 768px) {
+  .box-extra-images img {
+    height: 80px;
+    width: auto;
+    margin-left: 15px;
+    margin-bottom: 15px;
+  }
+}
+
+@media (min-width: 768px) {
+  .pad-bottom { min-height: 200px; }
+}
+
+.fancy-list {
+  list-style: none; /* Remove default bullets */
+  padding-left: 1.2em;
+}
+
+.fancy-list li::before {
+  content: "★";
+  color: #6600cc;
+  font-weight: bold;
+  display: inline-block;
+  width: 1em;
+  margin-left: -1.2em;
+}
+
+/* Container max-width constraint for transfer learning grid */
+#rej-grid .container {
+  max-width: 1200px; /* Ensure cards don't become too wide on very large screens */
+}
+
+/* Transfer Learning Card Structure */
+.transfer-card {
+  min-height: 280px; /* Ensure consistent height */
+  display: flex;
+  flex-direction: column;
+}
+
+.transfer-card .box-title-btn {
+  flex: 1;
+  display: flex !important;
+  flex-direction: column !important;
+  text-align: center !important;
+  border: none !important;
+  background: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+.transfer-card .box-title-btn:focus,
+.transfer-card .box-title-btn:active {
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+/* Header row with title and badge */
+.card-header-row {
+  width: 100%;
+  border-bottom: 1px solid rgba(102, 0, 204, 0.1);
+}
+
+.card-title {
+  font-size: 1.7rem;
+  font-weight: bold;
+  color: #6600cc;
+}
+
+.card-header-row .badge {
+  font-size: 1rem !important;
+  padding: 8px 12px !important;
+  font-weight: 600 !important;
+}
+
+/* Center content area */
+.card-center-content {
+  flex: 1;
+  display: flex !important;
+  flex-direction: column !important;
+  justify-content: center !important;
+  align-items: center !important;
+  text-align: center !important;
+  min-height: 120px;
+  padding: 15px 20px;
+  width: 100% !important;
+}
+
+.associates-text {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #000000;
+  margin: 0 0 15px 0 !important;
+  text-align: center !important;
+  width: 100% !important;
+  display: block !important;
+}
+
+.associates-text a {
+  color: #6600cc;
+  text-decoration: underline;
+}
+
+.associates-text a:hover {
+  color: #4b0082;
+}
+
+/* Company logos styling */
+.company-logos {
+  min-height: 60px;
+  display: flex !important;
+  flex-wrap: wrap !important;
+  align-items: center !important;
+  justify-content: center !important;
+  width: 100% !important;
+  text-align: center !important;
+  gap: 10px;
+  margin: 0 auto !important;
+}
+
+.company-logos img {
+  height: 60px;
+  width: auto;
+  object-fit: contain;
+  margin: 5px;
+  display: inline-block;
+}
+
+/* Responsive adjustments */
+@media (min-width: 768px) {
+  .company-logos img {
+    height: 70px;
+    margin: 8px;
+  }
+}
+
+/* End of stuff for transfer learning page */
+/* -------------- */

events.html

@@ -53,8 +53,9 @@ <h1 class="sitename">BSML</h1>
               <li><a href="./index.html#team">Founders</a></li>
               <li><a href="./projects.html">Projects</a></li>
               <li><a href="./events.html" class="active">Events</a></li>
-              <li><a href="hackathons.html">Hackathons</a></li>
+              <li><a href="./hackathons.html">Hackathons</a></li>
               <li><a href="./theses.html">Theses Repo</a></li>
+              <li><a href="./transfer_learning.html">Transfer Learning</a></li>
             </ul>
             <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
           </nav>

hackathons.html

@@ -54,9 +54,10 @@ <h1 class="sitename">BSML</h1>
               <li><a href="./index.html#faq">FAQ</a></li>
               <li><a href="./index.html#team">Founders</a></li>
               <li><a href="./projects.html">Projects</a></li>
-              <li><a href="events.html">Events</a></li>
-              <li><a href="hackathons.html"  class="active">Hackathons</a></li>
+              <li><a href="./events.html">Events</a></li>
+              <li><a href="./hackathons.html"  class="active">Hackathons</a></li>
               <li><a href="./theses.html">Theses Repo</a></li>
+              <li><a href="./transfer_learning.html">Transfer Learning</a></li>
             </ul>
             <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
           </nav>

index.html

@@ -26,14 +26,6 @@
 
   <!-- Main CSS -->
   <link href="assets/css/main.css" rel="stylesheet">
-
-  <!-- =======================================================
-  * Template Name: HeroBiz
-  * Template URL: https://bootstrapmade.com/herobiz-bootstrap-business-template/
-  * Updated: Jun 29 2024 with Bootstrap v5.3.3
-  * Author: BootstrapMade.com
-  * License: https://bootstrapmade.com/license/
-  ======================================================== -->
 </head>
 
 <body class="index-page">
@@ -51,13 +43,13 @@ <h1 class="sitename">BSML</h1>
         <ul>
           <li><a href="#hero" class="active">Home<br></a></li>
           <li><a href="#about">About</a></li>
-<!--           <li><a href="#pricing">Membership</a></li> -->
           <li><a href="#faq">FAQ</a></li>
           <li><a href="#team">Founders</a></li>
           <li><a href="./projects.html">Projects</a></li>
           <li><a href="./events.html">Events</a></li>
-          <li><a href="hackathons.html">Hackathons</a></li>
+          <li><a href="./hackathons.html">Hackathons</a></li>
           <li><a href="./theses.html">Theses Repo</a></li>
+          <li><a href="./transfer_learning.html">Transfer Learning</a></li>
         </ul>
         <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
       </nav>
@@ -229,8 +221,8 @@ <h4>Marketing</h4>
 
           <li class="nav-item col-6 col-md-4 col-lg-2">
             <a class="nav-link" data-bs-toggle="tab" data-bs-target="#open-roles-tab-5">
-              <i class="bi bi-code-slash" style="color: #20c997;"></i>
-              <h4>Website</h4>
+              <i class="bi bi-person-check" style="color: #20c997;"></i>
+              <h4>Mentee</h4>
             </a>
           </li><!-- End Tab 3 Nav -->
 
@@ -446,50 +438,58 @@ <h4>Requirements</h4>
           <div class="tab-pane fade" id="open-roles-tab-5">
             <div class="row gy-4">
               <div class="col-lg-12 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="100">
+                <h4>More info <a href="./transfer_learning.html" target="_blank" class="highlight-link">here</a></h4>
                 <h4>Deliverable</h4>
                 <p>
-                  Website maintenance and on-demand coding.
+                  None
                 </p>
                 <h4>Mission</h4>
                 <p>
-                  Build the most beautiful business website a student association can have.
+                   Reach <em>your</em> goals. Literally
                 </p>
                 <h4>Description</h4>
                 <p>
-                  We successfully migrated from a third party hosting service to an website fully developed by our members and hosted on GitHub. This is an opportunity to get your hand dirty and write in HTML-CSS-JS to improve the website functionalities, make it even more catchy, add open-roles and fix bugs of any kind.
+                  You will be paired with a mentor active in your field of interest among: Quantitative Finance, Data Science, Machine Learning Research, PhD, and Master's.
+                  Your mentor will offer guidance, share insights, and may even provide referrals. 
                 </p>
                 <h4>Approximate workflow</h4>
                 <p>
-                  <ol>
-                    <li>Receive requirements and proposals about changes to the website.</li>
-                    <li>Evaluate their feasiblity.</li>
-                    <li>Implement.</li>
-                  </ol>
+                    Highly dependent on your mentor and your goals. See below
                 </p>
                 <h4>Examples</h4>
                 <p>
                   <ul>
-                    <li><i class="bi bi-lightbulb-fill"></i> You browse on the internet and find a beautiful website with similar color schemes to BSML’s that inspires you. You will propose and implement the changes to BSML’s website.</li>
-                    <li><i class="bi bi-lightbulb-fill"></i> An applicant notifies us that a button is not working. You will fix the bug, and then take the opportunity to improve the look and feel of the application process.</li>
+                    <li><i class="bi bi-lightbulb-fill"></i>
+                    If your mentor is supporting you in applications to foreign universities, they might review your statement 
+                    of purpose, or offer advice on GRE preparation. Expect more interaction during the Fall and Winter (i.e., before
+                    applications close)
+                    </li>
+                    <li><i class="bi bi-lightbulb-fill"></i>
+                    If instead your mentor is guiding you through applications to buy-side quantitative finance jobs, they might give you specific 
+                    advice on how to prepare for interviews, send you study material, and arrange mock interviews with you. Expect more interaction 
+                    if you have an interview coming up
+                    </li>
                   </ul>
                 </p>
-                <h4>Requirements</h4>
-                <ul>
-                  <li><i class="bi bi-check-circle-fill"></i> Basic knowledge of HTML-CSS-JS</li>
-                  <li><i class="bi bi-check-circle-fill"></i> Familiarity with Boostrap5 is plus</li>
-                  </ul>
-                <p><b>Your role is essential for developing and nurturing BSML’s professional public figure.</b></p>
+                <p><b>This role is designed to empower you to fulfil your full potential.</b></p>
                   </div>
             </div>
           </div>
 
         </div>
-        <div class="content d-flex flex-row justify-content-center align-items-center">
-          <a href="https://forms.gle/dc1yNsVX4GqrVWCZ9" class="read-more align-self-start"><span>Apply</span><i class="bi bi-arrow-right"></i></a>
-        </div>
       </div>
+
+      <div class="content d-flex flex-row justify-content-center align-items-center gap-3">
+      <a href="https://forms.gle/dc1yNsVX4GqrVWCZ9"
+      class="read-more align-self-start" target="_blank">
+      <span>Apply as an Associate</span><i class="bi bi-arrow-right"></i>
+      </a>
 
-    </section><!-- /open-roles Section -->
+      <a href="https://docs.google.com/forms/d/e/1FAIpQLSeuX-ieiGssP-UXd-tjtlvyse3CZc1coWNE0j-Zitg-Bf8uWg/viewform?usp=sharing&ouid=100706111273088766571"
+      class="read-more align-self-start" target="_blank">
+      <span>Apply as a Mentee</span><i class="bi bi-arrow-right"></i>
+      </a></div>
+    </section>
 
     <!-- Faq Section -->
     <section id="faq" class="faq section">
@@ -628,7 +628,7 @@ <h2>Where Our Members Shine</h2>
 
 
           <div class="col-xl-2 col-md-3 col-6 spotlight-logo">
-            <img src="assets/img/spotlights/client-2.jpg" class="img-fluid" alt="">
+            <img src="assets/img/spotlights/uchicago.png" class="img-fluid" alt="">
           </div><!-- End Client Item -->
 
         </div>
@@ -694,10 +694,6 @@ <h4>Marco Lomele</h4>
               </div>
               <div class="member-info">
                 <div class="social">
-                  <!-- <a href=""><i class="bi bi-twitter-x"></i></a>
-                  <a href=""><i class="bi bi-facebook"></i></a>
-                  <a href=""><i class="bi bi-instagram"></i></a> -->
-                  <a href="https://github.com/giuliocaputi" target="_blank"><i class="bi bi-github"></i></a>
                   <a href="https://www.linkedin.com/in/giulio-caputi/"target="_blank"><i class="bi bi-linkedin"></i></a>
                 </div>
                 <h4>Giulio Caputi</h4>

projects.html

@@ -51,13 +51,13 @@ <h1 class="sitename">BSML</h1>
             <ul>
               <li><a href="./index.html#home">Home<br></a></li>
               <li><a href="./index.html#about">About</a></li>
-    <!--           <li><a href="#pricing">Membership</a></li> -->
               <li><a href="./index.html#faq">FAQ</a></li>
               <li><a href="./index.html#team">Founders</a></li>
               <li><a href="./projects.html" class="active">Projects</a></li>
-              <li><a href="events.html">Events</a></li>
-              <li><a href="hackathons.html">Hackathons</a></li>
+              <li><a href="./events.html">Events</a></li>
+              <li><a href="./hackathons.html">Hackathons</a></li>
               <li><a href="./theses.html">Theses Repo</a></li>
+              <li><a href="./transfer_learning.html">Transfer Learning</a></li>
             </ul>
             <i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
           </nav>