HTML personalizable para tu blog o cualquier plataforma. Incluye una sección de imagen ajustada a 240x300px, pestañas interactivas tipo botones (Sinopsis, Información Técnica, Imagen, Descarga) y enlaces a redes sociales. Ideal para entradas a blogs o webs
PLANTILLA DEMO:
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
/* Estilo general */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #ffffff;
color: #333;
}
/* Contenedor
principal */
.container {
max-width:
1000px;
margin: 0
auto;
display:
grid;
grid-template-columns: 240px 1fr; /* 240px fijo para la imagen, el resto
para el contenido */
grid-template-rows: 300px auto; /* Altura
fija de 300px para la primera fila */
gap: 15px;
}
/* Sección de
la imagen */
.image-section {
grid-column: 1 / 2;
grid-row: 1 / 2;
width: 240px; /* Mismo ancho
que la imagen */
height:
300px; /* Misma altura que la imagen */
}
.image-section img {
width: 240px; /* Ancho fijo */
height: 300px; /* Altura
fija */
object-fit: fill; /* Estira la imagen para llenar el contenedor, sin
dejar espacios */
border-radius: 10px;
display:
block; /* Evita espacios adicionales */
}
/* Sección de
información inicial */
.info-section
{
grid-column: 2 / 3;
grid-row:
1 / 2;
}
/* Sección de
pestañas */
.tab-section {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
/* Título */
.title {
font-size: 22px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
/* Iconos
sociales */
.social-icons
{
display: flex;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap; /* Permite que los
íconos se envuelvan si hay muchos */
}
/* Clase para
las imágenes de redes sociales con tamaño editable */
.social-icon {
width:
25px; /* Tamaño base editable */
height: 25px; /* Tamaño base
editable */
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: translateY(5px);
}
/* Descripción
breve */
.description {
font-size:
13px;
color:
#667;
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;
font-size: 13px;
}
.info-column p strong {
color: #00b7eb;
}
/* Estilo para
el contenedor de las pestañas */
.tab-container {
width: 100%;
font-family: Arial, sans-serif;
}
/* Estilo para
los botones de las pestañas */
.tab-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.tab-buttons button {
padding: 10px 20px;
border: none;
background-color: #f1f1f1;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.tab-buttons button:hover {
background-color: #ddd;
}
.tab-buttons button.active {
background-color: #ccc;
font-weight: bold;
}
/* Estilo para
el contenido de las pestañas */
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
background-color: #f9f9f9;
font-size: 13px;
color: #667;
}
.tab-content.active {
display: block;
}
/* Estilo para
las imágenes dentro de las pestañas */
.tab-content img {
width: 100%;
height: auto;
display: block;
margin: 10px 0;
object-fit: contain;
}
</style>
</head>
<body>
<div class="container">
<!-- Sección de la imagen
-->
<div
class="image-section">
<img
src="https://static.wixstatic.com/media/51e163_14324b6b67c243dfa32d88f9c12c8753~mv2.jpeg/v1/fill/w_600,h_351,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Biblioteca%20Cristiana%20Bendecidos%20para%20Bendecir%20BrayanRocker.jpeg"
alt="MegaPack Cristiano">
</div>
<!--
Sección de información inicial -->
<div
class="info-section">
<div
class="title">[MEGAPACKS] Descargar MegaPack Cristiano |
Biblioteca Cristiana Bendecidos para Bendecir | +10000 Archivos | Mas de 300GB
| 1 Link | Mega – Terabox - Entre otros | Gratis</div>
<!-- Iconos sociales -->
<div
class="social-icons">
<a
href="https://rebrand.ly/FacebookBrayanRocker"
target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiarXQb3B_eMRO28gGY31wbFgoF9tiCUWZL6NV1Xz3vQWGcA2iJL06d9xFl1dB4Yd9AR5-y7A93u4O4h6ts3Lg2lNSUv6TcO4zV3uv6Hg53UX1NlVxBj2YHlC2rEYPR_Wr1BN_G9RLQgQchRIns25ue-y52smR4f5PkzB-UDUjJUSijjsr12gHXs7_hRnc/s320/FACEBOOK%20logo%20redondo-brayanrocker.png"
alt="Facebook" class="social-icon">
</a>
<a href="https://rebrand.ly/BrayanRockerYoutube"
target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclBV0XefB8ZtkSMD7RaRqJ38A0oFCR-Iory-tMmUPhwPSMtmYCIkrgrBeyLFPp7rn4yUum5h_bQA0qn4nikbMda3k_4RMEb1rUQ79kBTOT9UbfGM4CflP6LnoRU_gzHCgitonJd6iFyjJH8ubTPGbTJHskxH4bnkpl2qA5IJx3dvaEsI52q4twylo3LE/s320/youtube%20logo%20redondo-brayanrocker.png"
alt="Youtube" class="social-icon">
</a>
<a href="https://rebrand.ly/WhatsappBrayanRocker"
target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNqF4kvpaGpalBc_A45OweuB0k-Q1-tiMsNULXglyIZvklLMdZX6h-UfJJ9iOCe_KSzparZRJz960eZVpJYdlliOOEuHCjteK2K6aYYlBRMAHHACXkABdIZl72_rMmbw88w7ASIn476oJ7KkYUp_sn8OROqazlPnbj-ziRm4UxBb_LQ_q_rTHt5rmcd8Q/s320/WHATTSAPP%20logo%20redondo-brayanrocker.png"
alt="WhatsApp" class="social-icon">
</a>
<a href="https://rebrand.ly/TelegramBrayanRocker"
target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGR7_30AFXTOPPWC3k7Z79sDCLmFRyNYXtIY2vpbOUkmjeOICiEJnBbltvquADAUqgCUT9K3Bk82vCtxxEOGD6iakl9AplnXLYC9uxmIJ1hUh-4l3IymXeUC_7JOmHjIw29M0oABaXFrpyXyUdV3bts5X2cdwKjV9aXtv-nTDLJ1HszReUwJZXA99H3kU/s320/TELEGRAM%20logo%20redondo-brayanrocker.png"
alt="Telegram" class="social-icon">
</a>
<!-- Espacio para 6 redes sociales adicionales -->
<!-- Ejemplo para agregar más: -->
<!-- <a href="URL_RED_SOCIAL_5"
target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_5" alt="Red Social
5" class="social-icon">
</a>
<a
href="URL_RED_SOCIAL_6" target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_6" alt="Red Social
6" class="social-icon">
</a>
<a
href="URL_RED_SOCIAL_7" target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_7" alt="Red Social
7" class="social-icon">
</a>
<a
href="URL_RED_SOCIAL_8" target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_8" alt="Red Social
8" class="social-icon">
</a>
<a
href="URL_RED_SOCIAL_9" target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_9" alt="Red Social
9" class="social-icon">
</a>
<a
href="URL_RED_SOCIAL_10" target="_blank">
<img src="URL_IMAGEN_RED_SOCIAL_10" alt="Red Social
10" class="social-icon">
</a> -->
</div>
<!--
Descripción breve -->
<div
class="description">
Descargar MegaPack Cristiano | Biblioteca Cristiana Bendecidos para
Bendecir | +10000 Archivos | Mas de 300GB | 1 Link | Mega - Terabox – Entre Otros|
Gratis
</div>
<!--
Información técnica -->
<div
class="info-details">
<div
class="info-column">
<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>
<div
class="info-column">
<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>
</div>
<!--
Sección de pestañas -->
<div
class="tab-section">
<div
class="tab-container">
<!-- Botones de las
pestañas -->
<div class="tab-buttons">
<button onclick="openTab('sinopsis')"
class="active">SINOPSIS</button>
<button
onclick="openTab('info')">INFORMACIÓN TÉCNICA</button>
<button
onclick="openTab('imagen')">IMAGEN</button>
<button
onclick="openTab('descarga')">DESCARGA</button>
</div>
<!-- Contenido de las pestañas -->
<div id="sinopsis"
class="tab-content active">
<p>Descargar
MegaPack de Archivos Cristianos, Biblioteca Cristiana Bendecidos para Bendecir,
libros, biblias, audios, revistas, entrevistas y varios archivos más,
recopilacion de alta calidad y con lo mejor en contenido cristiano. Contiene más
de 300GB, Totalmente Gratis y subido en 1 Solo Link a Terabox, Mega - Mediafire
- 1fichier - UptoBox - MexaShare - Google Drive - One Drive. Formato PDF, Epub,
Rar, entre otros. Todo lo necesario para Exaltar el nombre de nuestro Señor
Jesucristo de Nazaret y aprender sobre varios temas sobre Tecnología, Investigación,
Ciencia, Relatos y más en relación con el cristianismo. </p>
</div>
<div id="info"
class="tab-content">
<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>
<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 id="imagen"
class="tab-content">
<img
src="https://static.wixstatic.com/media/51e163_14324b6b67c243dfa32d88f9c12c8753~mv2.jpeg/v1/fill/w_600,h_351,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Biblioteca%20Cristiana%20Bendecidos%20para%20Bendecir%20BrayanRocker.jpeg"
alt="Imagen Principal del Blog">
</div>
<div id="descarga"
class="tab-content">
<p><strong>Peso:</strong> Mas de 300GB</p>
<a
href="https://rebrand.ly/MegaPackCristiano" target="_blank">
<button
style="padding: 10px 20px; background-color: #0099ff; color: white;
border: none; cursor: pointer;">
DESCARGA <span
style="font-weight: bold;">Terabox</span>
</button>
</a>
</div>
</div>
</div>
</div>
<script>
// Función
para cambiar entre pestañas
function openTab(tabName) {
var contents =
document.getElementsByClassName("tab-content");
for (var i = 0; i <
contents.length; i++) {
contents[i].classList.remove("active");
}
var buttons =
document.getElementsByClassName("tab-buttons")[0].getElementsByTagName("button");
for (var i = 0; i <
buttons.length; i++) {
buttons[i].classList.remove("active");
}
document.getElementById(tabName).classList.add("active");
event.currentTarget.classList.add("active");
}
</script>
</body>
</html>
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
Descargar MegaPack de Archivos Cristianos, Biblioteca Cristiana Bendecidos para Bendecir, libros, biblias, audios, revistas, entrevistas y varios archivos más, recopilacion de alta calidad y con lo mejor en contenido cristiano. Contiene más de 300GB, Totalmente Gratis y subido en 1 Solo Link a Terabox, Mega - Mediafire - 1fichier - UptoBox - MexaShare - Google Drive - One Drive. Formato PDF, Epub, Rar, entre otros. Todo lo necesario para Exaltar el nombre de nuestro Señor Jesucristo de Nazaret y aprender sobre varios temas sobre Tecnología, Investigación, Ciencia, Relatos y más en relación con el cristianismo.
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
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
Descargar MegaPack de Archivos Cristianos, Biblioteca Cristiana Bendecidos para Bendecir, libros, biblias, audios, revistas, entrevistas y varios archivos más, recopilacion de alta calidad y con lo mejor en contenido cristiano. Contiene más de 300GB, Totalmente Gratis y subido en 1 Solo Link a Terabox, Mega - Mediafire - 1fichier - UptoBox - MexaShare - Google Drive - One Drive. Formato PDF, Epub, Rar, entre otros. Todo lo necesario para Exaltar el nombre de nuestro Señor Jesucristo de Nazaret y aprender sobre varios temas sobre Tecnología, Investigación, Ciencia, Relatos y más en relación con el cristianismo.
CODIGO
