/************************************** Autor: ******************************************/ /* */ /* El Ultimo Llamado Divino */ /* */ /* WEB: http://www.elultimollamadodivino.com.pe */ /* MAIL: elultimollamadodivino@hotmail.com */ /* APLICACION: Carrusel de Videos - Modelo Temas */ /* CODIGO COMENTADO */ /* */ /******************************** Copyright © 2000 - 2024 *******************************/ /*********************************** ESTILOS GENERALES **********************************/ * { margin: 0; padding: 0; box-sizing: border-box; } /* FUENTES */ /* public/portal/fonts/Rufina_Bold.ttf*/ @font-face { /*Añade una fuente propia, para ser usada en todo el documento*/ font-family: AachenBt; src: url('fonts/Aachen_BT.ttf'); } @font-face { /*Añade una fuente propia, para ser usada en todo el documento*/ font-family: AachenDEEMed; src: url('fonts/AachenDEEMed.ttf'); } @font-face { /*Añade una fuente propia, para ser usada en todo el documento*/ font-family: RufinaBold; src: url('fonts/Rufina_Bold.ttf'); } @font-face { /*Añade una fuente propia, para ser usada en todo el documento*/ font-family: Rufina; src: url('fonts/Rufina.ttf'); } body { /* width: 100%; height: 100%; */ /*background-color: rgb(162, 6, 234); Color de fondo del Background*/ /* ****** Textura del Fondo ( Texturizado y degradado para el fondo del main ) --------*/ background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient( #1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424 ); background-color: #131313; /* Establece el color de Fondo de las celdas de la textura*/ background-size: 20px 20px; /* Tamaño de la celda de la textura */ /* ------ Fin de la Textura del Fondo -----*/ } .cont_fondo { /********** Fondo Degradado Superpuesto al Texturizado --------*/ /* -------- Degradado superpuesto a la Textura del Fondo --------*/ width: 100%; height: 100%; /*min-width: 100vw; *100vw = 100% Ancho en viewport*/ /*min-height: 100vh; *100vh = 100% Alto en viewport*/ position: fixed; top: 0px; /*Posición vertical*/ left: 0px; /*Posición horizontal*/ /*position: absolute; El elemento está posicionado en relación con su primer elemento ancestro posicionado (no estático)*/ /* background-image: linear-gradient(to bottom, rgba(255,0,0,0), #3bacd9); */ background-image: linear-gradient(to bottom, #035c80, rgba(250, 245, 245, 0)); /*Fondo Degradado*/ z-index: 1; /* -------- Fin del Degradado superpuesto a la Textura del Fondo --------*/ } /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ******************************************************************************************** CUERPO (BODY) DE LA ESTRUCTURA HTML ******************************************************************************************** *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* HEADER DEL BODY */ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ************************************************************************************ PARTE MODIFICABLE Y TRASLADABLE AL INDEX - SECCION TEMAS ******************************************************************************* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ***************************************************************************************************** SECCIÓN TEMAS ******************************************************************************************************* *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-* * ************************************************* * HEADER DE LA SECCION TEMAS: COMPARTIDO POR TODOS LOS DIPOSITIVOS * ************************************* * *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/ /* CONTENEDOR PRINCIPAL DEL HEADER DE LA PÁGINA */ .cabezaPag { /******* Contenededor principal de la barra de navegación superior de los BOTONES DE CRISTAL */ position: fixed; /* ---------------------------------------------------------------------------- El elemento está posicionado en relación con la ventana principal permaneciendo siempre en el mismo lugar de la pantalla, viendose afetado solo por las propiedades: top, right, bottom y left */ width: 100dvw; /* ---------------------------------------------------------------------------------100vw = 100% de acuerdo al ancho del tamaño de su pantalla */ background-color: hsla(197, 94%, 12%, 1); /*background-color: hsla( 240, 100%, 0%, 0.5 ); ------------------------------------------------Color de fondo del elemento con transparencia */ z-index: 3; /* --------------------------------------------------------------------------------- Valor de la superposición de la barra de navegacion de la cabecera */ /* border: 1px solid #B1FF00; */ display: flex; flex-direction: column; } /* CONTENEDOR DE LA FRECUENCIA, LOGO Y TEXTO BÍBLICO */ .uldivinNews { display: flex; flex-direction: row; /* border: 1px solid green; */ } /* PRIMER HIJO - DERECHO - FRECUENCIA */ .sintoniza_ULDnews { /* width: 30%; */ /* background-color: #00f; */ display: flex; align-items: center; justify-content: center; flex-direction: column; } .sintonizaRadio_ULDnews { display: flex; align-items: center; /*Alinea los elementos del contenedor verticalmente*/ justify-content: center; /*Alinea los elementos del contenedor horizontalmente*/ text-align: center; font-family: AachenBt; /* border: 1px solid red; */ /* font-size: 2.5vw; */ /* FONDO DEL TEXTO DEGRADADO */ background: rgb(87, 82, 82); background: linear-gradient( 124deg, rgba(87, 82, 82, 1) 1%, rgba(255, 255, 255, 1) 5%, rgba(255, 254, 254, 1) 12%, rgba(255, 255, 255, 1) 17%, rgba(125, 125, 125, 1) 24%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 1) 44%, rgba(125, 125, 125, 1) 49%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 68%, rgba(125, 125, 125, 1) 75%, rgba(255, 255, 255, 1) 81%, rgba(255, 255, 255, 1) 91%, rgba(125, 125, 125, 1) 96%, rgba(255, 255, 255, 1) 100% ); -webkit-text-fill-color: transparent; /*Texto de color transparente*/ -webkit-background-clip: text; /*Que solo quede el fondo donde está el texto*/ filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); /* FIN DE FONDO DE TEXTO DEGRADADO */ /*Genera sombra al texto como si fuera png*/ -webkit-filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); } .sintonizaFrecuencia_ULDnews { display: flex; align-items: center; /*Alinea los elementos del contenedor verticalmente*/ justify-content: center; /*Alinea los elementos del contenedor horizontalmente*/ text-align: center; font-family: AachenBt; /* font-size: 2.5vw; */ background: radial-gradient( circle at 63.09% 50%, #d1f584 0, #d7eb73 8.33%, #dce162 16.67%, #e1d550 25%, #e5c83d 33.33%, #e8b928 41.67%, #eaa90e 50%, #ec9800 58.33%, #ef8700 66.67%, #f27500 75%, #f56300 83.33%, #f84e02 91.67%, #fb3417 100% ); -webkit-text-fill-color: transparent; /*Texto de color transparente*/ -webkit-background-clip: text; /*Que solo quede el fondo donde está el texto*/ filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); /* FIN DE FONDO DE TEXTO DEGRADADO */ /*Genera sombra al texto como si fuera png*/ -webkit-filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); } /* SEGUNDO HIJO - MEDIO - LOGO RADIO */ .logo_ULDnews { /* width: 40%; */ /* background-color: rgb(19, 233, 133); */ display: flex; align-items: center; /*Alinea los elementos del contenedor verticalmente*/ justify-content: center; /*Alinea los elementos del contenedor horizontalmente*/ } .contLogo_ULDnews { width: 100%; height: 100%; display: flex; align-items: center; /*Alinea los elementos del contenedor verticalmente*/ justify-content: center; /*Alinea los elementos del contenedor horizontalmente*/ /* border: 1px solid rgb(10, 250, 230); */ } .imgLogo_ULDnews { /*........................................................................ ( Etiqueta con el 'Logo Chico de ULDIVIN SAC' del borde derecho superior)*/ display: flex; align-items: center; justify-content: center; height: 100%; /*Alto del elemento */ width: auto; } /* TERCER HIJO - IZQUIERDO - TEXTO Y BIBLIA */ .textoBiblico_ULDnews { /* background-color: #00f; */ /* width: 30%; */ display: flex; align-items: center; justify-content: center; flex-direction: column; } /* CONTENEDOR DEL TEXTO */ .cont_textoBiblicoLetra { width: 100%; height: 100%; display: flex; /* flex-direction: column; */ position: relative; align-items: center; justify-content: center; } /* PRIMER HIJO */ .textoBiblicoImg { position: absolute; bottom: 0vh; display: flex; align-items: center; justify-content: center; width: 50%; height: auto; /* border: 1px solid red; */ } /* SEGUNDO HIJO */ .textoBiblicoLetra { position: absolute; top: 0vh; width: 100%; height: 70%; display: flex; align-items: center; justify-content: center; /* border: 1px solid blue; */ } .textoBiblicoLetra p { width: 60%; text-align: center; font-size: 1.2vw; /* color: white; */ background-image: radial-gradient( circle at 50% 93.78%, #ffffb4 0, #ffff93 12.5%, #ffff71 25%, #ffea4a 37.5%, #f8d110 50%, #f0b800 62.5%, #e99f00 75%, #e48600 87.5%, #e06d00 100% ); -webkit-text-fill-color: transparent; /*Texto de color transparente*/ -webkit-background-clip: text; /*Que solo quede el fondo donde está el texto*/ filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); /* FIN DE FONDO DE TEXTO DEGRADADO */ /*Genera sombra al texto como si fuera png*/ -webkit-filter: drop-shadow(1px 1px 2px rgb(2, 43, 46)); } /* .facebook_ULDnews { color: white; } .twitter_ULDnews { color: white; } */ /* CONTENEDOR DEL MENU DE NAVEGACIÓN */ .navegacion { /* ****** Contenededor interno superpuesto al contenedor 'cabezaPag' principal de la barra de navegación superior de los BOTONES DE CRISTAL */ width: 100%; /* -------------------------------------------------------------------------------- Está declaración indica que su ancho abarcará todo el ancho DE SU CONTENEDOR PADRE (cabezaPag)*/ height: 100%; /* ------------------------------------------------------------------------------- Está declaración indica que su ALTO abarcará todo el ancho DE SU CONTENEDOR PADRE (cabezaPag)*/ display: flex; /* ------------------------------------------------------------------------------ Aplica al contenedor Principal a fin de poder reorganizar a sus elementos hijos */ flex-direction: row; /* ------------------------------------------------------------------------ Está declaración indica que sus elementos hijos están ordenados Horizontalmente */ justify-content: space-between; /* ------------------------------------------------------------- Está declaración genera espacio entre lineas los elementos del contenedor horizontalmente hacia los extremos*/ /* border: 1px solid green; */ /* ESTE CONTENEDOR ABARCA TODO EL ANCHO Y ALTO DE CABEZAPAG */ padding: 0.7rem; /*----------------------------------------------------------------------------- Espacio alrededor del contenido de un elemento, dentro de los bordes definidos */ /* background-color: red; */ /* border: #0a022c; */ border: 1px solid #0a022c; } /* CONTENEDOR DEL BOTON HAMBURGUESA */ .navHamburguesa { /************* Contenedor exclusivo del BOTON HAMBURGUESA para CELULAR */ /* Selector solo para celular ver @media */ /* background-color: red; */ /* border: 1px solid green; */ } .ham { /* Selector solo para celular ver @media */ } .ham span { /* Etiqutas */ /* Selector solo para celular ver @media */ } .ham:hover { /* Etiqutas Hover que permite el movimiento de la hamburguesa cuando el mouse esta encima */ /* Selector solo para celular ver @media */ } .ham_cont_br { } .hamAspas { } .menuAbierto { } .menuCerrado { } .navMein { /*******Contenedor Botones, Logins y Logo (Contenedor interno superpuesto al contenedor 'navegacion' que contiene al Contenedeor de los BOTONES DE CRISTAL, 'Inicio de Sesion' y 'Logo ULD' )*/ display: flex; /*Indica que los elementos serán flexibles*/ /* border: 1px solid red; /* borde del elemento*/ justify-content: space-between; /*Alinea los elementos del contenedor horizontalmente hacia los extremos*/ align-items: center; /*Alinea los elementos del contenedor verticalmente*/ height: 100%; /*ES EL 100% DEL ALTO ESTABLECIDO POR EL CONTENEDOR PADRE GENERAL -> .cabezaPag*/ /* background-color: greenyellow; */ } .navMenuIz { /******** Lado Izquierdo - Contenedor Botones (Contenedor de la etiqueta Listas