Correccion de formacion academica

css/formacion.css

@@ -8,12 +8,122 @@
     position: relative;
     z-index: 5;
 }
+.formacion_linea{
+    position: absolute;
+    top: 62vh;
+    width: 90vw;
+    height: .2rem;
+    background-color: var(--morado-dark);
+    z-index: 0;
+}
+.formacion_main{
+    margin-top: 30vh;
+    height: 60vh;
+    display: flex;
+    flex-direction: column;
+    font-family: var(--fuente-textos);
+    z-index: 10;
+}
+.formacion_programaOne{
+    margin-top: 1rem;
+    width: 55vw;
+    height: 5.5rem;
+    font-weight: bold;
+    font-size: 1.1rem;
+    color: var(--morado-elementos);
+    align-self: center;
+    display: flex;
+    gap: 2rem;
+    justify-content: center;
+    align-items: center;
+    border-top: .2rem solid var(--morado-elementos);
+    &>img{
+        width: 5rem;
+        margin-left: 1rem;
+    }
+}
 .formacion__titulo{
     color: var(--morado-dark);
     text-align: center;
-    position: absolute;
-    top: 50rem;
 }
+.formacion_texto{
+    font-weight: bold;
+    margin-top: .5rem;
+}
+.formacion_fechas{
+    color: var(--morado-dark);
+}
+.formacion_certificados{
+    display: flex;
+    width: 90vw;
+    justify-content: space-between;
+    position: relative;
+}
+.formacion_certificado{
+    display: flex;
+    flex-direction: column;
+    width: 10rem;
+    &::before{
+        content: '';
+        width: 4rem;
+        height: 4rem;
+        background-size: cover;
+        position: absolute;
+        align-self: center;
+        top: -4.5rem;
+    }
+}
+.formacion_circulo{
+    width: 1.5rem;
+    height: 1.5rem;
+    border-radius: 1rem;
+    background-color: red;
+    align-self: center;
+}
+#prepa{
+    color: var(--morado-dark);
+    &>div{
+        background-color: var(--morado-dark);
+    }
+    &::before{
+        background-image: url(../assets/img/ico-prepa.png);
+    }
+}
+.formacion_one{
+    color: var(--morado-elementos);
+    &>div{
+        background-color: var(--morado-elementos);
+    }
+}
+#desarrolloP::before{
+    background-image: url(../assets/img/ico-desarrollo.png);
+}
+#principianteProg::before{
+    background-image: url(../assets/img/ico-porgramacion.png);
+}
+#business::before{
+    background-image: url(../assets/img/ico-business.png);
+}
+#frontEnd::before{
+    background-image: url(../assets/img/ico-frontEnd.png);
+}
+#emprendimiento::before{
+    background-image: url(../assets/img/ico-emprendimiento.png);
+}
+#react::before{
+    background-image: url(../assets/img/ico-react.svg);
+}
+#sqlCoursera{
+    color: #2A7AE4;
+    &>div{
+        background-color: #2A7AE4;
+    }
+    &::before{
+        background-image: url(../assets/img/ico-sql.png);
+    }
+}
+
+
 .formacion__div{
     display: flex;
     width: 100vw;
@@ -65,7 +175,7 @@
         right: 12rem;
         line-height: 3.5rem;
     }
-    .formacion__imagen{
+    /* .formacion__imagen{
         width: 30vw;
     }
     .business{
@@ -97,5 +207,5 @@
     }
     .desfase--arriba{
         margin-bottom: 3rem;
-    }
+    } */
 }

css/hobbies.css

@@ -3,6 +3,7 @@
     height: calc(100vh - 6vh);
     background-color: var(--rosa);
     box-sizing: border-box;
+
 }
 .hobbies__banner{
     z-index: 10;

css/hstube.css

@@ -0,0 +1,49 @@
+.hstube{
+    padding-top: 6vh;
+    background-color: var(--amarillo);
+    width: 100vw;
+    height: calc(100vh - 6vh);
+    display: flex;
+    position: relative;
+    justify-content: space-evenly;
+    align-items: center;
+    z-index: -10;
+}
+.hstube_container{
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    justify-content: space-around;
+}
+.hstube_carousel{
+    height: 130vh;
+    justify-content: space-between;
+    margin-left: 2rem;
+}
+.hstube_phone{
+    height: 40vh;
+}
+.desplazamiento-top{
+    margin-top: 3rem;
+}
+.hstube_desktop{
+    width: 40rem;
+    align-self: center;
+}
+.hstube_title{
+    font-size: 3.5rem;
+    padding-left: 4rem;
+    width: 30vw;
+    font-family: var(--pokefont);
+    color: var(--morado-dark);
+    text-align: left;
+}
+.hstube_text{
+    width: 65rem;
+    margin-top: 2rem;
+    padding-left: 4rem;
+    box-sizing: border-box;
+}
+.hstube_botones{
+    left: 50vw;
+}

css/nooks.css

@@ -0,0 +1,78 @@
+.nooks{
+    /* background-color: var(--lila-fondos); */
+    background-color: var(--azul);
+    width: 100vw;
+    height: calc(100vh - 6vh);
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    z-index: 10;
+}
+.nooks_text{
+    margin-top: 8vh;
+    margin-bottom: 3vh;
+    display: flex;
+    justify-content: space-evenly;
+    height: 30vh;
+}
+.nooks_title{
+    font-size: 3.5rem;
+    padding-left: 2rem;
+    border-left: solid .4rem var(--morado-dark) ;
+    width: 30vw;
+    font-family: var(--pokefont);
+    color: var(--morado-dark);
+    text-align: left;
+}
+.nooks_botones{
+    position: absolute;
+    top: 10rem;
+    right: 7rem;
+}
+.nooks_description{
+        text-align: left;
+        width: 45vw;
+}
+.nooks_mockups{
+    height: 60vh;
+    display: flex;
+    align-items: center;
+}
+.nooks_desktop{
+    margin-top: 12vh;
+    width: 60vw;
+    height: 60vh;
+    position: relative;
+
+    &::before{
+        content: '';
+        position: absolute;
+        left: 5vw;
+        display: block;
+        background-image: url(../assets/img/nooksPc1.png);
+        background-position: center;
+        background-size: cover;
+        width: 25vw;
+        height: 32vh;
+    }
+    &::after{
+        content: '';
+        position: relative;
+        left: 35vw;
+        top: -50vh;
+        display: block;
+        background-image: url(../assets/img/nooksPc2.png);
+        background-position: center;
+        background-size: cover;
+        width: 25vw;
+        height: 32vh;
+    }
+}
+.nooks_pc{
+    width: 30vw;
+    position: relative;
+    left: 15vw;
+}
+.nooks_phone{
+    width: 35vw;
+}

css/skills.css

@@ -48,22 +48,26 @@
   font-size: 2.5rem;
 }
 .html{
-  transform: rotateY(0deg) translateZ(55vw);
+  transform: rotateY(0deg) translateZ(50vw);
 }
 .css{
-  transform: rotateY(90deg) translateZ(55vw);
+  transform: rotateY(72deg) translateZ(50vw);
 }
 .js{
-  transform: rotateY(180deg) translateZ(55vw);
+  transform: rotateY(144deg) translateZ(50vw);
 }
 .bootstrap{
-  transform: rotateY(270deg) translateZ(55vw);
+  transform: rotateY(216deg) translateZ(50vw);
+}
+.react{
+  transform: rotateY(288deg) translateZ(50vw);
 }
 @keyframes carousel {
-  0%,  10%    {transform: translateZ(-35vw) rotateY(0deg);}
-  10%, 25%   { transform: translateZ(-35vw) rotateY(-90deg); }
-  35%, 50%   { transform: translateZ(-35vw) rotateY(-180deg); }
-  60%, 75%   { transform: translateZ(-35vw) rotateY(-270deg); }
+  0%,  5%    {transform: translateZ(-35vw) rotateY(0deg);}
+  5%,  20%    {transform: translateZ(-35vw) rotateY(72deg);}
+  25%, 40%   { transform: translateZ(-35vw) rotateY(-144deg); }
+  45%, 60%   { transform: translateZ(-35vw) rotateY(-216deg); }
+  65%, 80%   { transform: translateZ(-35vw) rotateY(-288deg); }
   85%, 100%  { transform: translateZ(-35vw) rotateY(-360deg); }
 }
 
@@ -102,15 +106,18 @@
     width: 55%;
   }
   .html{
-    transform: rotateY(0deg) translateZ(40vw);
+    transform: rotateY(0deg) translateZ(30vw);
   }
   .css{
-    transform: rotateY(90deg) translateZ(40vw);
+    transform: rotateY(72deg) translateZ(30vw);
   }
   .js{
-    transform: rotateY(180deg) translateZ(40vw);
+    transform: rotateY(144deg) translateZ(30vw);
   }
   .bootstrap{
-    transform: rotateY(270deg) translateZ(40vw);
+    transform: rotateY(216deg) translateZ(30vw);
+  }
+  .react{
+    transform: rotateY(288deg) translateZ(30vw);
   }
 }

css/tootlips.css

@@ -50,4 +50,46 @@
     top: 100%;
     left: 50%;
     border-color: #2E2E2E transparent transparent transparent;
+}
+
+
+/* The alert message box */
+.alert {
+    display: none;
+    position: fixed;
+    bottom: 5vh;
+    left: 33vw;
+    padding: 20px;
+    background-color: var(--morado-dark);
+    font-family: var(--fuente-textos);
+    letter-spacing: .1rem; 
+    color: white;
+    margin-bottom: 15px;
+    animation: FadeOut 5s ease 0s 1 normal forwards;
+}
+.alertIn{
+    display: block;  
+}
+  .closebtn {
+    margin-left: 15px;
+    color: white;
+    font-weight: bold;
+    float: right;
+    font-size: 22px;
+    line-height: 20px;
+    cursor: pointer;
+    transition: 0.3s;
+  } 
+  .closebtn:hover {
+    color: black;
+  }
+
+  @keyframes FadeOut {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+	}
 }