Skip to content

Commit

Permalink
first commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@javico11
javico11 committed May 22, 2021
0 parents commit 385b02c
Show file tree
Hide file tree
Showing 8 changed files with 478 additions and 0 deletions.
106 changes: 106 additions & 0 deletions css/cover.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/*
* Globals
*/

/* Links */
a,
a:focus,
a:hover {
color: #fff;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
color: #333;
text-shadow: none; /* Prevent inheritance from `body` */
background-color: #fff;
border: .05rem solid #fff;
}


/*
* Base structure
*/

html,
body {
height: 100%;
background-color: #333;
}

body {
display: -ms-flexbox;
display: flex;
color: #fff;
text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

.cover-container {
max-width: 42em;
}


/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}

.masthead-brand {
margin-bottom: 0;
}

.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: rgba(255, 255, 255, .5);
background-color: transparent;
border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}

.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}

@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}


/*
* Cover
*/
.cover {
padding: 0 1.5rem;
}
.cover .btn-lg {
padding: .75rem 1.25rem;
font-weight: 700;
}


/*
* Footer
*/
.mastfoot {
color: rgba(255, 255, 255, .5);
}
51 changes: 51 additions & 0 deletions ejercicio1.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Corrige los errores que encuentres en el documento</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="./css/cover.css">
</head>
<body>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">UTPL</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="./index.html">Inicio</a>
<a class="nav-link active" href="./ejercicio1.html">Ejercicio 01</a>
<a class="nav-link" href="./ejercicio2.html">Ejercicio 02</a>
<a class="nav-link" href="./ejercicio3.html">Ejercicio 03</a>
<a class="nav-link" href="./ejercicio4.html">Ejercicio 04</a>
<a class="nav-link" href="./ejercicio5.html">Ejercicio 05</a>
</nav>
</div>
</header>

<main role="main" class="inner cover">
<h1 class="cover-heading">Ejercicio 01</h1>
<h2 class="cover-heading">Corrige los errores, en el código html a continuación:</h2>
<p class="lead text-muted ">Desarrollo:

</p>
<br />
<h1>Aprender HTML es muy divertido</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quam optio nesciunt atque iure animi dicta velit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quam optio nesciunt atque iure animi dicta velit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quam optio nesciunt atque iure animi dicta velit</p>
</main>

<footer class="mastfoot mt-auto">
<div class="inner">
<p>Diseñado por: <a href="#">Javier Córdova López</a>, sígueme <a href="https://twitter.com/javico11">@javico11</a>.</p>
</div>
</footer>

<!-- JS Bootstrap 4.6 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
75 changes: 75 additions & 0 deletions ejercicio2.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio 02</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="./css/cover.css">
<style>
table, td, th {
border: 1px solid #fff;
padding: 0.5rem;
color: #fff;
}
</style>
</head>
<body>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">UTPL</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="./index.html">Inicio</a>
<a class="nav-link" href="./ejercicio1.html">Ejercicio 01</a>
<a class="nav-link active" href="./ejercicio2.html">Ejercicio 02</a>
<a class="nav-link" href="./ejercicio3.html">Ejercicio 03</a>
<a class="nav-link" href="./ejercicio4.html">Ejercicio 04</a>
<a class="nav-link" href="./ejercicio5.html">Ejercicio 05</a>
</nav>
</div>
</header>

<main role="main" class="inner cover">
<h1 class="cover-heading">Ejercicio 02</h1>
<h2 class="cover-heading">
Crear una tabla
</h2>
<p class="lead text-muted ">Desarrollo:
Confeccionar una tabla que muestre los nombres de países con algunas ciudades y un enlace a Wikipedia que hable sobre la ciudad, el enlace tiene que abrirse en una nueva página.
Se obtendría una tabla similar a esta, pero con el enunciado anterior, la tabla puede o no tener bordes:
</p>
<br />
<table class="table">
<tbody>
<tr>
<td rowspan="3" class="text-center">España</td>
<td>El País digital</td>
<td ><a class="stretched-link" style="color: cornflowerblue;" href="https://www.elpais.es">www.elpais.es</a> </td>
</tr>
<tr>
<td>ABC</td>
<td><a class="stretched-link" style="color: cornflowerblue;" href="https://www.abc.es">www.abc.es</a></td>
</tr>
<tr>
<td>El Mundo</td>
<td><a class="stretched-link" style="color: cornflowerblue;" href="https://www.elmundo.es">www.elmundo.es</a></td>
</tr>
</tbody>
</table>

</main>

<footer class="mastfoot mt-auto">
<div class="inner">
<p>Diseñado por: <a href="#">Javier Córdova López</a>, sígueme <a href="https://twitter.com/javico11">@javico11</a>.</p>
</div>
</footer>

<!-- JS Bootstrap 4.6 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
52 changes: 52 additions & 0 deletions ejercicio3.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio 03</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="./css/cover.css">
</head>
<body>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">UTPL</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="./index.html">Inicio</a>
<a class="nav-link" href="./ejercicio1.html">Ejercicio 01</a>
<a class="nav-link" href="./ejercicio2.html">Ejercicio 02</a>
<a class="nav-link active" href="./ejercicio3.html">Ejercicio 03</a>
<a class="nav-link" href="./ejercicio4.html">Ejercicio 04</a>
<a class="nav-link" href="./ejercicio5.html">Ejercicio 05</a>
</nav>
</div>
</header>

<main role="main" class="inner cover">
<h1 class="cover-heading">Ejercicio 03</h1>
<h2 class="cover-heading">Crear un ejemplo que contenga tres anclas, luego definir hipervínculos que se enlacen con dichas anclas</h2>
<p class="lead text-muted ">Desarrollo:

</p>
<br />
<ul class="">
<li><a href="https://www.youtube.com/watch?v=6m0ow_nOuSc">Ancla 01</a></li>
<li><a href="https://getbootstrap.com/">Ancla 02</a></li>
<li><a href="https://www.utpl.edu.ec/">Ancla 03</a></li>
</ul>
</main>

<footer class="mastfoot mt-auto">
<div class="inner">
<p>Diseñado por: <a href="#">Javier Córdova López</a>, sígueme <a href="https://twitter.com/javico11">@javico11</a>.</p>
</div>
</footer>

<!-- JS Bootstrap 4.6 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
82 changes: 82 additions & 0 deletions ejercicio4.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejercicio Formulario HTML</title>
<!--Bootstrap-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="./css/cover.css">
</head>
<body>
<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
<header class="masthead mb-auto">
<div class="inner">
<h3 class="masthead-brand">UTPL</h3>
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="./index.html">Inicio</a>
<a class="nav-link" href="./ejercicio1.html">Ejercicio 01</a>
<a class="nav-link" href="./ejercicio2.html">Ejercicio 02</a>
<a class="nav-link" href="./ejercicio3.html">Ejercicio 03</a>
<a class="nav-link active" href="./ejercicio4.html">Ejercicio 04</a>
<a class="nav-link" href="./ejercicio5.html">Ejercicio 05</a>
</nav>
</div>
</header>

<main role="main" class="inner cover">
<h1 class="cover-heading">Ejercicio 04</h1>
<h2 class="cover-heading"> Crea una página web que contenga un formulario con los siguientes campos de información:</h2>
<p class="lead text-muted ">Desarrollo:

</p>
<br />
<form method="GET" action="https://www.utpl.edu.ec/">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">Nombres</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Ingrese su nombre..." required autofocus>
</div>
<div class="mb-3">
<label for="exampleFormControlInput2" class="form-label">Email</label>
<input type="email" class="form-control" id="exampleFormControlInput2" placeholder="Ingrese su email..." required>
</div>
<div class="mb-3">
<label for="exampleFormControlInput3" class="form-label">Fecha registro</label>
<input type="date" class="form-control" id="exampleFormControlInput3" placeholder="Ingrese la fecha...">
</div>
<div class="mb-3">
<label for="exampleFormControlInput4" class="form-label">Hora registro</label>
<input type="time" class="form-control" id="exampleFormControlInput4" placeholder="Ingrese la hora...">
</div>
<div class="mb-3">
<label for="exampleFormControlInput5" class="form-label">Edad</label>
<input type="number" class="form-control" id="exampleFormControlInput5" min="18" max="65" placeholder="Ingrese su edad...">
</div>
<div class="mb-3">
<label for="exampleFormControlInput6" class="form-label">Teléfono</label>
<input type="tel" class="form-control" id="exampleFormControlInput6" placeholder="Ingrese su teléfono...">
</div>
<div class="mb-3">
<label for="exampleFormControlInput6" class="form-label">Color favorito</label>
<input type="color" class="form-control" id="exampleFormControlInput6" placeholder="Ingrese su color...">
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit">
Enviar
</button>
</div>
</form>
</main>

<footer class="mastfoot mt-auto">
<div class="inner">
<p>Diseñado por: <a href="#">Javier Córdova López</a>, sígueme <a href="https://twitter.com/javico11">@javico11</a>.</p>
</div>
</footer>

<!-- JS Bootstrap 4.6 -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>
Loading

0 comments on commit 385b02c

Please sign in to comment.