Skip to content

Ejercicio #2 - Omar Landaeta - Gimnasio ft Gatitos #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OmarLand wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Ejercicio #2 - Omar Landaeta - Gimnasio ft Gatitos #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cf00b19
Added few things
OmarLand Feb 5, 2023
eee6c5a
Added few multimedia sources
OmarLand Feb 5, 2023
9584cae
Added folders
OmarLand Feb 5, 2023
3426f2c
Added nav sections
OmarLand Feb 5, 2023
49ccd98
updated gatitos and style css
OmarLand Feb 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 121 additions & 0 deletions gatitos.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<!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>Veamos gatitos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Sección de imagenes de gatitos -->
<section id="img">
<p><h2>Sección de imagenes de gatitos:</h2></p>
<table>

<tr>
<th>Gatito 1 - Minino</th>
<th>Gatito 2 - Michicat</th>
<th>Gatito 3 - Gatotin</th>
<th>Gatito 4 - Bils-Sam</th>
</tr>
<tr>
<td><img src="https://cdn.pixabay.com/photo/2021/09/05/00/58/gato-6598700_960_720.jpg" alt="Gatito Juzgón_2" style="width: 100%;"></td>
<td><img src="https://images.pexels.com/photos/7633693/pexels-photo-7633693.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Gatito Juzgón_2" style="width: 100%;"></td>
<td><img src="https://images.pexels.com/photos/14731702/pexels-photo-14731702.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Gatito Juzgón_3" style="width: 100%;"></td>
<td><img src="https://images.pexels.com/photos/14215163/pexels-photo-14215163.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt="Gatito Juzgón_3" style="width: 100%;"></td>
</tr>

</table>

</section>

<br>

<!-- Sección de vídeos de gatitos -->
<section id="video">
<p><h2>Sección de vídeos de gatitos:</h2></p>
<table>

<tr>
<th>Lazy little cat 1</th>
<th>Little cat gossiping xD - 2</th>
<th>Sleepy face little cat - 3</th>
</tr>

<tr>
<td>
<video width="475" controls>
<source src="video/Cat-35733.mp4" type="">
Video no soportado en tu navegador
</video>
</td>
<td>
<video width="475" controls>
<source src="video/Cat-64547.mp4" type="">
Video no soportado en tu navegador
</video>
</td>
<td>
<video width="475" controls>
<source src="video/Pet-20830.mp4" type="">
Video no soportado en tu navegador
</video>
</td>

</tr>
</table>
</section>

<br>

<!-- Sección de sonidos de gatitos -->
<section id="sounds">
<p><h2>Sección de sonidos de gatitos:</h2></p>
<table>
<tr>
<th>Sound 1 - Little Cat</th>
<th>Sound 2 - Little Cat</th>
<th>Sound 3 - Little Cat</th>
</tr>
<tr>
<td>
<audio controls>
<source src="sounds/cat-meow-14536.mp3" type="">
Audio not supported with this browser
</audio>
</td>
<td>
<audio controls>
<source src="sounds/cat-meow-99835.mp3" type="">
Audio not supported with this browser
</audio>
</td>
<td>
<audio controls>
<source src="sounds/sleepy-cat-purring-and-meowing-39248.mp3" type="">
Audio not supported with this browser
</audio>
</td>
</tr>
</table>

</section>

<p><em><strong>¿Deseas volver a una de la secciones? - Click en uno de ellos debajo</strong></em></p>

<nav>
<ul>
<li><a href="#img">Imagenes /</a></li>
<li><a href="#sounds">Sounds /</a></li>
<li><a href="#video">Videos</a></li>
</ul>
</nav>

<br>

<a href="index.html" class="boton">Página anterior...</a>

</body>
</html>
68 changes: 68 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!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">
<link rel="stylesheet" href="style.css">
<title>Segundo Ejercicio HTML</title>
</head>
<body>
<table>
<!-- Cabecera de la Factura Invoice y fecha -->
<tr>
<th colspan="3">Invoice #123456789</th>
<th colspan="3">14 January 2025 </th>
</tr>
<tr>
<td colspan="2"><strong>Pay to:</strong><br>Acme Billing Co.<br>123 Main St.<br>Cityville, NA 12345</td>
<td colspan="2"><strong>Customer:</strong><br>John Smith<br>321 Willow Way<br>Southeast Northwestershire, MA 54321</td>
</tr>

<!-- Cabecera de los detalles de la Factura -->
<tr>
<th><strong>Name/Description</strong></th>
<th><strong>Qty.</strong></th>
<th><strong>@</strong></th>
<th><strong>Cost</strong></th>
</tr>
<tr>
<td>Paperclips</td>
<td>1000</td>
<td>0.01</td>
<td>10.00</td>
</tr>
<tr">
<td>Staples (box)</td>
<td>100</td>
<td>1.00</td>
<td>100.00</td>
</tr>

<!-- Muestra el Sub total de la factura -->
<tr">
<th colspan="3"><strong>Subtotal</strong></th>
<td colspan="3">110.00</td>
</tr>

<!-- Muestra los impuestos calculados de la factura -->
<tr">
<th colspan="2"><strong>Tax</strong></th>
<td colspan="1">8%</td>
<td colspan="2">8.80</td>
</tr>

<!-- Muestra el total del importe a pagar de la FT -->
<tr">
<th colspan="3"><strong>Grand Total</strong></th>
<td colspan="3">$ 118.80</td>
</tr>
</table>

<br>

<a href="gatitos.html" class="boton">Ver gatitos...</a>


</body>
</html>
Binary file added sounds/cat-meow-14536.mp3
View file
Open in desktop
Binary file not shown.
Binary file added sounds/cat-meow-99835.mp3
View file
Open in desktop
Binary file not shown.
Binary file added sounds/sleepy-cat-purring-and-meowing-39248.mp3
View file
Open in desktop
Binary file not shown.
65 changes: 65 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
body{
margin-bottom: 20px;
/* padding: 10px; */
}


/* Dandole un poco de vida a la tabla */
table{
width : 100%;
border-collapse : collapse;
}

table th{
background-color: #D8D8D8;
}

table, th, td {
border : 1px solid black;
text-align : left;

}

th, td{
padding : 8px;
width : 150px;
}

/* Aqui controlo que no muestre la linea fea del hipervinculo xD */
a:link, a:visited, a:active {
text-decoration :none;
}

/* Se añade una clase BOTON para navegar entre index y gatitos */
.boton {
height : 90px;
width : 300px;
background-color : #D8D8D8;
color : black;
border-radius : 20px;
padding : 10px;
box-shadow : 0px 3px 12px -3px black;
border : 1px solid black;
}

/* Acá controlamos el tamaño de las imagenes de gatitos */

img{
width : 300px;
}

/* Este es el panel de navegación entre las secciones */
nav ul{
padding : 8px;
margin : 0;
list-style : none;
}

nav ul li{
display : inline-block;
}

nav ul li a{
text-decoration : none;
color : #000099;
}
Binary file added video/Cat-35733.mp4
View file
Open in desktop
Binary file not shown.
Binary file added video/Cat-64547.mp4
View file
Open in desktop
Binary file not shown.
Binary file added video/Pet-20830.mp4
View file
Open in desktop
Binary file not shown.