Data-Dashboard

README.md

@@ -1,25 +1,25 @@
 # Data Dashboard
 
-* **Track:** _Common Core_
-* **Curso:** _Creando tu primer sitio web interactivo_
-* **Unidad:** _Producto final_
+* **DataDashboard de Laboratoria** 
 
-***
 
-## Flujo de trabajo
+## Integrantes
+- Araceli Gutarra
+- Yenny Quiñones 
 
-1. Debes realizar un [**fork**](https://gist.github.com/ivandevp/1de47ae69a5e139a6622d78c882e1f74)
-   de este repositorio.
+## Vistas
+1. Overview
 
-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í:
 
-   ```bash
-   git clone https://github.com/<nombre-de-usuario>/freelancer.git
-   ```
+2. Students
 
-3. Cuando hayas terminado tu producto, envía un Pull Request a este repositorio
-   (puedes solicitar apoyo de tus profes para este paso).
+- Maquetación
 
-> 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:.
+
+
+## Herramientas Utilizadas
+- Html 5 para la estructura
+- Css para el estilo
+- Javascript para la funcionalidad
+
+### 

css/main-1.css

@@ -0,0 +1,158 @@
+* {
+    box-sizing: border-box ;
+    font-family: 'Montserrat', sans-serif;
+    color: "#2b2b2b";
+    background-color: #f4f6f7;
+}
+
+div .view-student {
+  text-align: center ;
+}
+
+div #especialization {
+  position: fixed;
+}
+
+div #container-students {
+    bottom:100px;
+}
+
+#especialization {
+    left: 15px;
+    /*height: 100%;*/
+    height: 2000px;
+    width: 20%;
+    background-color: white;
+    display: inline-block;
+    margin-left: 350px;
+}
+
+li {
+    text-decoration-style: none;
+}
+
+
+#visualization {
+    height: 100%;
+    width: 50% ;
+    background-color: white ;
+    display: inline-block;
+    margin-left: 650px;
+    /*float: right;*/
+
+}
+
+ul, li{
+    background-color: white ;
+}
+
+li input {
+    background-color: white ;
+}
+
+li label {
+    background-color: white ;
+}
+
+#content-search {
+    display: inline-block;
+}
+
+#input-student {
+    display: inline-block;
+}
+
+.photo , .date-student , .tech-skills , .life-skills, .english-skills , .date  {
+    display: inline-block;
+}
+
+.life-skills, .english-skills {
+  margin-left: 10px;
+}
+
+.name , .especialization-student ,   .skills-details  {
+    margin-left: 20px;
+}
+.photo {
+    margin-left: 20px;
+}
+.tech-skills {
+    margin-left: 40px;
+}
+.date-student , .name , #especialization-student {
+    background-color: white;
+}
+
+.tech-skills , .life-skills , .english-skills{
+    border: 1px solid black;
+    text-align: center;
+}
+
+/* clases de tamaños de letra - student */
+.little-letter {
+    font-size: 60%;
+    text-align: center;
+    background-color: white;
+}
+
+.big-letter {
+    font-size: 120%;
+    font-weight: bold;
+    text-align: center;
+    background-color: white;
+}
+
+.medium-letter {
+    font-size: 80%;
+    font-weight: bold;
+    background-color: white;
+}
+
+.stardart-letter {
+    font-size: 100%;
+    background-color: white;
+}
+
+.skill-1 , .skill-2 , .skill-3 {
+    display: inline-block;
+    background-color: white;
+    border: 1px solid gray;
+    background-color: #BDBDBD;
+}
+
+.photo, .date {
+    padding-top: 15px;
+    background-color: white;
+}
+
+.student {
+    background-color: white;
+}
+
+#nuevo {
+    height: 20px;
+    width: 100px;
+    background-color: red;
+}
+
+button {
+    width: 250px;
+    height:45px;
+}
+
+/* clases de visualización para aplicarse a botón */
+button.desactive {
+    background-color: #e0e0e0;
+    color: #757575;
+  }
+
+  button.active {
+    background-color: #faf281;
+    color: white;
+  }
+
+  /* clases para foto standart */
+  .photo-standart {
+   height: 130px;
+   width: 140px;
+  }