"DIVCLASEE"
Bootstrap 3.0.0 Snippet by sult4n

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <title>MDS Sistemas</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="MDS Sistemas ofrece beneficios y oportunidades con aplicaciones de negocio para maximizan la rentabilidad de la información y procesos" /> <meta name="keywords" content="MDS, Sistemas, ERP,Enterprise Resource Planning, planeacion, recursos empresariales, administracion, negocio, procesos" /> <meta name="author" content="MDS-Sistemas" /> <link rel="icon" type="image/png" href="/images/alleato.png" /> <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" > <link href="css/estilos.css" rel="stylesheet"/> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet"/> <link rel="stylesheet" href="font-awesome/css/font-awesome.css" type="text/css"> </head> <body> <header class="mainheader"> <div class="inheader"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> ALLEATO</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> ¿Quiénes Somos? <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="mensaje_director.php">Mensaje del Director</a></li> <li><a href="conocenos.php">Conócenos</a></li> <li><a href="encuentranos.php">Encuéntranos</a></li> <li><a href="contacto.php">Contáctanos</a></li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Producto <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="erp_alleato.php">ERP Alleato</a></li> <li><a href="beneficios_area.php">Beneficios por Área</a></li> <li><a href="funciones.php">Funciones</a></li> <li><a href="herramientas.php">Herramientas</a></li> <!--<li><a href="objetivos.php">Objetivos</a></li> <li><a href="caracteristicas.php">Características</a></li> <li><a href="beneficios.php">Beneficios</a></li> <li><a href="ventajas.php">Ventajas</a></li> <li><a href="implementacion.php">Implementación</a></li> <li><a href="seguridad.php">Seguridad</a></li>--> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Servicios <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="implementacion.php">Implementación</a></li> <li><a href="soporte.php">Soporte</a></li> <li><a href="ampliaciones.php">Ampliaciones</a></li> <li><a href="capacitacion.php">Capacitación</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> Soluciones <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="comercializadora.php">Comercializadora Mayorista y Minorista</a></li> <li><a href="servicios.php">Servicios</a></li> <li><a href="manufacturera.php">Manufacturera</a></li> <li><a href="mueblerias.php">Mueblerías</a></li> <li><a href="restaurantes.php">Restaurantes</a></li> <li><a href="construccion.php">Construcción</a></li> <li><a href="inmobiliaria.php">Inmobiliaria</a></li> <li><a href="transporte.php">Transporte</a></li> <li><a href="farmaceutica.php">Farmacéutica</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> Casos de Éxito <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="_construccion.php">Clientes</a></li> </ul> </li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" href="#"> Artículos Relacionados <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="claves_exito.php">Claves de Éxito</a></li> <li><a href="mejores_practicas.php">Mejores Prácticas para tu Negocio </a></li> <li><a href="opiniones_expertos.php">Opiniones de Expertos</a></li> <li><a href="adquirir_erp.php">Antes de adquirir un ERP</a></li> <li><a href="practicas_mejoradas.php">Prácticas Mejoradas</a></li> <li><a href="rentabilidad.php">Rentabilidad y Control</a></li> </ul> </li> </ul> </div> </div> </nav> </div> </header> <main> <div class="main_background"> <div class="cover"> <section class="title_section"> <div class="container title std_fnt_color"> <div class="container"> <img src="http://mds-sistemas.com/images/alleato.png" height="100"> <h3>Más que un Sistema un Aliado para su empresa</h3> </div> </div> </section> </div> </div> <section class="content_section"> <div class="content_title_2"> <h1>Ofrecemos una solución para su Empresa</h1> </div> <div class="box_container_flex"> <div class="box_content box_display bg_litgray2"> <h2>Rentabilidad y Control</h2> <p>Le ofrecemos la solución correcta que le ayudará a lograr metas criticas, proporcionando resultados tangibles, haciendo que su inversión produzca.</p> <a href="rentabilidad.php" role="button" class="btn btn-primary">Saber mas...</a> </div> <div class="box_display_img"> <span class="img_box img_control"></span> </div> </div> <div class="box_container_flex"> <div class="box_content box_display bg_litgray2"> <h2>Claves de Éxito</h2> <p>Una serie de puntos clave que deben considerar y evaluar para ayudarle a conseguir el éxito deseado en su negocio o empresa</p> <a href="claves_exito.php" role="button" class="btn btn-primary">Saber mas...</a> </div> <div class="box_display_img"> <span class="img_box img_success"></span> </div> </div> </section> <section class="content_section"> <div class="content_title_2"> <h1>Información y Soluciónes</h1> </div> <div class="content"> <div class="box_container_flex"> <div class="box_icon"> <a href="lado_humano.php" class="std_fnt_color"> <p><i class="icon fa fa-heart" aria-hidden="true"></i></p> El Factor Humano del ERP </a> </div> <div class="box_icon"> <a href="mejorar_negocio.php" class="std_fnt_color"> <p><i class="icon fa fa-briefcase" aria-hidden="true"></i></p> Como mejorar mi negocio </a> </div> <div class="box_icon"> <a href="tiempos_costos.php" class="std_fnt_color"> <p><i class="icon fa fa-money" aria-hidden="true"></i></p> Tiempos y Costos </a> </div> <div class="box_icon"> <a href="preimplementacion.php" class="std_fnt_color"> <p><i class="icon fa fa-wrench" aria-hidden="true"></i></p> Post - Implementación </a> </div> </div> <div class="box_container_flex"> <div class="box_icon"> <a href="elegir_mejor.php" class="std_fnt_color"> <p><i class="icon fa fa-thumbs-up" aria-hidden="true"></i></p> Como Elegir el Mejor </a> </div> <div class="box_icon"> <a href="descargas.php" class="std_fnt_color"> <p><i class="icon fa fa-download" aria-hidden="true"></i></p> Centro de Descargas </a> </div> <div class="box _icon"> <a href="_construccion.php" class="std_fnt_color"> <p><i class="icon fa fa-question-circle-o" aria-hidden="true"></i></p> FAQs </a> </div> </div> </div> </section> </main> <footer> <div class="container"> <div class="info"> <p>Av. Politécnico Nacional 4716 Local 4A, Fraccionamiento La Salle, Chihuahua, Chih. México,</p> <p> Teléfono (614) 430-3040</p> </div> <ul> <li><a href="conocenos.php">Misión</a></li> <li><a href="conocenos.php">Visión</a></li> <li><a href="_construccion.php">Mapa del sitio</a></li> <li><a href="_construccion.php">Acerca de</a></li> <li><a href="contacto.php">Contacto</a></li> </ul> <div class="foot_copy"> <p>© 2017 MANZANO DESARROLLO DE SISTEMAS, Derechos Reservados, Chihuahua, Chih. México</p> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script>$(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).fadeIn(200); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut(200); $(this).toggleClass('open'); $('b', this).toggleClass("caret caret-up"); }); });</script> </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </body> </html>
* { font-family:'Roboto Condensed', sans-serif; box-sizing: border-box; } /* a { cursor: pointer; }*/ body { color: #353535; font-size: 14px; } .std_fnt_color { color: #305874; } .fnt_color_teal { color: #1AA261; } .fnt_color_blue { color: #474CB3; } .fnt_color_orange { color: #FFA786; } .bg_std_1 { background: #305874; } .bg_litblue { background: #9ACFF5; } .bg_orange { background: #FFA786; } .bg_litorange { background: #5DB4F2; } .bg_litgreen { background: #95F7CA; } .bg_yellow { background: #FFD58F; } .bg_litgray { background: #E8E7E7; } .bg_litgray2 { background: #D3D7DA; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1 { font-size: 4em;} .title h1 { font-size: 5em; } p { margin: 20px 0;} q { font-style: italic; } em { font-style: normal; font-weight: bold; } .center_text { text-align: center;} .imagebox { width: 40%; } .img_box { display: block; width: 620px; height: 220px; } .img_success { background: url("../images/coins_time.jpg") no-repeat; background-size: cover; background-position: center top; } .img_control { background: url("../images/lap_business_coffe.jpg") no-repeat; background-size: cover; background-position: center top; } body, html { position: relative; margin: 0; padding: 0; } #sidebar { width: 190px; float: left; } #p01 { font-family: "Times New Roman", Times, serif; } .container { position: relative; width: 100%; margin: 0 auto; padding: 0; } .test{ display: inline-block; width: calc(100% - 100px); background: blue; color: white; } .mainheader { position: relative; height: 52px; background-color: #fff; border-bottom: 1px solid rgb(221, 221, 221); z-index: 1; } .inheader { position: relative; margin: auto; width: 75%; } .top-header{ color:#FFFFFF; font-size:12px; line-height:13px; z-index:100000; width: 100%; } main { position: relative; height: auto; } main a { color: #305874; } .main_background { background: url("../images/lap_business.jpg") no-repeat; background-size: cover; } .mapa_centrado { position: relative; width: 90%; height: auto; margin: 0 auto; } .mensaje { margin: 20px 0; padding: 10px 20px; border: 1px solid #34dec3; border-radius: 5px; } .enviado, .fallido { padding-left: 18px; font-weight: bold; font-size: 1.2em; } .enviado { background: url("../images/tick-circle-icon.png") no-repeat left 1px; } .fallido { background: url("../images/cross-octagon-icon.png") no-repeat left 1px; } .cover { background-color: rgba(235, 235, 235, 0.6); min-height: 600px; } .title_section { display: block; padding-top: 140px; min-height: 360px; } .title { padding: 30px 40px 40px 40px; text-align: center; } .title_developing { padding: 20px; margin: 0; margin: auto; font-size: 1.2em; } .content_section { position: relative; margin: 30px 0; padding: 60px 0; height: auto; } .content_title { padding: 30px; margin: 10px; font-size: 1.2em; background: #E8E7E7; } .content_title_2 { padding: 0 0 20px 0; margin: auto; font-size: 1em; text-align: center; } .content { padding: 30px; margin: 10px; line-height: 22px; } .image_content { width: 100%; min-height: 230px; padding: 20px; margin: 10px; font-size: 1.2em; } .box_content:hover, .box_content_links:hover { transition: all 0.6s ease-in-out; background: #FFA786; box-shadow: 5px 5px 2px #959595; border-radius: 6px; } .box_container { display: block; width: 80%; padding: 10px; margin: auto; } .box_container_flex { display: flex; width: 80%; padding: 10px; margin: auto; align-items: center; justify-content: center; } .box_content { width: 100%; min-height: 230px; padding: 20px; margin: 10px; font-size: 1.2em; } .box_content p, .content p, .box_container p { text-align: justify; } .box_content ul { list-style: none; margin: auto; padding: 0; } .box_content i { padding: 2px; width: auto; font-size: 3em; } .box_display { flex: 1; line-height: 20px; } .box_display_img { flex: 2; } .box_icon:hover, .downloads li:hover { transition: all 0.7s ease; background-color: #FFA786; border-radius: 5px; } .box_icon { width: 22%; height: 100px; margin: 5px; text-align: center; } .box_icon .icon { margin: 10px 0; width: 100%; height: 100%; font-size: 3em; } .box_icon a { text-decoration: none; } .box_icon a:hover, .downloads li a:hover { font-weight: bold; } .box_icon p { margin: 2px; text-align: center; } .downloads { margin: auto; overflow: hidden; } .downloads_list { list-style: none; margin-top: 25px; padding: auto; } .downloads a { text-decoration: none; padding-left: 35px; } .downloads li { float: left; width: 30%; padding: 10px; margin: 5px; background: #E8E7E7; } .downloads li a { background: url("../images/bullet.png") no-repeat left -6px; } footer { position: absolute; display: flex; align-items: flex-end; height: 14em; width: 100%; padding: 0; margin: 0; text-align: center; color: #ddd; background: rgb(99, 109, 114); border-top: 1px solid #666; } footer .info { margin-bottom: 50px; } footer ul li a { color: #f0f0f0; padding: 10px; } footer ul li a:hover { text-decoration: none; color: #FFA786; } footer ul { list-style: none; } footer ul li { display: inline; } footer .foot_copy { position: absolute; width: 100%; padding: 10px 0; background: rgb(74, 84, 87); } /*----- @Media -----*/ @media all and (min-width: 1200px) { .imglogo { background-size: auto 76px;} } @media all and (max-width: 1024px) { .inheader { width: 100%; height: 60px; margin: 0; } .imglogo { background-size: auto 59px; margin-left: 5px; } .menunav { left: 80px; top: 15px; } .cover { min-height: 400px} .title_section { padding-top: 100px; } .title h1 {font-size: 3.8em; } .title h3 { font-size: 1.3em; } .box_container_flex { margin: auto; width: 95%; padding: 0; } } @media all and (max-width: 890px) { h4,h5,h6 { font-size: 1em; } .imglogo { background: none } .menunav { left: 5px; } .title_section { padding-top: 70px; } .content { margin: auto; padding: 0; } .content_title { font-size: 1em; } .content_section { width: 90%; margin: auto; } .box_container_flex { display: inline; margin: 0; padding: auto;} .content_section_flex { height: auto; margin-left: 5px; margin-right: 5px; padding-top: 10px; } .box_container { width: auto; } .box_content { font-size: 1.2em; width: 100%; min-height: 100%; } .downloads_list { padding: 0; } .downloads_list li { width: auto; text-align: left; float: none; } .box_icon { width: auto; margin: auto; } footer .info { margin: 0; padding: 10px; } footer ul { padding: 0; } } @media only screen and (max-width: 640px) { h1, h2, h3, h4, h5, h6 { font-size: 2.7em; } h2, h3, h4, h5, h6 { font-size: 1.8em; } .main_background { background-size: cover;} .cover { min-height: 200px} .title_section { min-height: 250px; padding-top: 20px; } .box_content { margin: 10px 5px; min-height: 150px;} .box_icon { min-width: 90px; margin: 1px;} .box_icon { width: auto; } .img_control { width: 100% } .img_success { width: 100% } footer .foot_copy { height: auto; } } .open > .dropdown-menu { -webkit-transform: scale(1, 1); transform: scale(1, 1); opacity:1; } .dropdown-menu { opacity:.3; -webkit-transform-origin: top; transform-origin: top; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-transform: scale(1, 0); transition: all 0.3s linear; -webkit-transition: all 0.3s linear; } .caret-up { width: 0; height: 0; border-left: 4px solid rgba(0, 0, 0, 0); border-right: 4px solid rgba(0, 0, 0, 0); border-bottom: 4px solid; display: inline-block; margin-left: 2px; vertical-align: middle; } /*-----navbar personalizado-----*/ .dropdown-menu > li > a { color: #305874; } .navbar-default .navbar-nav > li > a { color: #305874; } .navbar-default .navbar-nav > li > .active > a { color: #305874; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #DA7A56; transition: all 0.3s ease; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #305874; background-color: #e7e7e7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #305874; background-color: #e7e7e7; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { color: #DA7A56; transition: all 0.3s ease; }

Related: See More


Questions / Comments: