En este vídeo vamos a ver cual será el proyecto final que vamos a desarrolla.
En este artículo hay un archivo llamado "Proyecto a descargar.zip".
Por favor descomprimir, y verán dos archivos:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style type="text/css">
.registerinicio{
/*background: -webkit-linear-gradient(left, #3931af, #00c6ff);
background: -webkit-linear-gradient(left, #020110, #00c6ff);
background: -webkit-linear-gradient(left,#293437, #00c6ff);*/
background: -webkit-linear-gradient(left,#3f7483, #0dc9ff);
margin-top: 3%;
/*padding: 3%; */
}
.register{
/*background: -webkit-linear-gradient(left, #3931af, #00c6ff);
background: -webkit-linear-gradient(left, #020110, #00c6ff);
background: -webkit-linear-gradient(left,#293437, #00c6ff);*/
background: -webkit-linear-gradient(left,#3f7483, #0dc9ff);
/*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: 100%;
-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;
}
.register .register-form .form-control {
/* border-radius: 1rem;*/
}
.register-left1 img{
margin-top: 0;
margin-bottom: 0%;
width: 20%;
}
.btncolorblanco {
color: white !important;
margin: 1px;
}
.container-fluid{
width: 90% !important;
}
.fa {
width: 20px;
}
.redondo {
border-radius: 64px;
}
body {
background-color: #0f8bf41a;
font-family: 'Underdog', cursive;
}
footer {
left:0px;
bottom:0px;
height:30px;
width:100%;
}
.footers a {color:#696969;}
.footers p {color:#696969;}
.footers ul {line-height:30px;}
#social-fb:hover {
color: #3B5998;
transition:all .001s;
}
#social-tw:hover {
color: #4099FF;
transition:all .001s;
}
#social-gp:hover {
color: #d34836;
transition:all .001s;
}
#social-em:hover {
color: #f39c12;
transition:all .001s;
}
.breadcrumb {
background-color: #e9ecef00;
}
#icono {
width: 20%;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid registerinicio">
<div class="row">
<div class="col-md-6 register-left register-left1">
<img src="http://www.idaipqroo.org.mx/wp-content/uploads/2018/06/proteccion-de-datos-personales-791x1024.png" alt=""/>
</div>
<div class="col-md-6 register-left">
<h3>Bienvenid@</h3>
<p>Por favor llena los datos correctamente en el sistema!</p>
</div>
</div>
</div>
<div class="container-fluid ">
<br>
<nav class="navbar navbar-light">
<a class="navbar-brand"><img id="icono" class="img-responsive"
src="https://imge.apk.tools/300/d/3/1/com.widesoft.guiatelefonica.png"></a>
<ul class="nav flex-column text-center">
<li class="nav-item">
<span class="nav-link active">Bienvenido Jhonatan</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cerrar sesión</a>
</li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<br>
<h1 class="text-center">Datos personales</h1>
<br>
<div class="row float-right">
<a class="btn btn-info btncolorblanco"><i class="fas fa-user-plus"></i> Agregar un nuevo Registro</a>
</div>
<br>
<table class="table-responsive table text-center">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nombres y apellidos</th>
<th scope="col">Telefono</th>
<th scope="col">Celular</th>
<th scope="col">Sexo</th>
<th scope="col">Email</th>
<th scope="col">Posición</th>
<th scope="col">Departamento</th>
<th scope="col">Salario</th>
<th scope="col">Fecha de nacimiento</th>
<th scope="col">Acción</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Jhonatan David Fernandez Rosa</td>
<td>18499188421</td>
<td>18499188421</td>
<td>Masculino</td>
<td>[email protected]</td>
<td>Auditor TI</td>
<td>Auditoria</td>
<td>66500.00</td>
<td>09/08/1987</td>
<td><a class="btn btn-success btncolorblanco">
<i class="fa fa-edit"></i> Editar
</a>
<a class="btn btn-danger btncolorblanco">
<i class="fa fa-trash-alt"></i> Eliminar
</a>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<footer>
<section class="footers border pt-5 pb-3">
<div class="container-fluid pt-5">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 footers-one ">
<div class="footers-logo">
<img class="img-responsive" src="https://imge.apk.tools/300/d/3/1/com.widesoft.guiatelefonica.png" style="width: 50px;
">
</div>
<div class="footers-info mt-3">
<p>Cras sociis natoque penatibus et magnis Lorem Ipsum tells about the compmany right now the best.</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fab fa-facebook-square fa-2x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fab fa-twitter-square fa-2x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fab fa-google-plus-square fa-2x social"></i></a>
<a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-two">
<h5>Essentials </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Search</a></li>
<li><a href="contact.html">Sell your Car</a></li>
<li><a href="about.html">Advertise with us</a></li>
<li><a href="about.html">Dealers Portal</a></li>
<li><a href="about.html">Post Requirements</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-three">
<h5>Information </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Register Now</a></li>
<li><a href="contact.html">Advice</a></li>
<li><a href="about.html">Videos</a></li>
<li><a href="about.html">Blog</a></li>
<li><a href="about.html">Services</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-four">
<h5>Explore </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">News</a></li>
<li><a href="contact.html">Sitemap</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Feedbacks</a></li>
<li><a href="about.html">User Agreement</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-five">
<h5>Company </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Career</a></li>
<li><a href="about.html">For Parters</a></li>
<li><a href="about.html">Terms</a></li>
<li><a href="about.html">Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="disclaimer border">
<div class="container-fluid">
<div class="row ">
<div class="col-md-12 py-2">
<small>
Disclaimer: Element Limited is only an intermediary offering its platform to facilitate the transactions between Seller and Customer/Buyer/User and is not and cannot be a party to or control in any manner any transactions between the Seller and the Customer/Buyer/User. All the offers and discounts on this Website have been extended by various Builder(s)/Developer(s) who have advertised their products. Element is only communicating the offers and not selling or rendering any of those products or services. It neither warrants nor is it making any representations with respect to offer(s) made on the site. Element Limited shall neither be responsible nor liable to mediate or resolve any disputes or disagreements between the Customer/Buyer/User and the Seller and both Seller and Customer/Buyer/User shall settle all such disputes without involving Element Limited in any manner.
</small>
</div>
</div>
</div>
</section>
<section class="copyright border">
<div class="container">
<div class="row text-center">
<div class="col-md-12 pt-3">
<p class="text-muted">© 2018 xyz Software Pvt. Ltd.</p>
</div>
</div>
</div>
</section>
</footer>
</body>
</html>
y
crear.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
<title>Crear</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<style type="text/css">
.registerinicio{
/*background: -webkit-linear-gradient(left, #3931af, #00c6ff);
background: -webkit-linear-gradient(left, #020110, #00c6ff);
background: -webkit-linear-gradient(left,#293437, #00c6ff);*/
background: -webkit-linear-gradient(left,#3f7483, #0dc9ff);
margin-top: 3%;
/*padding: 3%; */
}
.register{
/*background: -webkit-linear-gradient(left, #3931af, #00c6ff);
background: -webkit-linear-gradient(left, #020110, #00c6ff);
background: -webkit-linear-gradient(left,#293437, #00c6ff);*/
background: -webkit-linear-gradient(left,#3f7483, #0dc9ff);
/*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: 100%;
-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;
}
.register .register-form .form-control {
/* border-radius: 1rem;*/
}
.register-left1 img{
margin-top: 0;
margin-bottom: 0%;
width: 20%;
}
.btncolorblanco {
color: white !important;
margin: 1px;
}
.container-fluid{
width: 90% !important;
}
.fa {
width: 20px;
}
.redondo {
border-radius: 64px;
}
body {
background-color: #0f8bf41a;
font-family: 'Underdog', cursive;
}
footer {
left:0px;
bottom:0px;
height:30px;
width:100%;
}
.footers a {color:#696969;}
.footers p {color:#696969;}
.footers ul {line-height:30px;}
#social-fb:hover {
color: #3B5998;
transition:all .001s;
}
#social-tw:hover {
color: #4099FF;
transition:all .001s;
}
#social-gp:hover {
color: #d34836;
transition:all .001s;
}
#social-em:hover {
color: #f39c12;
transition:all .001s;
}
.breadcrumb {
background-color: #e9ecef00;
}
#icono {
width: 20%;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<nav class="navbar navbar-light">
<a class="navbar-brand"><img id="icono" class="img-responsive"
src="https://imge.apk.tools/300/d/3/1/com.widesoft.guiatelefonica.png"></a>
<ul class="nav flex-column text-center">
<li class="nav-item">
<span class="nav-link active">Bienvenido Jhonatan</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Cerrar sesión</a>
</li>
</ul>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
</div>
<div class="container register">
<div class="row">
<div class="col-md-3 register-left">
<img src="http://www.idaipqroo.org.mx/wp-content/uploads/2018/06/proteccion-de-datos-personales-791x1024.png" alt=""/>
<h3>Bienvenid@</h3>
<p>Por favor llena los datos correctamente en el sistema!</p>
</div>
<div class="col-md-9 register-right">
<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">Crear nuevo Registro</h3>
<div class="row register-form">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-user text-info"></i></div>
</div>
<input type="text" class="form-control" id="nombres" name="nombres" placeholder="Nombres" required="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-user-edit text-info"></i></div>
</div>
<input type="text" class="form-control" id="apellidos" name="apellidos" placeholder="Apellidos" required="">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-phone text-info"></i></div>
</div>
<input class="form-control" type="number" name="telefono" placeholder="Telefono: 18491115555" id="telefono">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-mobile-alt text-info"></i></div>
</div>
<input class="form-control" type="number" name="celular" placeholder="Celular: 18491115555" id="Celular">
</div>
</div>
<div class="form-group">
<div class="maxl">
<label class="radio inline">
<input type="radio" name="sexo" value="Masculino" checked>
<span> Masculino </span>
</label>
<label class="radio inline">
<input type="radio" name="sexo" value="Femenino">
<span>Femenino </span>
</label>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-at text-info"></i></div>
</div>
<input type="email" name="email" class="form-control" placeholder="Email" value="" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-address-card text-info"></i></div>
</div>
<input type="text" name="posicion" class="form-control" placeholder="Posición" value="" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-map-marker-alt text-info"></i></div>
</div>
<select class="form-control">
<option class="hidden" selected disabled>Departamento</option>
<option>Gerencia de TI</option>
<option>Auditoria TI</option>
<option>Contabilidad</option>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-dollar-sign text-info"></i></div>
</div>
<input type="number" class="form-control" name="salario" placeholder="salario *" value="" />
</div>
</div>
<div class="form-group">
<label >Fecha de nacimiento</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fa fa-calendar-alt text-info"></i></div>
</div>
<input type="date" name="fechadenacimiento" id="fechadenacimiento" min="1000-01-01"
max="3000-12-31" class="form-control">
</div>
</div>
<button type="submit" class="redondo btn btn-info"><i class="fas fa-save"></i> Guardar</button>
<a href="" class="redondo btn btn-danger"><i class="fas fa-ban"></i> Cancelar</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<footer>
<section class="footers border pt-5 pb-3">
<div class="container pt-5">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 footers-one ">
<div class="footers-logo">
<img class="img-responsive" src="https://imge.apk.tools/300/d/3/1/com.widesoft.guiatelefonica.png" style="width: 50px;
">
</div>
<div class="footers-info mt-3">
<p>Cras sociis natoque penatibus et magnis Lorem Ipsum tells about the compmany right now the best.</p>
</div>
<div class="social-icons">
<a href="https://www.facebook.com/"><i id="social-fb" class="fab fa-facebook-square fa-2x social"></i></a>
<a href="https://twitter.com/"><i id="social-tw" class="fab fa-twitter-square fa-2x social"></i></a>
<a href="https://plus.google.com/"><i id="social-gp" class="fab fa-google-plus-square fa-2x social"></i></a>
<a href="mailto:[email protected]"><i id="social-em" class="fa fa-envelope-square fa-2x social"></i></a>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-two">
<h5>Essentials </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Search</a></li>
<li><a href="contact.html">Sell your Car</a></li>
<li><a href="about.html">Advertise with us</a></li>
<li><a href="about.html">Dealers Portal</a></li>
<li><a href="about.html">Post Requirements</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-three">
<h5>Information </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Register Now</a></li>
<li><a href="contact.html">Advice</a></li>
<li><a href="about.html">Videos</a></li>
<li><a href="about.html">Blog</a></li>
<li><a href="about.html">Services</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-four">
<h5>Explore </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">News</a></li>
<li><a href="contact.html">Sitemap</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Feedbacks</a></li>
<li><a href="about.html">User Agreement</a></li>
</ul>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 footers-five">
<h5>Company </h5>
<ul class="list-unstyled">
<li><a href="maintenance.html">Career</a></li>
<li><a href="about.html">For Parters</a></li>
<li><a href="about.html">Terms</a></li>
<li><a href="about.html">Policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</section>
<section class="disclaimer border">
<div class="container">
<div class="row ">
<div class="col-md-12 py-2">
<small>
Disclaimer: Element Limited is only an intermediary offering its platform to facilitate the transactions between Seller and Customer/Buyer/User and is not and cannot be a party to or control in any manner any transactions between the Seller and the Customer/Buyer/User. All the offers and discounts on this Website have been extended by various Builder(s)/Developer(s) who have advertised their products. Element is only communicating the offers and not selling or rendering any of those products or services. It neither warrants nor is it making any representations with respect to offer(s) made on the site. Element Limited shall neither be responsible nor liable to mediate or resolve any disputes or disagreements between the Customer/Buyer/User and the Seller and both Seller and Customer/Buyer/User shall settle all such disputes without involving Element Limited in any manner.
</small>
</div>
</div>
</div>
</section>
<section class="copyright border">
<div class="container">
<div class="row text-center">
<div class="col-md-12 pt-3">
<p class="text-muted">© 2018 xyz Software Pvt. Ltd.</p>
</div>
</div>
</div>
</section>
</footer>
</body>
</html>
Curso Relacionado
Archivo a descargar
Proyecto a descargar7.93 KB