<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <!-- El logotipo y el icono que despliega el menú se agrupan para mostrarlos mejor en los dispositivos móviles --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Desplegar navegación</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">ELEVA Wireless</a> </div> <!-- Agrupar los enlaces de navegación, los formularios y cualquier otro elemento que se pueda ocultar al minimizar la barra --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Inicio</a></li> <li><a href="#">Precios</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Estadisticas <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Acción #1</a></li> <li><a href="#">Acción #2</a></li> <li><a href="#">Acción #3</a></li> <li class="divider"></li> <li><a href="#">Acción #4</a></li> <li class="divider"></li> <li><a href="#">Acción #5</a></li> </ul> </li> </ul> </div> </nav> <br><br><br><br> <center><div class="well well-large"> <h1 align="center"><b>ELEVA Wireless <span class="glyphicon glyphicon-log-in"></span><br> <small>Hi-Speed Internet WiFi-Hotspot</small></b></h1> <hr> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <div class="row form-signin col-sm alert-message alert-message-info"> <div class=" "> <h4> Alert Message Info</h4> <p> Esto es un mensaje del sistema y servira para dar futuras notificaciones sobre las posibles eventualidades que puedan pasar <strong>CM Osiris</strong>.</p> </div> </div> <table class="table table-striped table-bordered form-signin"> <tbody> <thead> <tr> <th>c1</th> <th>c2</th> </tr> </thead> <tbody> <tr> <td>contenido1</td> <td>contenido2</td> </tr> <tr> <td>contenido1</td> <td>contenido2</td> </tr> <tr> <td>contenido1</td> <td>contenido2</td> </tr> <tr> <td>contenido1</td> <td>contenido2</td> </tr> </tbody> </tbody> </table> <br> <div class="row form-signin "> <table class="table table-striped table-bordered"> <tbody> <tr> <td>Dirección IP:</td> <td>$(ip)</td> </tr> <tr> <td>Dirección MAC:</td> <td>$(mac)</td> </tr> </tbody> </table> <button type="button" class="btn btn-primary btn-lg btn-block">Iniciar Sesión</button> <button type="button" class="btn btn-info btn-lg btn-block">Prueba Gratuita</button> </div> </div> <div class="col-md-4"></div> </div> <hr> <ul> <a href="Login.htm"><span class="glyphicon glyphicon-usd"></span> Precios</a> <a href="Login.htm"><span class="glyphicon glyphicon-globe"></span> Website</a>   <a href="Login.htm"><span class="glyphicon glyphicon-credit-card"></span> Pagos</a> <a href="Login.htm"><span class="glyphicon glyphicon-phone"></span> Mobile</a>   <a href="Login.htm"><span class="glyphicon glyphicon-book"></span> Miembros</a> <a href="Login.htm"><span class="glyphicon glyphicon-tag"></span> Otros</a> </ul> <DIV class="_5ui3"><SPAN class="mfss fcg"><B>Español </B><SPAN aria-hidden="true"> · </SPAN><A class="sec" href="#">English (US)</A><SPAN aria-hidden="true"> · </SPAN></DIV> </div> </center> </div> <!-- /container --> <div id="footer" class="well-large"> <div class="container"> <p class="text-muted" align="center">ELEVA Wireless 2016</p> </div> </div> </div> </div>

body { padding-bottom: 40px; } .form-signin { max-width: 330px; padding: 25px; margin: 0 auto; background-color: #fff; border: 2px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); } .form-signin .form-signin-heading, .form-signin .checkbox { margin-bottom: 10px; } .form-signin .checkbox { font-weight: normal; } .form-signin .form-control { position: relative; height: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; font-size: 16px; } .form-signin .form-control:focus { z-index: 2; } .form-signin input[type="email"] { margin-bottom: -1px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .form-signin input[type="password"] { margin-bottom: 10px; border-top-left-radius: 0; border-top-right-radius: 0; } .alert-message { margin: 20px 0; padding: 20px; border-left: 3px solid #eee; } .alert-message h4 { margin-top: 0; margin-bottom: 5px; } .alert-message p:last-child { margin-bottom: 0; } .alert-message code { background-color: #fff; border-radius: 3px; } .alert-message-success { background-color: #F4FDF0; border-color: #3C763D; } .alert-message-success h4 { color: #3C763D; } .alert-message-danger { background-color: #fdf7f7; border-color: #d9534f; } .alert-message-danger h4 { color: #d9534f; } .alert-message-warning { background-color: #fcf8f2; border-color: #f0ad4e; } .alert-message-warning h4 { color: #f0ad4e; } .alert-message-info { background-color: #f4f8fa; border-color: #5bc0de; } .alert-message-info h4 { color: #5bc0de; } .alert-message-default { background-color: #EEE; border-color: #B4B4B4; } .alert-message-default h4 { color: #000; } .alert-message-notice { background-color: #FCFCDD; border-color: #BDBD89; } .alert-message-notice h4 { color: #444; }