<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="login-body"> <article class="container-login center-block"> <section> <ul id="top-bar" class="nav nav-tabs nav-justified"> <li class="active"><a href="#login-access">InfoTec - Sistemas de Informação</a></li> </ul> <div class="tab-content tabs-login col-lg-12 col-md-12 col-sm-12 cols-xs-12"> <div id="login-access" class="tab-pane fade active in"> <h2><i class="glyphicon glyphicon-log-in"></i> Accesso ao Sistema</h2> <br></br> <form method="post" accept-charset="utf-8" autocomplete="off" role="form" class="form-horizontal"> <div class="form-group "> <label for="login" class="sr-only">Usuário</label> <input type="text" class="form-control" name="login" id="login_value" placeholder="Usuário" tabindex="1" value="" /> </div> <div class="form-group "> <label for="password" class="sr-only">Senha</label> <input type="password" class="form-control" name="password" id="password" placeholder="Senha" value="" tabindex="2" /> </div> <div class="checkbox"> <label class="control-label" for="remember_me"> <input type="checkbox" name="remember_me" id="remember_me" value="1" class="" tabindex="3" /> Esqueceu a senha? </label> </div> <br/> <div class="form-group "> <button type="submit" name="log-me-in" id="submit" tabindex="2" class="btn btn-lg btn-sucess">Entrar</button> <br></br> <button type="submit" name="log-me-in" id="submit" tabindex="2" class="btn btn-lg btn-danger">Cancelar</button> </div> </form> </div> </div> </section> </article> </div> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="nav-side-menu"> <div class="brand">Brand Logo</div> <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i> <div class="menu-list"> <ul id="menu-content" class="menu-content collapse out"> <li> <a href="#"> <i class="fa fa-dashboard fa-lg"></i> Dashboard </a> </li> <li data-toggle="collapse" data-target="#products" class="collapsed active"> <a href="#"><i class="fa fa-gift fa-lg"></i> UI Elements <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="products"> <li class="active"><a href="#">CSS3 Animation</a></li> <li><a href="#">General</a></li> <li><a href="#">Buttons</a></li> <li><a href="#">Tabs & Accordions</a></li> <li><a href="#">Typography</a></li> <li><a href="#">FontAwesome</a></li> <li><a href="#">Slider</a></li> <li><a href="#">Panels</a></li> <li><a href="#">Widgets</a></li> <li><a href="#">Bootstrap Model</a></li> </ul> <li data-toggle="collapse" data-target="#service" class="collapsed"> <a href="#"><i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="service"> <li>New Service 1</li> <li>New Service 2</li> <li>New Service 3</li> </ul> <li data-toggle="collapse" data-target="#new" class="collapsed"> <a href="#"><i class="fa fa-car fa-lg"></i> New <span class="arrow"></span></a> </li> <ul class="sub-menu collapse" id="new"> <li>New New 1</li> <li>New New 2</li> <li>New New 3</li> </ul> <li> <a href="#"> <i class="fa fa-user fa-lg"></i> Profile </a> </li> <li> <a href="#"> <i class="fa fa-users fa-lg"></i> Users </a> </li> </ul> </div> </div>

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700"); body { font-family: Open Sans; font-size: 14px; line-height: 1.42857; background: #333333; height: 350px; padding: 0; margin: 0; } .container-login { min-height: 0; width: 480px; color: #333333; margin-top: 40px; padding: 0; } .center-block { display: block; margin-left: auto; margin-right: auto; } .container-login > section { margin-left: 0; margin-right: 0; padding-bottom: 10px; } #top-bar { display: inherit; } .nav-tabs.nav-justified { border-bottom: 0 none; width: 100%; } .nav-tabs.nav-justified > li { display: table-cell; width: 1%; float: none; } .container-login .nav-tabs.nav-justified > li > a, .container-login .nav-tabs.nav-justified > li > a:hover, .container-login .nav-tabs.nav-justified > li > a:focus { background: #ea533f; border: medium none; color: #ffffff; margin-bottom: 0; margin-right: 0; border-radius: 0; } .container-login .nav-tabs.nav-justified > .active > a, .container-login .nav-tabs.nav-justified > .active > a:hover, .container-login .nav-tabs.nav-justified > .active > a:focus { background: #ffffff; color: #333333; } .container-login .nav-tabs.nav-justified > li > a:hover, .container-login .nav-tabs.nav-justified > li > a:focus { background: #de2f18; } .tabs-login { background: #ffffff; border: medium none; margin-top: -1px; padding: 10px 30px; } .container-login h2 { color: #ea533f; } .form-control { background-color: #ffffff; background-image: none; border: 1px solid #999999; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #333333; display: block; font-size: 14px; height: 34px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } .container-login .checkbox { margin-top: -15px; } .container-login button { background-color: #ea533f; border-color: #e73e28; color: #ffffff; border-radius: 0; font-size: 18px; line-height: 1.33; padding: 10px 16px; width: 100%; } .container-login button:hover, .container-login button:focus { background: #de2f18; border-color: #be2815; }