Merge branch 'JuanRama' of https://github.com/olga3emes/IIernaStaff

css/style.css

@@ -362,6 +362,16 @@ button{
   /* Cambia el valor según tus necesidades */
 }
 
+.bg-badge-jessica3d{
+  background-color: #ff0000;
+  /* Cambia el valor según tus necesidades */
+}
+
+.bg-badge-guille3d{
+  background-color: #f8770d;
+  /* Cambia el valor según tus necesidades */
+}
+
 /** Carousel*/
 .bg-carousel {
   background-color: var(--main-Blue);

css/style3d.css

@@ -0,0 +1,151 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
+
+.card-3d {
+    perspective: 1000px;
+    margin-bottom: 30px;
+}
+
+.card-3d .main-part {
+    width: 100%;
+    height: 320px;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    cursor: pointer;
+}
+
+.card-3d .main-part {
+    width: 460px;
+    height: 320px;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.5s;
+    cursor: pointer;
+    margin: 0 auto;
+    background: linear-gradient(135deg, #ececec 0%, #f9f9f9 100%);
+}
+
+.card-3d .main-part:hover {
+    transform: rotateY(180deg);
+}
+
+.card-3d .front,
+.card-3d .back {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    backface-visibility: hidden;
+    display: flex;
+    align-items: center;
+    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%,
+            rgb(195, 195, 195) 10%,
+            rgb(195, 195, 195) 53%,
+            rgb(176, 176, 176) 53%,
+            rgb(176, 176, 176) 55%,
+            rgb(157, 157, 157) 55%,
+            rgb(157, 157, 157) 60%,
+            rgb(137, 137, 137) 60%,
+            rgb(137, 137, 137) 88%,
+            rgb(118, 118, 118) 88%,
+            rgb(118, 118, 118) 91%,
+            rgb(99, 99, 99) 91%,
+            rgb(99, 99, 99) 100%),
+        linear-gradient(157.5deg,
+            rgb(214, 214, 214) 0%,
+            rgb(214, 214, 214) 10%,
+            rgb(195, 195, 195) 10%,
+            rgb(195, 195, 195) 53%,
+            rgb(176, 176, 176) 53%,
+            rgb(176, 176, 176) 55%,
+            rgb(157, 157, 157) 55%,
+            rgb(157, 157, 157) 60%,
+            rgb(137, 137, 137) 60%,
+            rgb(137, 137, 137) 88%,
+            rgb(118, 118, 118) 88%,
+            rgb(118, 118, 118) 91%,
+            rgb(99, 99, 99) 91%,
+            rgb(99, 99, 99) 100%),
+        linear-gradient(135deg,
+            rgb(214, 214, 214) 0%,
+            rgb(214, 214, 214) 10%,
+            rgb(195, 195, 195) 10%,
+            rgb(195, 195, 195) 53%,
+            rgb(176, 176, 176) 53%,
+            rgb(176, 176, 176) 55%,
+            rgb(157, 157, 157) 55%,
+            rgb(157, 157, 157) 60%,
+            rgb(137, 137, 137) 60%,
+            rgb(137, 137, 137) 88%,
+            rgb(118, 118, 118) 88%,
+            rgb(118, 118, 118) 91%,
+            rgb(99, 99, 99) 91%,
+            rgb(99, 99, 99) 100%),
+        linear-gradient(90deg, rgb(195, 195, 195), rgb(228, 228, 228));
+    background-blend-mode: overlay, overlay, overlay, normal;
+}
+
+.card-3d .back {
+    transform: rotateY(180deg);
+}
+
+.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;
+}
+
+.card-3d .user-name,
+.card-3d .intro1,
+.card-3d .intro2 {
+    font-family: 'Roboto', sans-serif;
+    text-align: center;
+    margin-top: 10px;
+}