Nuevo Portal cautivo

portalcautivo2/css/signin.css

@@ -2,6 +2,7 @@ body {
   padding-top: 40px;
   padding-bottom: 40px;
   background-color: #eee;
+  overflow: auto;
 }
 
 .form-signin {
@@ -38,3 +39,236 @@ body {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
+
+html {
+    overflow: hidden;
+    background: url(images/captiveportal-imagen_central.jpg) no-repeat center center fixed;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+
+  }
+  body {
+      background-color: transparent !important;
+      overflow: hidden;
+    }
+
+    .register {
+          background: -webkit-linear-gradient(left, #12131291, #089406c4);
+          margin-top: 3%;
+          padding: 3%;
+        }
+
+  .register-left {
+    text-align: center;
+    color: #fff;
+    margin-top: 4%;
+    letter-spacing: 1px;
+  }
+
+  .register-left input {
+    border: none;
+    border-radius: 1.5rem;
+    padding: 2%;
+    width: 60%;
+    background: #f8f9fa;
+    font-weight: bold;
+    color: #383d41;
+    margin-top: 30%;
+    margin-bottom: 3%;
+    cursor: pointer;
+  }
+
+  .register-right {
+    background: #f8f9fa;
+    border-top-left-radius: 20% 50%;
+    border-bottom-left-radius: 20% 50%;
+  }
+
+  .register-left img {
+    margin-top: 15%;
+    margin-bottom: 5%;
+    width: 100%;
+    -webkit-animation: mover 2s infinite alternate;
+    animation: mover 1s infinite alternate;
+  }
+
+  @-webkit-keyframes mover {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
+  }
+
+  @keyframes mover {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-20px);
+    }
+  }
+
+  .register-left p {
+    font-weight: lighter;
+    padding: 12%;
+    margin-top: -9%;
+  }
+
+  .register .register-form {
+    padding: 10%;
+    margin-top: 10%;
+  }
+
+  .btnRegister {
+    float: right;
+    margin-top: 10%;
+    border: none;
+    border-radius: 1.5rem;
+    padding: 2%;
+    background: green;
+    color: #fff;
+    font-weight: 600;
+    width: 50%;
+    cursor: pointer;
+  }
+
+  .register .nav-tabs {
+    margin-top: 3%;
+    border: none;
+    background: #244c03;
+    border-radius: 1.5rem;
+    width: 40%;
+    float: right;
+  }
+
+  .register .nav-tabs .nav-link {
+    padding: 1%;
+    height: 34px;
+    font-weight: 600;
+    color: #fff;
+    border-top-right-radius: 1.5rem;
+    border-bottom-right-radius: 1.5rem;
+  }
+
+  .register .nav-tabs .nav-link:hover {
+    border: none;
+  }
+
+  .register .nav-tabs .nav-link.active {
+    width: 100%;
+    color: #244c03;
+    border: 2px solid #244c03;
+    border-top-left-radius: 1.5rem;
+    border-bottom-left-radius: 1.5rem;
+  }
+
+  .register-heading {
+    text-shadow: rgb(0, 0, 0) 0px 2px 3px;
+    color: white;
+    text-align: center;
+    margin-left: 10px;
+    margin-top: 10%;
+    margin-bottom: -15%;
+    border-top-left-radius: 35px;
+    background: -webkit-linear-gradient(left, #121312, #28a745) !important;
+  }
+
+  .tab-content {
+    padding-top: 1em;
+  }
+
+  .boton_entrar {
+    margin-left: auto !important;
+    margin-right: auto !important;
+  }
+
+  .circle_button {
+    box-shadow: 2px 4px 0 2px rgba(0, 0, 0, 0.1);
+    border: .5em solid #c7d400;
+    font-size: 1em;
+    line-height: 1.1em;
+    color: #ffffff;
+    background-color: #76be4e;
+    margin: auto;
+    border-radius: 50%;
+    height: 7em;
+    width: 7em;
+    position: relative;
+  }
+
+  .circle_button:hover {
+    color: #ffffff;
+    background-color:green;
+    text-decoration: none;
+    border-color: #c7d400;
+
+  }
+
+  .circle_button:visited {
+    color: #ffffff;
+    background-color: #c7d400;
+    text-decoration: none;
+
+  }
+
+  .circle-link-greater-than {
+    font-size: 1em;
+  }
+
+  @media screen and (max-width:990px) {
+    .register .nav-tabs {
+      width: 90%;
+    }
+
+  }
+
+  @media screen and (max-width:768px) {
+.register-left {
+  margin-top: 0px;
+}
+.register-left p {
+  font-weight: lighter;
+  padding: 0px;
+  margin-top: 0px;
+}
+.register-left h3 {
+  margin-top: 0px;
+}
+.register-heading {
+  font-size: 21px;
+  margin-top: 4em
+}
+.boton_entrar {
+  margin-left: auto;
+  margin-right: auto;
+  width: 0px;
+  padding-right: 8em;
+}
+.register-left img {
+  margin-top: 5%;
+  margin-bottom: 0%;
+  width: 100%;
+}
+}
+
+@media screen and (max-width: 440px) {
+html {
+    overflow: auto;
+}
+body {
+  overflow: auto;
+}
+.register-left {
+  margin-top: 0px;
+  padding-left: 3em;
+}
+.register-right{
+  border-top-left-radius: 0% 50%;
+  border-bottom-left-radius: 0% 50%;
+  background: #f8f9fab5;
+}
+}

portalcautivo2/index.html

@@ -11,14 +11,13 @@
         <meta name="copyright" content="" />
         <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
 
-        <title></title>
+        <title>Acceso a la red comunitaria NuestraRed.org</title>
         <!-- Bootstrap -->
         <link href="css/bootstrap.min.css" rel="stylesheet">
         <link href="css/signin.css" rel="stylesheet">
 
         <!-- static zone info -->
         <script src="js/zone.js"></script>
-
         <script src="js/jquery-1.11.2.min.js"></script>
         <script>
             function getURLparams()
@@ -161,7 +160,7 @@
                 <div class="container-fluid">
                     <div class="navbar-header">
                         <a class="navbar-brand" href="#">
-                            <img class="brand-logo" src="images/default-logo.png" height="30" width="150">
+                            <img class="brand-logo" src="images/captiveportal-logoNR.png" height="30" width="150">
                         </a>
                     </div>
                 </div>