added faq

scss/partials/faq.scss

@@ -1,15 +1,93 @@
 #faq.section {
-  background-color: rgb(182,215,228); // change based on section theme
-  border-top: 9px solid #59c6f0;
+  background-color: white;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .faqs-title{
   font-size: 3.5rem !important;
   font-weight: bold;
-  background: #60bad8;
-  /* background: -webkit-linear-gradient( 135deg, #FD6E6A 10%, #FFC600 100%); */
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: -3px -3px #b8eeff;
-  padding-bottom:2%;
+}
+
+.faqs-container {
+  margin-top: 2rem;
+  max-width: 1280px;
+  width: 100%;
+  display: grid;
+  justify-items: center;
+  gap: 1.2rem;
+}
+
+@media (min-width: 1024px) {
+  .faqs-container {
+    grid-template-columns: repeat(2, auto);
+  }
+}
+
+.faqs-item {
+  max-width: 576px;
+  width: 100%;
+  margin-bottom: 1rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.faqs-item:hover .faqs-sheet {
+  transform: skewY(1deg) translateY(-30%);
+}
+
+.faqs-ruler {
+  border: 4px solid black;
+  background: white;
+  width: 100%;
+  min-height: 5rem;
+  border-radius: 4px;
+  z-index: 2;
+  padding: 2rem 0.5rem 0.5rem 0.5rem;
+  font-weight: 600;
+  font-family: 'Work Sans';
+  font-size: 1.5rem;
+  position: relative;
+  display: flex;
+  text-align: left;
+}
+
+.faqs-ruler::before {
+  content: "";
+  background: url("../../static/img/graphics/Blank\ Ruler.svg") no-repeat;
+  width: 100%;
+  height: 1.5rem;
+  position: absolute; 
+  top: -0.8px;
+  left: 0;
+}
+
+.faqs-sheet {
+  width: 95%;
+  border: 4px solid black;
+  border-radius: 4px;
+  border-top: 0;
+  transform: skewY(1.2deg) translateY(-50%);
+  display: grid;
+  grid-template-rows: 0;
+  padding: 1rem;
+  animation: show 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out;
+}
+
+.faqs-text {
+  opacity: 0;
+}
+
+@keyframes show {
+  0% {
+    transform: skewY(1.2deg) translateY(-100%);
+  }
+  100% {
+    transform: skewY(1.2deg) translateY(-50%);
+  }
 }

static/js/partials/faq.js

@@ -2,4 +2,121 @@ window.addEventListener('scroll', function() {
   const scrollPosition = window.scrollY;
 });
 
-// put other stuff here like button interactions etc.
+// put other stuff here like button interactions etc.
+const content = [
+  {
+    "question": "What is TAMU Datathon?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#FFBABA"
+  },
+  {
+    "question": "When is the event?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#C4FFBA"
+  },
+  {
+    "question": "Where is the event?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#FFDBBA"
+  },
+  {
+    "question": "How do I sign up?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#BAE6FF"
+  },
+  {
+    "question": "How much does it cost?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#D1A7E5"
+  },
+  {
+    "question": "Who can attend?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#E9BAFF"
+  },
+  {
+    "question": "How much do I need to know?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#BAD6FF"
+  },
+  {
+    "question": "What should I bring?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#FFECBA"
+  },
+  {
+    "question": "How do teams work?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#BBBAFF"
+  },
+  {
+    "question": "I have another question?",
+    "answer": "A datathon is where you build your analytical skill set and create data-driven solutions in 24 hours. We provide data science lectures, workshops, challenges, prizes, fun activities, swag, food, and more!",
+    "color": "#C4FFBA"
+  }
+]
+
+let contentElement = ""
+content.map(({question, answer, color}) => {
+  contentElement += `
+    <div class="faqs-item">
+      <div class="faqs-ruler">
+        ${question}  
+      </div>
+      <div class="faqs-sheet" style="background:${color}">
+        <div class="faqs-text">
+          ${answer}
+        </div>
+      </div>
+    </div>
+  `
+})
+
+document.querySelector(".faqs-container").innerHTML = contentElement;
+
+const tracker = document.querySelectorAll(".faqs-item");
+const answers = document.querySelectorAll(".faqs-sheet");
+const texts = document.querySelectorAll(".faqs-text")
+let active = false;
+let active_num = -1;
+
+const openCard = (i) => {
+  console.log(`card ${i} is being opened`)
+  answers[i].style.gridTemplateRows = '10rem';
+  answers[i].style.width = '100%';
+  answers[i].style.transform = 'skewY(0)';
+  answers[i].style.transition = 'all 0.4s ease-in-out';
+  texts[i].style.transition = 'all 0.4s 0.4s ease-in-out';
+  texts[i].style.opacity = 1;
+}
+
+const closeCard = (i) => {
+  console.log(`card ${i} is being closed`)
+  answers[i].style.gridTemplateRows = '0';
+  answers[i].style.width = '95%';
+  answers[i].style.transform = 'skewY(1.2deg) translateY(-50%)';
+  answers[i].style.transition = 'all 0.4s 0.4s ease-in-out';
+  texts[i].style.transition = 'all 0.4s ease-in-out';
+  texts[i].style.opacity = 0;
+}
+
+for (let i = 0; i < tracker.length; i++) {  
+  tracker[i].addEventListener("click", () => {
+    if (active) {
+      closeCard(active_num);
+      if (active_num !== i) {
+        openCard(i);
+        active_num = i;
+        active = true;
+      }
+      else {
+        active = false;
+      }
+    }
+    else {
+      openCard(i);
+      active_num = i;
+      active = true;
+    }
+  })
+}

views/partials/index/faq.ejs

@@ -1,4 +1,8 @@
 <div id="faq" class="section">
   <div class="faqs-title section-title">FAQS</div>
-
+
+  <div class="faqs-container">
+
+  </div>
+
 </div>