<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<script>
$(document).ready(function(){
$('.business-units').slick({
slidesToShow: 5,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 1500,
arrows: false,
dots: false,
pauseOnHover: false,
responsive: [
{
breakpoint: 992,
settings: { slidesToShow: 4 }
},
{
breakpoint: 768,
settings: { slidesToShow: 3 }
},
{
breakpoint: 520,
settings: { slidesToShow: 1 }
}
]
});
});
</script>
<style>
.header {
background-image: url('https://www.ovnicom.com/lp/servicios/HEADER-LANDING.png');
background-position: center top;
background-size: cover;
margin-bottom: 9vw;}
@media (max-width: 992px){ .header {
margin-bottom: 22vw;}}
.container.slogan {
position: absolute; top: 15%; left: 17.5%; bottom: auto;
width: 32.5vw; height: 15vw; }
@media (max-width: 992px){ .container.slogan {
top: 13%; } }
.container.logo{
position: absolute; top: 4%; bottom: auto; left: 20.1%; width: 8.80vw; height: 2vw; }
@media (max-width: 992px){ .container.logo {
left: 17.7%;
width: 9.9vw; height: 2.3vw; }}
.container.form {
-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
min-width: 230px;
min-height: 550px;
background-color: white;
background-image: url('https://www.ovnicom.com/lp/servicios/FORM.png');
background-repeat: no-repeat;
background-position: center top;
background-size: contain; }
.container.form label {text-align: left; font-size: 0.9em; color:#797979;}
.container.form .form-control { }
@media (max-width: 992px){
.container.form label {font-size: 0.7em;}
.container.form .form-control {font-size: 0.7rem;}}
.container.form .form-group > div {margin-left: auto; margin-right: auto;}
.container.form .form-group button {font-family: 'Open Sans','Roboto', sans-serif; font-weight: 600; background-color: #E5700B; color: white; text-transform: uppercase;}
@media (max-width: 992px){ .container.form .form-group button {
font-size: 0.9em;
font-weight: 500; }}
h2 {
font-family: 'Open Sans','Roboto', sans-serif;
text-align:center; text-transform: uppercase;
font-size: 1.8rem; font-weight: 700;
padding: 20px;}
@media (max-width: 992px){ h2 {
font-size: 1.4rem;
padding-bottom: 0;
margin-bottom: 0; }}
/* Slider */
.slick-slide {margin: 0px 6px; border-color:#E5700B; border:0px; min-height: 250px; font-family: 'Open Sans','Roboto', sans-serif; border-bottom:5px white solid; border-left:1px white solid; border-right:1px white solid; padding-left:3px; padding-right:3px;}
.slick-slide:hover {border-bottom:5px #E5700B solid; border-left:1px #E5700B solid; border-right:1px #E5700B solid;
-webkit-box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.3);
box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.3);
}
.slick-slide img {width: 56%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 2.3em;}
.slick-slide h3 {font-size:14px; font-weight: 800;}
.slick-slide p {font-size:10px; color:#A9A9A9;}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 15px;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {position: relative; top: 0; left: 0; display: block; padding: 20px 20px 20px 0px;}
.slick-track:before,
.slick-track:after {display: table; content: ''; clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 250px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide .slick-loading img {display: none;}
.slick-slide .dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent;}
.slick-arrow .slick-hidden {display: none;}
.footer {background-color:#F3F3F3; font-family: 'Raleway', 'Open Sans','Roboto', sans-serif; font-size: 14px; text-align: left; padding: 3vw 0 2.3vw;}
.footer strong {font-size: 1.1em; font-weight: 600;}
.footer div:first-of-type {margin-right:10vw;}
.copyright {background-color:#E5700B; height:7.44vw; color:white; line-height: 5vw; font-size: 14px;}
</style>
<!-- CONTENEDOR DE LA PAGINA -->
<div class="container-fluid" style="position: relative; max-width: 1600px; text-align: center; padding-right: 0px; padding-left: 0px;">
<!-- CONTENEDOR DEL HEADER -->
<div class="header clearfix" style="max-width: 1600px;max-height: 800px;left: auto;right: auto;text-align: center;width: 100%;height: 50vw;">
<!-- CONTENEDOR DEL LOGO -->
<div class="container logo" style="background: url('https://www.ovnicom.com/lp/servicios/logo_ovnicom.png'); background-position: center top; background-size:100%; background-repeat: no-repeat;">
</div>
<!-- CONTENEDOR DEL SLOGAN -->
<div class="container slogan" style="background: url('https://www.ovnicom.com/lp/servicios/logo_opcion_1.png'); background-position: center top; background-size:100%; background-repeat: no-repeat;">
</div>
</div><!-- contenedor del header -->
<!-- CONTENEDOR DEL FORMULARIO -->
<div class="container form" style="width: 23.3vw; height: 44.5vw; position: absolute; top: 11.7vw; left: auto; bottom: auto; right: 20.5%; padding-right: 0px; padding-left: 0px; text-align: center; padding-top: 3.7vw;">
<div style="position:relative; height:100%; width:100%;">
<span style="font-family: 'Open Sans','Roboto', sans-serif; font-weight: 700; color: rgb(255, 255, 255); font-size: 2.1vw;">Cotiza tu Servicio</span>
<form class="form-horizontal" style="position: absolute; bottom:0px; left:0px; width:100%; ">
<fieldset>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="nombre">Nombre *</label>
<div class="col-md-11">
<input id="nombre" name="nombre" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="email">Correo electrónico *</label>
<div class="col-md-11">
<input id="email" name="email" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="telefono">Número Telefónico *</label>
<div class="col-md-11">
<input id="telefono" name="telefono" type="text" placeholder="" class="form-control input-md" required="">
</div>
</div>
<!-- Select Basic -->
<div class="form-group">
<label class="col-md-12 ml-3 control-label" for="servicio">Servicio *</label>
<div class="col-md-11">
<select id="servicio" name="servicio" class="form-control" style="background-color: #F3F3F3;">
<option value="1">Internet</option>
<option value="2">Telefonía</option>
<option value="3">Cloud Computing</option>
<option value="4">Manage Service</option>
<option value="5">Networking</option>
</select>
</div>
</div>
<!-- Button -->
<div class="form-group">
<div class="col-md-11">
<button id="btnEnviar" name="btnEnviar" class="btn btn-default w-100 mt-3 mb-3">Enviar Consulta</button>
</div>
</div>
</fieldset>
</form>
</div>
</div><!-- contenedor del formulario -->
<h2>Soluciones Inteligentes a través de<br>Nuestra Infraestructura</h2>
<!-- CONTENEDOR DEL CAROUSEL -->
<div class="container p-0" style="">
<section class="business-units slider">
<div class="slide">
<img src="https://www.ovnicom.com/lp/servicios/Ovnifiber.svg">
<h3>Internet</h3>
<p>Ovnicom ofrece una excelente gama de productos y servicios con capacidades de entrega a nivel corporativo que incluyen conexiones simétricas vía fibra óptica con anchos de bandas de: 10, 20, 30 y 50MB.</p>
</div>
<div class="slide">
<img src="https://www.ovnicom.com/lp/servicios/Ovniline.svg">
<h3>Telefonía</h3>
<p>Con solo conectar tu dispositivo OvniLine a Internet puedes tener un número de Panamá que puedes usar desde cualquier parte del mundo.</p>
</div>
<div class="slide">
<img src="https://www.ovnicom.com/lp/servicios/Ovninube.svg">
<h3>Cloud Computing</h3>
<p>Somos el único proveedor que incluye sin costo adicional Backup y Replica en su servicio de Cloud Computing</p>
</div>
<div class="slide">
<img src="https://www.ovnicom.com/lp/servicios/customer-support.png" style="padding-left: 14%; padding-right: 14%; padding-top: 9.37%;">
<h3>Manage Service</h3>
<p>En Ovnicom damos valor a largo plazo a nuestros clientes y colaboradores, por tal motivo, no solo ofrecemos las mejores soluciones IT qe le mantendrán siempre comunicado</p>
</div>
<div class="slide">
<img src="https://www.ovnicom.com/lp/servicios/networking.svg">
<h3>Networking</h3>
<p>Nuestras soluciones de Networking de alta disponibilidad, han sido creadas para satisfacer las necesidades específicas de su negocio bajo cualquier entorno empresarial.</p>
</div>
</section>
</div>
<!-- CONTENEDOR DEL CAROUSEL -->
<div class="footer" style="">
<div class="d-flex justify-content-center">
<div>
<p>
<strong>Panamá:</strong><br/>
Oceanía Business Plaza torre 1000<br/>
30th floor, Punta Pacífica.<br/>
(+507) 200.5555
</p>
<p>
<strong>Whatsapp: <img src="//www.ovnicom.com/images/Whatsapp_icon.png" alt="Whatsapp icon" width="24" height="24" style="font-size: 12.16px;"></strong><br/>
(+507) 6415.8928
</p>
</div>
<div>
<p>
<strong>USA:</strong><br/>
(+1)(877) 452.4930
</p>
<p>
<strong>Costa Rica:</strong><br/>
(+506) 4001.2082
</p>
<p>
www.ovnicom.com
</p>
</div>
</div>
</div>
<div class="copyright" style="">
2019-2018 © Ovnicom
</div>
</div> <!-- /contenedor de la pagina -->
