Version beta EDUHOLDING

Developer
Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Size
17,266 Kb
Views
24,288
  1. Version beta EDUHOLDING Previews
  2. Version beta EDUHOLDING HTML Codes
  3. Version beta EDUHOLDING CSS Codes
  4. Version beta EDUHOLDING JS Codes

How do I make an version beta eduholding?

What is a version beta eduholding? How do you make a version beta eduholding? This script and codes were developed by Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) on 17 October 2022, Monday.

Version beta EDUHOLDING Previews
IQ Test

Version beta EDUHOLDING - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Version beta EDUHOLDING</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input type="checkbox" class="ctrl menu-principal esconder" id="ctrl_01">
<input type="checkbox" class="ctrl hacer-visible esconder" id="ctrl_02">
<div class="contenedor" id="top"> <a href="#banner" class="btn subir icono"></a> <header class="encabezado"> <nav class="menu"> <a href="#top" class="logo"> <img src="http://eduholding.gutierrezedgar.com/img/logo-eduholding-full.png" alt="logo eduholding"> </a> <a href="#inicio" for="ctrl_01" class="trigger icono"> Menú </a> <ul> <li> <a href="#empresa" class="enlace quienes-somos"> Quienes Somos </a> </li> <li class="no-mostrar"> <a href="#proyectos" class="enlace proyectos"> Proyectos </a> </li> <li> <a href="#servicios" class="enlace servicios"> Servicios y Productos </a> </li> <li class="no-mostrar"> <a href="#exito" class="enlace exito"> Nuestro Éxito </a> </li> <li class="no-mostrar"> <a href="#aliados" class="enlace aliados"> Aliados </a> </li> <li> <a href="#contacto" class="enlace contacto"> Contactanos </a> </li> </ul> </nav> <ul class="menu-config"> <li class="icono config"></li> <li><label for="ctrl_02" class="trigger-config icono ojo"></label></li> </ul> </header> <main class="contenido"> <!--======================== BANNER ========================--> <section class="seccion banner" id="banner"> <input type="radio" class="ctrl esconder" id="slide1" name="slider" required=""> <input type="radio" class="ctrl esconder" id="slide2" name="slider"> <input type="radio" class="ctrl esconder" id="slide3" name="slider"> <input type="radio" class="ctrl esconder" id="slide4" name="slider"> <figure class="slider slide_1"> <label for="slide4" class="trigger izq">&lt;</label> <label for="slide2" class="trigger der">&gt;</label> <figcaption> pantallas interactivas </figcaption> </figure> <figure class="slider slide_2"> <label for="slide1" class="trigger izq">&lt;</label> <label for="slide3" class="trigger der">&gt;</label> <figcaption> laboratorios móviles </figcaption> </figure> <figure class="slider slide_3"> <label for="slide2" class="trigger izq">&lt;</label> <label for="slide4" class="trigger der">&gt;</label> <figcaption> simuladores </figcaption> </figure> <figure class="slider slide_4"> <label for="slide3" class="trigger izq">&lt;</label> <label for="slide1" class="trigger der">&gt;</label> <figcaption> plataformas online </figcaption> </figure><figure class="slider slide_1 reinicio"> <label for="slide4" class="trigger izq">&lt;</label> <label for="slide2" class="trigger der">&gt;</label> <figcaption> pantallas interactivas </figcaption> </figure> </section> <!--======================== EMPRESA ========================--> <section class="seccion empresa" id="empresa"> <article class="articulo iconos"> <h3 class="titulo">QUIENES SOMOS</h3> <p class="explicacion"> <span class="design icono"> DISEÑAMOS </span> <span class="integramos icono"> INTEGRAMOS </span> <span class="equipamos icono"> EQUIPAMOS </span></p> </article> <article class="articulo somos"> <figure></figure> <p class="parrafo">En <b class="letra-principal">Eduholding</b> somos una compañía internacional especializada en la integración de soluciones educativas con tecnologías innovadoras, dirigidas a fortalecer los procesos de formación en las instituciones de educación y organizaciones empresariales públicas y privadas, para mejorar cualitativa y cuantitativamente sus resultados.</p> </article> <article class="articulo misionvision"> <div class="mision"> <h4 class="titulo icono mision">Nos propusimos como <b>MISIÓN</b></h4> <p class="parrafo"> Ofrecer soluciones tecnológicas innovadoras a la medida y de gran valor para el cliente, mediante el diseño y desarrollo de proyectos que integren metodologías, estrategias; productos y servicios con los más altos estándares de calidad, eficiencia y desempeño. </p> </div> <div class="vision"> <h4 class="titulo icono vision">Por ellos, es nuestra <b>VISIÓN</b></h4> <p class="parrafo"> Ser reconocidos a corto plazo como el mejor aliado para instituciones públicas y privadas en la conceptualización de ideas, integración e implementación de proyectos tecnológicos, generando confiabilidad, y satisfacción en cada proyecto realizado. </p> </div> </article> </section> <!--======================== EMPRESA ========================--> <section class="seccion proyectos no-mostrar" id="proyectos"> <h3 class="titulo portada"> <span>PROYECTOS</span> </h3> <p class="parrafo"> Desde Panamá, desarrollamos una amplia variedad de proyectos en Centroamérica, El Caribe y Suramérica, con sedes permanentes en República Dominicana, Colombia, Perú y Chile. </p> </section> <!--======================== PROYECTOS ========================--> <section class="seccion servicios" id="servicios"> <h3 class="titulo portada"> <span>SERVICIOS</span> </h3> <article class="soluciones"> <h4 class="titulo">Las <b>soluciones</b> que ofrecemos</h4> <p class="parrafo">Muchas de nuestras fortalezas se basan en la implementación de ambientes formativos, programas de formación, la elaboración del diseño y desarrollo curricular, diseño de actividades de aprendizaje, capacitación de docentes, diseño y elaboración de contenidos para ambientes virtuales de aprendizaje, laboratorios a través de internet, plataformas educativas y gestión del cambio.</p> <p class="parrafo">Dentro de nuestra amplia gama de servicios podemos mencionar:</p> </article> <ul class="lista"> <li>Integración de tecnologías.</li> <li>Formación de docentes.</li> <li>Utilización de las Tecnologías de Información y Comunicación (TICs) en ambientes formativos.</li> <li>Diseño de ambientes educativos.</li> <li>Integración de contenidos virtuales a los procesos educativos y formativos tradicionales.</li> <li>Sensibilización y gestión del cambio para los diferentes niveles organizacionales.</li> <li>Implementación de mobiliario educativo.</li> <li>Tableros interactivos.</li> <li>Diseños y ejecución de obras de ingenieria.</li> <li>Laboratorios Virtuales.</li> <li>Laboratorios Móviles.</li> </ul> <article class="articulo tablerosdigitales"> <h5 class="titulo icono">Tableros Digitales</h5> <div class="texto activeboard"> <figure class="imagen-producto"> </figure> <h6 class="titulo">ActiveBoard Touch</h6> <ul class="especificaciones"> <li class="titulo"> Especificaciones </li> <li>Tamaños: 78’’ 88’’</li> <li>6 toques simultáneos</li> <li>Lápices interactivos no requieren baterías</li> <li>Proyectores HD</li> <li>Sistema de audio potente y de calidad Superficie de borrado seco</li> </ul> <img src="http://eduholding.gutierrezedgar.com/img/promethean-logo.png" alt="logo promethean" class="imagen logo-promethean"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#pop-up" class="btn mas-info no-mostrar">Más Información</a> </div> <div class="texto izq activepanel"> <figure class="imagen-producto"> </figure> <h6 class="titulo">ActivePanel Touch</h6> <ul class="especificaciones"> <li class="titulo"> Especificaciones </li> <li>Diseño elegante, estructura robusta</li> <li>UHD 4K</li> <li>Alto grado de interactividad y precisión</li> <li>Tamaños: 55’’ 65’’ 70’’ 84’’</li> <li>Interacción con lápices y dedos simultáneamente</li> <li>Interacción con lápices y de calidad integrado</li> <li>Sistema de Audio potente y de calidad integrado</li> <li>Bajo brillo y reflectividad</li> <li>Alternativa de sistema móvil</li> </ul> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#pop-up" class="btn mas-info no-mostrar">Más Información</a> </div> </article> <article class="articulo der activinspire"> <h5 class="titulo icono"> <b>Activ</b>Inspire </h5> <figure class="imagen-producto"> <img class="logo-activinspire" src="http://eduholding.gutierrezedgar.com/img/activinspire-logo.png" alt="software active inspire"> </figure> <ul class="especificaciones"> <li>De uso sencillo e intuitivo para los docentes y estudiantes.</li> <li>Paquetes de recursos en las diversas materias que incluyen imágenes, fondos, imágenes en movimiento, etc.</li> <li>Herramientas matemáticas completas e integradas: transportador, cuadriculas (con ajustes), reglas, compases.</li> <li>Completa paleta de colores.</li> <li>Herramientas avanzadas, como figuras inteligentes y reconocimiento de escritura a mano.</li> <li>Mucho más… APRENDE CON ActiveInspire!</li> </ul> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </article> <article class="articulo izq classflow"> <h5 class="titulo icono">CLASSFLOW</h5> <figure class="imagen-producto"></figure> <ul class="especificaciones"> <li>Ingrese a la plataforma en cualquier momento y lugar.</li> <li>Organice grupos y comparta información de acuerdo al nivel como:</li> <ul class="multimedia"> <li>Imágenes</li> <li>Audios</li> <li>Vídeos</li> <li>Lecciones</li> </ul> <li>Reportes de evaluación y estadísticas en tiempo real.</li> <li>Comunicación inmediata con el expositor o docente.</li> </ul> <img class="logo-classflow" src="http://eduholding.gutierrezedgar.com/img/clasflow-logo.png" alt="logo classflow"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#pop-up" class="btn mas-info no-mostrar">Más Información</a> </article> <article class="articulo rosseta"> <h5 class="titulo icono"><b>Rosseta</b> Stone</h5> <figure class="imagen-producto"></figure> <p class="parrafo">Diseñado para primaria. Secundaria y Universidad, es una solución escalable de aprendizaje virtual creada para alumnos de nivel principiante a intermedio en 24 idiomas para desarrollar habilidades lingüística fundamentales.</p> <img class="logo logo-rosseta" src="http://eduholding.gutierrezedgar.com/img/logo-rosseta-stone.png" alt="roseta stone"> <figure class="imagen-producto dos"> <figcaption class="niveles"> <p> <span>Niveles de Suficiencia</span><b>A1, A2 - B1, B2 - C1</b> </p> </figcaption> </figure> <p class="parrafo dos">Solución diseñada para fortalecer el nivel de intermedio y avanzado de los gerentes y ejecutivos que deseen alcanzar el nivel C1 (MCER) Desarrollo y fortalecimiento de habilidades relevantes para los negocios como presentaciones, reuniones y conferencias. <br> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </p> </article> <article class="articulo netsupport"> <h5 class="titulo icono">NETSUPPORT</h5> <figure class="imagen-producto"> <img src="http://eduholding.gutierrezedgar.com/img/netsupport-school.png" alt="netsupport school" class="school"> </figure> <p class="especificaciones">Aliado especializado en el uso de tecnología de control remoto y en los ultimos años la gama de productos ha evolucionado en linea con la práctica del trabajo moderno, dando prioridad a la seguridad y el rendimiento.</p> <ul class="especificaciones"> <li>Netsupport School</li> <li>Netsupport Assist</li> <li>Netsupport Manager</li> <li>Netsupport DNA</li> <li>Netsupport Notify</li> <li>Netsupport Protect</li> </ul> <img class="logo logo-netsupport" src="http://www.netsupport-inc.com/images/logo.jpg" alt="logo netsupport"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </article> <article class="articulo izq jp-ik"> <h5 class="titulo icono">JP Inspiring Knowledge</h5> <figure class="imagen-producto"></figure> <p class="especificaciones">Marca portuguesa especializada en proveer equipos para la educación con las caracteristicas de ser:</p> <ul class="especificaciones"> <li>De alta durabilidad</li> <li>Resistentes al Agua</li> <li>Protegidos contra el polvo</li> <li>Sistema Antirobo</li> <li>Software de punta</li> </ul> <img class="logo logo-jp-ik" src="http://www.jp-ik.com/images/institucional/logo-jpsc.png" alt="logo netsupport"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </article> <article class="articulo etf"> <h5 class="titulo icono">ETF Inmobiliario</h5> <figure class="imagen-producto"></figure> <p class="especificaciones">Solida empresa con años de experiencia en soluciones integrales de mobiliario y diseño de espacios, asi como en el area de tecnología educativa, su catalogo esta conformado por las siguientes categorías:</p> <ul class="especificaciones"> <li>Mobiliario Académico: </li> <li>Auditorios</li> <li>Parques infantiles</li> <li>Eventos</li> </ul> <img class="logo logo-etf" src="http://eduholding.gutierrezedgar.com/img/eft-logo.png"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </article> <article class="articulo izq educar-editores"> <h5 class="titulo icono">Educar Editores</h5> <figure class="imagen-producto"></figure> <p class="especificaciones">El Grupo Editorial Educar, lleva 4 decadas acompañando la formación educativa de millones de personas en Colombia y Latinoamérica, con productos editoriales y recursos digitales de la más alta calidad.</p> <p class="especificaciones">Poseen recursos digitales categorizados por</p> <ul class="especificaciones"> <li>Prescolar</li> <li>Primaria</li> <li>Secundaria</li> </ul> <div class="no-mostrar"> <p class="especificaciones">Referencias e interes general como: Dicciones, Biblias, Politica, Atrlas, variedades.</p> <p class="especificaciones">Cuentan con un plan lector organizado por indices tematicos, edades y grados.</p> <p class="especificaciones">Plataformas educativas como:</p> <ul class="especificaciones"> <li>Sie</li> <li>Educaonline</li> <li>Sie Preescolar</li> <li>Educar Virtual</li> <li>Meli</li> <li>Tu Saber</li> <li>CyberTeachers</li> </ul> </div> <img class="logo logo-etf" src="http://eduholding.gutierrezedgar.com/img/logo-educar-editores.png"> <a href="#contacto" class="btn cta">COTIZA</a> <a href="#" class="btn mas-info no-mostrar">Más Información</a> </article> </section> <!--======================== NUESTRO EXITO ========================--> <section class="seccion exito no-mostrar" id="exito"> <h3 class="titulo"><span>NUESTRO ÉXITO</span></h3> </section> <!--======================== ALIADOS ========================--> <section class="seccion aliados no-mostrar" id="aliados"> <h3 class="titulo">ALIADOS</h3> <ul class="aliados"> <li><img src="" alt="" class="promethean"></li> <li><img src="" alt="" class="netsupport"></li> <li><img src="" alt="" class="rossetastone"></li> <li><img src="" alt="" class="jpik"></li> <li><img src="" alt="" class="etf-inmobiliario"></li> <li><img src="" alt="" class="educareditories"></li> </ul> </section> </main> <!--======================== PIE DE PAGINA ========================--> <footer class="pie-pagina mostrar" id="contacto"> <h3 class="titulo">CONTACTANOS</h3> <form class="formulario" action="https://docs.google.com/a/ita-sa.com/forms/d/1RM87R_lC3-tW8WMySKludlBgUVV12E9wKwgt4kIfyXA/formResponse" method="POST" id="ss-form" target="_blank" onsubmit=""> <label for="entry_2122941154">Nombre</label> <input type="text" class="entrada-texto primer" name="entry.2122941154" value="" id="entry_2122941154" required=""> <label for="entry_1124318654">Email</label> <input type="text" class="entrada-texto" name="entry.1124318654" value="" id="entry_1124318654" required=""> <label for="entry_40147722">Teléfono </label> <input type="text" class="entrada-texto" name="entry.40147722" value="" id="entry_40147722" required=""> <label for="entry_821323039">Ciudad</label> <input type="text" class="entrada-texto" name="entry.821323039" value="" id="entry_821323039" required=""> <label class="enfoque" for="entry_1294363320">Enfoque Comercial</label> <ul class="seleccion"> <li> <input type="radio" name="entry.926457766" value="Colegio" id="group_926457766_1"> <label for="group_926457766_1">Colegio</label> </li> <li> <input type="radio" name="entry.926457766" value="Universidad" id="group_926457766_2"> <label for="group_926457766_2">Universidad</label> </li> <li> <input type="radio" name="entry.926457766" value="Empresa" id="group_926457766_3"> <label for="group_926457766_3">Empresa</label> </li> <li> <input type="radio" name="entry.926457766" value="PYME" id="group_926457766_4"> <label for="group_926457766_4"> PYME</label> </li> <li> <input class="otra-opcion" type="radio" name="entry.926457766" value="__other_option__" id="group_926457766_5"> <label for="group_926457766_5">Otro:</label> <input type="text" class="entrada-texto otro" name="entry.926457766.other_option_response" value="" id="entry_926457766_other_option_response"> </li> </ul> <label class="etiqueta-comentario" for="entry_1285486101">Comentario</label> <textarea class="entrada-texto comentario" name="entry.1285486101" id="entry_1285486101" required=""></textarea> <input class="btn enviar" type="submit" name="submit" value="Enviar" id="ss-submit"> </form> <div class="info"> <a href="#top" class="logo"> <img src="http://eduholding.gutierrezedgar.com/img/eduholding-logo-fondo-oscuro.png" alt="logo eduholding"> </a> <ul> <li> <a href="#empresa" class="enlace quienes-somos"> Quienes Somos </a> </li> <li class="no-mostrar"> <a href="#proyectos" class="enlace proyectos"> Proyectos </a> </li> <li> <a href="#servicios" class="enlace servicios"> Servicios y Productos </a> </li> <li class="no-mostrar"> <a href="#exito" class="enlace exito"> Nuestro Éxito </a> </li> <li class="no-mostrar"> <a href="#aliados" class="enlace aliados"> Aliados </a> </li> <li> <a href="#contacto" class="enlace contacto"> Contactanos </a> </li> </ul> <p> <span> <span>EMAIL:</span> [email protected] </span> <span> <span>PBX:</span> (57) 1 744 35 30 </span> </p> </div> <div class="redes"> <a href="" class="link icono facebook"> facebook </a> <a href="" class="link icono youtube"> youtube </a> <a href="" class="link icono twitter"> twitter </a> </div> </footer>
</div>
<div class="pop-up" id="pop-up"> <iframe src="https://s.codepen.io/g3kdigital/debug/jqXdBM" frameborder="0"></iframe>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Version beta EDUHOLDING - Script Codes CSS Codes

* { padding: 0; margin: 0; box-sizing: border-box;
}
*,
*::before,
*::after { -webkit-transition: all ease .5s; transition: all ease .5s;
}
.prueba,
.prueba * { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.01);
}
/* .no-mostrar */
.hacer-visible:not(:checked) ~ .contenedor .no-mostrar { display: none !important;
}
body { font-family: 'Open Sans', sans-serif; font-size: 18px; text-align: center; background-color: rgba(228, 229, 236, 1); background-color: rgba(255, 255, 255, 1); position: relative; color: rgba(0, 0, 0, 0.7);
}
img { width: 100%;
}
.letra-principal,
.titulo,
.menu .enlaces,
.slider figcaption,
.servicios .btn.cta,
.btn.enviar { font-family: 'Nunito', verdana, sans-serif; font-weight: 400;
}
.letra-secundaria,
body { font-family: 'Open Sans', arial, sans-serif;
}
.titulo { font-size: 1.5em; color: rgb(53, 107, 148); line-height: 1.1em;
}
.icono::before,
.icono::after { content: ''; font-family: "FontAwesome";
}
.parrafo {}
.lista { text-align: left; padding-left: 3.6em; list-style-type: none;
}
.lista li { padding-left: 0.6em; position: relative; font-size: 0.8em; line-height: 1.8em;
}
.lista li::before { content: ''; position: absolute; background-color: rgb(3, 116, 164); left: -1em; width: .4em; height: .4em; border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.ctrl.esconder { position: fixed;
}
.esconder { position: absolute; opacity: 0; z-index: 100;
}
.btn.subir { position: fixed; width: 2em; height: 2em; background-color: rgba(255, 255, 255, .9); display: block; right: 5%; bottom: 2em; z-index: 20; box-shadow: 0 0 1em rgba(0, 0, 0, .3); border-radius: 50%; font-size: 1.2em; line-height: 1.8em; text-decoration: none;
}
.icono.subir::before { content: '\f062'; color: #0374A4;
}
.menu-config { position: fixed; right: 1em; top: .5em; z-index: 200; list-style-type: none; opacity: 0; -webkit-transform: translateY(-80%); transform: translateY(-80%)
}
.menu-config:hover { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%)
}
.menu-config:hover li { display: block;
}
.trigger-config.icono::before { width: 2em; height: 2em; line-height: 2em; display: block; border-radius: 50%; background-color: rgba(255, 255, 255, .5);
}
.icono.config::before { content: '\f1de'; color: #fff;
}
.icono.ojo::before { content: '\f06e';
}
.hacer-visible:checked ~ .contenedor .no-mostrar { display: inherit; -webkit-animation: aparece-abajo .3s ease .1s both; animation: aparece-abajo .3s ease .1s both;
}
.hacer-visible:checked ~ .contenedor .icono.ojo:before { content: '\f070';
}
label.trigger-config.icono.ojo { display: block; margin-top: 2em;
}
input:focus { outline: none; box-shadow: inset 0 0 0 0.1em #5FA0D4;
}
html .btn:hover,
html .btn:focus
{ -webkit-transform: translateY(-2px) !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 0 rgba(0,0,0,.5) !important; background: rgb(0, 166, 230) !important; outline: none;
}
html .btn.subir:focus::before,
html .btn.subir:hover::before
{ color: #fff;
}
html .btn:active
{ -webkit-transform: translateY(10px) !important; transform: translateY(10px) !important;
}
/*========================
ENCABEZADO
========================*/
.contenedor { margin-top: 6.5em;
}
.encabezado { background-color: #fff; position: fixed; width: 100%; top: 0; left: 0; z-index: 100;
}
.menu { position: relative; padding: 0 5%;
}
.menu::after { content: ''; background-image: url('http://eduholding.gutierrezedgar.com/img/grafismo-lado-izq.png'); background-position: left top; background-size: 100% 100%; background-repeat: no-repeat; position: absolute; z-index: 1; right: 0; top: 0; width: 40vw; height: 25vw; max-width: 12em; max-height: 8em;
}
.menu .logo { max-width: 7em; padding: .7em 0;
}
.menu .logo img { width: 100%; display: block;
}
.menu .logo,
.menu ul { display: inline-block; vertical-align: middle; position: relative; z-index: 2;
}
.menu ul { max-height: 0; overflow: hidden; position: absolute; background-color: #fff; right: 0; top: 100%; min-width: 12em; -webkit-transition: all .5s ease .3s; transition: all .5s ease .3s;
}
.menu li {}
.menu .enlace { text-decoration: none; padding: .5em; display: block; color: rgb(4, 100, 144); text-transform: uppercase;
}
.menu .trigger:focus ~ ul { overflow: visible; max-height: 60vh; display: block; list-style: none; padding: 0.5em 0 1em; -webkit-animation: aparece-abajo .5s ease .3s both; animation: aparece-abajo .5s ease .3s both; -webkit-transition: all .5s ease .3s; transition: all .5s ease .3s;
}
.menu .trigger { display: inline-block; width: calc(100% - 8.5em); text-align: right; position: relative; z-index: 2; color: rgba(0, 0, 0, .5); text-decoration: none;
}
.menu ul::after { width: 8em; height: 3.5em; display: block; position: absolute; bottom: 110%; right: 2em; content: ''; cursor: pointer;
}
.menu .icono::before { content: '\f0c9'; color: rgba(0, 0, 0, .8);
}
.menu .icono:focus::before { content: '\f00d'; background: rgba(50, 0, 0, 0.2); padding: .5em .6em; border-radius: 50%; margin-right: 0.5em; border: white 2px solid;
}
/*========================
CONTENIDO
========================*/
.contenido {}
.contenido .seccion { background-color: #fff;
}
.seccion .portada { min-height: 40vh; position: relative; background-color: rgb(4, 99, 141); background-size: cover; background-position: center center;
}
.seccion .portada span { position: absolute; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; background-color: rgba(255, 255, 255, .5); display: inline-block; width: 100%; font-size: 1.6em; padding: .5em 0;
}
/*========================
BANNER
========================*/
.banner .ctrl {}
.banner #slide1 ~ .slide1 {}
.banner #slide2 ~ .slide2 {}
.banner #slide3 ~ .slide3 {}
.banner #slide4 ~ .slide4 {}
.seccion.banner { width: 100%; min-height: 60vh; background-color: #04638D; background-image: -webkit-linear-gradient(45deg, rgb(4, 97, 140) 0%, rgb(0, 183, 255) 100%); background-image: linear-gradient(45deg, rgb(4, 97, 140) 0%, rgb(0, 183, 255) 100%); color: white; position: relative; overflow: hidden; pointer-events: initial; cursor: pointer; -webkit-animation: activa-elemento 3s ease forwards; animation: activa-elemento 3s ease forwards;
}
.banner:hover .slider,
.banner:hover::before
{ -webkit-animation-play-state: paused; animation-play-state: paused;
}
.banner::before
{ content: ''; position: absolute; background-color: rgba(0,200,255,.8); display: block; width: 100%; height: 2px; bottom: 0; left: 0; -webkit-animation: duracion ease-in 6s infinite; animation: duracion ease-in 6s infinite; z-index: 6;
}
.banner::after
{ content: '▼'; position: absolute; z-index: 6; background-color: rgba(0,200,255,.4); font-size: 3em; height: 1.5em; width: 1.5em; line-height: 1.5em; top: 50%; left: 50%; border-radius: 50%; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateZ(-90deg) translateY(-50%) translateX(-50%); transform: rotateZ(-90deg) translateY(-50%) translateX(-50%); opacity: 0;
}
.banner:hover::after
{ opacity: 1; content: '=';
}
.slider
{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.1); background-size: cover; -webkit-transform: translateY(-150%); transform: translateY(-150%); -webkit-animation: slider 24s ease infinite; animation: slider 24s ease infinite;
}
.slider figcaption
{ position: absolute; top: 10%; background-color: rgba(4, 98, 140, .8); background: -webkit-linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); background: linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); padding: .8em 1.5em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 10px; font-size: 1.4em; text-transform: uppercase; font-weight: 300; color: #fff; opacity: .8;
}
.slider .trigger { position: absolute; display: block; padding: 1em; background-color: rgba(0,183,255,.1); width: 3em; height: 3em; line-height: 1em; top: calc(50% - 1.5em); display: none;
}
.banner:hover .trigger
{ background-color: rgba(0,183,255,.5);
}
.trigger.izq
{ left: 0; border-radius: 0 50% 50% 0;
}
.trigger.der
{ right: 0; border-radius: 50% 0 0 50%;
}
.slide_1
{ -webkit-animation-delay: 0s; animation-delay: 0s; background-color: #4A7BA6; background-image: url('http://eduholding.gutierrezedgar.com/img/intro-pantallas-movil.jpg');
}
.slide_2
{ -webkit-animation-delay: 6s; animation-delay: 6s; background-color: #0D4767; background-image: url('http://eduholding.gutierrezedgar.com/img/intro-unidades-moviles.jpg');
}
.slide_3
{ -webkit-animation-delay: 12s; animation-delay: 12s; background-color: #699FC9; background-image: url('http://eduholding.gutierrezedgar.com/img/intro-simuladores-movil.jpg');
}
.slide_4
{ -webkit-animation-delay: 18s; animation-delay: 18s; background-color: #B2BAC6; background-image: url('http://eduholding.gutierrezedgar.com/img/laboratorios-online-movil.jpg');
}
/*========================
QUIENES SOMOS
========================*/
.empresa {}
.empresa .articulo {}
.empresa .iconos { color: rgb(4, 100, 144); padding: 3em; padding: 5vh 0; background-color: #fff;
}
.empresa .iconos .explicacion {}
.empresa .icono { display: inline-block; padding: 1em; font-size: 1em;
}
.empresa .iconos .icono::before { content: ''; display: block; font-size: 3em; padding: 0.2em; color: rgb(93, 146, 192);
}
.empresa .iconos .design::before { content: '\f247';
}
.empresa .iconos .integramos::before { content: '\f066';
}
.empresa .iconos .equipamos::before { content: '\f085';
}
.empresa .titulo { font-size: 1.6em; padding-top: .5em; font-weight: 300;
}
.empresa .titulo b { font-weight: 400;
}
.empresa .somos { background: -webkit-linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); background: linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); color: #fff;
}
.empresa .somos figure { min-height: 60vh; background-color: rgba(245, 248, 250, .9); background-image: url('http://eduholding.gutierrezedgar.com/img/fondo-video.jpg'); background-size: cover; background-position: center center;
}
.empresa .somos .parrafo { padding: 2em; font-size: 1.2em; font-weight: 300;
}
.empresa .misionvision { background-color: #fff; padding: 2em 2em 4em;
}
.empresa .misionvision .titulo::before { font-size: 2.5em; display: block; line-height: 1.2em;
}
.empresa .misionvision .parrafo {}
.empresa .titulo.mision::before { content: '\f05b'
}
.empresa .titulo.mision + .parrafo { padding-bottom: 1em;
}
.empresa .titulo.vision::before { content: '\f06e';
}
.empresa .titulo.vision + .parrafo {}
/*========================
PROYECTOS
========================*/
.proyectos {}
.proyectos .titulo { background-image: url('http://eduholding.gutierrezedgar.com/imimg/proyectos-eduholding-res-movil.png');
}
.proyectos .parrafo { padding: 2em;
}
/*========================
SERVICIOS
========================*/
.servicios {}
.servicios h4.titulo { padding: 1.5em 1em .5em; font-weight: 300; font-size: 1.8em; text-align: left;
}
.servicios .articulo { padding-top: 1.5em; text-align: left; position: relative; min-height: 50vh;
}
.servicios .titulo { padding-left: 1em;
}
.servicios h5.titulo { padding: 1em; padding-left: 2em;
}
.servicios h5.icono::before { content: '\f01d'; display: inline-block; padding-right: 1em;
}
.servicios h6.titulo { font-size: 1em; padding: 1em 10%;
}
.servicios .portada { background-image: url('http://eduholding.gutierrezedgar.com/imimg/servicios.jpg');
}
.servicios .parrafo { text-align: justify; padding: 1em 2em;
}
.especificaciones { padding-left: 10%; list-style-type: none; font-size: 0.8em;
}
.especificaciones ~ ul.especificaciones { padding-top: 1em;
}
.especificaciones ~ p.especificaciones { padding-top: 0.5em;
}
p.especificaciones { font-size: 1em; padding-left: 6%;
}
.especificaciones li { padding-left: 1em; line-height: 1.5em; position: relative;
}
.especificaciones ul { padding-left: 2em; list-style-type: none; font-size: 0.9em;
}
.especificaciones li::before { content: ''; width: .3em; height: .3em; background-color: #0090CB; position: absolute; left: 0em; top: 50%; border-radius: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
.especificaciones .titulo { font-size: 1.2em; padding-bottom: .5em; padding-left: 0; color: rgba(0, 0, 0, .6);
}
.especificaciones .titulo::before { display: none;
}
.servicios .articulo .logo { max-width: 14em; margin: .5em; margin-left: 5%;
}
.logo-promethean { display: block; margin: .5em; margin-left: 5%; max-width: 14em;
}
.logo-activinspire { position: absolute; right: 10%; width: 35%; top: 66%;
}
img.logo-classflow { margin: 8% 10% 1em; max-width: 12em; display: block;
}
img.logo-etf { padding-top: 1.5em;
}
.logo-netsupport,
.logo-jp-ik,
.logo-etf { display: block;
}
.servicios .btn.cta { display: inline-block; margin: 1em 1em 2em 10%; text-Decoration: none; padding: .5em 2em; border-radius: 10px; background: rgb(53, 107, 148); color: white; font-weight: 400; box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .2), 0 2px 2px rgba(0, 0, 0, 0.2);
}
.servicios .imagen-producto { position: relative; background-position: top center; background-repeat: no-repeat; background-size: 100% auto; min-height: 60vw; position: relative; width: 100%; margin-bottom: 1em;
}
.activeboard .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-con-foto-movil.png'); background-size: auto 100%; min-height: 80vw;
}
.activepanel .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activepanel-res-movil.jpg');
}
.activinspire .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activinspire-home-res-movil.jpg'); margin-bottom: 3em;
}
.classflow .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/classflow-portada-home-res-movil.png'); background-size: contain;
}
.rosseta .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/rosseta-stone-home-portada-montaje.jpg');
}
.rosseta .imagen-producto.dos { background-image: url('http://eduholding.gutierrezedgar.com/img/rosseta-stone-edades-res-movil.jpg');
}
.netsupport .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/netsupport.jpg'); background-size: 101% auto; background-position: 50% -2px;
}
.jp-ik .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/etf-services.jpg');
}
.etf .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/jpik-services.jpg');
}
.educar-editores .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/educar-editores-movil.jpg');
}
.rosseta .dos .cta { margin-left: 0; position: relative; z-index: 2;
}
.niveles { position: absolute; top: 0; background: #4B7BA7; width: 6em; height: 6em; border-radius: 50%; right: 5%; -webkit-transform: translateY(-15%); transform: translateY(-15%); color: white; text-align: center; font-size: 1.5em;
}
.niveles p { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); line-height: 0.8em; width: 100%; max-width: initial;
}
.niveles b,
.niveles span { font-size: .6em; line-height: 1em;
}
.niveles span { text-transform: uppercase; display: inline-block;
}
.niveles b { display: block; padding: 0 1.6em; -webkit-transform: scale(1.3) translateY(20%); transform: scale(1.3) translateY(20%);
}
.servicios .btn.mas-info { display: inline-block !important; background: #0C4565; color: white; text-decoration: none; padding: .5em 1em; font-size: 0.9em; margin: 0; border-radius: 5px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .5);
}
.netsupport .school { position: absolute; width: 12em; right: 0; padding: 1em; top: 0; -webkit-transform: translateY(-30%); transform: translateY(-30%); background: rgba(255, 255, 255, .8);
}
/*========================
NUESTROS ÉXITOS
========================*/
/*========================
ALIADOS
========================*/
/*========================
PIE DE PAGINA
========================*/
.pie-pagina { background-color: #134060; background-image: url('http://eduholding.gutierrezedgar.com/img/contacto-fondo-res-movil.jpg'); background-size: 130% auto; background-position: top left; background-repeat: no-repeat; color: white; position: relative; overflow: hidden;
}
.pie-pagina::before { content: ''; position: absolute; width: 100%; height: 100%; background-image: -webkit-linear-gradient(top, rgba(19, 64, 96, 0) 0%, rgba(19, 64, 96, 1) 50%); background-image: linear-gradient(to bottom, rgba(19, 64, 96, 0) 0%, rgba(19, 64, 96, 1) 50%); top: 0; left: 0; z-index: 1;
}
.pie-pagina .formulario { position: relative; z-index: 2; max-width: 30em; margin: auto; padding-bottom: 3em;
}
.pie-pagina .titulo { padding: 0.6em 1em; background-color: rgba(255, 255, 255, .8); margin-bottom: 30vh; position: relative;
}
.pie-pagina .titulo::before { content: 'todos los campos son obligatorios'; position: absolute; top: 110%; font-size: .45em; color: white; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; text-transform: uppercase;
}
.pie-pagina label { display: block; font-size: 0.8em; text-transform: uppercase; padding: 0.2em;
}
.pie-pagina .formulario label.enfoque { padding-top: 0.5em;
}
.seleccion { padding: 0 0.5em 0.5em;
}
.seleccion li { display: inline-block; vertical-align: middle;
}
.seleccion li input { position: absolute; opacity: 0; z-index: -1;
}
.pie-pagina .entrada-texto { width: 90%; border: none; font-size: 1em; padding: 0.4em 1em; background-color: rgba(255, 255, 255, .8); color: #134060;
}
.entrada-texto.primer { border-radius: 10px 10px 0 0;
}
.seleccion label { padding: 0.5em 1em; border: 1px solid rgba(255, 255, 255, .5); margin: 0.4em 0.2em; border-radius: 5px; font-size: 0.6em; letter-spacing: 0.05em;
}
.seleccion label:focus,
.seleccion label:hover,
.seleccion input:focus + label { box-shadow: inset 0 3em 0 0 rgba(255, 255, 255, .2);
}
.btn.enviar { display: inline-block; margin: auto; width: 90%; font-size: 1.2em; cursor: pointer; text-transform: uppercase; text-decoration: none; padding: .5em 2em; border-radius: 0 0 10px 10px; border: none; background: rgb(53, 107, 148); color: white; font-weight: 400; box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, .2), 0 5px 1em rgba(0, 0, 0, 0.2);
}
.seleccion input:checked + label { background: rgba(255, 255, 255, .8); border: 1px solid rgba(255, 255, 255, 0); color: #134060;
}
.otra-opcion:not(:checked) ~ .otro { position: absolute; opacity: 0;
}
.otra-opcion:checked ~ .entrada-texto.otro { -webkit-animation: aparece-abajo .5s ease .5s both; animation: aparece-abajo .5s ease .5s both; position: relative; z-index: 1;
}
.otra-opcion:checked + label { width: 6em; text-align: center; display: inline-block;
}
.entrada-texto.otro { font-size: 1em; min-width: 10em; padding: 0.4em; border-radius: 5px; width: calc(100% - 5.5em);
}
.comentario { min-height: 20vh;
}
.pie-pagina .info { position: relative; z-index: 10; font-size: .9em; background-color: rgba(0, 0, 0, 0.1); padding: 2em 5% 3em;
}
.info .logo { max-width: 8em; display: inline-block;
}
.info ul { padding-bottom: 1em;
}
.info li { display: inline-block;
}
.info .enlace { color: rgb(143, 183, 214); text-decoration: none; padding: 0.4em; display: inline-block;
}
.info span span { color: rgb(143, 183, 214);
}
.info span:nth-child(2) { display: inline-block; padding-left: 1em;
}
.info p { width: 90%; margin: auto;
}
.redes { background-color: rgba(0, 0, 0, .2); position: relative; z-index: 10; padding: .5em 10%;
}
.redes a { display: inline-block; width: 20%; color: rgba(255, 255, 255, 0); text-decoration: none; padding: 0.3em; font-size: 2px;
}
.redes a:hover::before { color: #fff;
}
.redes .icono::before { content: '\f1e0'; font-size: 2.4rem; color: rgb(105, 159, 201);
}
.icono.facebook::before { content: '\f082';
}
.icono.youtube::before { content: '\f166';
}
.icono.twitter::before { content: '\f081';
}
/*===========================
PRODUCT BOX
=============================*/
.pop-up
{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 700; opacity: 0; pointer-events: none;
}
.pop-up:target
{ pointer-events: initial; opacity: 1;
}
.pop-up iframe
{ width: 100%; height: 100%;
}
.product-box { background-color: rgba(255,255,255,1); position: fixed; width: 90%; top: 50vh; left: 50%; z-index: 600; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); box-shadow: 0 0 0 100vw rgba(245,245,245,.9); padding-right: 4em;
}
.product-box,
.trigger.product:first-child
{ border-radius: 0 10px 0 0;
}
.product-box .logo
{ width: 10em; height: 3em; background: #fff; position: absolute; top: -2.9em; left: 0; border-radius: 10px 0 0 0; background-image: url('http://eduholding.gutierrezedgar.com/img/promethean-logo.png'); background-size: 85% auto; background-repeat: no-repeat; background-position: center top;
}
.product-box .logo .volver
{ position: absolute; background: #000; color: #fff; text-align: center; height: 2.5em; width: 8em; line-height: 2.5em; font-size: .8em; padding: 0 1em; left: 100%; bottom: 0; text-decoration: none; border-radius: 0 10px 0 0;
}
.product-box input
{ position: absolute; pointer-events: none; opacity: 0;
}
.volver::before
{ font-family: 'FontAwesome'; content: '\f060'; display: inline-block; padding: 0 .6em 0 0;
}
.box
{ padding-top: 1em;
}
.menu-products
{ position: absolute; width: 4em; height: 100%; right: 0; top: 0; text-align: right; /*background-color: rgb(26,87,128);*/
}
.menu-products::after
{ content: ''; display: block; clear:both;
}
.trigger.product
{ float: right; display: block; background-color: rgb(26,87,128); height: calc(100%/7); width: 100%; line-height: 2em; text-align: center; -webkit-transition: none; transition: none; background-size: 100% auto; background-position: center; background-repeat: no-repeat;
}
#tag1:checked ~ .menu-products .trigger[for="tag1"],
#tag2:checked ~ .menu-products .trigger[for="tag2"],
#tag3:checked ~ .menu-products .trigger[for="tag3"],
#tag4:checked ~ .menu-products .trigger[for="tag4"],
#tag5:checked ~ .menu-products .trigger[for="tag5"],
#tag6:checked ~ .menu-products .trigger[for="tag6"],
#tag7:checked ~ .menu-products .trigger[for="tag7"]
{ background-color: #fff;
}
.trigger.product:hover,
.trigger.product:focus
{ box-shadow: inset 0 0 0 8em rgba(255,255,255,.3) !important;
}
.trigger.product:nth-child(odd)
{ background-color: rgb(48,110,148);
}
.trigger.product.otro
{ box-shadow: inset 0 0 0 5em rgba(255,255,255,.1);
}
.trigger.activboard
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-01-white-activboard.png'); }
/*ACTIVBOARD*/
.activboard:checked ~ .menu-products .trigger.activboard
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-01-activwall.png'); }
.activboard:checked ~ .box .img01:checked ~ .previews .foto
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-foto-movil.png');
}
.activboard:checked ~ .box .img02:checked ~ .previews .foto
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activboard-frente-movil.png');
}
.activboard:checked ~ .box .img03:checked ~ .previews .foto
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activboard-lado-movil.png');
}
.activboard:checked ~ .box .img04:checked ~ .previews .foto
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-proyector-frente-movil.png');
}
.activboard:checked ~ .box .img05:checked ~ .previews .foto
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activoboard-proyector-3cuartos-movil.png');
}
.box .img01:checked ~ .previews .trigger.preview.img01,
.box .img02:checked ~ .previews .trigger.preview.img02,
.box .img03:checked ~ .previews .trigger.preview.img03,
.box .img04:checked ~ .previews .trigger.preview.img04,
.box .img05:checked ~ .previews .trigger.preview.img05
{ box-shadow: inset 0 0 0 3em rgba(26,87,128,.3);
}
.activboard:checked ~ .box .trigger.preview.img01
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-foto-movil.png');
}
.activboard:checked ~ .box .trigger.preview.img02
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activboard-frente-movil.png');
}
.activboard:checked ~ .box .trigger.preview.img03
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activboard-lado-movil.png');
}
.activboard:checked ~ .box .trigger.preview.img04
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-proyector-frente-movil.png');
}
.activboard:checked ~ .box .trigger.preview.img05
{ background-image: url('http://eduholding.gutierrezedgar.com/img/activoboard-proyector-3cuartos-movil.png');
}
.trigger.activpanel
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-02-white-activpanel.png'); }
.activpanel:checked ~ .menu-products .trigger.activpanel
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-02-activpanel.png'); }
.trigger.activinspire
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-03-white-activinspire.png'); }
.activinspire:checked ~ .menu-products .trigger.activinspire
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-03-activinspire.png'); }
.trigger.classflow
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-04-white-classflow.png'); }
.classflow:checked ~ .menu-products .trigger.classflow
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-04-classflow.png'); }
.trigger.activtable
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-05-white-activtable.png'); }
.activtable:checked ~ .menu-products .trigger.activtable
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-05-activtable.png'); }
.trigger.activoice
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-06-white-activoice.png'); }
.activoice:checked ~ .menu-products .trigger.activoice
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-06-activoice.png'); }
.trigger.accesorios
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-07-white-accesorios.png'); }
.accesorios:checked ~ .menu-products .trigger.accesorios
{ background-image: url('http://eduholding.gutierrezedgar.com/img/icono-promethean-07-accesorios.png'); }
.previews
{ text-align: center; max-width: 40em;
}
.previews,
.product-box .descripcion
{ display: inline-block; vertical-align: top; width: 100%;
}
.previews .foto
{ width: 100%; height: 50%; min-height: 50vh; max-height: 50em; background-size: auto 100%; background-repeat: no-repeat; background-position: center;
}
.trigger.preview
{ display: inline-block; width: 18%; min-width: 2em; max-width: 8em; width: 5vw; margin: 1em 0; height: 4em; min-height: 2em; max-height: 8em; height: 5vw; background-color: #ddd; background-size: cover; background-position: center;
}
.trigger.preview:focus,
.trigger.preview:hover
{ box-shadow: inset 0 0 0 5em rgba(255,255,255,.5);
}
.nombre-producto
{ font-size: 1.2em; padding: .3em 0;
}
.product-box .descripcion
{ font-size: .9em; padding: 1em 2em 2em; max-width: 30em;
}
.product-box .btn.contacto
{ display: block; width: 100%; max-width: 16em; padding: .5em 1em; background-color: rgb(26,87,128); color: #fff; border-radius: 0 10px 10px 10px; text-decoration: none; text-transform: uppercase; box-shadow: inset 0 -0.1em 0 0 rgba(0,0,0,2); margin-bottom: -1.5em;
}
/*========================
ANIMATIONS
========================*/
@-webkit-keyframes aparece-abajo { 0% { display: none; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 10% { display: block; } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); display: block; }
}
@keyframes aparece-abajo { 0% { display: none; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 10% { display: block; } 100% { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); display: block; }
}
@-webkit-keyframes slider
{ 0% {-webkit-transform: translateY(-100%) scale(0.5);transform: translateY(-100%) scale(0.5); z-index: 5; } 2.5% {-webkit-transform: translateY(25%) scale(1.5);transform: translateY(25%) scale(1.5);} 5% {-webkit-transform: translateY(0%);transform: translateY(0%);} 90% {-webkit-transform: translateY(0%);transform: translateY(0%);} 95% {-webkit-transform: translateY(-25%);transform: translateY(-25%);} 100% {-webkit-transform: translateY(100%);transform: translateY(100%);}
}
@keyframes slider
{ 0% {-webkit-transform: translateY(-100%) scale(0.5);transform: translateY(-100%) scale(0.5); z-index: 5; } 2.5% {-webkit-transform: translateY(25%) scale(1.5);transform: translateY(25%) scale(1.5);} 5% {-webkit-transform: translateY(0%);transform: translateY(0%);} 90% {-webkit-transform: translateY(0%);transform: translateY(0%);} 95% {-webkit-transform: translateY(-25%);transform: translateY(-25%);} 100% {-webkit-transform: translateY(100%);transform: translateY(100%);}
}
@-webkit-keyframes duracion
{ 0% {-webkit-transform: scaleX(0);transform: scaleX(0);} 100% {-webkit-transform: scaleX(1);transform: scaleX(1);}
}
@keyframes duracion
{ 0% {-webkit-transform: scaleX(0);transform: scaleX(0);} 100% {-webkit-transform: scaleX(1);transform: scaleX(1);}
}
@-webkit-keyframes activa-elemento
{ 0% {pointer-events: none;} 100% {pointer-events: initial;}
}
@keyframes activa-elemento
{ 0% {pointer-events: none;} 100% {pointer-events: initial;}
}
/*========================
MEDIA QUERIES
========================*/
@media (max-width: 900px) and (max-height: 450px) { .encabezado { position: relative; } .logo-landing .menu .logo { -webkit-transition: all .5s ease .5s; transition: all .5s ease .5s; } .contenedor { margin-top: 0; } .menu .logo { overflow: hidden; max-height: 2.5em; background-image: url('http://eduholding.gutierrezedgar.com/img/logo-eduholding-movil.png'); background-size: 100% auto; background-position: center; background-repeat: no-repeat; } .menu .logo img { margin-top: 3em; } .banner .slider figcaption { font-size: 0.9em; }
}
@media (max-width: 1200px) and (max-height: 650px) { .seccion.banner, .empresa .somos figure, .seccion .portada { min-height: 100vh; }
}
@media (min-width: 900px) { .contenedor { margin-top: 4.5em; } .menu .trigger { display: none; } .menu ul { position: relative; opacity: 1; min-width: initial; overflow: visible; max-height: initial; display: inline-block; width: calc(100% - 8.5em); text-align: right; background: rgba(255, 255, 255, 0); font-size: 0.9em; padding-left: 2em; } /*CLASES DINAMICAS CON JQUERY*/ .logo-landing .menu .logo { max-width: 10em; -webkit-transition: all .5s ease .5s; transition: all .5s ease .5s; } .logo-landing .menu ul { width: calc(100% - 12.5em); padding-right: 3em; } .menu li { display: inline-block; margin: -0.3em -0.2em; } .menu .logo, .menu .enlace { -webkit-transition: none; transition: none; font-size: 0.8em; } .menu .enlace { padding: .5em 1em; } .menu .enlace:hover { color: rgb(53, 107, 148); font-weight: 600; background: rgba(81,131,174,.05); border-radius: 10px; } .slide_1 { background-image: url('http://eduholding.gutierrezedgar.com/img/intro-pantallas-full.jpg'); } .slide_2 { background-image: url('http://eduholding.gutierrezedgar.com/img/intro-unidades-moviles-full.jpg'); } .slide_3 { background-image: url('http://eduholding.gutierrezedgar.com/img/intro-simuladores-full.jpg'); } .slide_4 { background-image: url('http://eduholding.gutierrezedgar.com/img/laboratorios-online-full.jpg'); } .empresa .iconos { font-size: 1.2em; } .empresa .icono { padding: 2em; } .empresa .somos { position: relative; font-size: 1.2em; padding-left: 50%; padding-top: 5vw; padding-bottom: 5vw; background: -webkit-linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); background: linear-gradient(45deg, rgb(11, 70, 103) 0%, rgb(88, 139, 183) 100%); } .empresa .somos figure, .empresa .somos .parrafo { display: inline-block; vertical-align: middle; } .empresa .somos figure { width: 50%; height: 100%; position: absolute; left: 0; top: 0; min-height: initial; } .empresa .somos .parrafo { width: 100%; max-width: 40em; } .empresa .titulo { padding: 1em; } .misionvision div { display: inline-block; width: 49%; font-size: 1.2em; vertical-align: top; padding: 0 2em; padding: 0 3vw; } .seccion .portada { min-height: 60vh; background-attachment: fixed; } .proyectos .titulo { background-image: url('http://eduholding.gutierrezedgar.com/img/proyectos-eduholding-res-full.png'); } .servicios .portada { background-image: url('http://eduholding.gutierrezedgar.com/img/servicios-full.jpg'); } .servicios .articulo .texto { min-height: 50vh; } .servicios .articulo .texto, .servicios .articulo .producto { display: inline-block; width: 100%; position: relative; } .servicios .articulo .producto { position: absolute; width: auto; height: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .servicios .imagen-producto { position: absolute; top: 2em; left: 50%; min-height: 100%; width: 45%; } .servicios .izq .imagen-producto, .texto.izq .imagen-producto { left: 5%; } .servicios .articulo.izq { padding-left: 50%; } .activeboard .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activeboard-con-foto-full.png'); margin-top: -5em; } .activepanel .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activepanel-res-full.jpg'); } .activinspire .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/activinspire-home-res-full.jpg'); margin: 2em 0 0; left: 55%; width: 40%; } .educar-editores .imagen-producto { background-image: url('http://eduholding.gutierrezedgar.com/img/educar-editores-full.jpg'); } .logo-activinspire { top: 18vw; } .der.activinspire { margin-bottom: 3em; } .servicios .articulo h6.titulo, .servicios .articulo .especificaciones { width: 48%; padding-left: 8%; padding-right: 0; padding-bottom: 1em; max-width: 50em; } .servicios .tablerosdigitales .activepanel { padding-left: 50%; } .servicios .activepanel .especificaciones { width: 100%; } .servicios .articulo.izq .especificaciones { width: 90%; } .servicios .articulo .parrafo { padding: 2em; padding-left: 5%; max-width: 48%; } .rosseta .logo { display: block; } .rosseta .imagen-producto.dos { background-image: url('http://eduholding.gutierrezedgar.com/img/rosseta-stone-edades-res-full.jpg'); background-position: center; position: relative; left: 5%; margin-top: 1em; min-height: 30vw; display: inline-block; vertical-align: top; } .rosseta .parrafo.dos { display: inline-block; margin-left: 3em; } .niveles { font-size: 1.5em; -webkit-transform: translateX(30%) translateY(-50%); transform: translateX(30%) translateY(-50%); -webkit-transition: none; transition: none; } .pie-pagina { background-size: cover; background-image: url('http://eduholding.gutierrezedgar.com/img/contacto-fondo-res-full.jpg'); background-image: url('http://eduholding.gutierrezedgar.com/img/contacto-fondo-res-full.jpg'); } .pie-pagina .titulo { margin-bottom: 1em; } .pie-pagina::before { opacity: .5; } .pie-pagina .formulario { margin: 3em auto 0; font-size: 1.1em; max-width: 40em; } .pie-pagina .formulario>label { display: inline-block; width: 25%; text-align: left; } .pie-pagina .entrada-texto { width: 64%; margin-bottom: .2em; } .btn.enviar { width: 64%; margin-left: 25.5%; } .info ul, .info .logo { display: inline-block; vertical-align: middle; } .info .logo { max-width: 12em; margin-left: 2em; } .slider::before { height: 5px; }
}
@media (min-width: 1200px) { .menu .logo, .menu .enlace { font-size: 1em; } .contenedor { margin-top: 6.5em; } .seccion.banner { min-height: 60vh; } .banner .slider { background-attachment: fixed; } .servicios .soluciones, .servicios>.lista { display: inline-block; vertical-align: top; width: 49%; padding: 2em 1em; max-width: 50em; } .servicios>.lista { padding-top: 5em; } .empresa .somos figure { width: 60%; } .empresa .somos { padding-left: 60%; } .servicios .articulo .producto { height: 90%; } .servicios .articulo .titulo { margin-top: 1em; } .servicios .activepanel .producto { height: 90%; } .servicios .imagen-producto { left: 50%; } .rosseta .imagen-producto.dos { vertical-align: middle; } .niveles { font-size: 1.8em; -webkit-transform: translateX(30%) translateY(-50%); transform: translateX(30%) translateY(-50%); } .pie-pagina .formulario { max-width: 45em; } .pie-pagina .formulario>label:not(.enfoque) { width: 12%; text-align: right; } .pie-pagina .formulario>input { width: 36%; } .entrada-texto.primer { border-radius: 0; } .seleccion { display: inline-block; } .seleccion label { font-size: .8em; } .pie-pagina .formulario>label { font-size: 1em; } .pie-pagina .formulario label.enfoque { width: inherit; } .pie-pagina .formulario label.enfoque, .seleccion { margin-top: .5em; } .pie-pagina .formulario label.etiqueta-comentario { display: block; text-align: center; width: 100%; } .pie-pagina .entrada-texto.comentario { width: 98%; padding: 0.8em 1em; text-align: justify; } .pie-pagina .formulario>input.enviar { width: 98%; margin: -0.6em; } .pie-pagina .entrada-texto { margin-bottom: .6em; }
}
@media (min-width: 1600px) { .servicios .activeboard .imagen-producto { margin-top: -8em; background-position: left center; min-height: 120%; } .servicios .articulo .parrafo { max-width: 45em; } .rosseta .imagen-producto { margin-top: 3vw; } .rosseta .parrafo.dos { vertical-align: bottom; } .niveles { font-size: 2.5em; -webkit-transform: translateX(50%) translateY(-50%); transform: translateX(50%) translateY(-50%); } .niveles span { font-size: 0.4em; padding: 0 2em; } .niveles b { padding-bottom: 1em; }
}

Version beta EDUHOLDING - Script Codes JS Codes

// VARIABLES GLOBALES var web = $(document); var navicon = $(".menu-principal>.icon"); var trigger = $(".trigger"); var menu_link = $(".menu-principal .enlace"); var seccion = $("section") var menu_contenedor = $('.encabezado'); var limites_menu = menu_contenedor.offset(); var logo = $(".menu .logo img");
// document ready
web.ready(function(){ var anclas = $('a[href*="#"]:not(.mas-info)'); var website = $('html, body');
// prevenir el salto de pagina en enlaces trigger trigger.click(function(event) { event.preventDefault(); }); // prevenir el salto de pagina en enlaces trigger function anclando_A () { anclas.on("click", scroll_A); }; function scroll_A (){ event.preventDefault(); var _href = $(this).attr('href'); website.animate({ scrollTop : $( _href ).offset().top-100 }, 'slow'); }; anclando_A(); // Cuando scroll logo encabezado cambia $(window).on('scroll', function() { if($(window).scrollTop() > limites_menu.top) { menu_contenedor.addClass('logo-landing'); logo.attr("src","http://eduholding.gutierrezedgar.com/img/logo-eduholding-movil.png"); } else { menu_contenedor.removeClass('logo-landing'); logo.attr("src","http://eduholding.gutierrezedgar.com/img/logo-eduholding-full.png"); } });
});
//Smooth scroll chrome
!function(a){a(document).ready(function(){function q(){if(document.URL.indexOf("google.com/reader/view")>-1&&(g=!0),i)for(var a=i.split(/[,\n] ?/),b=a.length;b--;)if(document.URL.indexOf(a[b])>-1){D("mousewheel",v),g=!0;break}}function r(){if(document.body){var a=document.body,b=document.documentElement,c=window.innerHeight,d=a.scrollHeight;if(o=document.compatMode.indexOf("CSS")>=0?b:a,n=a,q(),l=!0,top!=self)j=!0;else if(d>c&&(a.offsetHeight<=c||b.offsetHeight<=c)&&(o.style.height="auto",o.offsetHeight<=c)){var e=document.createElement("div");e.style.clear="both",a.appendChild(e)}if(document.URL.indexOf("mail.google.com")>-1){var f=document.createElement("style");f.innerHTML=".iu { visibility: hidden }",(document.getElementsByTagName("head")[0]||b).appendChild(f)}m||(a.style.backgroundAttachment="scroll"),g&&D("keydown",w)}}function u(c,e,f,g){if(g||(g=1e3),F(e,f),s.push({x:e,y:f,lastX:0>e?.99:-.99,lastY:0>f?.99:-.99,start:+new Date}),!t){var h=function(){for(var i=+new Date,j=0,k=0,l=0;l<s.length;l++){var m=s[l],n=i-m.start,o=n>=b,p=o?1:n/b;d&&(p=H(p));var q=m.x*p-m.lastX>>0,r=m.y*p-m.lastY>>0;j+=q,k+=r,m.lastX+=q,m.lastY+=r,o&&(s.splice(l,1),l--)}if(e){var u=c.scrollLeft;c.scrollLeft+=j,j&&c.scrollLeft===u&&(e=0)}if(f){var v=c.scrollTop;c.scrollTop+=k,k&&c.scrollTop===v&&(f=0)}e||f||(s=[]),s.length?setTimeout(h,g/a+1):t=!1};setTimeout(h,0),t=!0}}function v(a){l||r();var b=a.target,d=B(b);if(!d||a.defaultPrevented||E(n,"embed")||E(b,"embed")&&/\.pdf/i.test(b.src))return!0;var e=a.wheelDeltaX||0,f=a.wheelDeltaY||0;e||f||(f=a.wheelDelta||0),Math.abs(e)>1.2&&(e*=c/120),Math.abs(f)>1.2&&(f*=c/120),u(d,-e,-f),a.preventDefault()}function w(a){var b=a.target,c=a.ctrlKey||a.altKey||a.metaKey;if(/input|textarea|embed/i.test(b.nodeName)||b.isContentEditable||a.defaultPrevented||c)return!0;if(E(b,"button")&&a.keyCode===p.spacebar)return!0;var d,e=0,f=0,g=B(n),i=g.clientHeight;switch(g==document.body&&(i=window.innerHeight),a.keyCode){case p.up:f=-h;break;case p.down:f=h;break;case p.spacebar:d=a.shiftKey?1:-1,f=.9*-d*i;break;case p.pageup:f=.9*-i;break;case p.pagedown:f=.9*i;break;case p.home:f=-g.scrollTop;break;case p.end:var j=g.scrollHeight-g.scrollTop-i;f=j>0?j+10:0;break;case p.left:e=-h;break;case p.right:e=h;break;default:return!0}u(g,e,f),a.preventDefault()}function x(a){n=a.target}function A(a,b){for(var c=a.length;c--;)y[z(a[c])]=b;return b}function B(a){var b=[],c=o.scrollHeight;do{var d=y[z(a)];if(d)return A(b,d);if(b.push(a),c===a.scrollHeight){if(!j||o.clientHeight+10<c)return A(b,document.body)}else if(a.clientHeight+10<a.scrollHeight&&(overflow=getComputedStyle(a,"").getPropertyValue("overflow"),"scroll"===overflow||"auto"===overflow))return A(b,a)}while(a=a.parentNode)}function C(a,b,c){window.addEventListener(a,b,c||!1)}function D(a,b,c){window.removeEventListener(a,b,c||!1)}function E(a,b){return a.nodeName.toLowerCase()===b.toLowerCase()}function F(a,b){a=a>0?1:-1,b=b>0?1:-1,(k.x!==a||k.y!==b)&&(k.x=a,k.y=b,s=[])}function G(a){var b,c,d;return a*=e,1>a?b=a-(1-Math.exp(-a)):(c=Math.exp(-1),a-=1,d=1-Math.exp(-a),b=c+d*(1-c)),b*f}function H(a){return a>=1?1:0>=a?0:(1==f&&(f/=G(1)),G(a))}var n,o,a=150,b=600,c=150,d=!0,e=5,f=1,g=!1,h=50,i="",j=!1,k={x:0,y:0},l=!1,m=!0,p={left:37,up:38,right:39,down:40,spacebar:32,pageup:33,pagedown:34,end:35,home:36},s=[],t=!1,y={};setInterval(function(){y={}},1e4);var z=function(){var a=0;return function(b){return b.uniqueID||(b.uniqueID=a++)}}();/chrome/.test(navigator.userAgent.toLowerCase())&&(C("mousedown",x),C("mousewheel",v),C("keydown",w),C("load",r))})}(jQuery);
(function(d){var p={},e,a,h=document,i=window,f=h.documentElement,j=d.expando;d.event.special.inview={add:function(a){p[a.guid+"-"+this[j]]={data:a,$element:d(this)}},remove:function(a){try{delete p[a.guid+"-"+this[j]]}catch(d){}}};d(i).bind("scroll resize",function(){e=a=null});!f.addEventListener&&f.attachEvent&&f.attachEvent("onfocusin",function(){a=null});setInterval(function(){var k=d(),j,n=0;d.each(p,function(a,b){var c=b.data.selector,d=b.$element;k=k.add(c?d.find(c):d)});if(j=k.length){var b;
if(!(b=e)){var g={height:i.innerHeight,width:i.innerWidth};if(!g.height&&((b=h.compatMode)||!d.support.boxModel))b="CSS1Compat"===b?f:h.body,g={height:b.clientHeight,width:b.clientWidth};b=g}e=b;for(a=a||{top:i.pageYOffset||f.scrollTop||h.body.scrollTop,left:i.pageXOffset||f.scrollLeft||h.body.scrollLeft};n<j;n++)if(d.contains(f,k[n])){b=d(k[n]);var l=b.height(),m=b.width(),c=b.offset(),g=b.data("inview");if(!a||!e)break;c.top+l>a.top&&c.top<a.top+e.height&&c.left+m>a.left&&c.left<a.left+e.width?
(m=a.left>c.left?"right":a.left+e.width<c.left+m?"left":"both",l=a.top>c.top?"bottom":a.top+e.height<c.top+l?"top":"both",c=m+"-"+l,(!g||g!==c)&&b.data("inview",c).trigger("inview",[!0,m,l])):g&&b.data("inview",!1).trigger("inview",[!1])}}},250)})(jQuery);
Version beta EDUHOLDING - Script Codes
Version beta EDUHOLDING - Script Codes
Home Page Home
Developer Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;)
Username g3kdigital
Uploaded October 17, 2022
Rating 3
Size 17,266 Kb
Views 24,288
Do you need developer help for Version beta EDUHOLDING?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Edgar Gutierrez: Diseñador Web Gráfico: Googleame Como "g3kdigital" ;) (g3kdigital) Script Codes
Name
Slider Molon CSS3 RWD, background-image
Menu responsive con imagenes demo de ayuda en foro
Aviso de Cookies
Menu Arbol Vr 1.4
Menu Arbol Vr 1.3
Demo preload liquid css only
Cambiar idioma solo css
Personalizando el input file
INTENTO FALLIDO DE ANIMACION SVG
Correo fraudulento de Davivienda
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!