Merge pull request Women-Coding-Community#92 from lilyndk/adjust-ment…

…orship-cta-styles Add CTA card styles to Mentorship about page
lilyndk · Apr 25, 2024 · fc1619e · fc1619e
2 parents 0784947 + 5b9d4e9
commit fc1619e
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 94 deletions.
diff --git a/_sass/custom/_card.scss b/_sass/custom/_card.scss
@@ -0,0 +1,66 @@
+.card {
+    border-radius: 1rem;
+}
+
+.card-s {
+    .card {
+        height: 100%;
+    }
+    .card-title {
+        font-size: 1.3rem;
+        margin-bottom: 0.25rem;
+    }
+    .card-subtitle {
+        font-weight: 400;
+        margin-top: 0;
+        margin-bottom: 0.6rem;
+        font-size: 1.1rem;
+    }
+    .card p {
+        line-height: 1;
+    }
+    .card-img-top {
+        border-radius: 100%;
+        padding: 1.25rem;
+    }
+    .card-body {
+        padding-top: 0;
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+    }
+}
+
+.card-m {
+    .card-header {
+        background-color: transparent;
+        border: none;
+    }
+    .card-title {
+        margin-top: 0;
+    }
+    .card-body {
+        display: flex;
+        height: 100%;
+        flex-direction: column;
+        text-align: center;
+        align-items: center;
+        padding: 2rem 2rem 3rem 2rem;
+    }
+    .btn {
+        max-width: fit-content;
+    }
+}
+
+.mentorship-about {
+    .card-body {
+        align-items: baseline;
+        ol {
+            text-align: left;
+            padding-left: 1.4rem;
+        }
+        p {
+            margin-bottom: 0.25rem;
+        }
+    }
+}
diff --git a/_sass/custom/_home.scss b/_sass/custom/_home.scss
@@ -60,21 +60,13 @@
 .home {
 
     .row {
-        justify-content: center;
         &.bg-purple {
-            background: $primary-90;
+            background-color: $primary-90;
             padding: 0 1rem;
         }
         h2 {
             margin: 1rem auto;
         }
-        .content {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            text-align: center;
-            padding: 5rem 0;
-        }
     }
 
     .row.mentors-cta {
@@ -107,23 +99,4 @@
             color: $black;
         }
     }
-
-    .card {
-        margin-top: 10px;
-    }
-
-    .card-header {
-        background-color: transparent;
-        border: none;
-    }
-
-    .card-body {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        text-align: center;
-        p {
-            margin-bottom: 30px;
-        }
-    }
 }
diff --git a/_sass/custom/_team.scss b/_sass/custom/_team.scss
@@ -1,41 +1,12 @@
 
 .team {
 
-    .profile-photo {
-        width: 150px;
-    }
-
-    .card {
-        height: 100%;
-        border-radius: 1rem;
-    }
-
-    .card-title {
-        font-size: 1.3rem;
-        margin-bottom: 0.25rem;
-    }
-
-    .card-subtitle {
-        font-weight: 400;
-        margin-top: 0;
-        margin-bottom: 0.6rem;
-        font-size: 1.1rem;
-    }
-
-    .card p {
-        line-height: 1;
+    .row {
+        justify-content: flex-start;
     }
 
-    .card-img-top {
-        border-radius: 100%;
-        padding: 1.25rem;
-    }
-
-    .card-body {
-        padding-top: 0;
-        display: flex;
-        height: 100%;
-        flex-direction: column;
+    .profile-photo {
+        width: 150px;
     }
 
     .network {

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -1,4 +1,5 @@
 @import "buttons";
+@import "card";
 @import "menu";
 @import "faq";
 @import "footer";

diff --git a/_sass/custom/media-breakpoint.scss b/_sass/custom/media-breakpoint.scss
@@ -30,7 +30,7 @@
     .page-header h1 {
         font-size: 3.5rem;
     }
-    .container h2 {
+    .content-constrained h2 {
         font-size: 2.8rem;
     }
 }
diff --git a/_sass/main.scss b/_sass/main.scss
@@ -20,3 +20,15 @@ body {
 .row .content {
   max-width: $container-max-width;
 }
+
+.row {
+  justify-content: center;
+
+  .content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    text-align: center;
+    padding: 5rem 0;
+  }
+}
diff --git a/index.html b/index.html
@@ -42,18 +42,18 @@ <h2>Opportunities & Programmes</h2>
         <div class="row mentors-cta">
             <div class="content">
                 <div class="col-12 col-md-6">
-                    <div class="card">
+                    <div class="card card-m">
                         <div class="card-body">
-                            <h2>Meet Our Dedicated Mentors</h2>
+                            <h2 class="card-title">Meet Our Dedicated Mentors</h2>
                             <p>Ready to advance in tech? Explore our diverse mentors who are here to guide and support you on your journey.</p>
                             <a href="/mentors" class="btn btn-primary">Check our mentors</a>    
                         </div>
                     </div>
                 </div>
                 <div class="col-12 col-md-6">
-                    <div class="card">
+                    <div class="card card-m">
                         <div class="card-body">
-                            <h2>Become a Mentor</h2>
+                            <h2 class="card-title">Become a Mentor</h2>
                             <p>Ready to empower and be empowered in tech? Become a mentor! Expand your network, give back, share expertise, and discover new perspectives.</p>
                             <a href="https://docs.google.com/forms/d/e/1FAIpQLSdtf7-upMp1m5kJ4MSpexS-UwGJHhACEW-yPoEQoROHi4kVcg/viewform" target="_blank" class='btn btn-primary'>Join as a Mentor</a>
                         </div>

diff --git a/mentorship.html b/mentorship.html
@@ -6,37 +6,35 @@
 <div class="page-header">
     <h1>Mentorship Programme</h1>
 </div>
-<div class="container">
-    <div class="section intro">
-        <div class="row justify-content-center">
-            <div class="col-12 col-md-6 text-center py-6 overview">
+<div class="mentorship-about container">
+    <div class="row">
+        <div class="content pb-5">
+            <div class="col-12 col-md-6">
                 <p class="lead">Mentorship is a fantastic way to get support for your personal growth and career development. Mentorship relationships can be rewarding to both people, personally and professionally. It's an opportunity to develop communication skills, expand your viewpoints, and consider new ways of approaching situations. And both partners can advance their careers in the process.</p>
             </div>
         </div>
-        <div class="row justify-content-center align-items-start">
-            <div class="col-xs-12 col-md-5 mentor py-3 py-md-6">
-                <div class="row">
-                    <div class="col">
+    </div>
+    <div class="row mentors-cta">
+        <div class="content pt-0">
+            <div class="col-12 col-md-6">
+                <div class="card card-m">
+                    <div class="card-body">
+                        <h2 class="card-title">Become a Mentor</h2>
                         <p>You should apply to be a <b>mentor</b> if you:</p>
                         <ol>
                             <li>Want to extend your professional network</li>
                             <li>Want to contribute to the community</li>
                             <li>You are ready to share expertise</li>
                             <li>You want to get a new perspective and learn from your mentees</li>
                         </ol>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col">
-                        <p class="mt-4 d-flex">
-                            <a href="https://docs.google.com/forms/d/e/1FAIpQLSdtf7-upMp1m5kJ4MSpexS-UwGJHhACEW-yPoEQoROHi4kVcg/viewform" target="_blank" class='btn btn-primary'>Join as a Mentor</a>
-                        </p>
+                        <a href="https://docs.google.com/forms/d/e/1FAIpQLSdtf7-upMp1m5kJ4MSpexS-UwGJHhACEW-yPoEQoROHi4kVcg/viewform" target="_blank" class='btn btn-primary'>Join as a mentor</a>
                     </div>
                 </div>
             </div>
-            <div class="col-xs-12 col-md-5 mentee py-3 py-md-6">
-                <div class="row">
-                    <div class="col">
+            <div class="col-12 col-md-6">
+                <div class="card card-m">
+                    <div class="card-body">
+                        <h2 class="card-title">Become a Mentee</h2>
                         <p>You should apply to be a <b>mentee</b> if you:</p>
                         <ol>
                             <li>Want to start career in software engineering</li>
@@ -45,13 +43,7 @@ <h1>Mentorship Programme</h1>
                             <li>Want to apply for a leadership position</li>
                             <li>Need support in advancing your career</li>
                         </ol>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col">
-                        <p class="my-4 d-flex">
-                            <a href="/mentors" class='btn btn-primary'>Check our Mentors</a>
-                        </p>
+                        <a href="/mentors" class="btn btn-primary">Check our mentors</a>    
                     </div>
                 </div>
             </div>

diff --git a/team.html b/team.html
@@ -10,7 +10,7 @@ <h1>Meet our team</h1>
     <div class="section">
         <h2>Core team</h2>
         <div class="row justify-content-center ">
-            <div class="col-md-8 text-center">
+            <div class="col-md-6 text-center">
                 <p>The core team of our community is composed of visionary directors and dynamic leaders, 
                     who bring a wealth of experience and dedication to empowering women in technology. 
                     These esteemed professionals are committed to fostering an environment of growth, inclusivity 
@@ -21,7 +21,7 @@ <h2>Core team</h2>
         <div class="row g-3">
             {% for person in site.data.team %}
             <div class="col-12 col-md-6 col-lg-3">
-                <div class="card">
+                <div class="card card-s">
                     <img src="{{person.image}}" alt="profile photo" class="profile photo card-img-top">
                     <div class="card-body">
                         <h5 class="card-title">{{person.name}}</h5>
@@ -85,7 +85,7 @@ <h6 class="card-subtitle">{{person.position}}</h6>
                                 {% if network.name=="github" %}
                                 <span> <a href="{{network.link}}" target="_blank"> {% include icons/github.svg %}</a></span>
                                 {% endif %}
-                            {% endfor %}
+                                    {% endfor %}
                         </span>
                     </div>
                 </div>