"dashboard"
Bootstrap 3.3.0 Snippet by SBruno12

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <body class="home"> <div class="container-fluid display-table"> <div class="row display-table-row"> <div class="col-md-2 col-sm-1 hidden-xs display-table-cell v-align box" id="navigation"> <div class="navi"> <ul> <li class="active"><a href="#"><span class="hidden-xs hidden-sm">Registro do Professor</span></a></li> <form class="form-horizontal" method="post" action="#"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Nome do Professor</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="name" id="name" placeholder="Digite o nome do Professor."/> </div> </div> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Email do professor</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="email" id="email" placeholder="Digite o email do Professor."/> </div> </div> </div> <div class="form-group"> <label for="username" class="cols-sm-2 control-label">Nome de Usuario</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="username" id="username" placeholder="Digite o nome."/> </div> </div> </div> <div class="form-group"> <label for="password" class="cols-sm-2 control-label">Senha</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="password" id="password" placeholder="Digite a senha."/> </div> </div> </div> <div class="form-group"> <label for="confirm" class="cols-sm-2 control-label">Confirmação da senha</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirme a senha."/> </div> </div> </div> <div class="form-group "> <button type="button" class="btn btn-primary btn-lg btn-block login-button">Registrar</button> </div> </form> <li><a href="#"><span class="hidden-xs hidden-sm">Registro do Aluno</span></a></li> <form class="form-horizontal" method="post" action="#"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Nome do Aluno</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="name" id="name" placeholder="Digite o nome do Aluno."/> </div> </div> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Data de nascimento</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="date" id="date" placeholder="Digite a data de nascimento do Aluno."/> </div> </div> </div> <div class="form-group"> <label for="username" class="cols-sm-2 control-label">Nome do Pai</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="username" id="username" placeholder="Nome do Pai do Aluno"/> </div> </div> </div> <div class="form-group"> <label for="password" class="cols-sm-2 control-label">Nome da Mãe</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="nome" id="nome" placeholder="Digite o nome da Mãe do Aluno."/> </div> </div> </div> <div class="form-group "> <button type="button" class="btn btn-primary btn-lg btn-block login-button">Registrar</button> </div> </form> <li><a href="#"><span class="hidden-xs hidden-sm">Registro do Funcionario</span></a></li> <form class="form-horizontal" method="post" action="#"> <div class="form-group"> <label for="name" class="cols-sm-2 control-label">Nome do Funcionario</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="name" id="name" placeholder="Digite o nome do Funcionario."/> </div> </div> </div> <div class="form-group"> <label for="email" class="cols-sm-2 control-label">Email do Funcinario</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="email" id="email" placeholder="Digite o email do Funcionario."/> </div> </div> </div> <div class="form-group"> <label for="username" class="cols-sm-2 control-label">Nome de Usuario</label> <div class="cols-sm-10"> <div class="input-group"> <input type="text" class="form-control" name="username" id="username" placeholder="Digite o nome de usuario."/> </div> </div> </div> <div class="form-group"> <label for="password" class="cols-sm-2 control-label">Cargo</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="password" id="password" placeholder="Qual o cargo do funcionario ?"/> </div> </div> </div> <div class="form-group"> <label for="confirm" class="cols-sm-2 control-label">Confirmação da senha</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Digite a senha."/> </div> </div> </div> <div class="form-group"> <label for="confirm" class="cols-sm-2 control-label">Confirmação da senha</label> <div class="cols-sm-10"> <div class="input-group"> <input type="password" class="form-control" name="confirm" id="confirm" placeholder="Confirme a senha."/> </div> </div> </div> <div class="form-group "> <button type="button" class="btn btn-primary btn-lg btn-block login-button">Registrar</button> </div> </form> </ul> </div> </div> <div class="col-md-10 col-sm-11 display-table-cell v-align"> <!--<button type="button" class="slide-toggle">Slide Toggle</button> --> <div class="row"> <header> <div class="col-md-7"> <nav class="navbar-default pull-left"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="offcanvas" data-target="#side-menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </nav> </div> <div class="col-md-5"> <div class="header-rightside"> <ul class="list-inline header-top pull-right"> </header> <!-- Modal --> <div id="add_project" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header login-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Project</h4> </div> <div class="modal-body"> <input type="text" placeholder="Project Title" name="name"> <input type="text" placeholder="Post of Post" name="mail"> <input type="text" placeholder="Author" name="passsword"> <textarea placeholder="Desicrption"></textarea> </div> <div class="modal-footer"> <button type="button" class="cancel" data-dismiss="modal">Close</button> <button type="button" class="add-project" data-dismiss="modal">Save</button> </div> </div> </div> </div> </body> </html>
/* /* Created by Filipe Pina * Specific styles of signin, register, component */ /* * General styles */ body, html{ height: 100%; background-repeat: no-repeat; background-color: #d3d3d3; font-family: 'Oxygen', sans-serif; } .main{ margin-top: 70px; } h1.title { font-size: 50px; font-family: 'Passion One', cursive; font-weight: 400; } hr{ width: 10%; color: #fff; } .form-group{ margin-bottom: 15px; } label{ margin-bottom: 15px; } input, input::-webkit-input-placeholder { font-size: 11px; padding-top: 3px; } .main-login{ background-color: #fff; /* shadows and rounded borders */ -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .main-center{ margin-top: 30px; margin: 0 auto; max-width: 330px; padding: 40px 40px; } .login-button{ margin-top: 5px; } .login-register{ font-size: 11px; text-align: center; }
$(document).ready(function(){ $('[data-toggle="offcanvas"]').click(function(){ $("#navigation").toggleClass("hidden-xs"); }); });

Related: See More

Paper Kit
Flat Responsive Dashboard Design
Social Dashboard

Questions / Comments: