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