tooltip

Sergiioog · Oct 23, 2023 · 0b3ec5e · 0b3ec5e
2 parents 8d3203e + f7e49f6
commit 0b3ec5e
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 10 deletions.
diff --git a/education.html b/education.html
@@ -76,16 +76,34 @@ <h3>EDUCACION</h3>
         <section id="seccion_certificados">
             <div class="educacion_tarjeta">
                 <div class="cabecera">
-                        <p class="time">2021-2022</p>
-                        <p class="position">Cambridge First Certificate (B2)</p>
-                        <p class="institution">EuroLingua</p>
-                        <p class="place">Segovia, Segovia</p>
-                    </div>
-                    <div class="cuerpo">
-                        <p>Obtener el First Certificate of English de Cambridge fue un paso crucial en mi desarrollo lingüístico. Esta certificación mejoró 
-                            significativamente mi fluidez y precisión en inglés.</p>
-                    </div>
+                    <p class="time">2021-2022</p>
+                    <p class="position">Cambridge First Certificate (B2)</p>
+                    <p class="institution">EuroLingua</p>
+                    <p class="place">Segovia, Segovia</p>
+                </div>
+                <div class="cuerpo">
+                    <p>Obtener el First Certificate of English de Cambridge fue un paso crucial en mi desarrollo lingüístico. Esta certificación mejoró 
+                        significativamente mi fluidez y precisión en inglés.</p>
                 </div>
+            </div>
+            <div class="educacion_tarjeta">
+                <div class="cabecera">
+                    <p class="time">2020-2021</p>
+                    <p class="position">Cambridge Preliminary (B1)</p>
+                    <p class="institution">EuroLingua</p>
+                    <p class="place">Segovia, Segovia</p>
+                </div>
+                <div class="cuerpo">
+                    <p>Obtener el B1 de Cambridge me ayudó a mejorar mi inglés de manera considerable. 
+                        Esta certificación no solo amplió mis habilidades lingüísticas, sino que también me brindó la confianza para 
+                        comunicarme de manera efectiva. Durante mi preparación para el examen, desarrollé habilidades de escritura 
+                        y expresión oral que son fundamentales en mi trabajo como desarrollador web.
+                    </p>
+
+<p></p>
+
+                </div>
+            </div>
         </section>
 
     </section>

diff --git a/index.css b/index.css
@@ -461,7 +461,37 @@ a,li:hover {
             border-radius: 10px;
             border: 1px solid rgba(255, 255, 255, 0.277);
     padding: 10px;
-        }   
+    position: relative;
+    display: inline-block;
+    margin-bottom: 40px;
+}
+
+.tooltip {
+    visibility: hidden;
+    width: 120px;
+    background-color: rgba(252, 251, 251, 0.166);
+            box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+            backdrop-filter: blur( 12.5px );
+            -webkit-backdrop-filter: blur( 12.5px );
+            border-radius: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.277);
+    font-weight: 500;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 108%; /* Posición del tooltip por encima del elemento */
+    left: 50%;
+    margin-left: -60px; /* Centrar el tooltip */
+    opacity: 0;
+    transition: opacity 0.5s;
+}
+
+.container:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}   
 .container img {
     width: 90%;
     height: 90%;

diff --git a/index.html b/index.html
@@ -65,33 +65,43 @@ <h3>LENGUAJES</h3>
         <div class="lang_container">
             <figure class="container">
                 <img src="assets/icons/html5.svg">
+                <span class="tooltip">HTML5</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/css-3-svgrepo-com.svg">
+                <span class="tooltip">CSS</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/js.svg">
+                <span class="tooltip">JavaScript</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/java.svg">
+                <span class="tooltip">Java</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/mysql.svg">
+                <span class="tooltip">MySQL</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/mongo.svg">
+                <span class="tooltip">MongoDB</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/php.svg">
+                <span class="tooltip">PHP</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/linux.svg">
+                <span class="tooltip">Linux</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/docker-svgrepo-com.svg">
+                <span class="tooltip">Docker</span>
             </figure>
             <figure class="container">
                 <img src="assets/icons/figma.svg">
+                <span class="tooltip">Figma</span>
             </figure>
         </div>
     </section>