"DOCENTE"
Bootstrap 3.0.0 Snippet by yugidavid02

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <CENTER><H1>UNIVERSIDAD TECNICA DE BABAHOYO</H1></CENTER><BR> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> <div class="col-md-2"> <ul class="treeview"> <li><a href="#">Menu</a> <ul> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a> <ul> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a></li> <li><a href="#">Stick</a> <ul> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a> <ul> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> <li><a href="#">Leaf</a></li> </ul> </li> <li><a href="#">Twig</a></li> <li><a href="#">Twig</a></li> </ul> </li> <li><a href="#">Stick</a></li> </ul> </li> <li><a href="#">Branch</a></li> <li><a href="#">Branch</a></li> </ul> </li> </ul> </div> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-10 well well-sm"> <legend><a href="#"><i class="glyphicon glyphicon-globe"></i></a> REGISTRO DEL SEGUIMIENTO AL SILABO -DOCENTE-</legend> <form action="#" method="post" class="form" role="form"> <div class="row"> <div class="col-xs-6 col-md-6"> <H5>Practica</H5><input class="form-control" name="firstname" placeholder="Nº" type="text" required autofocus /> </div> <div class="col-xs-6 col-md-6"> <H5>Tipo de practica</H5> <select class="form-control"> <option value="Month">Taller</option> <option value="Month">Laboratorio</option> <option value="Month">Centro de simulacion</option> </select> </div> </div> <div class="row"> <div class="col-xs-6 col-md-6"> <H5>Facultad</H5> <select class="form-control"> <option value="Month">F.A.F.I</option> </select> </div> <div class="col-xs-6 col-md-6"> <H5>Escuela</H5> <select class="form-control"> <option value="Month">SISTEMA</option> <option value="Month">ADMINISTRACION</option> <option value="Month">CPA</option> </select> </div> </div> <div class="row"> <div class="col-xs-6 col-md-6"> <H5>Carrera</H5><input class="form-control" name="firstname" placeholder="---" type="text" required autofocus /> </div> <div class="col-xs-6 col-md-6"> <H5>Periodo</H5><input class="form-control" name="firstname" placeholder="Nº" type="text" required autofocus /> </div> </div> <H5>Facultad</H5><input class="form-control" name="firstname" placeholder="Nº" type="text" required autofocus /> <H5></H5><input class="form-control" name="youremail" placeholder="Your Email" type="email" /> <input class="form-control" name="reenteremail" placeholder="Re-enter Email" type="email" /> <input class="form-control" name="password" placeholder="New Password" type="password" /> <label for=""> Birth Date</label> <div class="row"> <div class="col-xs-4 col-md-4"> <select class="form-control"> <option value="Month">Month</option> </select> </div> <div class="col-xs-4 col-md-4"> <select class="form-control"> <option value="Day">Day</option> </select> </div> <div class="col-xs-4 col-md-4"> <select class="form-control"> <option value="Year">Year</option> </select> </div> </div> <label class="radio-inline"> <input type="radio" name="sex" id="inlineCheckbox1" value="male" /> Male </label> <label class="radio-inline"> <input type="radio" name="sex" id="inlineCheckbox2" value="female" /> Female </label> <br /> <br /> <button type="submit" class="btn btn-default custom-btn">Submit</button> Sign up</button> </form> </div> </div> </div>
/*============== fondo de color =============**/ @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,700,500); body { padding-top: 90px; background:#F7F7F7; color:#666666; font-family: 'Roboto', sans-serif; font-weight:100; } body{ width: 100%; background: -webkit-linear-gradient(left, #22d686, #24d3d3, #22d686, #24d3d3); background: linear-gradient(to right, #22d686, #24d3d3, #22d686, #24d3d3); background-size: 600% 100%; -webkit-animation: HeroBG 20s ease infinite; animation: HeroBG 20s ease infinite; } @-webkit-keyframes HeroBG { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } 100% { background-position: 0 0; } } @keyframes HeroBG { 0% { background-position: 0 0; } 50% { background-position: 100% 0; } 100% { background-position: 0 0; } } .panel { border-radius: 5px; } label { font-weight: 300; } .panel-login { border: none; -webkit-box-shadow: 0px 0px 49px 14px rgba(188,190,194,0.39); -moz-box-shadow: 0px 0px 49px 14px rgba(188,190,194,0.39); box-shadow: 0px 0px 49px 14px rgba(188,190,194,0.39); } .panel-login .checkbox input[type=checkbox]{ margin-left: 0px; } .panel-login .checkbox label { padding-left: 25px; font-weight: 300; display: inline-block; position: relative; } .panel-login .checkbox { padding-left: 20px; } .panel-login .checkbox label::before { content: ""; display: inline-block; position: absolute; width: 17px; height: 17px; left: 0; margin-left: 0px; border: 1px solid #cccccc; border-radius: 3px; background-color: #fff; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .panel-login .checkbox label::after { display: inline-block; position: absolute; width: 16px; height: 16px; left: 0; top: 0; margin-left: 0px; padding-left: 3px; padding-top: 1px; font-size: 11px; color: #555555; } .panel-login .checkbox input[type="checkbox"] { opacity: 0; } .panel-login .checkbox input[type="checkbox"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .panel-login .checkbox input[type="checkbox"]:checked + label::after { font-family: 'FontAwesome'; content: "\f00c"; } .panel-login>.panel-heading .tabs{ padding: 0; } .panel-login h2{ font-size: 20px; font-weight: 300; margin: 30px; } .panel-login>.panel-heading { color: #848c9d; background-color: #e8e9ec; border-color: #fff; text-align:center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom: 0px; padding: 0px 15px; } .panel-login .form-group { padding: 0 30px; } .panel-login>.panel-heading .login { padding: 20px 30px; border-bottom-leftt-radius: 5px; } .panel-login>.panel-heading .register { padding: 20px 30px; background: #2d3b55; border-bottom-right-radius: 5px; } .panel-login>.panel-heading a{ text-decoration: none; color: #666; font-weight: 300; font-size: 16px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; } .panel-login>.panel-heading a#register-form-link { color: #fff; width: 100%; text-align: right; } .panel-login>.panel-heading a#login-form-link { width: 100%; text-align: left; } .panel-login input[type="text"],.panel-login input[type="email"],.panel-login input[type="password"] { height: 45px; border: 0; font-size: 16px; -webkit-transition: all 0.1s linear; -moz-transition: all 0.1s linear; transition: all 0.1s linear; -webkit-box-shadow: none; box-shadow: none; border-bottom: 1px solid #e7e7e7; border-radius: 0px; padding: 6px 0px; } .panel-login input:hover, .panel-login input:focus { outline:none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-color: #ccc; } .btn-login { background-color: #E8E9EC; outline: none; color: #2D3B55; font-size: 14px; height: auto; font-weight: normal; padding: 14px 0; text-transform: uppercase; border: none; border-radius: 0px; box-shadow: none; } .btn-login:hover, .btn-login:focus { color: #fff; background-color: #2D3B55; } .forgot-password { text-decoration: underline; color: #888; } .forgot-password:hover, .forgot-password:focus { text-decoration: underline; color: #666; } .btn-register { background-color: #E8E9EC; outline: none; color: #2D3B55; font-size: 14px; height: auto; font-weight: normal; padding: 14px 0; text-transform: uppercase; border: none; border-radius: 0px; box-shadow: none; } .btn-register:hover, .btn-register:focus { color: #fff; background-color: #2D3B55; } /*============== principal=============**/ body { padding-top:30px; } .form-control { margin-bottom: 10px; } /*============== sticky-wrapper =============**/ .header-content { padding: 50px 0; } .header-title { color: #88c724; display: block; font-size: 48px; font-weight: 600; line-height: 50px; text-transform: uppercase; } .header-motto { color: #88c724; font-size: 18px; font-weight: 400; line-height: 22px; } .form-block { background: #f9f9f9 none repeat scroll 0 0; border-radius: 1px; box-shadow: 2px 3px 8px #a7a7a7; color: gray; display: block; min-height:460px; overflow: hidden; padding:30px; margin-bottom:20px; } .form-block h2 { border-bottom: 1px solid #88c724; color: #88c724; display: block; font-size: 24px; font-weight: 300; line-height: 28px; margin-bottom: 20px; padding-bottom: 8px; } .form .form-control { border-radius: 0; color: #999; height: 42px; } /* from-control2 editado */ .form .form-control2 { border-radius: 0; color: #999; height: 42px; } .form-control:focus { border-color: #88c724; box-shadow: none; } .custom-btn:hover, .custom-btn { background-color: #88c724; border-color: #88c724; color: #fff; font-size: 20px; height: 40px; width: 100%; font-weight: 500; } /*============== menu =============**/ div.panel:first-child { margin-top:20px; } div.treeview { min-width: 100px; min-height: 100px; max-height: 256px; overflow:auto; padding: 4px; margin-bottom: 20px; color: #369; border: solid 1px; border-radius: 4px; } div.treeview ul:first-child:before { display: none; } .treeview, .treeview ul { margin:0; padding:0; list-style:none; color: #369; } .treeview ul { margin-left:1em; position:relative } .treeview ul ul { margin-left:.5em } .treeview ul:before { content:""; display:block; width:0; position:absolute; top:0; left:0; border-left:1px solid; /* creates a more theme-ready standard for the bootstrap themes */ bottom:15px; } .treeview li { margin:0; padding:0 1em; line-height:2em; font-weight:700; position:relative } .treeview ul li:before { content:""; display:block; width:10px; height:0; border-top:1px solid; margin-top:-1px; position:absolute; top:1em; left:0 } .tree-indicator { margin-right:5px; cursor:pointer; } .treeview li a { text-decoration: none; color:inherit; cursor:pointer; } .treeview li button, .treeview li button:active, .treeview li button:focus { text-decoration: none; color:inherit; border:none; background:transparent; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; outline: 0; }
/** fondo de color*/ $(function() { $('#login-form-link').click(function(e) { $("#login-form").delay(100).fadeIn(100); $("#register-form").fadeOut(100); $('#register-form-link').removeClass('active'); $(this).addClass('active'); e.preventDefault(); }); $('#register-form-link').click(function(e) { $("#register-form").delay(100).fadeIn(100); $("#login-form").fadeOut(100); $('#login-form-link').removeClass('active'); $(this).addClass('active'); e.preventDefault(); }); }); /** menu */ $.fn.extend({ treeview: function() { return this.each(function() { // Initialize the top levels; var tree = $(this); tree.addClass('treeview-tree'); tree.find('li').each(function() { var stick = $(this); }); tree.find('li').has("ul").each(function () { var branch = $(this); //li with children ul branch.prepend("<i class='tree-indicator glyphicon glyphicon-chevron-right'></i>"); branch.addClass('tree-branch'); branch.on('click', function (e) { if (this == e.target) { var icon = $(this).children('i:first'); icon.toggleClass("glyphicon-chevron-down glyphicon-chevron-right"); $(this).children().children().toggle(); } }) branch.children().children().toggle(); /** * The following snippet of code enables the treeview to * function when a button, indicator or anchor is clicked. * * It also prevents the default function of an anchor and * a button from firing. */ branch.children('.tree-indicator, button, a').click(function(e) { branch.click(); e.preventDefault(); }); }); }); } }); $(window).on('load', function () { $('.treeview').each(function () { var tree = $(this); tree.treeview(); }) })

Related: See More


Questions / Comments: