From ead504d3f186edf8ed0b3a1b1e0c35b1783c31e0 Mon Sep 17 00:00:00 2001
From: Sandoche Adittane <sandoche.adittane@nl.ibm.com>
Date: Thu, 14 Jul 2016 18:38:18 +0200
Subject: [PATCH] about page updates on design

---
 app/styles/_about.scss         | 27 +++++++++++++++++++++++--
 app/styles/_socialbuttons.scss | 10 +++++++++
 app/views/about.html           | 37 +++++++++++++++++-----------------
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/app/styles/_about.scss b/app/styles/_about.scss
index 5ea25d7..274c1a3 100644
--- a/app/styles/_about.scss
+++ b/app/styles/_about.scss
@@ -7,6 +7,17 @@
       color: #333;
     }
 
+		h2 {
+			margin-bottom: 35px;
+		}
+
+		h4 {
+			font-weight: 300;
+			margin-top: 20px;
+			margin-bottom: 20px;
+			font-size: 2rem;
+		}
+
     img {
     	display: block;
     	margin: 0 auto;
@@ -20,7 +31,10 @@
 
 	.colored-block {
 		width: 100%;
-		padding: 30px 0px;
+		padding-top: 100px;
+		padding-bottom: 90px;
+		padding-left: 0;
+		padding-right: 0;
 		color:#fff;
 	}
 
@@ -42,7 +56,7 @@
 	}
 
 	.text-block {
-		text-align: center;		
+		text-align: center;
 	}
 
 	.love {
@@ -50,4 +64,13 @@
 	}
 
 
+	.about-logo {
+		height:150px;
+		width: 150px;
+	}
+
+	.team-section {
+		padding-bottom: 130px;
+	}
+
 }
diff --git a/app/styles/_socialbuttons.scss b/app/styles/_socialbuttons.scss
index b3b420d..3a58c9f 100644
--- a/app/styles/_socialbuttons.scss
+++ b/app/styles/_socialbuttons.scss
@@ -3,6 +3,16 @@
     padding-left: 0;
 }
 
+.parent-center  {
+  .social-center {
+    margin: auto;
+    width: 50%;
+    padding: 10px;
+  }
+}
+
+
+
 
 @media (max-width: $screen-sm-min) {
 
diff --git a/app/views/about.html b/app/views/about.html
index d822bb8..5ccad38 100644
--- a/app/views/about.html
+++ b/app/views/about.html
@@ -2,11 +2,11 @@
     <div class="colored-block white">
           <div class="container">
           		<div class="row">
-                        <img src="images/hbIcoXS.png" alt="Happy Bots icon" class="img-responsive about_logo" />
-                       
+                        <img src="images/hbIcoS.png" alt="Happy Bots icon" class="img-responsive about-logo" />
+
 				        <div class="col-sm-12 text-block">
-                            <h2>Bip Bip... We are HAPPYBOTS</h2> <br>
-                            <p>We develop bots for fun and for companies. <br> 
+                            <h2>Bip Bip... We are HAPPYBOTS</h2>
+                            <p>We develop bots for fun and for companies. <br>
                              We love artificial intelligence and disruptive technologies.</p>
                         </div>
           		</div> <!-- /row -->
@@ -15,49 +15,48 @@ <h2>Bip Bip... We are HAPPYBOTS</h2> <br>
 
     <div class="colored-block grey">
           <div class="container">
-                <div class="row">                                   
+                <div class="row">
                         <div class="col-sm-12">
-                            <div class="text-block"> 
-                                <h2>Need a Bot?</h2> <br>
+                            <div class="text-block">
+                                <h2>Need a Bot?</h2>
                                 <p class="text">We build bots with <i class="fa fa-heart love" aria-hidden="true"></i><br><a class="cursor-link" onclick="showDoorbellModal()">Contact us</a> if you need a bot for your company :)</p>
                             </div>
                         </div>
                         <div class="col-sm-6 col-sm-offset-3">
                             <ng-include src="'views/shared/newsletter.html'"></ng-include>
-                        </div>                  
+                        </div>
                 </div> <!-- /row -->
           </div> <!-- /container -->
     </div> <!-- /white-->
 
-    <div class="colored-block white">
+    <div class="colored-block white team-section">
         <div class="container">
            <div class="row">
                 <div class="col-sm-12 text-block">
-                            <h2>Get to know us</h2> <br>
-                            <p>Visit our profiles to know a little bit more about us</p>
+                            <h2>Get to know us</h2>
                         </div>
 
-                <div class="col-sm-5 col-sm-offset-1">
+                <div class="col-sm-3 col-sm-offset-3">
                     <div class="profile">
                         <img src="images/sandoche.jpeg" alt="Sandoche Picture" class="img-circle img-responsive" />
                         <h4>
                             Sandoche <strong>Adittane</strong>
                         </h4>
                         <div class="contact">
-                            <a href="https://www.linkedin.com/in/sandoche" target="_blank"><i class="fa fa-linkedin"></i></a>
-                            <a href="http://www.sandoche.com" target="_blank"><i class="fa fa-globe"></i></a>
+                            <a href="https://www.linkedin.com/in/sandoche" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
+                            <a href="http://www.sandoche.com" target="_blank"><i class="fa fa-globe fa-2x"></i></a>
                         </div>
                     </div>
                 </div>
 
-                <div class="col-sm-5 center-col">
+                <div class="col-sm-3 center-col">
                     <div class="profile">
                         <img src="images/patricia.jpeg" alt="Patricia Picture" class="img-circle img-responsive" />
                         <h4>
                             Patricia <strong>Mayo Tejedor</strong>
                         </h4>
                         <div class="contact">
-                            <a href="https://www.linkedin.com/in/patriciamayotejedor" target="_blank"><i class="fa fa-linkedin"></i></a>
+                            <a href="https://www.linkedin.com/in/patriciamayotejedor" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
                         </div>
                     </div>
                 </div>
@@ -68,10 +67,10 @@ <h4>
 
     <div class="colored-block grey">
           <div class="container">
-                <div class="row">                                   
+                <div class="row">
                         <div class="col-sm-6 col-sm-offset-3">
-                            <ng-include src="'views/shared/socialbuttons.html'"></ng-include>
-                        </div>                  
+                            <ng-include src="'views/shared/socialbuttons.html'" class="parent-center"></ng-include>
+                        </div>
                 </div> <!-- /row -->
           </div> <!-- /container -->
     </div> <!-- /white-->