Data dashboard - Thalia Diaz y Aylin Espichan

README.md

@@ -3,23 +3,42 @@
 * **Track:** _Common Core_
 * **Curso:** _Creando tu primer sitio web interactivo_
 * **Unidad:** _Producto final_
+* **Colaboradores del Proyecto:** _Thalia Diaz y Aylin Espichan_
 
 ***
 
 ## Flujo de trabajo
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+1. Es importante para nuestro cliente poder optimizar el tiempo de procesamiento de data, sobre todo si maneja importante data para esta. Hemos desarrollado un MVP: Data Dashboard para las TMs de Laboratoria, quienes tienen la ardua labor de monitorear la información de las alumnas y egresadas, ademas de los porcentajes de crecimiento de cada una y entre sedes.
 
-2. Luego deberás **clonar** tu fork en tu máquina. Recuerda que el comando a usar
-   es `git clone` y su estructura normalmente se ve así:
+**Estos fueron nuestros requerimientos:**
++ El total de estudiantes presentes por sede y generación.
++ El porcentaje de deserción de estudiantes.
++ La cantidad de estudiantes que superan la meta de puntos en promedio de todos los sprints cursados. La meta de puntos es 70% del total de puntos en HSE y en tech.
++ El porcentaje que representa el dato anterior en relación al total de estudiantes.
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
++ El Net Promoter Score (NPS) promedio de los sprints cursados. El NPS se calcula en base a la encuesta que las estudiantes responden al respecto de la recomendación que darían de Laboratoria, bajo la siguiente fórmula:
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+ ~~~
+ [Promoters] = [Respuestas 9 o 10] / [Total respuestas] * 100
 
-> Nota: No olvides que es una buena práctica describir tu proyecto en este
-> archivo `README.md` y también desplegar tu web a Github Pages :smiley:.
+[Passive] = [Respuestas 7 u 8] / [Total respuestas] * 100
+
+[Detractors] = [Respuestas entre 1 y 6] / [Total respuestas] * 100
+
+[NPS] = [Promoters] - [Detractors]
+~~~
+
++ La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos técnicos en promedio y por sprint.
+
++ La cantidad y el porcentaje que representa el total de estudiantes que superan la meta de puntos de HSE en promedio y por sprint.
+
++ El porcentaje de estudiantes satisfechas con la experiencia de Laboratoria.
+
++ La puntuación promedio de l@s profesores.
+
++ La puntuación promedio de l@s jedi masters.
+
+Así deberia quedar nuestro MVP:
+
+![referencia](assets/images/reference.png)

assets/fonts/style.css

@@ -0,0 +1,38 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?mxjnt6');
+  src:  url('fonts/icomoon.eot?mxjnt6#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?mxjnt6') format('truetype'),
+    url('fonts/icomoon.woff?mxjnt6') format('woff'),
+    url('fonts/icomoon.svg?mxjnt6#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-bars:before {
+  content: "\f0c9";
+}
+.icon-navicon:before {
+  content: "\f0c9";
+}
+.icon-reorder:before {
+  content: "\f0c9";
+}
+.icon-caret-down:before {
+  content: "\f0d7";
+}

css/main.css

@@ -1,3 +1,247 @@
 /*
  * Estilos de tu proyecto
  */
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body {
+    font-family: 'Roboto', sans-serif;
+    line-height: 26px;
+    background-color: #f7f7f7;
+}
+header {
+    height: 201px;
+}
+nav {
+    background: #ffffff;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    height: 76px;
+}
+.logo {
+    width: 169px;
+    height: 70px;
+    margin-left: 550px;
+    margin-top: 1px;
+}
+.icon-bars {
+    font-size: 28px;
+    padding-top: 21px;
+    padding-bottom: 27px; 
+    float: right;
+    margin-right: 86px;
+}
+.selecting {
+    background-color: #e1e1e1;
+    height: 122px;
+}
+.sedes {
+    width: 445px;
+}
+.select {
+    border: 0;
+    background-color: transparent;
+    height: 40px;
+    font-size: 26px;
+    font-family: 'Roboto', sans-serif;
+    line-height: 20px;
+    margin-left: 81px;
+    margin-top: 20px;
+    overflow: hidden;
+    padding: 5px;
+    text-transform: uppercase;
+    width: 445px;
+}
+.wrap {
+    background: #e1e1e1;
+    width: 395px;
+    height: 49px;
+    margin-left: 75px;
+    margin-top: 12px;
+}
+.tabs {
+    display: inline-flex;
+    list-style: none;
+    position: relative;
+    margin: 10px;
+    padding: 0;
+}
+.tabBtn {
+    text-decoration: none;
+    background-color: transparent;
+    border: none;
+    color: black;
+    float: left;
+    font-size: 22px;
+    font-weight: 500;   
+    padding: 4px;
+}
+.overview-tab {
+    display: none;
+    background-color: #f7f7f7;
+}
+.students-tab {
+    display: none;
+    background-color: #f7f7f7;
+}
+.container1 {
+    display: inline-flex;
+    width: 100%;
+    height: 433px;
+    margin-left: 85px;
+}
+.square {
+    background-color: #ffffff;
+    height: 335px;
+    width: 342px;
+    position: relative;
+}
+.data1 {
+    background-color: #f7f7f7;
+    display: inline-block;
+    font-size: 10.5px;
+    font-weight: 500;
+    line-height: 1.8;
+    text-align: center;
+    margin-left: 14px; 
+    margin-top: 31px;
+    width: 146px;
+    height: 60px;
+}
+.first-position {
+    margin-top: 50px;
+    margin-right: 30.5px;
+}
+.container2 {
+    display: block;
+    margin-bottom: 24px;
+}
+.rectangle {
+    background: #ffffff;
+    margin-left: 87px;
+    width: 1084px;
+    height: 520px;
+    position: relative;
+}
+.data2 {
+    background-color: #f7f7f7;
+    display: inline-block;
+    font-size: 10.5px;
+    font-weight: 500;
+    line-height: 2.5;
+    text-align: center;
+    margin: 1.5px;
+    width: 197px;
+    height: 60px;
+    margin-left: 26px;
+    margin-top: 26px;
+}
+.initial {
+    margin-left: 20px; 
+}
+.last-position {
+    margin-bottom: 123px;
+    margin-top: 27px;
+    margin-right: 30.5px;
+}
+.graphic {     
+    display: block;
+    position: relative;
+    top: 35px;
+    left: 40px;
+}
+.graphic2 {
+    display: inline-flex;
+    position: relative;
+    height: 316px;
+    width: 611px;
+    top: 20px;
+    left: 26px;
+}
+.graphic3 {
+    display: inline-flex;
+    position: relative;
+    height: 329px;
+    width: 403px;
+    left: 26px;
+    top: 20px;
+}
+h2 {
+    text-align: left;
+    margin-left: 22px;
+    margin-top: 20px;
+}
+.rectangle h2 {
+    text-align: left;
+    width: 300px;
+    bottom: 30px;  
+}
+.info-container {
+    background-color: #e1e1e1;
+    width: 100%;
+}
+.specialization {
+    background-color: white;
+    display: block;
+    height: 190px;
+    width: 358px;
+    padding: 2px 25px 2px 45px;
+    font-size: 20px;
+    line-height: 1.5;
+    margin-top: 30px;
+    margin-right: 10px;
+    margin-left: 80px;
+    margin-bottom: 15px;
+}
+.form1 {
+    padding-bottom: 15px;
+}
+.students-profile {
+    background-color: white;
+    position: relative;
+    float: left;
+    left: 400px;
+    bottom: 154px;
+    height: 39px;
+    width: 735px;
+}
+.search{
+    width: 735px;
+    height: 39px;
+    float: right;
+}
+.students-info {
+    background-color: #ffffff;
+    height: 189px;
+    width: 737px;
+    position: relative;
+    float: left;
+    margin: 12px;
+    left: 400px;
+    bottom: 124px;
+}
+.photo {
+    background-color: #e1e1e1; 
+    display: inline-flex;
+    position: relative;
+    height: 150px;
+    width: 150px;
+    left: 20px;
+    top: 20px;
+}
+.average {
+    background-color: #e1e1e1;
+    display: inline-flex;
+    position: relative;
+    left: 300px;
+    bottom: 73px;
+    height: 58px;
+    width: 74px;
+    margin: 5px;
+    margin-top: 17px;
+}
+