From 37e9eef80abe0b568d3bcd1d75f2035a803d7d5e Mon Sep 17 00:00:00 2001
From: Sama Ahmed <26samahmed@csu.fullerton.edu>
Date: Wed, 11 Oct 2023 21:38:35 -0700
Subject: [PATCH 1/2] WIP

Create Testimonial Component.
---
 src/routes/(site)/6/testimony.svelte | 68 ++++++++++++++++++++++++++++
 1 file changed, 68 insertions(+)

diff --git a/src/routes/(site)/6/testimony.svelte b/src/routes/(site)/6/testimony.svelte
index e69de29bb..3a2f3217c 100644
--- a/src/routes/(site)/6/testimony.svelte
+++ b/src/routes/(site)/6/testimony.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import BoardPicture from '$lib/components/board-member/board-picture.svelte';
+</script>
+
+<section class="testimony-container">
+  <div class="testimony-inner-container">
+    <h1 class="brand-header size-xl">Hear what our community has to say</h1>
+    <div class="testimony-text">
+      <div class="testimony-photo">
+        <BoardPicture src="/assets/authors/placeholder.webp" color="var(acm-blue)" />
+      </div>
+      <blockquote>
+        <p>
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        </p>
+      </blockquote>
+    </div>
+
+    <div class="testimony-text">
+      <div class="testimony-photo">
+        <BoardPicture src="/assets/authors/placeholder.webp" color="var(acm-blue)" />
+      </div>
+      <blockquote>
+        <p>
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+          ullamco laboris nisi ut aliquip ex ea commodo consequat."
+        </p>
+      </blockquote>
+    </div>
+  </div>
+</section>
+
+<style>
+  section {
+    display: grid;
+  }
+  section .testimony-inner-container {
+    display: grid;
+    grid-template-columns: 1fr;
+    align-items: center;
+  }
+
+  section .testimony-inner-container h1 {
+    display: grid;
+    align-items: center;
+    text-align: center;
+    margin: 0.3em;
+  }
+  section .testimony-inner-container .testimony-text {
+    display: grid;
+    align-items: center;
+  }
+
+  section .testimony-inner-container .testimony-text p {
+    margin-left: 2em;
+    margin-right: 2em;
+  }
+
+  section .testimony-inner-container .testimony-photo {
+    display: grid;
+    align-items: center;
+    justify-self: center;
+    margin: 2em;
+  }
+</style>

From 6324b30c0a0df4fc784a0bac41bdbe6d99e2d795 Mon Sep 17 00:00:00 2001
From: Sama Ahmed <26samahmed@csu.fullerton.edu>
Date: Fri, 3 Nov 2023 13:44:27 -0700
Subject: [PATCH 2/2] Update testimony.svelte

Finish Desktop CSS
---
 src/routes/(site)/6/testimony.svelte | 80 +++++++++++++++++++++++++---
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/src/routes/(site)/6/testimony.svelte b/src/routes/(site)/6/testimony.svelte
index 3a2f3217c..d3d4e167e 100644
--- a/src/routes/(site)/6/testimony.svelte
+++ b/src/routes/(site)/6/testimony.svelte
@@ -5,8 +5,8 @@
 <section class="testimony-container">
   <div class="testimony-inner-container">
     <h1 class="brand-header size-xl">Hear what our community has to say</h1>
-    <div class="testimony-text">
-      <div class="testimony-photo">
+    <div class="testimony-text1">
+      <div class="testimony-photo1">
         <BoardPicture src="/assets/authors/placeholder.webp" color="var(acm-blue)" />
       </div>
       <blockquote>
@@ -18,8 +18,8 @@
       </blockquote>
     </div>
 
-    <div class="testimony-text">
-      <div class="testimony-photo">
+    <div class="testimony-text2">
+      <div class="testimony-photo2">
         <BoardPicture src="/assets/authors/placeholder.webp" color="var(acm-blue)" />
       </div>
       <blockquote>
@@ -49,20 +49,86 @@
     text-align: center;
     margin: 0.3em;
   }
-  section .testimony-inner-container .testimony-text {
+  section .testimony-inner-container .testimony-text1,
+  .testimony-text2 {
     display: grid;
     align-items: center;
   }
 
-  section .testimony-inner-container .testimony-text p {
+  section .testimony-inner-container .testimony-text1 p {
     margin-left: 2em;
     margin-right: 2em;
   }
 
-  section .testimony-inner-container .testimony-photo {
+  section .testimony-inner-container .testimony-text2 p {
+    margin-left: 2em;
+    margin-right: 2em;
+  }
+
+  section .testimony-inner-container .testimony-photo1 {
     display: grid;
     align-items: center;
     justify-self: center;
     margin: 2em;
   }
+
+  section .testimony-inner-container .testimony-photo2 {
+    display: grid;
+    align-items: center;
+    justify-self: center;
+    margin: 2em;
+  }
+
+  @media screen and (min-width: 768px) {
+    section {
+      display: grid;
+      max-width: 1280px;
+      margin: 0 auto;
+    }
+    section .testimony-inner-container {
+      display: grid;
+      grid-template-columns: 1fr;
+      align-items: center;
+    }
+
+    section .testimony-inner-container h1 {
+      display: grid;
+      align-items: center;
+      text-align: center;
+      margin: 0.3em;
+    }
+    section .testimony-inner-container .testimony-text1,
+    .testimony-text2 {
+      display: grid;
+      align-items: center;
+    }
+
+    section .testimony-inner-container .testimony-text1 p {
+      margin-left: 18em;
+      margin-right: 12em;
+      margin-top: -8.5em;
+    }
+
+    section .testimony-inner-container .testimony-text2 p {
+      margin-left: 11em;
+      margin-right: 19em;
+      margin-top: -8.5em;
+    }
+
+    section .testimony-inner-container .testimony-photo1 {
+      display: grid;
+      align-items: center;
+      justify-self: left;
+      margin: 2em;
+      margin-left: 7em;
+    }
+
+    section .testimony-inner-container .testimony-photo2 {
+      display: grid;
+      align-items: center;
+      justify-self: right;
+      margin: 2em;
+      margin-right: 9em;
+    }
+  }
 </style>