Updated About Page

Added some css effests.

now in _config.yml we have members. every member thar will appear there
will be displayed on the about page.

**Note:** every member in the config hase some fields, ceep them intact!

_config.yml

@@ -54,3 +54,37 @@ social:
 #    share_url:
 #    share_title:
 #    share_link:
+#    
+# Members information. Shown on About page.
+members:
+  - name: Liran Ben Gida
+    position: Project Manager
+    text: "After two semesters and 12 courses, I was thinking why can't I see my AVG on each single semester? Why do I need to calculate 12 different courses to know if I have to take another exam to raise my average. These thoughts translated into code in a month,And after Sagi joined me, with his driven, I turned my though into a real project."
+    img: liran.jpg
+    social:
+      - title: envelope #use for email address
+        url: mailto:liranbg@gmail.com
+        tooltip: e-mail
+      - title: facebook
+        url: https://www.facebook.com/liranbg
+        tooltip: Facebook Profile
+      - title: github
+        url: http://www.github.com/liranbg
+        tooltip: github Profile
+  - name: Sagi Dayan
+    position: Developer And Website Maintainer
+    text: "I just wanted to get my Semester into my Google account in one click. After a 10 min break between classes Liran & I thought it might be cool to join forces. After tow mothes we got a CLI program, and it got us evan hungriear. This Project will be our little baby, And Baybies need to grow..." 
+    img: sagi.jpg
+    social:
+      - title: envelope #use for email address
+        url: mailto:sagidayan@gmail.com
+        tooltip: e-mail
+      - title: linkedin
+        url: http://lnkd.in/dFXupGn
+        tooltip: Linkedin Profile
+      - title: github
+        tooltip: github profile
+        url: http://www.github.com/sagidayan
+      - title: google-plus
+        url: https://plus.google.com/+SagiDayan
+        tooltip: Google+ Profile

_includes/members.html

@@ -0,0 +1,36 @@
+
+<div class="mm">
+    <table style="border-collapse:collapse;border-spacing:0;border:none;width=100%">
+        {% for member in site.members %}
+        <tr>
+            <th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal" rowspan="2">
+                <div class="mmbox" style="background:url({{ "/assets/img/members/" | prepend: site.baseurl }}{{ member.img }}); background-size:cover">
+                    <div class="mmoverlay">
+                        <div class="mmplus">
+                            <h3>Contact Me: </h3><br><br>
+                            {% for entry in member.social %}
+                            <a href="{{ entry.url }}" target="_blank" title="{{ entry.tooltip }}"><i class="fa fa-{{ entry.title }} fa-fw fa-border" style='color: #FFFFFF;'></i></a>&nbsp;
+                            {% endfor %}   
+                        </div>
+                    </div>  
+                </div>
+            </th>
+            <th style="font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal">
+                <h3>{{ member.name }}</h3>
+                <b><i>{{ member.position }}</i></b><br>
+            </th>
+        </tr>
+        <tr>
+            <td style="font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:0px;overflow:hidden;word-break:normal">
+                <center>
+                    <i class="fa fa-quote-right fa-flip-horizontal"></i>
+                    <br>
+                    {{ member.text }}
+                    <br>
+                    <i class="fa fa-quote-right"></i>
+                </center>
+            </td>
+        </tr>
+        {% endfor %}
+    </table>
+</div>

about.md

@@ -24,14 +24,16 @@ The next part of the program…okay, this part we will leave open for the future
 
 ## <i class="fa fa-users"></i> The Team
 Our team consists of two Software Engineering students from the Jerusalem College of Engineering.
-
-Project Manager: [Liran Ben Gida][liran]
 <br>
-Co-developer: [Sagi Dayan][sagi]
+
+{% include members.html %}
+
+<br>
 
 This open source application was developed in our spare time and is available for and meant to be shared with other students attending our college.
 The project is private and free to use \ change and was not done in collaboration with the college
 
+
 ---
 
 ## <i class="fa fa-plus-square-o"></i> Join US

css/main.sass

@@ -611,3 +611,37 @@ pre
     border: 0
     padding-right: 0
     padding-left: 0
+
+
+// Members include
+
+.mm
+  position:relative
+  .mmbox
+
+    
+.mmbox
+  width: 300px
+  height: 200px
+  box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, 0.45)
+  border-bottom: 2px solid #fff
+  border-right: 2px solid #fff
+  margin: 5% auto 0 auto
+  border-radius: 5px
+  overflow: hidden
+  &:hover
+    .mmoverlay
+      opacity: 1
+
+.mmoverlay
+  background: rgba(0, 0, 0, 0.75)
+  background-size:cover
+  text-align: center
+  padding: 45px 0 66px 0
+  opacity: 0
+  -webkit-transition: opacity .25s ease
+  -moz-transition: opacity .25s ease
+
+.mmplus
+  font-family: Helvetica
+  color: rgba(255, 255, 255, 0.85)

css/screen.css

@@ -413,7 +413,7 @@ margin on the iframe, cause it breaks stuff. */
 /* Every post, on every page, gets this style on its <article> tag */
 .post {
     position: relative;
-    width:80%;
+    width:100%;
     max-width: 700px;
     margin: 4rem auto;
     padding-bottom: 4rem;