Práctica 1

This commit is contained in:
Fernando Méndez 2021-03-08 19:01:14 +01:00 committed by GitHub
parent 0d91c6eaad
commit f40c8ef494
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 962 additions and 0 deletions

BIN
Practica1-Enunciado.pdf Normal file

Binary file not shown.

245
assets/css/main.css Normal file
View File

@ -0,0 +1,245 @@
/* Basic */
* {
box-sizing: border-box;
}
/* Headers */
h1, h2, h3, h4 {
color: #363636;
text-transform: uppercase;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-align: center;
}
/* Header */
.header {
background-color: #1f2c3d;
color: #dadada;
padding: 15px;
text-align: left;
font-size: 15px;
}
.header img {
width: 11px;
}
.menu {
background-color: #1f2c3d;
color: #dadada;
text-align: right;
font-size: 15px;
}
/* Paragraphs */
p {
padding: 0;
border: 0;
}
a {
color: #dadada;
text-decoration: none;
}
a:hover{
color:rgb(138, 150, 32);
}
/* Body */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #d3ebff;
color: #000000
}
/* Table */
table {
border-collapse: collapse;
border-spacing: 0;
margin: 0 0 2em 0;
width: 100%;
text-align: left;
font-size: 15px;
}
table a{
color: #1f2c3d;
}
table tbody tr {
border: solid 1px #1f2c3d;
border-left: 0;
border-right: 0;
}
table tbody tr:nth-child(2n + 1) {
background-color: rgba(144, 144, 144, 0.25);
}
table td {
padding: 0.75em 0.75em;
}
table th {
color: #1f2c3d;
font-size: 0.9em;
font-weight: 600;
padding: 0 0.85em 0.85em 0.85em;
}
table thead {
border-bottom: solid 2px #1f2c3d;
}
/* Main */
.main {
padding: 30px;
text-align: center;
font-size: 35px;
}
.main h1, h2, h3, h4 {
color: #363636;
}
.main img {
width: 50%;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 33.33%;
}
/* Middle column */
.column.middle {
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout: makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 800px) {
.column.side, .column.middle {
width: 100%;
}
}
/* Code & Blockquote */
.code {
background: #1f2c3d;
border-radius: 3px;
font-size: 0.9em;
margin: 10px;
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
overflow-y: auto;
}
.code p, h1, h2, h3 {
color: #dadada;
}
.code a {
text-decoration: underline;
}
.code img{
/* width: 80px; height: 80px; */
width: 25%;
}
.blockquote {
border-left: solid 4px #dadada;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
.blockquote.bio {
height: 250px;
}
/* Form */
form {
margin: auto;
width: 50%;
}
label {
text-align: center;
font-weight: bold;
}
input, textarea {
width: 100%;
height: 27px;
border: 1px solid #000000;
padding: 10px;
margin-top: 5px;
font-size: 15px;
}
textarea {
width: 100%;
height: 150px;
}
#radio, #checkbox {
width: auto;
height: 15px;
cursor: pointer;
}
.verify {
font-size: 11px;
}
#submit {
width: 100%;
height: 35px;
border: 1px solid #000000;
padding: 5px;
margin-top: 5px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#submit:hover {
background-color: #d3ebff;
}
#reset {
width: 100%;
height: 30px;
border: 1px solid #dadada;
background-color: #00020f;
color: #dadada;
padding: 5px;
margin-top: 5px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
#reset:hover {
border:#000000;
background-color: #791515;
}
/* Footer */
.footer {
background-color: #1f2c3d;
color: #dadada;
padding: 25px;
margin-top: 200px;
width: 100%;
height: 80px;
text-align: right;
}

230
assets/css/pro.css Normal file
View File

@ -0,0 +1,230 @@
/* Basic */
* {
box-sizing: border-box;
}
/* Body */
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #d3ebff;
color: #000000
}
/* Headers */
h1, h2, h3, h4 {
color: #363636;
text-transform: uppercase;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-align: center;
}
/* Paragraphs */
p {
padding: 0;
border: 0;
}
a {
color: #dadada;
text-decoration:none;
}
a:hover{
color:rgb(138, 150, 32);
}
/* Form */
form {
margin: 0 auto;
width: 50%;
}
label {
text-align: center;
font-weight: bold;
}
input, textarea {
width: 100%;
height: 27px;
border: 1px solid #000000;
padding: 10px;
margin-top: 5px;
font-size: 15px;
}
textarea {
width: 100%;
height: 150px;
}
#radio, #checkbox {
width: auto;
height: 15px;
cursor: pointer;
}
.verify {
font-size: 11px;
}
#submit {
width: 100%;
height: 35px;
border: 1px solid #000000;
padding: 5px;
margin-top: 5px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
#reset {
width: 100%;
height: 30px;
border: 1px solid #ffffff;
background-color: #0f0000;
color: #dadada;
padding: 5px;
margin-top: 5px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
}
/* Style the header */
.header {
background-color: #1f2c3d;
color: #dadada;
padding: 15px;
text-align: left;
font-size: 15px;
}
.menu {
background-color: #1f2c3d;
color: #dadada;
text-align: right;
font-size: 15px;
}
/* Style the main */
.main {
padding: 30px;
text-align: center;
font-size: 35px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
height: 300px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Text on the middle of the page */
.blockquote {
border-left: solid 4px #dadada;
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 2em;
}
.code {
background: #1f2c3d;
border-radius: 3px;
font-size: 0.9em;
letter-spacing: 0;
margin: 0 0.25em;
padding: 0.25em 0.65em;
display: block;
line-height: 1.75em;
padding: 1em 1.5em;
overflow-x: auto;
}
.code p{
color: #dadada;
}
/* CTA */
#cta {
background-color: #1b63ce;
color: rgba(255, 255, 255, 0.75);
background-attachment: fixed;
background-image: linear-gradient(rgba(4, 18, 54, 0.25), rgba(4, 18, 54, 0.25)), url(../../images/sala1.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
position: relative;
text-align: center;
z-index: 1;
}
#cta h1, h2, h3 {
color: #dadada;
}
/* Wrapper */
.wrapper {
padding: 8rem 0 6rem 0 ;
position: relative;
z-index: 1; }
@media screen and (max-width: 1280px) {
.wrapper {
padding: 4rem 0 2rem 0 ; } }
@media screen and (max-width: 736px) {
.wrapper {
padding: 3rem 0 1rem 0 ; } }
@media screen and (max-width: 480px) {
.wrapper {
padding: 2rem 0 0.1rem 0 ;
}
}
/* Inner */
.inner {
margin: 0 auto;
width: 175rem;
max-width: calc(100% - 6rem);
}
@media screen and (max-width: 480px) {
.inner {
max-width: calc(100% - 3rem);
}
}
/* Style the footer */
.footer {
background-color: #1f2c3d;
color: #dadada;
padding: 25px;
margin-top: 250px;
width: 100%;
height: 80px;
text-align: right;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}

44
bocetos/index.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Bocetos</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Bocetos
<div class="menu">
<a href="/">Inicio |</a>
<a href="../detalles/">Detalles |</a>
<a href="#">Bocetos |</a>
<a href="../miembros/">Miembros |</a>
<a href="../planificacion/">Planificación |</a>
<a href="../contacto/">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
</div>
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
<!-- Scripts -->
</body>
</html>

86
contacto/index.html Normal file
View File

@ -0,0 +1,86 @@
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Contacto</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Contacto
<div class="menu">
<a href="/">Inicio |</a>
<a href="../detalles/">Detalles |</a>
<a href="../bocetos/">Bocetos |</a>
<a href="../miembros/">Miembros |</a>
<a href="../planificacion/">Planificación |</a>
<a href="#">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<h1>Contacto</h1>
<hr />
</div>
<!-- Form -->
<section id="form">
<h4>Formulario</h4>
<form method="post" action="mailto:fernmend@ucm.es">
<div class="row">
<fieldset id="datos_personales">
<legend>Datos personales</legend>
<div class="_name">
<input type="text" name="name" id="name" value="" placeholder="Nombre" />
</div>
<div class="_email">
<input type="email" name="email" id="email" value="" placeholder="Email" />
</div>
</fieldset>
<fieldset id="motivo">
<legend>Motivo de la consulta</legend>
<div class="reason">
<input type="radio" id="radio" name="reason" checked>
<label for="evaluation">Evaluación</label>
</div>
<div class="reason">
<input type="radio" id="radio" name="reason">
<label for="sugestions">Sugerencias</label>
</div>
<div class="reason">
<input type="radio" id="radio" name="reason">
<label for="critics">Críticas</label>
</div>
</fieldset>
<div class="message">
<textarea name="message" id="message" placeholder="Escribe aquí tu mensaje..."></textarea> <!-- rows="5" -->
</div>
<div class="verify">
<input type="checkbox" id="checkbox" name="terms">
<label for="terms">Marque esta casilla para verificar que ha leído nuestros términos y condiciones del servicio.</label>
</div>
<div class="actions">
<input type="submit" id="submit" value="Enviar mensaje" class="primary" />
<input type="reset" id="reset" value="Borrar" />
</div>
</div>
</form>
</section>
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</body>
</html>

61
detalles/index.html Normal file
View File

@ -0,0 +1,61 @@
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Detalles</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Detalles
<div class="menu">
<a href="/">Inicio |</a>
<a href="#">Detalles |</a>
<a href="../bocetos/">Bocetos |</a>
<a href="../miembros/">Miembros |</a>
<a href="../planificacion/">Planificación |</a>
<a href="../contacto/">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
</div>
<!-- Details -->
<div class="code">
<h1>Detalles</h1>
<hr />
<div class="blockquote">
<p>
Con este proyecto buscamos la creación de una aplicación web que
gestione la cartelera de un grupo de cines con una cartelera de películas variable, unos horarios propios de cada cine por sesión y película
y unos precios determinados.
</p>
<p>
Los usuarios podrán registrarse, comprar sus entradas para una
sesión, elegir asientos, precomprar sus snacks y ver ofertas y promociones.
</p>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
<!-- Scripts -->
</body>
</html>
</html>

BIN
img/arn.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 75 KiB

BIN
img/dmg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

BIN
img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
img/favicon2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
img/fmt.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
img/imt.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

BIN
img/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

BIN
img/logo_trasparente.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

BIN
img/mep.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 97 KiB

BIN
img/orp.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
img/sala1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

69
index.html Normal file
View File

@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | FDI-Cines</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="#"><img src="img/favicon2.png" /> CompluCine</a> | FDI-Cines
<div class="menu">
<a href="./detalles/">Detalles |</a>
<a href="./bocetos/">Bocetos |</a>
<a href="./miembros/">Miembros |</a>
<a href="./planificacion/">Planificación |</a>
<a href="./contacto/">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="img/logo_trasparente.png" /></div>
</div>
<!-- Description -->
<section id="description">
<div class="code" id="resume">
<h1>Descripción</h1>
<hr />
<div class="blockquote">
<p>
CompluCine es un proyecto para la creación y desarrollo de una plataforma web que permita la compra de entradas
de cine, por fecha y hora, para cualquiera de los cines del grupo <a href="#FDI-Cines">FDI-Cines</a> mostrar la cartelera disponible e incluya ofertas y
promociones para los clientes.
</p>
<p>
Con este proyecto buscamos la creación de una aplicación web que
gestione la cartelera de un grupo de cines con una cartelera de películas variable, unos horarios propios de cada cine por sesión y película
y unos precios determinados.
</p>
<p>
Los usuarios podrán registrarse, comprar sus entradas para una
sesión, elegir asientos, precomprar sus snacks y ver ofertas y promociones.
</p>
</div>
</div>
<div class="code" id="FDI-Cines">
<h2>FDI-Cines</h2>
<hr />
<p>Somos un grupo de estudiantes de la asignatura de Sistemas Web.</p>
<p>CompluCine es un proyecto web universitario y en ningún momento pretende ofrecer una funcionalidad real.</p>
</div>
</section>
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
</body>
</html>

180
miembros/index.html Normal file
View File

@ -0,0 +1,180 @@
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Miembros</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Miembros
<div class="menu">
<a href="/">Inicio |</a>
<a href="../detalles/">Detalles |</a>
<a href="../bocetos/">Bocetos |</a>
<a href="#">Miembros |</a>
<a href="../planificacion/">Planificación |</a>
<a href="../contacto/">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
<section id="members_table">
<h4>Miembros</h4>
<hr />
<table>
<thead>
<tr>
<th>Nombre</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#MEP">Marco Expósito Pérez</a></td>
<td><a href="mailto:marcoexp@ucm.es">marcoexp@ucm.es</a></td>
</tr>
<tr>
<td><a href="#FMT">Fernando Méndez Torrubiano</a></td>
<td><a href="mailto:fernmend@ucm.es">fernmend@ucm.es</a></td>
</tr>
<tr>
<td><a href="#DMG">Daniel Muñoz García</a></td>
<td><a href="mailto:danimu03@ucm.es">danimu03@ucm.es</a></td>
</tr>
<tr>
<td><a href="#IMT">Ioan Marian Tulai</a></td>
<td><a href="mailto:ioantula@ucm.es">ioantula@ucm.es</a></td>
</tr>
<tr>
<td><a href="#ORP">Óscar Ruiz de Pedro</a></td>
<td><a href="mailto:oscarrui@ucm.es">oscarrui@ucm.es</a></td>
</tr>
<tr>
<td><a href="#ARN">Adrian Real del Noval</a></td>
<td><a href="mailto:adrireal@ucm.es">adrireal@ucm.es</td>
</tr>
</tbody>
</table>
</section>
</div>
<!-- Members -->
<div class="row">
<div class="column side">
<!-- Marco Esposito -->
<section id="MEP">
<div class="code">
<div class="image">
<img src="../img/mep.jpg" />
</div>
<p>~ Marco Expósito Pérez (marcoexp@ucm.es)</p>
<div class="blockquote bio">
<p>Aficionado a todo tipo de videojuegos, principalmente la saga Zelda. Tambien me gusta leer tanto literatura fantastica como mangas y veo anime asiduamente.</p>
<p>En verano suelo participar en campeonatos de pesca subacuatica y tambien me gusta bastante jugar al futbol federado, aunque hace un tiempillo ya que no hago.</p>
</div>
</div>
</section>
</div>
<div class="column middle">
<!-- Fernando Méndez -->
<section id="FMT">
<div class="code">
<div class="image">
<img src="../img/fmt.jpg" />
</div>
<p>~ Fernando Méndez (fernmend@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de Ingeniería de Computadores en la Universidad Complutense de Madrid.</p>
<p>Presidente de la asociación Diskobolo. Colaborador de la Oficina de Sotfware Libre de la UCM y coordinador del grupo de Hacking Ético de la FDI.</p>
</div>
</div>
</section>
</div>
<div class="column side">
<!-- Daniel Muñoz -->
<section id="DMG">
<div class="code">
<div class="image">
<img src="../img/dmg.jpg" />
</div>
<p>~ Daniel Muñoz García (danimu03@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante del grado en ingeniería informática en la Universidad Complutense de Madrid. Aficionado a la ciberseguridad y las nuevas tecnologías.</p>
<p>Especializado en el diseño y gestión de bases de datos, tanto SQL como noSQL, y su desarrollo con distintos lenguajes como MongoDB o MySQL.</p>
</div>
</div>
</section>
</div>
</div>
<div class="row">
<div class="column side">
<!-- Fernando Méndez -->
<section id="IMT">
<div class="code">
<div class="image">
<img src="../img/dmg.jpg" />
</div>
<p>~ Ioan Marian Tulai (ioantula@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante con mucha ilusion y ganas de trabajar especialista en hardware.</p>
<p>Alta experiencia programando en C, gran interés en aprender nuevos lenguajes de programación y aficionado a dibujar.</p>
</div>
</div>
</section>
</div>
<div class="column middle">
<!-- -->
<section id="ORP">
<div class="code">
<div class="image">
<img src="../img/orp.jpg" />
</div>
<p>~ Óscar Ruiz de Pedro (oscarrui@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de ingeniería de computadores en la Universidad Complutense de Madrid.</p>
<p>Altas capacidades de programación en bajo nivel, me gustaría aprender más sobre el ámbito de la robótica.</p>
<p>Aficionado a todo tipo de videojuegos, impresión 3D, teatro y airsoft.</p>
</div>
</div>
</section>
</div>
<div class="column side">
<!-- -->
<section id="ARN">
<div class="code">
<div class="image">
<img src="../img/arn.jpg" />
</div>
<p>~ Adrian Real del Noval (adrireal@ucm.es)</p>
<div class="blockquote bio">
<p>Estudiante de 3er año de Ingeniería de Computadores en la Universidad Complutense de Madrid.</p>
<p>Las áreas en las que tiene mayor interés son la electrónica, las GPUs, y los sistemas empotrados.</p>
</div>
</div>
</section>
</div>
</div>
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
<!-- Scripts -->
</body>
</html>
</html>

47
planificacion/index.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE HTML>
<!--
Práctica 1 - Sistemas Web | Grupo D
CompluCine - FDI-cines
-->
<html lang="es">
<head>
<title>CompluCine | Planificación</title>
<meta charset="utf-8" />
<link id="estilo" rel="stylesheet" type="text/css" href="../assets/css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../img/favicon.png" />
</head>
<body>
<!-- Header -->
<div class="header">
<a href="/"><img src="../img/favicon2.png" /> CompluCine</a> | Planificación
<div class="menu">
<a href="/">Inicio |</a>
<a href="../detalles/">Detalles |</a>
<a href="../bocetos/">Bocetos |</a>
<a href="../miembros/">Miembros |</a>
<a href="#">Planificación |</a>
<a href="../contacto/">Contacto</a>
</div>
</div>
<!-- Main -->
<div class="main">
<div class="image"><img src="../img/logo_trasparente.png" /></div>
</div>
<!-- Timeline -->
<!-- Footer -->
<div class="footer">
<p>© Práctica 1 | Sistemas Web 2021 </p>
</div>
<!-- Scripts -->
</body>
</html>