From f9d90623cfc05351064eb9582dc29b829a4d8263 Mon Sep 17 00:00:00 2001
From: Catalina Margozzini <ca.margozzini@gmail.com>
Date: Wed, 29 Aug 2018 13:39:39 -0300
Subject: [PATCH] Contact

---
 _includes/contact.html | 147 +++++++++++++++++++----------------------
 _includes/footer.html  |   6 +-
 _includes/nav-en.html  |   2 +-
 _sass/_base.scss       |  47 +++++++------
 about-en.html          |  24 ++++---
 about.html             |  10 ++-
 contact.html           |   7 ++
 7 files changed, 127 insertions(+), 116 deletions(-)
 create mode 100644 contact.html

diff --git a/_includes/contact.html b/_includes/contact.html
index 080fd67..a846dab 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -1,80 +1,69 @@
-<section id="contacto">
-    <h2>Contacto</h2>
-
-
-
-
-
-    <form method="POST" action="https://formspree.io/info@ciudadanointeligente.org" class="form">
-        <div class="ss-form-question errorbox-good" role="listitem">
-            <div dir="ltr" class="ss-item ss-item-required ss-text">
-            	<div class="ss-form-entry">
-                	<label class="ss-q-item-label" for="entry_1433261566">
-                		<div class="ss-q-title">Nombre:
-	                    	<label for="itemView.getDomIdToLabel()" aria-label="(Campo obligatorio)"></label>
-                			<span class="ss-required-asterisk">*</span>
-                		</div>
-                			<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
-                	</label>
-	                <div>
-                    <input type="text" name="name" class="ss-q-short" placeholder="Nombre" required/>
-	                </div>
-	                <div class="error-message" id="1476436785_errorMessage"></div>
-	            </div>
-            </div>
-        </div>
-        <div class="ss-form-question errorbox-good" role="listitem">
-	        <div dir="ltr" class="ss-item ss-item-required ss-text">
-	        	<div class="ss-form-entry">
-	            	<label class="ss-q-item-label" for="entry_1670521463">
-	            		<div class="ss-q-title">Correo electrónico:
-	                		<label for="itemView.getDomIdToLabel()" aria-label="(Campo obligatorio)"></label>
-	            			<span class="ss-required-asterisk">*</span>
-	            		</div>
-	            		<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
-	            	</label>
-	            	<div>
-                  <input type="email" name="email" placeholder="Email" required>
-	            	</div>
-	        	</div>
-	        </div>
-        </div>
-        <div class="ss-form-question errorbox-good" role="listitem">
-	        <div dir="ltr" class="ss-item  ss-select">
-	        	<div class="ss-form-entry">
-	            	<label class="ss-q-item-label" for="entry_473271821">
-	            		<div class="ss-q-title">Asunto/Motivo de consulta:</div>
-	            		<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
-	            	</label>
-
-                <select name="select">
-                  <option value="prensa"></option>
-                  <option value="prensa">Prensa</option>
-                  <option value="practica">Práctia/voluntariado</option>
-                  <option value="alianza">Idea de alianza o proyecto</option>
-                </select>
-	        	</div>
-        	</div>
-    	</div>
-    	<div class="ss-form-question errorbox-good" role="listitem">
-	        <div dir="ltr" class="ss-item  ss-paragraph-text"><div class="ss-form-entry">
-	            <label class="ss-q-item-label" for="entry_1742032578">
-	            	<div class="ss-q-title">Mensaje:</div>
-	            	<div class="ss-q-help ss-secondary-text" dir="ltr"></div>
-	            </label>
-	            <div>
-                <textarea name="message" class="ss-q-long" placeholder="Mensaje" rows="8" cols="0" ></textarea>
-	            </div>
-	            <div class="error-message" id="1605807672_errorMessage"></div>
-	        	</div>
-        	</div>
-    	</div>
-      <input type="hidden" name="_language" value="es" />
-      <input type="text" name="_gotcha" style="display:none" />
-        <input type="hidden" name="draftResponse" value="[,,&quot;3154598330303188355&quot;]">
-        <input type="hidden" name="pageHistory" value="0">
-        <input type="hidden" name="fbzx" value="3154598330303188355">
-        <div class="ss-item ss-navigate"><table id="navigation-table"><tbody><tr><td class="ss-form-entry goog-inline-block" id="navigation-buttons" dir="ltr">
-        	<input class="btn btn-primary" type="submit" name="submit" value="Enviar" id="ss-submit"></td></tr></tbody></table></div></ol>
-	</form>
+<section id="contacto" class="pb-200 pt-200">
+    <h1>Contacto</h1>
+    <div class="row">
+      <div class="col-md-6">
+        <!-- Form prácticas -->
+        <h4>¿Quieres ser parte de nuestro equipo?</h4>
+        <h6 class="mb-30">¿Tienes algunas horas disponibles a la semana? ¿Quieres ganar experiencia en el mundo de la sociedad civil y el fortalecimiento de las democracias? Escríbenos a </h6>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6 offset-md-3">
+        <form method="POST" action="https://formspree.io/info@ciudadanointeligente.org" class="form mb-60">
+          <label class="w-100">
+              Nombre:
+              <input class="mb-15" type="text" placeholder="Tu Nombre" name="name" required>
+          </label>
+          <label class="w-100">
+              Email:
+              <input type="email" placeholder="nombre@email.com" name="mail" required>
+          </label>
+          <label class="w-100">
+            Asunto/Motivo de consulta:
+              <select name="select" class="w-100">
+                <option value="prensa">Selecciona</option>
+                <option value="practica">Práctica</option>
+                <option value="voluntariado">Voluntariado</option>
+                <option value="pasantía">Pasantía</option>
+              </select>
+          </label>
+          <label class="w-100">
+            Mensaje
+            <textarea name="message" placeholder="Mensaje" rows="8" cols="0" ></textarea>
+          </label>
+          <input type="submit" class="btn btn-primary" name="submit" value="Enviar">
+    	</form>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6">
+      <h5>Haz tu práctica con nosotros </h5>
+      ¿Quieres que tu práctica profesional sea más que fotocopias y café? Si estás en Santiago de Chile, puedes postular a dar tus primeros pasos en el mundo profesional en Ciudadano Inteligente. Escríbenos a <a href="#">practicas@ciudadanointeligente.org</a>
+      <h3 class="mt-30">¿Quieres saber más?</h3>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-md-6 offset-md-3">
+      <!-- Form info -->
+      <form method="POST" action="https://formspree.io/info@ciudadanointeligente.org" class="form">
+        <label class="w-100">
+            Nombre:
+            <input type="text" placeholder="Tu Nombre" name="name" required>
+        </label>
+        <label class="w-100">
+            Email:
+            <input type="email" placeholder="nombre@email.com" name="mail" required>
+        </label>
+        <label class="w-100">
+          Asunto:
+          <input type="text" placeholder="Tu Nombre" name="name" required>
+        </label>
+        <label class="w-100">
+          Mensaje:
+          <textarea name="message" placeholder="Mensaje" rows="8" cols="0" ></textarea>
+        </label>
+        <input type="submit" class="btn btn-primary" name="submit" value="Enviar">
+    </form>
+    </div>
+  </div>
 </section>
diff --git a/_includes/footer.html b/_includes/footer.html
index a80268d..67f36c4 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -4,9 +4,9 @@
             <div class="col-md-12 mb-30">
               <div class="small text-center">
                 <ul class="list-inline">
-                  <!-- <li class="list-inline-item"><a href="#">Gracias</a></li>
-                  <li class="list-inline-item"><a href="#">Contacto</a></li>
-                  <li class="list-inline-item"><a href="#">Descarga Logo</a></li> -->
+                  <!-- <li class="list-inline-item"><a href="#">Gracias</a></li> -->
+                  <li class="list-inline-item"><a href="{{ site.baseurl }}/contact">Contacto</a></li>
+                  <!-- <li class="list-inline-item"><a href="#">Descarga Logo</a></li> -->
                 </ul>
               </div>
             </div>
diff --git a/_includes/nav-en.html b/_includes/nav-en.html
index a5053a4..f7b187a 100644
--- a/_includes/nav-en.html
+++ b/_includes/nav-en.html
@@ -12,7 +12,7 @@
                     <!-- navigation menu-->
                     <ul class="navbar-nav mr-auto">
                         <li class="nav-item active"><a class="nav-link" href="{{ site.baseurl }}/#header" tabindex="2">Home <span class="sr-only">(current)</span></a></li>
-                        <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/about" tabindex="3">About</a></li>
+                        <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/about-en" tabindex="3">About us</a></li>
                         <li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/team" tabindex="4">Team</a></li>
                   			<li class="nav-item"><a class="nav-link" href="{{ site.baseurl }}/board" tabindex="8">Board</a></li>
                   			<!-- <li class="nav-item"><a class="nav-link" href="#newsletter" tabindex="8">Our rules</a></li> -->
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 9730fe8..2c2e7ea 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -85,22 +85,6 @@ h1 {
   font-size: calc(1.5rem + 1.5vw);
 }
 
-h2, .h2 {
-  text-align: center;
-  font-weight: 300;
-  font-size: 46px;
-}
-
-h3, .h3 {
-  font-size: 31px;
-  font-weight: 600;
-}
-
-h4, .h4 {
-  font-size: 28px;
-  font-weight: 600;
-}
-
 h5, .h5 {
   font-size: 18px;
   font-weight: 600;
@@ -217,14 +201,12 @@ input {
   padding: 10px;
   font-weight: 200;
   width: 100%;
-  border-radius: 30px;
   max-width: 750px;
   border-width: 1px;
 }
 
 textarea {
-  border: transparent;
-  background: #18184c;
+  border-color: #e0e5ea;
   width: 100%;
   max-width: 750px;
   padding: 10px;
@@ -233,10 +215,11 @@ textarea {
 }
 
 select {
-  background: #77b5bf;
-  border: transparent;
-  height: 40px;
+  border: 1px solid #DBE1E9;
+  height: 43px;
   font-weight: 200;
+  background: transparent;
+  border-radius: 0;
 }
 
 .ss-form-entry {
@@ -253,6 +236,7 @@ input[type=checkbox], input[type=radio] {
 
 label {
   font-weight: 400;
+  color: $gray-one;
 }
 
 .input-btn {
@@ -348,6 +332,10 @@ border-radius: 0px;
     background: #fbfbfb;
 }
 
+footer input {
+  border-radius: 0px 20px 20px 0px;
+}
+
 /*SCROLL TO TOP*/
 
 .scroll-to-top {
@@ -614,6 +602,18 @@ border-radius: 0px;
   }
 }
 
+.list-group-item {
+  & .nav-link {
+    padding: 0;
+  }
+  & .dropdown-item {
+    padding: 0;
+    text-align: right;
+    font-size: 14px;
+  }
+}
+
+
 .independence-title {
   position: relative;
   &:before {
@@ -628,6 +628,9 @@ border-radius: 0px;
     left: -40px;
     top: 338px;
   }
+  &.independence-en:before {
+    content: 'Political Independence';
+  }
 }
 
 #about .row {
diff --git a/about-en.html b/about-en.html
index 331375f..640010e 100644
--- a/about-en.html
+++ b/about-en.html
@@ -9,8 +9,8 @@
     <div class="container">
       <div class="row pt-200 pb-200">
         <div class="col-md-4">
-          <h1>About FCI</h1>
-          <h5>Our political loyalty is placed in the citizens, and in the care and deepening of democracy as a system of government.</h5>
+          <h1>About us</h1>
+          <h5>We are a non-partisan organization that protects the interests of citizens in democracies. We believe in improving and strengthening this government system.</h5>
         </div>
         <div class="col-md-4 text-center">
           <a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#aboutvideo"><i class="fas fa-play white"></i></a>
@@ -28,18 +28,24 @@ <h5>Our political loyalty is placed in the citizens, and in the care and deepeni
   </div>
   <div class="container">
     <div class="row">
-      <div class="col-md-5 mt-75 independence-title">
-        <h4 class="d-block d-md-none">Independencia política</h4>
+      <div class="col-md-5 mt-75 independence-title independence-en">
+        <h4 class="d-block d-md-none">Political Independence</h4>
         <p>The members of Ciudadano Inteligente are not apolitical, but quite the opposite: we think of good policy as a fundamental tool of social transformation, and as such, we propose to generate adequate incentives for the policy to work well, looking for those who hold representative positions popular are due to its citizens, and not to other private interests.</p>
         <p>Inside Ciudadano Inteligente there are members of different political tendencies, however, as an organization we do not ascribe to any political party or movement. To ensure our total independence, Intelligent Citizen does not receive financing from the Government, nor from Parties, nor from any trade union organization that has political interests. Likewise, by means of a rigorous process, we make sure that all our investigations and reports are based on solid and transparent methodologies, open to the scrutiny of those who want to control us. The political allegiance of Smart Citizen is placed in the citizens, and in the care and deepening of democracy as a system of government.</p>
       </div>
       <div class="col-md-3 offset-md-4 mt-75 text-right">
         <ul class="list-group list-group-flush">
-          <li class="list-group-item"><a href="{{ site.baseurl }}/funding">How do we finance ourselves?</a></li>
-          <li class="list-group-item"><a href="https://ciudadanointeligente.org/assets/attachments/estatutos-FCI.pdf" target="_blank">Our statutes</a></li>
-          <li class="list-group-item"><a href="{{ site.baseurl }}/disclosure">Smart Citizen Foundation disclosure</a></li>
-          <li class="list-group-item"><a href="https://docs.google.com/spreadsheets/d/1BRxiP9rUE_Iu_dbrvu7NHWwMSFo53wO7Z6g7meHBH4s/edit#gid=0" target="_blank">Nuestra agenda de gestión de intereses particulares</a></li>
-          <li><a href="#">Memorias</a></li>
+          <li class="list-group-item"><a href="{{ site.baseurl }}/funding">Our Funding</a></li>
+          <li class="list-group-item"><a href="https://ciudadanointeligente.org/assets/attachments/estatutos-FCI.pdf" target="_blank">Our Constitution and Bylaws</a></li>
+          <li class="list-group-item"><a href="{{ site.baseurl }}/disclosure">Conflict of Interest Disclosure Forms</a></li>
+          <li class="list-group-item"><a href="https://docs.google.com/spreadsheets/d/1BRxiP9rUE_Iu_dbrvu7NHWwMSFo53wO7Z6g7meHBH4s/edit#gid=0" target="_blank">Lobby Disclosure</a></li>
+          <li class="nav-item dropdown list-group-item">
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Memorias</a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Memoria 2017</a>
+              <a class="dropdown-item" href="#">Memoria 2016</a>
+            </div>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/about.html b/about.html
index c6dba52..f85152e 100644
--- a/about.html
+++ b/about.html
@@ -35,11 +35,17 @@ <h4 class="d-block d-md-none">Independencia política</h4>
       </div>
       <div class="col-md-3 offset-md-4 mt-75 text-right">
         <ul class="list-group list-group-flush">
-          <li class="list-group-item"><a href="{{ site.baseurl }}/funding">¿Cómo nos financiamos?</a></li>
+          <li class="list-group-item"><a href="{{ site.baseurl }}/funding">Nuestro financiamiento</a></li>
           <li class="list-group-item"><a href="https://ciudadanointeligente.org/assets/attachments/estatutos-FCI.pdf" target="_blank">Nuestros estatutos</a></li>
           <li class="list-group-item"><a href="{{ site.baseurl }}/disclosure">Desclasificación de la Fundación Ciudadano Inteligente</a></li>
           <li class="list-group-item"><a href="https://docs.google.com/spreadsheets/d/1BRxiP9rUE_Iu_dbrvu7NHWwMSFo53wO7Z6g7meHBH4s/edit#gid=0" target="_blank">Nuestra agenda de gestión de intereses particulares</a></li>
-          <li class="list-group-item"><a href="#">Memorias</a></li>
+          <li class="nav-item dropdown list-group-item">
+            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Memorias</a>
+            <div class="dropdown-menu">
+              <a class="dropdown-item" href="#">Memoria 2017</a>
+              <a class="dropdown-item" href="#">Memoria 2016</a>
+            </div>
+          </li>
         </ul>
       </div>
     </div>
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..6370571
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,7 @@
+---
+layout: page
+lang: es
+ref: contact
+---
+
+{% include contact.html %}