Bootstrap Login Basico - Educa Sistemas

Breaking

Post Top Ad

Post Top Ad

miércoles, 14 de marzo de 2018

Bootstrap Login Basico

Bootstrap Login Basico
 
Buenas compañeros, les compartimos este login basico en Bootstrap.



DESCARGA EL CODIGO AQUI :

clic

CODIGO HTML

 <div id="container">
  <div class="panel panel-default">
    <div class="panel-heading">Login <span class="r-circle"><i class="glyphicon glyphicon-globe"></i></span></div>
    <div class="panel-body">
      <form id="signin" role="form">
        <label for="username">Usuario</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
          <input id="username" type="text" class="form-control" name="username" value="" placeholder="Ingrsa tu Usuario">
        </div>
        <br>
        <label for="password">Contraseña</label>
        <div class="input-group">
          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
          <input id="password" type="password" class="form-control" name="password" value="" placeholder="Ingrsa tu Contraseña"> 
        </div>
        <br>
        <button type="submit" class="btn btn-primary pull-right">Login</button>
      </form>
    </div>
  </div>
</div>
CODIGO CSS

@import url('https://fonts.googleapis.com/css?family=Ubuntu');

*{
  user-select: none !important;
  outline: none !important;
}

#container{
  max-width: 500px;
  min-width: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Ubuntu', sans-serif;
}

.input-group-addon{
  background: #fafafa;
}

.panel{
  //box-shadow: 0px 2px 25px 0px rgba(122, 122, 122, 0.55);
  border-radius: 3px;
}

.panel{
  font-weight: bold;
}

input{
  font-weight: initial;
  border: 1px solid #fe5 !important;
}

input:focus{
  box-shadow: none !important;
  border: 1px solid #fe5 !important;
  background: #fafafa;
}

.input-group .input-group-addon i{
  color: #a07223;
  transition: 0.5s;
}
.input-group .input-group-addon{
  background: #fe5;
  transition: 0.5s;
  border-color: #fe5;
}


label{
  font-weight: initial;
}

button{
  border-color: #fe5 !important;
  border-radius: 2px !important;
  background: transparent !important;
  color: black !important;
  padding: 7px 30px !important;
}

button:hover{background: #fffce5 !important;}
button:active{background: #fe5 !important;}

.panel-heading{
  background: #fe5 !important;
  border-color: #fe5 !important;
  color: #a07223 !important;
}

.r-circle{
  width: 25px;
  height: 25px;
  background: white;
  z-index: 50;
  position: absolute;
  border-radius: 100%;
  border: 2px solid #fffce5;
  right: 10px;
  color: #a07223;
  margin-top: -3px;
}

.r-circle i{
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Post Top Ad

Responsive Ads Here