File: /home/mediabou/www/mediabou.com/index.php
<!DOCTYPE HTML>
<html>
<head>
<?php include('common/headTags.php'); ?>
</head>
<body>
<div class="container-fluid">
<!-- DESKTOP MENU -->
<a href="#section1"><img src="img/logo-med.png" id="mainLogo" class="visible-desktop"></a>
<ul id="navigation" class="visible-desktop">
<li><a href="#section2">Sobre Nosotros</a></li>
<li><a href="#section3">Nuestros Servicios</a></li>
<li><a href="#section4">Contáctenos</a></li>
</ul>
<section id="section1">
<!-- TABLET MENU -->
<img src="img/logo-med.png" id="mainLogoTablet" class="visible-tablet pull-left">
<ul id="navigationTablet" class="visible-tablet pull-right">
<li><a href="#section2">Sobre Nosotros</a></li>
<li><a href="#section3">Nuestros Servicios</a></li>
<li><a href="#section4">Contáctenos</a></li>
</ul>
<!-- PHONE MENU -->
<img src="img/logo-small.png" id="mainLogoPhone" class="visible-phone">
<ul id="navigationPhone" class="visible-phone">
<li><a href="#section2">Sobre Nosotros</a></li>
<li><a href="#section3">Nuestros Servicios</a></li>
<li><a href="#section4">Contáctenos</a></li>
</ul>
<div id="slogan" class="visible-desktop">
<img src="img/titles/1.png" id="slogan1">
<img src="img/titles/2.png" id="slogan2">
<img src="img/titles/3.png" id="slogan3">
<img src="img/titles/4.png" id="slogan4">
</div>
<div id="slogan" class="visible-tablet">
<img src="img/titles/1md.png">
<img src="img/titles/2md.png">
<img src="img/titles/3md.png">
<img src="img/titles/4md.png">
</div>
<div id="sloganPhone" class="visible-phone">
<img src="img/titles/1lw.png">
<img src="img/titles/2lw.png">
<img src="img/titles/3lw.png">
<img src="img/titles/4lw.png">
</div>
</section> <!-- FIN SECCION 1 -->
<!-- SECCION 2 -->
<!-- VISIBLE DESKTOP -->
<section id="section2" class="visible-desktop">
<h2 id="sec2el1" class="relative">Sobre Nosotros</h2>
<img src="img/wm/3.png" class="pull-right mannequins relative" id="sec2el2">
<h3 id="sec2el3" class="relative">¿Quienes Somos?</h3>
<p id="sec2el4" class="relative">Nos encargamos de planificar como se va a difundir la campaña publicitaria, en qué medios y en qué espacios concretos, para que sea vista, leída y escuchada por el publico objetivo.</p>
<h3 id="sec2el5" class="relative">Misión y Visión</h3>
<p id="sec2el6" class="relative">Ser la empresa con la mejor atención personalizada para crear, preparar, programar y ejecutar publicidad por cuenta de un anunciante.</p>
<p id="sec2el7" class="relative">Satisfacer las necesidades de los clientes y siempre INNOVAR para diferenciarse del resto del mercado.</p>
</section>
<!-- VISIBLE TABLET -->
<section id="section2" class="visible-tablet">
<h2>Sobre Nosotros</h2>
<img src="img/wm/3.png" class="pull-right mannequins">
<h3>¿Quienes Somos?</h3>
<p>Nos encargamos de planificar como se va a difundir la campaña publicitaria, en qué medios y en qué espacios concretos, para que sea vista, leída y escuchada por el publico objetivo.</p>
<h3>Misión y Visión</h3>
<p>Ser la empresa con la mejor atención personalizada para crear, preparar, programar y ejecutar publicidad por cuenta de un anunciante.</p>
<p>Satisfacer las necesidades de los clientes y siempre INNOVAR para diferenciarse del resto del mercado.</p>
</section>
<!-- VISIBLE PHONE -->
<section id="section2" class="visible-phone">
<h2>Sobre Nosotros</h2>
<center><img src="img/wm/3.png" class="mannequins"></center>
<h3>¿Quienes Somos?</h3>
<p>Nos encargamos de planificar como se va a difundir la campaña publicitaria, en qué medios y en qué espacios concretos, para que sea vista, leída y escuchada por el publico objetivo.</p>
<h3>Misión y Visión</h3>
<p>Ser la empresa con la mejor atención personalizada para crear, preparar, programar y ejecutar publicidad por cuenta de un anunciante.</p>
<p>Satisfacer las necesidades de los clientes y siempre INNOVAR para diferenciarse del resto del mercado.</p>
</section>
<!-- FIN DE SECCION 2 -->
<!-- SECCION 3 -->
<!-- VISIBLE DESKTOP -->
<section id="section3" class="visible-desktop">
<h2 id="sec3el1" class="relative">Nuestros Servicios</h2>
<h3 id="sec3el3" class="relative">Compra de Medios</h3>
<p id="sec3el4" class="relative">Dedicado a la gestión comercial de compra de los espacios, que obliga a mantener relación con los departamentos comerciales de medios. El área de compra puede estar organizado por medios (tv, prensa, radio y otros).</p>
<h3 id="sec3el5" class="relative">Planificación</h3>
<p id="sec3el6" class="relative">Se elabora los planes de medios de las campañas en función de los datos, los objetivos y el presupuesto, incluyendo la decisión de cómo distribuirlo y el calendario de apariciones.</p>
<img src="img/wm/6.png" class="pull-right mannequins relative" id="sec3el7">
<h3 id="sec3el8" class="relative">Investigación</h3>
<p id="sec3el9" class="relative">Centrada en el seguimiento y análisis de audiencia para conocer como se distribuyen en los medios y sus características.</p>
<h3 id="sec3el10" class="relative">Facturación y Administración</h3>
<p id="sec3el11" class="relative">
Control de tráfico y gestión financiera.<br>
Facturas junto con los comprobantes.
</p>
</section>
<!-- VISIBLE TABLET -->
<section id="section3" class="visible-tablet">
<h2>Nuestros Servicios</h2>
<h3>Compra de Medios</h3>
<p>Dedicado a la gestión comercial de compra de los espacios, que obliga a mantener relación con los departamentos comerciales de medios. El área de compra puede estar organizado por medios (tv, prensa, radio y otros).</p>
<h3>Planificación</h3>
<p>Se elabora los planes de medios de las campañas en función de los datos, los objetivos y el presupuesto, incluyendo la decisión de cómo distribuirlo y el calendario de apariciones.</p>
<img src="img/wm/6.png" class="pull-right mannequins">
<h3>Investigación</h3>
<p>Centrada en el seguimiento y análisis de audiencia para conocer como se distribuyen en los medios y sus características.</p>
<h3>Facturación y Administración</h3>
<p>
Control de tráfico y gestión financiera.<br>
Facturas junto con los comprobantes.
</p>
</section>
<!-- VISIBLE PHONE -->
<section id="section3" class="visible-phone">
<h2>Nuestros Servicios</h2>
<h3>Compra de Medios</h3>
<p>Dedicado a la gestión comercial de compra de los espacios, que obliga a mantener relación con los departamentos comerciales de medios. El área de compra puede estar organizado por medios (tv, prensa, radio y otros).</p>
<h3>Planificación</h3>
<p>Se elabora los planes de medios de las campañas en función de los datos, los objetivos y el presupuesto, incluyendo la decisión de cómo distribuirlo y el calendario de apariciones.</p>
<center><img src="img/wm/6.png" class="mannequins"></center>
<h3>Investigación</h3>
<p>Centrada en el seguimiento y análisis de audiencia para conocer como se distribuyen en los medios y sus características.</p>
<h3>Facturación y Administración</h3>
<p>
Control de tráfico y gestión financiera.<br>
Facturas junto con los comprobantes.
</p>
</section>
<!-- FIN DE SECCION 3 -->
<!-- SECCION 4 -->
<!-- VISIBLE DESKTOP -->
<section id="section4" class="visible-desktop">
<h2 id="sec4el2" class="relative">Contáctenos</h2>
<img src="img/wm/1.png" class="pull-left mannequins relative" id="sec4el1">
<h3 id="sec4el3" class="relative">Escríbanos</h3>
<form id="contact" name="contact" method="post" action="send.php" class="relative">
<div id="comentarios" class="pull-right">
<label for="comentario">Comentarios:</label>
<textarea name="comentario" class="c-textarea" id="comentario"></textarea>
<input name="send" type="submit" class="c-input" id="send" value="Enviar" />
</div>
<label for="nombre">Nombre:</label>
<input name="nombre" type="text" class="c-textfield" id="nombre" />
<label for="email">Correo electrónico:</label>
<input name="email" type="text" class="c-textfield" id="email" />
<label for="remail">Repetir correo:</label>
<input name="remail" type="text" class="c-textfield" id="remail" />
<label for="telefono">Teléfono:</label>
<input name="telefono" type="text" class="c-textfield" id="telefono" />
</form>
</section>
<!-- VISIBLE TABLET -->
<section id="section4" class="visible-tablet">
<h2>Contáctenos</h2>
<h3>Escríbanos</h3>
<form id="contact" name="contact" method="post" action="send.php">
<label for="nombre">Nombre:</label>
<input name="nombre" type="text" class="c-textfield" id="nombre" />
<label for="email">Correo electrónico:</label>
<input name="email" type="text" class="c-textfield" id="email" />
<label for="remail">Repetir correo:</label>
<input name="remail" type="text" class="c-textfield" id="remail" />
<label for="telefono">Teléfono:</label>
<input name="telefono" type="text" class="c-textfield" id="telefono" />
<label for="comentario">Comentarios:</label>
<textarea name="comentario" class="c-textarea-mobile" id="comentario"></textarea>
<input name="send" type="submit" class="c-input" id="send" value="Enviar" />
</form>
<center><img src="img/wm/1.png" class="mannequins"></center>
</section>
<!-- VISIBLE PHONE -->
<section id="section4" class="visible-phone">
<h2>Contáctenos</h2>
<h3>Escríbanos</h3>
<form id="contact" name="contact" method="post" action="send.php">
<label for="nombre">Nombre:</label>
<input name="nombre" type="text" class="c-textfield" id="nombre" />
<label for="email">Correo electrónico:</label>
<input name="email" type="text" class="c-textfield" id="email" />
<label for="remail">Repetir correo:</label>
<input name="remail" type="text" class="c-textfield" id="remail" />
<label for="telefono">Teléfono:</label>
<input name="telefono" type="text" class="c-textfield" id="telefono" />
<label for="comentario">Comentarios:</label>
<textarea name="comentario" class="c-textarea-mobile" id="comentario"></textarea>
<input name="send" type="submit" class="c-input" id="send" value="Enviar" />
</form>
<center><img src="img/wm/1.png" class="mannequins"></center>
</section>
<!-- FIN DE SECCION 4 -->
</div> <!-- FIN DE .CONTAINER-FLUID -->
<script>
$(document).ready( function() {
// INIT HOME
TweenMax.from( $('#slogan1'), 1, { opacity: 0, ease:Bounce.easeIn } );
TweenMax.from( $('#slogan2'), 1.5, { opacity: 0, right:'100px', ease:Elastic.easeOut, delay: .3 } );
TweenMax.from( $('#slogan3'), 1, { opacity: 0, top:'50px', ease:Bounce.easeOut, delay: .7 } );
TweenMax.from( $('#slogan4'), .8, { opacity: 0, left:'600px', ease:Quart.easeOut, delay: 1 } );
// SUPERSCROLLORAMA START
var controller = $.superscrollorama();
var scrollDuration = 2000;
var scrollDuration2 = 500;
var scrollDuration3 = 100;
// SECTION 1
controller.addTween('#slogan3', TweenMax.to( $('#slogan1'), 1, {opacity: 0, top:'1000px'}), scrollDuration);
controller.addTween('#slogan3', TweenMax.to( $('#slogan2'), 1, {opacity: 0, top:'900px'}), scrollDuration);
controller.addTween('#slogan3', TweenMax.to( $('#slogan3'), 1, {opacity: 0, top:'800px'}), scrollDuration);
controller.addTween('#slogan3', TweenMax.to( $('#slogan4'), 1, {opacity: 0, top:'700px'}), scrollDuration);
// SECTION 2
controller.addTween('#section2', TweenMax.from( $('#sec2el1'), .5, {opacity: 0, left:'1000px'}), scrollDuration2);
controller.addTween('#section2', TweenMax.from( $('#sec2el2'), .5, {opacity: 0, top:'60px'}), scrollDuration2);
controller.addTween('#section2', TweenMax.from( $('#sec2el3'), .5, {opacity: 0, right:'500px'}), scrollDuration2);
controller.addTween('#section2', TweenMax.from( $('#sec2el4'), .5, {opacity: 0, bottom:'100px'}), scrollDuration2);
controller.addTween('#sec2el1', TweenMax.from( $('#sec2el5'), .5, {opacity: 0, right:'500px'}), scrollDuration3);
controller.addTween('#sec2el1', TweenMax.from( $('#sec2el6'), .5, {opacity: 0, bottom:'100px'}), scrollDuration3);
controller.addTween('#sec2el1', TweenMax.from( $('#sec2el7'), .5, {opacity: 0, bottom:'100px'}), scrollDuration3);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el1'), .5, {opacity: 0, top:'1000px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el2'), .5, {opacity: 0, top:'900px', left:'500px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el3'), .5, {opacity: 0, top:'800px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el4'), .5, {opacity: 0, top:'700px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el5'), .5, {opacity: 0, top:'600px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el6'), .5, {opacity: 0, top:'500px'}), scrollDuration);
controller.addTween('#sec2el7', TweenMax.to( $('#sec2el7'), .5, {opacity: 0, top:'400px'}), scrollDuration);
// SECTION 3
controller.addTween('#section3', TweenMax.from( $('#sec3el1'), .5, {opacity: 0, left:'1000px'}), scrollDuration2);
controller.addTween('#section3', TweenMax.from( $('#sec3el3'), .5, {opacity: 0, right:'500px'}), scrollDuration2);
controller.addTween('#section3', TweenMax.from( $('#sec3el4'), .5, {opacity: 0, bottom:'100px'}), scrollDuration2);
controller.addTween('#section3', TweenMax.from( $('#sec3el5'), .5, {opacity: 0, right:'500px'}), scrollDuration2);
controller.addTween('#section3', TweenMax.from( $('#sec3el6'), .5, {opacity: 0, bottom:'100px'}), scrollDuration2);
controller.addTween('#sec3el3', TweenMax.from( $('#sec3el7'), .5, {opacity: 0, top:'60px'}), scrollDuration2);
controller.addTween('#sec3el3', TweenMax.from( $('#sec3el8'), .5, {opacity: 0, right:'500px'}), scrollDuration2);
controller.addTween('#sec3el3', TweenMax.from( $('#sec3el9'), .5, {opacity: 0, bottom:'100px'}), scrollDuration2);
controller.addTween('#sec3el3', TweenMax.from( $('#sec3el10'), .5, {opacity: 0, right:'500px'}), scrollDuration2);
controller.addTween('#sec3el3', TweenMax.from( $('#sec3el11'), .5, {opacity: 0, bottom:'100px'}), scrollDuration2);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el1'), .5, {opacity: 0, top:'1400px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el3'), .5, {opacity: 0, top:'1200px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el4'), .5, {opacity: 0, top:'1100px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el5'), .5, {opacity: 0, top:'1000px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el6'), .5, {opacity: 0, top:'900px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el7'), .5, {opacity: 0, top:'800px', left:'500px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el8'), .5, {opacity: 0, top:'700px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el9'), .5, {opacity: 0, top:'600px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el10'), .5, {opacity: 0, top:'500px'}), scrollDuration);
controller.addTween('#sec3el10', TweenMax.to( $('#sec3el11'), .5, {opacity: 0, top:'400px'}), scrollDuration);
// SECTION 4
controller.addTween('#section4', TweenMax.from( $('#sec4el1'), .5, {opacity: 0, bottom:'1000px'}), 600);
controller.addTween('#section4', TweenMax.from( $('#sec4el2'), .5, {opacity: 0, bottom:'1000px'}), 600);
controller.addTween('#section4', TweenMax.from( $('#sec4el3'), .5, {opacity: 0, bottom:'1000px'}), 600);
controller.addTween('#section4', TweenMax.from( $('#contact'), .5, {opacity: 0, bottom:'1000px'}), 600);
});
</script>
</body>
</html>