From cc5cba3bb0bd8e0ecd114563911ce74f72ffb84d Mon Sep 17 00:00:00 2001
From: Juan <juangonzalezfernandez004@alumnos.ilernasevilla.com>
Date: Fri, 9 Feb 2024 17:03:51 +0100
Subject: [PATCH] cards acabadas

---
 css/style3d.css                               | 124 +++++++++++-------
 ...ido_3D,juegos_y_entornos_interactivos.html |  79 ++++++++---
 2 files changed, 136 insertions(+), 67 deletions(-)

diff --git a/css/style3d.css b/css/style3d.css
index 87e2860..e7031f5 100644
--- a/css/style3d.css
+++ b/css/style3d.css
@@ -1,57 +1,46 @@
 @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
 
-*,
-*::after,
-*::before {
-    padding: 0;
-    margin: 0;
-    box-sizing: border-box;
+.card-3d {
+    perspective: 1000px;
+    margin-bottom: 30px;
 }
 
-.container {
-    width: 80vmin;
-    height: 80vmin;
+.card-3d .main-part {
+    width: 100%;
+    height: 320px;
     position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    cursor: pointer;
 }
 
-.main-part {
-    transform-style: preserve-3d;
+.card-3d .main-part {
+    width: 460px;
+    height: 320px;
     position: relative;
-    transition: all 1.5s ease-out;
-    width: 80%;
-    height: 100%;
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    cursor: pointer;
+    margin: 0 auto;
+    background: linear-gradient(135deg, #ececec 0%, #f9f9f9 100%);
 }
 
-.main-part:hover {
+.card-3d .main-part:hover {
     transform: rotateY(180deg);
 }
 
-.pic {
-    width: 28vmin;
-    height: 28vmin;
-    border-radius: 50%;
-    border: 1vmin solid #1da1f2;
-    padding: 0.5vmin;
-}
-
-.front,
-.back {
+.card-3d .front,
+.card-3d .back {
     width: 100%;
     height: 100%;
     position: absolute;
+    backface-visibility: hidden;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    backface-visibility: hidden;
-    /* Asegúrate de descomentar esta línea */
-}
-
-.front {
+    justify-content: center;
+    flex-direction: column;
+    border-radius: 10px;
     background-image: linear-gradient(112.5deg,
             rgb(214, 214, 214) 0%,
             rgb(214, 214, 214) 10%,
@@ -99,21 +88,64 @@
             rgb(99, 99, 99) 100%),
         linear-gradient(90deg, rgb(195, 195, 195), rgb(228, 228, 228));
     background-blend-mode: overlay, overlay, overlay, normal;
-    border: 0.2vmin solid rgb(192, 192, 192);
-    border-radius: 2vmin;
 }
 
-.user-name,
-.intro1,
-.intro2 {
-    font-family: "Roboto", sans-serif;
-    transform: translateZ(50vmin);
+.card-3d .back {
+    transform: rotateY(180deg);
 }
 
-.follow-btn {
-    /* Estilos del botón */
+.image-container3D {
+    display: inline-block;
+    border-radius: 50%;
+    padding: 4px; 
+    position: relative;
+    background: linear-gradient(270deg, #000000, #0000FF, #000000);
+    background-size: 400% 400%;
+    animation: AnimateGradient 8s ease infinite;
+    box-sizing: border-box;
+  }
+  
+  .picSergio {
+    display: block;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    object-fit: cover; 
+  }
+  
+  @keyframes AnimateGradient {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+  
+
+.card-3d .picGuille {
+    width: 120px;
+    /* Ajuste para responsividad */
+    height: 120px;
+    border-radius: 50%;
+    border: 4px solid orange;
+}
+
+.card-3d .picJessica {
+    width: 120px;
+    /* Ajuste para responsividad */
+    height: 120px;
+    border-radius: 50%;
+    border: 4px solid #e50c0c;
 }
 
-.follow-btn::after {
-    /* Estilos del estado "Following" */
+.card-3d .user-name,
+.card-3d .intro1,
+.card-3d .intro2 {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    margin-top: 10px;
 }
\ No newline at end of file
diff --git a/imagen_y_sonido_3D,juegos_y_entornos_interactivos.html b/imagen_y_sonido_3D,juegos_y_entornos_interactivos.html
index c957184..69d11e0 100644
--- a/imagen_y_sonido_3D,juegos_y_entornos_interactivos.html
+++ b/imagen_y_sonido_3D,juegos_y_entornos_interactivos.html
@@ -172,47 +172,83 @@ <h1 class="mb-3">Animaciones 3D, juegos y entornos interactivos</h1>
   </section>
 
 
-  <!-- Inserta este código donde desees que aparezca la tarjeta en tu archivo HTML -->
-  <div class="container my-5">
+  <!-- Card Sergio -->
+  <div class="container my-5 card-3d">
     <div class="main-part">
+      <!-- Frente de la tarjeta -->
       <div class="front">
-        <img class="pic" src="Resources/img/personal/sergio.jpg" alt="Twitter profile">
-        <p class="user-name">@santoshcodes</p>
-        <p class="intro1">🎯 Full Stack Web Developer</p>
-        <p class="intro2">I Tweet On → Web • Tech • Motivation</p>
+        <div class="image-container3D">
+          <img class="picSergio" src="Resources/img/personal/sergio.jpg" alt="Twitter profile">
+        </div>
+        <h2 class="user-name">Sergio Ros Pérez</h2>
+        <h3 class="intro1">Profesor de Ciclo Animaciones 3D y Juegos</h3>
       </div>
+
+      <!-- Parte trasera de la tarjeta -->
       <div class="back">
-        <button class="follow-btn">Follow</button>
+        <div class="card-info">
+          <h4>Formación</h4>
+          <p>Máster, Carrera, Grado Superior, Grado Medio</p>
+          <h4>Hobbies</h4>
+          <p>Música, Cine, Videojuegos, Salir, Conciertos, Juegos de mesa</p>
+          <h4>Frase que me representa</h4>
+          <p>"Recuérdenme que agradezca a John este feliz fin de semana."</p>
+          <h4>Algo sobre mí</h4>
+          <p>Me considero un docente que se preocupa por el alumnado y que siempre intenta ayudar en lo que puede.</p>
+        </div>
       </div>
     </div>
   </div>
 
-  <!-- Inserta este código donde desees que aparezca la tarjeta en tu archivo HTML -->
-  <div class="container my-5">
+
+  <!-- Card Guille -->
+  <div class="container my-5 card-3d">
     <div class="main-part">
+      <!-- Frente de la tarjeta -->
       <div class="front">
-        <img class="pic" src="Resources/img/personal/guille3d.jpg" alt="Twitter profile">
-        <p class="user-name">@santoshcodes</p>
-        <p class="intro1">🎯 Full Stack Web Developer</p>
-        <p class="intro2">I Tweet On → Web • Tech • Motivation</p>
+        <img class="picGuille" src="Resources/img/personal/guille3d.jpg" alt="Guillermo Sánchez">
+        <h2 class="user-name">Guillermo Sánchez Fuentes</h2>
+        <h3 class="intro1">Profesor de Ciclo Animaciones 3D y Juegos</h3>
       </div>
+      <!-- Parte trasera de la tarjeta -->
       <div class="back">
-        <button class="follow-btn">Follow</button>
+        <div class="card-info">
+          <h4>Formación</h4>
+          <p>Diseño y desarrollo de videojuegos. Máster en modelado y texturizado para juegos AAA</p>
+          <h4>Hobbies</h4>
+          <p>Leer</p>
+          <h4>Frase que me representa</h4>
+          <p>"Unlucky"</p>
+          <h4>Algo sobre mí</h4>
+          <p>Apasionado por la enseñanza y la tecnología.</p>
+        </div>
       </div>
     </div>
   </div>
 
-  <!-- Inserta este código donde desees que aparezca la tarjeta en tu archivo HTML -->
-  <div class="container my-5">
+
+  <!-- Card jessica -->
+  <div class="container my-5 card-3d">
     <div class="main-part">
+      <!-- Frente de la tarjeta -->
       <div class="front">
-        <img class="pic" src="Resources/img/personal/jessica3d.jpeg" alt="Twitter profile">
-        <p class="user-name">@santoshcodes</p>
-        <p class="intro1">🎯 Full Stack Web Developer</p>
-        <p class="intro2">I Tweet On → Web • Tech • Motivation</p>
+        <img class="picJessica" src="Resources/img/personal/jessica3d.jpeg" alt="Twitter profile">
+        <h2 class="user-name">Jessica Álvarez Tirado</h2>
+        <h3 class="intro1">Profesora de Ciclo Animaciones 3D y Juegos</h3>
       </div>
+
+      <!-- Parte trasera de la tarjeta -->
       <div class="back">
-        <button class="follow-btn">Follow</button>
+        <div class="card-info">
+          <h4>Formación</h4>
+          <p>Carrera de Bellas Artes, especializada en 3D.</p>
+          <h4>Hobbies</h4>
+          <p>Mi trabajo es mi hobbie, puesto que me encanta dibujar y pintar, ya sea tradicional o digital. </p>
+          <h4>Frase que me representa</h4>
+          <p>"Todo es camino recorrido, nada es perdido."</p>
+          <h4>Algo sobre mí</h4>
+          <p>Me encanta Diego Velázquez y me flipa Mulán. Tengo un fiel compañero, que es mi perro, mi Draco.</p>
+        </div>
       </div>
     </div>
   </div>
@@ -220,6 +256,7 @@ <h1 class="mb-3">Animaciones 3D, juegos y entornos interactivos</h1>
 
 
 
+
   <footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
     <div class="container">
       <div class="row my-4">