Data Dashboard - Lidia y Yosseline

css/main.css

@@ -1,3 +1,264 @@
-/*
- * Estilos de tu proyecto
- */
+/*Resetando*/
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+}
+/*Clases reutilizables*/
+.text-align{
+  text-align: center;
+}
+.inline-block{
+  display: inline-block;
+}
+.block{
+  display: block;
+}
+.list-style{
+  list-style: none;
+}
+.yellow{
+  background-color: rgb(255,193,7);
+}
+.hidden {
+    display: none;
+}
+.border-bottom{
+  border-bottom: 4px solid rgb(255,193,7);
+}
+.number-box-int{
+  color : green;
+  font-size: 20px;
+  font-weight: 700;
+ }
+ .number-box-black{
+   color : #000;
+   font-size: 20px;
+   font-weight: 700;
+ }
+ .text-font-size{
+  font-size: 10px;
+ }
+
+.number-box-red{
+  color : red;
+  font-size: 20px;
+  font-weight: 700;
+}
+/*Modificando header*/
+header{
+  margin-top: 0;
+  width: 100%;
+  height: 9.2%;
+  position: fixed;
+  z-index: 1000;
+    background-color: rgb(236,235,235);
+  box-shadow: 0 0 3px #000;
+  top: 0;
+}
+.nav-header{
+  width: 81.2%;
+  height: 100%;
+  position: fixed;
+}
+img{
+  width: 150px;
+  margin: 2px 51px;
+}
+figure{
+  background-color: #fff;
+  box-shadow: 0 0 2px #000;
+}
+/*Modificando tabs*/
+.tab{
+  color: #000;
+  padding: 10px;
+  width: 220px;
+  text-align: center;
+  outline: none;
+  border: none;
+  transform: translateY(17%);
+  margin-left: 25px;
+  background-color: inherit;
+  font-size: 18px;
+ }
+.tab:active {
+  transform: translateY(40%);
+  border-bottom: 4px solid rgb(255,193,7);
+}
+/*Modificando nav*/
+nav{
+  width: 252px;
+  height: 100%;
+  position: fixed;
+  z-index: 1000;
+  box-shadow: 0 0 2px #000;
+}
+.info-user{
+  width: 100%;
+  height: 30%;
+  padding: 40px 20px;
+  background-image: url(../assets/images/ale.png);
+  background-size: cover;
+}
+.div-user{
+  width: 100%;
+  transform: translateY(300%);
+  margin-left: 30px;
+}
+.text-info-user{
+  text-align: center;
+  color: #fff;
+  font-weight: 600;
+}
+.font-size{
+  font-size: 12px;
+}
+.border{
+    color: #000;
+    text-shadow:
+   -1px -1px 0 #fff,
+    1px -1px 0 #fff,
+   -1px 1px 0 #fff,
+    1px 1px 0 #fff;
+}
+.region{
+  height: 45px;
+  text-align: justify;
+  padding-left: 10px;
+  font-size: 17px;
+}
+.list-region{
+  height: 45px;
+  text-align: justify;
+  font-size: 15px;
+}
+a{
+  display: block;
+  text-decoration: none;
+  color: #000;
+  width: 100%;
+  height: 100%;
+}
+.flags{
+  width: 30px;
+  height: 18px;
+  margin: 0 10px;
+  transform: translateY(30%);
+}
+.region:hover, .list-region:hover, .list-lim:hover, .list-aqp:hover, .list-scl:hover, .list-cdmx:hover{
+  background-color: rgb(236,235,235);
+}
+.fa-sort-desc{
+  margin-left: 10px;
+  color: rgba(43,43,43,0.8);
+}
+.margin-list{
+  margin-top: 2px;
+}
+.list-lim, .list-aqp, .list-scl, .list-cdmx{
+  font-size: 15px;
+  padding: 7px 0;
+  padding-left: 50px;
+}
+/*Modificando Main*/
+.margin{
+  margin-top: 60.89px;
+  margin-left: 252px;
+}
+.sprint-box{
+  width: 100%;
+  position: fixed;
+  background-color: #FFF;
+  z-index: 1000;
+}
+.sprints{
+text-align: justify;
+padding: 5px 10px;
+width: 220px;
+height: 100%;
+cursor: pointer;
+}
+.sprints:hover{
+  outline-color: #grey;
+height: 100%;
+}
+a:hover {
+  outline-color: grey;
+  cursor: pointer;
+}
+.sprints:active{
+  background-color: rgb(236,235,235);
+}
+/*Modificando article Overview*/
+.background-color-main{
+  background-color: rgb(247,247,247);
+}
+.padding-article{
+    padding-top: 40px;
+}
+.sections-overview{
+  margin-top: 20px;
+  width: 100%;
+  height: 270px;
+  display: flex;
+}
+/*Modificacndo contenedores div*/
+.box-big{
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 5px #000;
+  width: 30%;
+  margin:10px 18px 10px 18px;
+}
+.box-big-skills{
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 5px #000;
+  width: 40%;
+  margin:10px 52px 10px 52px;
+}
+.box-little{
+  width: 120px;
+  padding: 2px;
+  background-color: rgb(247,247,247);
+  font-size: 12px;
+  margin-left: 2px;
+}
+.number-box{
+  font-size: 15px;
+  font-weight: 700;
+}
+.sections-overview{
+  margin-top: 20px;
+  width: 100%;
+  height: 270px;
+  display: flex;
+}
+/*Modificacndo contenedores div*/
+.box-big{
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 5px #000;
+  width: 30%;
+  /* float: left; */
+  margin:10px 18px 10px 18px;
+}
+.box-big-skills{
+  height: 100%;
+  background-color: #fff;
+  box-shadow: 0 0 5px #000;
+  width: 40%;
+  margin:10px 52px 10px 52px;
+}
+.box-little{
+  width: 160px;
+  padding: 10px;
+  background-color: rgb(247,247,247);
+  font-size: 12px;
+}
+.number-box{
+  font-size: 15px;
+  font-weight: 700;
+}