<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<img src="http://transastur.com/wp-content/uploads/2015/11/icono-cooperativa.png" alt=""/>
<h3>Cooperativa</h3>
<!--<p>Pedidos recibidos</p>-->
<input type="submit" name="" value="Log out"/><br/>
</div>
<div class="col-md-9 register-right">
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Solicitar</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Recibidos</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3 class="register-heading">SOLICITAR PEDIDO</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<input type="text" class="form-control" placeholder="Destino *" value="" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Identificador *" value="" />
</div>
<div class="form-group">
<div class="maxl">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta de base pálida" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta Munich" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta negra" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta crystal" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta chocolate" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Malta caramelo" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Cebada" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Cebada tostada" value="" />
</div>
<div class="form-group">
<input type="number" class="form-control" placeholder="Lúpulo centenial" value="" />
</div>
<input type="submit" class="btnRegister" value="Enviar pedido"/>
</div>
</div>
</div>
<div class="tab-pane fade show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3 class="register-heading">PEDIDOS RECIBIDOS</h3>
<div class="row register-form">
<div class="col-md-8">
<div class="form-group">
<input type="checkbox" name="producto1" id="producto1" value="Pedido id1">
<label for="producto1">Pedido 985739857349</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto2" id="producto1" value="Pedido id2">
<label for="producto2">Pedido 45483272008</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto3" id="producto3" value="Pedido id3">
<label for="producto3">Pedido 29384580958</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto3" id="producto3" value="Pedido id3">
<label for="producto3">Pedido 8990786769</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto3" id="producto3" value="Pedido id3">
<label for="producto3">Pedido 978986758</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto3" id="producto3" value="Pedido id3">
<label for="producto3">Pedido 766979893</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<div class="form-group">
<input type="checkbox" name="producto3" id="producto3" value="Pedido id3">
<label for="producto3">Pedido 897068767450</label>
<a href="enlacepagina.html">Ver más información del pedido</a>
</div>
<input type="submit" class="btnRegister" value="Aceptar pedidos"/>
<label for="producto1">**Los pedidos que no sean seleccionados se rechazaran automáticamente**</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.register{
background: #0264d6;
background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #0264d6 1%,#1c2b5a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 );
margin-top: 3%;
padding: 3%;
}
.register-left{
text-align: center;
color: #fff;
margin-top: 4%;
}
.register-left input{
border: none;
border-radius: 1.5rem;
padding: 2%;
width: 60%;
background: #f8f9fa;
font-weight: bold;
color: #383d41;
margin-top: 30%;
margin-bottom: 3%;
cursor: pointer;
}
.register-right{
background: #f8f9fa;
border-top-left-radius: 10% 50%;
border-bottom-left-radius: 10% 50%;
}
.register-left img{
margin-top: 15%;
margin-bottom: 5%;
width: 25%;
-webkit-animation: mover 2s infinite alternate;
animation: mover 1s infinite alternate;
}
@-webkit-keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
@keyframes mover {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
.register-left p{
font-weight: lighter;
padding: 12%;
margin-top: -9%;
}
.register .register-form{
padding: 10%;
margin-top: 10%;
}
.btnRegister{
float: right;
margin-top: 10%;
border: none;
border-radius: 1.5rem;
padding: 2%;
background: #0062cc;
color: #fff;
font-weight: 600;
width: 50%;
cursor: pointer;
}
.register .nav-tabs{
margin-top: 3%;
border: none;
background: #0062cc;
border-radius: 1.5rem;
width: 28%;
float: right;
}
.register .nav-tabs .nav-link{
padding: 2%;
height: 34px;
font-weight: 600;
color: #fff;
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
.register .nav-tabs .nav-link:hover{
border: none;
}
.register .nav-tabs .nav-link.active{
width: 100px;
color: #0062cc;
border: 2px solid #0062cc;
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
.register-heading{
text-align: center;
margin-top: 8%;
margin-bottom: -15%;
color: #495057;
}
