Skip to content

Commit

Permalink
cards acabadas
Browse files Browse the repository at this point in the history
  • Loading branch information
@Juanelnieves
Juanelnieves committed Feb 9, 2024
1 parent 8446cc7 commit cc5cba3
Show file tree
Hide file tree
Showing 2 changed files with 136 additions and 67 deletions.
124 changes: 78 additions & 46 deletions css/style3d.css
View file
Original file line number Diff line number Diff line change
@@ -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%,
Expand Down Expand Up @@ -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;
}
79 changes: 58 additions & 21 deletions imagen_y_sonido_3D,juegos_y_entornos_interactivos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,54 +172,91 @@ <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>





<footer class="bg-dark text-light py-3 bg-blueilerna custom-navbar">
<div class="container">
<div class="row my-4">
Expand Down

0 comments on commit cc5cba3

Please sign in to comment.