From a2c93c33ddffafa02fce56fbd16158c6823a5f80 Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Tue, 7 May 2019 15:18:44 +0900
Subject: [PATCH] Prepare formatting for Projects Carousel.

---
 index.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++-------
 styles.css | 27 ++++++++++++++++++++++++++-
 2 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 3ddc02c..7da73fd 100644
--- a/index.html
+++ b/index.html
@@ -148,9 +148,30 @@
         <div class="col-sm-6" id="projects">
           <h3><i class="fas fa-code-branch"></i><br />Projects</h3>
           <br />
-          <p>Bus GPS</p>
-          <p>{dev}Osan Website</p>
-          <p>Pending Game Engine</p>
+		  <div id="projectCarousel" class="carousel slide" data-ride="carousel">
+			<div class="carousel-inner">
+				<div class="carousel-item active" data-interval="10000">
+					<h3>Bus GPS</h3>
+					<p>Kevin Falting</p>
+				</div>
+				<div class="carousel-item" data-interval="10000">
+					<h3>{dev}Osan Website</h3>
+					<p>{dev}Osan Club</p>
+				</div>
+				<div class="carousel-item" data-interval="10000">
+					<h3>Pending Game Engine</h3>
+					<p>Joshua Sigona</p>
+				</div>
+			</div>
+			<a class="carousel-control-prev" href="#projectCarousel" role="button" data-slide="prev">
+				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+				<span class="sr-only">Previous</span>
+			</a>
+			<a class="carousel-control-next" href="#projectCarousel" role="button" data-slide="next">
+				<span class="carousel-control-next-icon" aria-hidden="true"></span>
+				<span class="sr-only">Next</span>
+			</a>
+		  </div>
         </div>
       </div>
     </div>
@@ -167,10 +188,30 @@
         </div>
         <div class="col-sm-6" id="faq">
           <h3>FAQ</h3>
-          <h6>Do I have to know how to program?</h6>
-          <div class="answer">
-            Absolutely not, just a desire to hang out with software developers.
-          </div>
+          <div class="question1">
+		  <h6>Do I have to know how to program?</h6>
+			<div class="answer">
+				Absolutely not, just a desire to hang out with software developers.
+			</div>
+		  </div>
+          <div class="question2">
+			<h6>I want to learn a programming language but I have no experience. Where do I start?</h6>
+			<div class="answer">
+				Look at the "Getting Started" Learning Resources above for great starting points. Pick something you are passionate about making and work towards your goal by learning the requirements of that goal.
+			</div>
+		  </div>
+          <div class="question1">
+			<h6>How do I fix errors when I run into them and don't know what do?</h6>
+			<div class="answer">
+				Google is your best friend. Usually asking your question through Google gives you a <b>Stack Overflow</b> article with similar issues that others have faced like you.
+			</div>
+		  </div>
+          <div class="question2">
+			<h6>I want to teach something for the club that would be beneficial!</h6>
+			<div class="answer">
+				Awesome! As we explain in our meetings, anyone can come up and be the speaker for the week. If you have a topic that would benefit others then by all means we would love to hear from you! Let us know when you want to speak!
+			</div>
+		  </div>
         </div>
       </div>
     </div>
diff --git a/styles.css b/styles.css
index 375dd45..7329f72 100644
--- a/styles.css
+++ b/styles.css
@@ -118,6 +118,31 @@ a {
   padding-left: 12px;
 }
 
-.answer {
+div[class="question1"]{
   margin-left: 10px;
+  padding-bottom: 12px;
+  background-color: rgb(250,240,240);
+}
+
+div[class="question1"]>div[class="answer"]{
+  margin-left: 10px;
+  padding-bottom: 12px;
+  background-color: rgb(240,240,220);
+}
+
+div[class="question2"]{
+  margin-left: 10px;
+  padding-bottom: 12px;
+  background-color: rgb(240,240,240);
+}
+
+div[class="question2"]>div[class="answer"]{
+  margin-left: 10px;
+  padding-bottom: 12px;
+  background-color: rgb(230,240,220);
+}
+
+div[class="answer"]>b{
+	font-weight: normal;
+	text-decoration:underline;
 }