miércoles, 14 de marzo de 2018

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%);
}


Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts