BRAYANROCKER: html de Media Card with Tabs

Codigo html para "Media Card", "Content Card" o "Product Listing Widget", pero con un enfoque específico en contenido multimedia (como descargar anime, películas o juegos). también conocido como Anime Media Card with Tabs o Multi-Info Content Widget que enfatiza la variedad de información (técnica, social, sinopsis) en un solo widget.

TAGS:
"Anime card design with tabs": Para encontrar tarjetas de anime con pestañas.
"Media card UI with image and details": Para diseños de tarjetas multimedia con imagen e información.
"Content card with social icons and rating": Para tarjetas que incluyan iconos sociales y puntuación.
"Responsive product listing widget": Si buscas algo adaptable a diferentes dispositivos.
"Detailed preview card HTML CSS": Para encontrar códigos o tutoriales en HTML y CSS que incluyan detalles como este.
"anime media card with tabs HTML CSS code" para encontrar tutoriales o plantillas.
"media card design with image and tabs" para inspiración visual.
"media card with tabs" o "content widget with social icons" para encontrar repositorios con código abierto.

HTML:

<!DOCTYPE html>

<html>

<head>

<style>

/* Estilo general */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

background-color: #ffffff; /* Fondo blanco para coincidir con Wix */

color: #333; /* Color de texto base más oscuro para contraste */

}

/* Contenedor principal */

.container {

max-width: 1000px;

margin: 0 auto;

display: flex;

gap: 15px; /* Espaciado más ajustado */

}

/* Sección de la imagen */

.image-section {

flex: 1;

}

.image-section img {

width: 240px;

height: 300px; /* Ajustar altura para que sea más alta y delgada */

/*11 object-fit: cover; /* produce que la imagen se distoricone sin salir del rango, solo elimina "/*11" al inicio dle codigo */

border-radius: 10px;

}

/* Sección de información */

.info-section {

flex: 2;

}

/* Título */

.title {

font-size: 22px; /* Tamaño más pequeño para coincidir con la imagen */

font-weight: bold;

margin-bottom: 8px;

color: #333; /* Color más oscuro para contraste con fondo blanco */

}

/* Iconos sociales */

.social-icons {

display: flex;

gap: 8px; /* Espaciado más ajustado */

margin-bottom: 10px;

}

.social-icons img {

width: 25px; /* Tamaño más pequeño */

height: 25px;

transition: transform 0.3s ease;

}

.social-icons img:hover {

transform: translateY(5px); /* Efecto de bajar al pasar el cursor */

}

/* Descripción breve */

.description {

font-size: 13px;

color: #667; /* Gris más oscuro para contraste con fondo blanco */

margin-bottom: 15px;

}

/* Información técnica */

.info-details {

display: flex;

gap: 25px;

margin-bottom: 15px;

}

.info-column {

flex: 1;

}

.info-column p {

margin: 3px 0; /* Espaciado más ajustado */

font-size: 13px;

}

.info-column p strong {

color: #00b7eb; /* Color azul brillante */

}

/* Puntuación */

.rating {

display: flex;

align-items: center;

gap: 5px; /* Espaciado más ajustado */

margin-bottom: 15px;

}

.rating span {

font-size: 20px;

font-weight: bold;

color: #ffd700; /* Color dorado para la puntuación */

}

.rating img {

width: 15px; /* Estrellas más pequeñas */

height: 15px;

}

/* Botones */

.buttons {

display: flex;

gap: 8px;

margin-bottom: 15px;

}

.buttons button {

padding: 8px 15px; /* Botones más pequeños */

border: none;

cursor: pointer;

font-size: 13px;

color: white;

border-radius: 20px; /* Bordes más redondeados */

}

.buttons button.bookmark {

background-color: #007bff; /* Botón de Marcador */

}

.buttons button.download {

background-color: #28a745; /* Botón de Descarga */

}

/* Seguidores */

.followers {

font-size: 13px;

color: #667;

margin-bottom: 15px;

}

/* Géneros */

.genres {

display: flex;

gap: 8px;

margin-bottom: 15px;

}

.genres span {

background-color: #e0e0e0; /* Fondo gris claro para géneros */

padding: 4px 8px;

border-radius: 15px; /* Bordes más redondeados */

font-size: 12px;

color: #333;

}

/* Sinopsis */

.sinopsis {

font-size: 13px;

color: #667;

}

.sinopsis h3 {

color: #333;

margin-bottom: 8px;

font-size: 16px;

}

</style>

</head>

<body>

</div>

</a>

</a>

</a>

</a>

</div>

Descargar episodios completos Latino y Castellano, ck subtitulos español, Descargar ck Esp Sub, Descargar k En s.

</div>

<p><strong>Estado:</strong> Completed</p>

<p><strong>Estudio:</strong> 8Bit</p>

<p><strong>Released:</strong> 2022</p>

<p><strong>Duración:</strong> 24 min. per ep.</p>

<p><strong>Temporada:</strong> Fall 2022</p>

<p><strong>Tipo:</strong> ANIME</p>

</div>

<p><strong>Episodios:</strong> 24</p>

<p><strong>Idiomas:</strong> Latino-Japones + Subtitulos</p>

<p><strong>Calidad de Video:</strong> HD</p>

<p><strong>Publicado por:</strong> -- </p>

<p><strong>Publicado el:</strong> febrero 9, 2023</p>

<p><strong>Actualizado el:</strong> marzo 11, 2025</p>

</div>

</div>

<button class="bookmark" onclick="alert('Añadido a marcadores')">Marcador</button>

<button class="download" onclick="window.open('https://www.mediafire.com', '_blank')">Descarga</button>

</div>

Seguidores 3 Personas

</div>

<span>Shounen</span>

<span>Sports</span>

<span>Team Sports</span>

</div>

<h3>Sinopsis:</h3>

<p>aqui escribe la sinpsis de lo que estes publicando, o puedes escribir lo que desees, tu imaginacion es el unico limite</p>

</div>

</body>

</html>

DEMO:

[HD] OCK [Lat-Jap-Sub] [1080p] [24/24]

Descargar episodios completos Latino y Castellano, ck subtitulos español, Descargar ck Esp Sub, Descargar k En s.

Estado: Completed

Estudio: 8Bit

Released: 2022

Duración: 24 min. per ep.

Temporada: Fall 2022

Tipo: ANIME

Episodios: 24

Idiomas: Latino-Japones + Subtitulos

Calidad de Video: HD

Publicado por: --

Publicado el: febrero 9, 2023

Actualizado el: marzo 11, 2025

8.28

Seguidores 3 Personas

Shounen Sports Team Sports

Sinopsis:

aqui escribe la sinpsis de lo que estes publicando, o puedes escribir lo que desees, tu imaginacion es el unico limite

html de Media Card with Tabs | Widget - Gadget

Sinopsis:

Entradas populares

Entradas populares

Etiquetas

Twitter

Redes Sociales

Visita mi Web

Follow

Visitantes Pros

Chat en Vivo

Hola, Bienvenido a mi blog!

Categorías

¡Visitanos!