¡Hola Plazti Masters!
Este código HTML y CSS crea una tarjeta (Card) encantadora que muestra información sobre un Pokémon, en este caso, ¡Gyarados! Déjenme explicarles el encanto que esconde este código:
HTML:
En el encabezado (head), vinculamos nuestro HTML con un archivo CSS externo y también importamos la biblioteca Font Awesome para tener iconos adicionales.
Dentro del cuerpo (body) de nuestro documento, creamos una estructura para nuestra tarjeta (Card). Esta tarjeta está compuesta por una imagen, información sobre el Pokémon y un enlace para obtener más detalles.
<divclass="Card Transition">
<divclass="Card__Gradient Transition">
<imgclass="Card__Image"src="https://i.imgur.com/nXrDxIG.png"alt="Gyarados">
div>
<divclass="Card__Items">
<div>
<spanclass="Card__Type">
<imgsrc="https://i.imgur.com/yxWhbDw.png"alt="Water">
<p>Waterp>
span>
<spanclass="Card__Type">
<imgsrc="https://i.imgur.com/zgLnneg.png"alt="">
<p>Flyingp>
span>
div>
<h2>Gyaradosh2>
<p>Cuando aparece, monta encólera. No deja de estar furioso hasta que lo destruye todo. p>
div>
<divclass="Card__Link Transition">
<aclass="Card__link--active"href="https://www.pokemon.com/el/pokedex/gyarados">Conoce más a>
div>
CSS:
Empezamos configurando el cuerpo (body) para que tenga un bonito fondo y centrado en la pantalla.
La clase .Card define el contenedor principal de nuestra tarjeta. Le damos un aspecto de tarjeta con un borde y un tamaño específico. También hacemos que se vea bien usando una paleta de colores pastel.
La clase .Card__Gradient nos proporciona un bonito gradiente de color de fondo que se anima cuando pasamos el cursor sobre la tarjeta.
La clase .Card__Items se encarga del diseño de la información del Pokémon dentro de la tarjeta.
Utilizamos animaciones (@keyframes) para animar el gradiente de color cuando se pasa el cursor sobre la tarjeta.
Añadimos algunos estilos para la imagen del Pokémon y el enlace para obtener más detalles.
La clase .Transition maneja las transiciones suaves de los elementos para hacer la experiencia más agradable.
Por último, estilizamos los tipos de Pokémon para que se vean como etiquetas de colores con un pequeño ícono y el tipo de Pokémon.
body{
margin: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
height: 100vh;
background-color: rgb(217, 224, 230);
}
.Card{
align-self: center;
box-sizing: border-box;
border: 3px solid azure;
height: 25rem;
width: 30rem;
display: grid;
grid-template-rows: 1.5fr 1fr .1fr;
background-color: azure;
overflow: hidden;
border-radius:.4em;
cursor: none;
}
.Card__Gradient{
background-size: 200%200% ;
overflow: hidden;
background-color: #f1f1f1;
border-radius:.4em;
}
.Card__Items{
box-sizing: border-box;
margin: 1em2em0em2em;
}
@keyframes nose {
from{
background-size: 150%150%;
background-position: 00;
}
to{
background-size: 200%200%;
background-position: 100%100%;
}
}
img{
height: auto;
width: 100%;
}
.Card__Image{
position: relative;
left: 65px;
transform: translateY(-20%);
opacity: 1;
}
.Card:hover{
grid-template-rows: 1fr 1fr .033fr;
}
.Card:hover > .Card__Gradient{
background: radial-gradient(ellipse at center, #2571d4,#8d9de9,#f1f1f1 70%);
animation: nose 5scubic-bezier(0.42, 0, 0.58, 1) alternate-reverse infinite;
}
.Card__Link:nth-child(3){
opacity: 0;
margin: -1em2em0em2em;
}
.Card:hover > .Card__Link:nth-child(3){
opacity: 1;
margin: -1em2em1em2em;
}
.Card__link--active{
text-decoration: none;
font-weight: bold;
}
.Card__link--active:hover{
color: black;
}
.Card__link--active:hover::after{
font-family: 'Font Awesome 5 Free';
font-weight: 900; /* Puedes ajustar el peso de la fuente según sea necesario */content: "\f054"; /* Código del icono de flecha hacia la derecha */
}
.Transition{
transition: .4s ease-in all;
}
.Card__Type{
display: inline-block;
margin: .2em;
width: 5em;
height: auto;
background: linear-gradient(135deg, #143663, #1259b7,#f1f1f1);
border-radius: .4em;
border: 1px solid #f1f1f1;
}
.Card__Typeimg{
width: 20px;
height: 20px;
}
.Card__Typep{
display: inline-block;
margin: 2px;
color: white;
}
¡En resumen, este código crea una experiencia alegre y colorida para explorar información sobre Pokémon, ¡perfecta para cualquier estudiante de Front-end que quiera practicar sus habilidades de diseño web junto a las animaciones y buenas practicas de codigo que te pueden dar 😃!
