diff --git a/assets/css/main.css b/assets/css/main.css
new file mode 100644
index 0000000..2258d65
--- /dev/null
+++ b/assets/css/main.css
@@ -0,0 +1,524 @@
+/* Basic */
+* {
+  box-sizing: border-box;
+  margin: 0px;
+}
+
+/* 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;
+}
+
+h2 {
+	font-size: 95%;
+}
+
+h3 {
+  font-size: 85%;
+}
+
+h4 {
+  font-size: 75%;
+}
+
+/* Buttons */
+button {
+  display: inline-block;
+  margin: 10px;
+  width: 150px;
+  height: 30px;
+  padding: 5px 10px;
+  background-color :#1f2c3d;
+  border: 1px solid #d3ebff;
+  text-align: center;
+  color :#d3ebff;
+  font-weight: bold;
+  position: relative;
+}
+button:hover{
+  cursor: pointer;
+  background-color:#d3ebff;
+  color:#1f2c3d;
+  border-color: #1f2c3d;
+} 
+
+
+/* Header */
+.header {
+  background-color: #1f2c3d;
+  color: #dadada;
+  padding: 15px;
+  text-align: left;
+  font-size: 18px;
+} 
+.header img {
+  width: 11px;
+}
+/* Header Menu */
+.menu {
+  margin-top: 10px;
+  text-align: right;
+  font-size: 15px;
+}
+.menu nav a{
+  text-decoration: none;
+  color: inherit;
+  font-size: 15px;
+}  
+.menu nav li{
+  display: inline-block;
+  width: 150px;
+  height: 30px;
+  padding: 5px 10px;
+  background-color :#1f2c3d;
+  border: 1px solid #d3ebff;
+  text-align: center;
+  color :#d3ebff;
+  position: relative;
+}      
+.menu nav li:hover{
+  background-color:#d3ebff;
+  color:#1f2c3d;
+  border-color: #1f2c3d;
+} 
+.menu nav li>ul{
+  display: none;
+}
+.menu nav li:hover>ul{
+  display: block;
+  position: absolute;
+  top: 29px;
+  right: -1px;
+}
+/* Sub Header */
+.header.sub {
+  margin-bottom: 20px;
+  padding: 5px;
+	display: flex;
+	flex-direction: row;
+  text-align: center;
+  justify-content: center;
+  font-size: 20px;
+}
+.header.sub  .menu {
+  margin-top: 0px;
+  text-align: center;
+  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%;
+}
+
+.column.middle .image img, .column.side .image img{
+  border-radius: 4px;
+  border: 0;
+  position: relative;
+  border-radius: 4px;
+  display: block; 
+  margin: 0 0 3rem 0;
+  width: 100%;
+}
+
+/* Left column */
+.column.left {
+  width: 50%;
+}
+
+/* Right column */
+.column.right {
+  float: right;
+  width: 50%;
+}
+
+/* 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: 1000px) {
+  .column.side, .column.middle, .column.left, .column.right{
+    width: 100%;
+  }
+}
+
+/* Zoom */
+.zoom {
+  transition: transform .2s; 
+}
+.zoom:hover {
+  transform: scale(1.05); 
+}
+
+/* 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 h1, .code h2{
+  color: #dadada;
+}
+.code h3, .code h4 {
+  color: #d3ebff;
+}
+.code p {
+  color: #dadada;
+}
+.code a {
+  text-decoration: underline; 
+}
+.code ul {
+  color: #dadada;
+}
+.code img{
+  /* width: 80px; height: 80px; */
+  width: 25%;
+}
+.code fieldset{
+  margin: 1px;
+  border-color: #dadada;
+  border-style: groove;
+}
+.code fieldset legend {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 90%;
+  color: #d3ebff;
+}
+.code.details{
+  height: 750px;
+}
+.code.plan {
+  height: 1150px;
+}
+.code.info{
+  text-align: center;
+  height: 250px;
+}
+
+.blockquote {
+  border-left: solid 4px #dadada;
+	margin: 0 0 2em 0;
+  margin-top: 10px;
+	padding: 0.5em 0 0.5em 2em;
+}
+.blockquote.bio {
+  height: 250px;
+}
+
+
+/* Sketches */
+.sketches {
+  text-align: center;
+  display: block;
+  line-height: 1.25em;
+  padding: 1em 1em;
+  overflow-x: auto;
+  background: #1f2c3d;
+  border-radius: 3px;
+  height: 680px;
+}
+.sketches h1, .sketches h2, .sketches h3, .sketches h4, .sketches p {
+  color: #dadada;
+}
+.sketches img {
+  width: 550px; 
+  height: 550px;
+}
+.sketches .description {
+  color: #d3ebff;
+}
+/* Responsive layout */
+@media (max-width: 1500px) {
+  .column.side .sketches, .column.middle .sketches {
+    width: 100%;
+    height: 500px;
+  }
+  .column.side .sketches img, .column.middle .sketches img {
+    width: 100%;
+    height: 75%;
+  }
+}
+@media (max-width: 1150px) {
+  .sketches img {
+    width: 100%;
+    height: 75%;
+  }
+}
+
+/* Galery */
+.galery {
+  box-sizing: border-box;
+}
+.galery .columna {
+  margin-top: 10px;
+  float: left;
+  width: 50%;
+  padding-right: 10px;
+}
+.galery .fila::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+.galery .image img {
+  width: 100%;
+}
+.galery .image.main img {
+  width: 100%;
+}
+
+
+/* Percentage bar */
+.bar {
+  height: 15px;
+  line-height: 15px;
+  font-size: 13px;
+  font-weight: bold;
+  width: 100%;
+  background-color: #d3ebff;
+  text-align: right;
+}
+.bar.seventyfive {
+  width: 75%;
+}
+.bar.fifty {
+  width: 50%;
+}
+.bar.twentyfive {
+  width: 25%;
+}
+
+/* Timeline Image */
+.timeline h2 {
+  padding-top: 50px;
+}
+.timeline img{
+  width: 100%;
+  text-align: center;
+  padding-bottom: 50px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+/* Sidebars */
+.sidebar.left {
+	padding: 5px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+	float: left;
+	width: 300px;
+	height: 370PX;
+  color: #d3ebff;
+	background-color: #1f2c3d;
+}
+.sidebar.left a {
+	color: #d3ebff;
+	font-weight: bold;
+	text-decoration: none;
+} 
+.sidebar.left a:hover {
+	color: #d3ebff;
+	text-decoration: underline;
+}
+/* Responsibe sidebar */
+@media (max-width: 1000px) {
+  .sidebar.left {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
+/* Form */
+form {
+  margin: auto;
+  width: 65%;
+}
+
+form h1, h2, h3, h4 {
+  color: #363636;
+}
+
+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;
+  box-shadow: 2px 2px #1f2c3d;
+  filter: brightness(105%);
+  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;
+  box-shadow: 2px 2px #1f2c3d;
+  cursor: pointer;
+}
+#reset:hover {
+  border:#000000;
+  background-color: #791515;
+}
+
+
+/* Footer */
+footer {
+  text-align: left;
+  background-color: #1f2c3d;
+  color: #dadada;
+  padding: 20px;
+  margin-top: 100px;
+  width: 100%;
+  height: 80px;
+}
+.footer {
+  text-align: right;
+}
+@media (max-width: 500px) {
+  footer {
+    width: 100%;
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/assets/php/dao.php b/assets/php/dao.php
new file mode 100644
index 0000000..6e32561
--- /dev/null
+++ b/assets/php/dao.php
@@ -0,0 +1,25 @@
+<?php
+    // TO-DO: Completar
+    class DAO {
+        public $mysqli;
+    
+        public function __construct(){
+            try{
+                if (!$this->mysqli) {
+                    $this->mysqli = new mysqli('127.0.0.1', 'sw', 
+                                            '_admin_', 'complucine');
+                }
+                // echo "Conexión a la BD, satisfactoria.";
+            } catch (Exception $e){
+                echo "Error de conexión a la BD: ". mysqli_connect_error();
+                exit();
+            }
+
+            /* ... */
+        }
+
+        public function __destruct(){
+            $this->mysqli->close();
+        }
+    }
+?>
\ No newline at end of file
diff --git a/assets/php/template.php b/assets/php/template.php
new file mode 100644
index 0000000..d34e133
--- /dev/null
+++ b/assets/php/template.php
@@ -0,0 +1,176 @@
+<?php
+    class Template {
+
+    //Attributes:
+    public $page;           //Page Name.
+    public $prefix;         //Page prefix.
+
+    public $session;        //"Iniciar Sesión" (if user isn´t logged in), "Cerrar Sesión" (otherwise).
+    public $session_route;  //"login/" (if user isn´t logged in), "logout/" (otherwise).
+    public $panel;          //Button to access the user's dashboard (only displayed if logged in).
+    public $user_route;     //Route of the panel (depends on the type of user).
+
+    //Constructor:
+    function __construct(){
+        $this->page = $_SERVER['PHP_SELF']; //Page that instantiates the template.
+        $this->prefix = '../';              //Default prefix.
+
+        $this->set_page_prefix();           //Assigns the name and prefix of the page.
+
+        $this->session = 'Iniciar Sesión';  //Default, the session has not started.
+        $this->session_route = 'login/';    //Default, the session has not started.
+        $this->panel = '';                  //Default, the session has not started.
+        $this->user_route = 'panel_user/';  //Default, the type of client is user.
+    }
+
+    //Methods:
+
+    //Assigns the name and prefix of the page:
+    private function set_page_prefix() {
+        switch(true){
+            case strpos($this->page, 'panel_user'): $this->page = 'Panel de Usuario'; break;
+            case strpos($this->page, 'panel_manager'): $this->page = 'Panel de Gerente'; break;
+            case strpos($this->page, 'panel_admin'): $this->page = 'Panel de Administrador'; break;
+            case strpos($this->page, 'login'): $this->page = 'Acceso'; break;
+            case strpos($this->page, 'logout'): $this->page = 'Cerrar Sesión'; break;
+            case strpos($this->page, 'showtimes'): $this->page = 'Cartelera'; break;
+            case strpos($this->page, 'cinemas'): $this->page = 'Nuestros Cines'; break;
+            case strpos($this->page, 'about_us'): $this->page = 'Sobre FDI-Cines'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'terms'): $this->page = 'Terminos y Condiciones'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'detalles'): $this->page = 'Detalles'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'bocetos'): $this->page = 'Bocetos'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'miembros'): $this->page = 'Miembros'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'planificacion'): $this->page = 'Planificación'; $this->prefix = '../../'; break;
+            case strpos($this->page, 'contacto'): $this->page = 'Contacto'; break;
+            default: $this->page = 'FDI-Cines'; $this->prefix = './'; break;
+        }
+
+    }
+
+    //Returns page name:
+    function get_page(){
+        return $this->page;
+    }
+
+    //Returns page prefix:
+    function get_prefix(){
+        return $this->prefix;
+    }
+
+    //Print generic Head:
+    function print_head(){
+        $page = $this->page;
+        $prefix = $this->prefix;
+
+        echo"<head>
+        <title>CompluCine | {$page}</title>
+        <meta charset='utf-8' />
+        <link id='estilo' rel='stylesheet' type='text/css' href='{$prefix}assets/css/main.css'>
+        <meta name='viewport' content='width=device-width, initial-scale=1'>
+        <link rel='icon' href='{$prefix}img/favicon.png' />
+    </head>\n";
+    }
+
+    //Print generic Header:
+    function print_header(){
+        $page = $this->page;
+        $prefix = $this->prefix;
+        $session = $this->session;
+        $session_route =$this->session_route;
+        $user_route = $this->user_route;
+
+        if(isset($_SESSION["nombre"])){
+            if($_SESSION["rol"] == "admin") $user_route = 'panel_admin/';
+            else if($_SESSION["rol"] == "manager") $user_route = 'panel_manager/';
+            $panel = "<a href='{$prefix}{$user_route}'><li>Mi Panel</li></a>";
+            $session = 'Cerrar Sesión';
+            $session_route = 'logout/';
+        }
+        
+        echo"<div class='header'>
+            <a href='{$prefix}'><img src='{$prefix}img/favicon2.png' alt='favicon' /> CompluCine</a> | {$page}
+            <div class='menu'>
+                <nav>
+                    <a href='{$prefix}{$session_route}'><li>{$session}</li></a>
+                    {$panel}
+                    <li>Menú
+                        <ul>
+                            <a href='{$prefix}'><li>Inicio</li></a>
+                            <a href='{$prefix}showtimes/'><li>Cartelera</li></a>
+                            <a href='{$prefix}cinemas/'><li>Nuestros Cines</li></a>
+                            <a href='{$prefix}fdicines/miembros/'><li>Quiénes somos</li></a>
+                            <a href='{$prefix}contacto/'><li>Contacto</li></a>
+                        <ul>
+                    </li>
+                </nav>
+            </div>
+        </div>\n";
+    }
+
+    //Print generic subHeader:
+    function print_subheader(){
+        //$page = $this->page;
+        $prefix = $this->prefix;
+
+        echo"<div class='header sub'>
+            <div class='menu'>
+                <nav>
+                    <a href='{$prefix}fdicines/about_us/'><li>Sobre FDI-Cines</li></a>
+                    <a href='{$prefix}fdicines/detalles/'><li>Detalles</li></a>
+                    <a href='{$prefix}fdicines/bocetos/'><li>Bocetos</li></a>
+                    <a href='{$prefix}fdicines/miembros/'><li>Miembros</li></a>
+                    <a href='{$prefix}fdicines/planificacion/'><li>Planificación</li></a>
+                </nav>
+            </div>
+        </div>\n";
+    }
+
+    //Print generic Main:
+    function print_main(){
+        $page = $this->page;
+        $prefix = $this->prefix;
+
+        /* SubHeader on Main */
+        $sub_header = '';
+        if(strpos($_SERVER['PHP_SELF'], 'fdicines')){
+            $sub_header = "<!-- Sub Header -->
+                <div class='header sub'>
+                    <div class='menu'>
+                        <nav>
+                            <a href='{$prefix}fdicines/about_us/'><li>Sobre FDI-Cines</li></a>
+                            <a href='{$prefix}fdicines/detalles/'><li>Detalles</li></a>
+                            <a href='{$prefix}fdicines/bocetos/'><li>Bocetos</li></a>
+                            <a href='{$prefix}fdicines/miembros/'><li>Miembros</li></a>
+                            <a href='{$prefix}fdicines/planificacion/'><li>Planificación</li></a>
+                        </nav>
+                    </div>
+                </div>\n"; 
+        }
+
+        /* MAIN */
+        echo"<div class='main'>
+            <div class='image'><a href='{$prefix}'><img src='{$prefix}img/logo_trasparente.png' alt='logo_FDI-Cines' /></a></div>
+            {$sub_header}
+            <h1>{$page}</h1>
+            <hr />
+        </div>\n";
+    }
+
+    //Print generic Footer:
+    function print_footer(){
+        //$page = $this->page;
+        $prefix = $this->prefix;
+
+        echo"<footer>
+            <div class='footer'>
+                <p>© Práctica 2 | Sistemas Web 2021 </p>
+            </div>
+            <a href='{$prefix}fdicines/about_us/'>Sobre FDI-Cines</a> |
+            <a href='{$prefix}fdicines/terms_conditions/'>Términos y condiciones</a> |
+            <a href='{$prefix}cinemas/'>Nuestros cines</a> |
+            <a href='{$prefix}contacto/'>Contacto</a>
+        </footer>\n";
+    }
+
+    }
+?>
\ No newline at end of file
diff --git a/assets/php/user_dao.php b/assets/php/user_dao.php
new file mode 100644
index 0000000..6a8b48d
--- /dev/null
+++ b/assets/php/user_dao.php
@@ -0,0 +1,57 @@
+<?php
+    class UserDAO extends DAO {
+		
+		//Constants:
+		private $_USER = "user";
+		private $_MANAGER = "manager";
+		private $_ADMIN = "admin";
+
+        //Attributes:
+
+		//Constructor:
+        function __construct(){
+			parent::__construct();
+        }
+
+		//Methods:
+
+        //Encrypt password with SHA254
+		private function encryptPass($password){
+			$password = hash('sha256', $password);
+
+			return $password;
+		}
+
+        //Create a new User:
+		public function createUser($id, $username, $email, $password, $rol){
+			$password = $this->encryptPass($password);
+			$sql = sprintf( "INSERT INTO users( id, username, email, passwd, rol) 
+								VALUES ( '%s', '%s', '%s', '%s', '%s')", 
+									$id, $username, $email, $password, $rol );
+
+			return $sql;
+
+		}
+
+		//Returns a query to check if the user name exists:
+		public function selectUser($username){
+			$sql = sprintf( "SELECT * FROM users WHERE username = '%s'", $username );
+
+			return $sql;
+		}
+
+		//Returns a query to get the user's data:
+		public function userData($id){
+			$sql = sprintf( "SELECT * FROM users WHERE id = '%d'", $id );
+
+			return $sql;
+		}
+
+		//Create a new User Data Transfer Object:
+		public function loadUser($id, $username, $email, $password, $rol){
+			return new UserDTO($id, $username, $email, $password, $rol);
+		}
+
+    }
+
+?>
\ No newline at end of file
diff --git a/assets/php/user_dto.php b/assets/php/user_dto.php
new file mode 100644
index 0000000..b650e14
--- /dev/null
+++ b/assets/php/user_dto.php
@@ -0,0 +1,35 @@
+<?php
+    class UserDTO implements UsersDTO {
+
+        //Attributes:
+        private $_id;           //User Id.
+        private $_username;     //User name.
+        private $_email;        //User email.
+        private $_password;     //User password.
+        private $_rol;          //Type of user: user | manager | admin.
+
+		//Constructor:
+        function __construct($id, $username, $email, $password, $roles){
+            $this->_id = $id;
+            $this->_username = $username;
+            $this->_email = $email;
+            $this->_password = $password;
+            $this->_rol = $roles;
+        }
+
+		//Methods:
+
+		//Getters && Setters:
+        public function setId($id){	$this->_id = $id; }
+		public function getId(){ return $this->_id; }
+		public function setName($username){ $this->_username = $username; }
+		public function getName(){ return $this->_username; }
+        public function setEmail($email){ $this->_email = $email; }
+		public function getEmail(){ return $this->_email; }
+		public function setPass($passwd){	$this->_password = $passwd; }
+		public function getPass(){ return $this->_password; }
+        public function setRoles($rol){ $this->_rol = $rol; }
+		public function getRoles(){ return $this->_rol; }
+
+    }
+?>
\ No newline at end of file
diff --git a/assets/php/users_dto_interface.php b/assets/php/users_dto_interface.php
new file mode 100644
index 0000000..f3cb728
--- /dev/null
+++ b/assets/php/users_dto_interface.php
@@ -0,0 +1,14 @@
+<?php
+    interface UsersDTO {
+        public function setId($id);
+		public function getId();
+		public function setName($username);
+		public function getName();
+        public function setEmail($email);
+		public function getEmail();
+		public function setPass($passwd);
+		public function getPass();
+        public function setRoles($rol);
+		public function getRoles();
+    }
+?>
\ No newline at end of file
diff --git a/cinemas/index.php b/cinemas/index.php
new file mode 100644
index 0000000..9c72108
--- /dev/null
+++ b/cinemas/index.php
@@ -0,0 +1,33 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../assets/php/template.php');
+    $template = new Template();
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <?php
+            $template->print_main();
+        ?>        
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/contacto/index.php b/contacto/index.php
new file mode 100644
index 0000000..29e7489
--- /dev/null
+++ b/contacto/index.php
@@ -0,0 +1,78 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start();
+    require_once('../assets/php/template.php');
+    $template = new Template();
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <?php
+           $template->print_main();
+        ?>
+
+        <!-- Form -->
+        <section id="formulario">
+            <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" value="evaluation" checked>
+                            <label for="evaluation">Evaluación</label>
+                        </div>
+                        <div class="reason">
+                            <input type="radio" id="radio" name="reason" value="sugestions">
+                            <label for="sugestions">Sugerencias</label>
+                        </div>
+                        <div class="reason">
+                            <input type="radio" id="radio" name="reason" value="critics">
+                            <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 -->
+        <?php
+            $template->print_footer();
+        ?>
+       
+    </body>
+
+</html>
diff --git a/fdicines/about_us/index.php b/fdicines/about_us/index.php
new file mode 100644
index 0000000..5f4eda5
--- /dev/null
+++ b/fdicines/about_us/index.php
@@ -0,0 +1,76 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start();
+    require_once('../../assets/php/template.php');
+    $template = new Template();
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+        
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><a href='../../'><img src="../../img/logo_trasparente.png" alt="logo_FDI-Cines" /></a></div>
+			<!-- Sub Header -->
+            <?php
+                $template->print_subheader();
+            ?>
+        </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 lista de películas variable, 
+                        unos horarios propios de cada cine por sesión y película, y con 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 />
+                <div class="blockquote">
+                    <p>
+                        Somos un <a href="../../miembros/">grupo de estudiantes</a> de la asignatura de Sistemas Web
+                        de la Facultad de Informática de la Universidad Complutense de Madrid.
+                    </p>
+                    <p>
+                        CompluCine es un proyecto web universitario y en ningún momento pretende ofrecer una funcionalidad real.
+                        Para más información acerca del proyecto, haz click <a href="../../detalles/">aquí</a>.
+                    </p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+
+    </body>
+
+</html>
diff --git a/fdicines/bocetos/index.php b/fdicines/bocetos/index.php
new file mode 100644
index 0000000..f988fa7
--- /dev/null
+++ b/fdicines/bocetos/index.php
@@ -0,0 +1,307 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+        
+        <!-- Main -->
+        <?php
+            $template->print_main();
+        ?>
+
+        <!-- Flow -->
+        <section id="flow">
+            <div class="code">
+                <h2>FLUJO DE NAVEGACIÓN</h2>
+                <hr>
+                <!-- User Flow -->
+                <fieldset>
+                    <legend>Usuario</legend>
+                    <p>
+                        El Usuario puede tomar dos caminos a la hora de seleccionar la película, el cine, y la sesión a la que quiere asistir. La diferencia es puramente
+                        de orden entre la elección de cine y de la película, a conveniencia del usuario; se procede a explicar ambos:
+                    </p>
+                    <p>
+                        1. Selección de Cine -> Selección de Película -> Selección de Sesión -> Reserva de Butacas -> Checkout: Primero se selecciona el cine en la vista de selección
+                        de cines en la que se encuentra un mapa y una lista con los cines de la cadena. Una vez seleccionado el cine se redirigirá al usuario a la vista de selección
+                        de película, con el filtro del cine correspondiente activado, de forma que solo se muestren las películas disponibles en el cine seleccionado. En esa vista se
+                        eligirá la película y la versión a ver (VO, 3D, 4DX, etc).
+                    </p>
+                    <p>
+                        Una vez elegida la película, se redirigirá al usuario a la elección de sesión. Se mostrarán todas las sesiones disponibles y el usuario podrá elegir la sesión y
+                        el número de entradas que quiere reservar, pudiendo ver el precio final de las mismas. Se le llevará a la vista de butacas en donde podrá elegir qué butacas reservar.
+                    </p>
+                    <p>
+                        Una vez elegidas las butacas, el usuario procede a la página de pago, en donde rellenará los datos necesarios para pagar online. Terminada la compra con éxito, se
+                        mostrará una pantalla de "Compra Realizada", dando al usuario la seguridad de que su reserva se ha registrado correctamente. Luego se le redirigirá a la pantalla de
+                        inicio.
+                    </p>
+                    <p>
+                        2. Selección de Película -> Selección de Cine -> Selección de Sesión -> Reserva de Butacas -> Checkout: Es idéntico al flujo anterior pero el usuario empieza eligiendo
+                        la película, de forma que se le redirige a la vista de selección de cine, esta vez con un filtro, de forma que solo se muestran los cines que tengan sesiones activas
+                        con la película seleccionada.
+                    </p>
+                    <p>
+                        Una vez elegidos película y cine, el flujo es idéntico al anterior.
+                    </p>
+                </fieldset>
+                <!-- Manager Flow -->
+                <fieldset>
+                    <legend>Gerente</legend>
+                    <p>
+                        El Gerente es el encargado de gestionar las sesiones y salas de cada cine. La forma de proceder es la misma que el administrador, con vistas equivalentes.
+                        En el caso de la gestión de salas, se administrarán los asientos disponibles (por temas de Covid-19) y si está o no habilitada para su uso.
+                    </p>
+                </fieldset>
+                <!-- Admin Flow -->
+                <fieldset>
+                    <legend>Administrador</legend>
+                    <p>El Administrador es el encargado de gestionar las: películas, cines, promociones, otros administradores y gerentes de cada cine.</p>
+                    <p>Para cada categoría tiene un panel en el que puede seleccionar, a partir de una lista, el elemento que quiere modificar, también hay otro panel al lado, en donde
+                    puede modificar los datos de un elemento ya existente o crear uno nuevo introduciendo datos que no existan en la BD. También hay una opción de Eliminar en caso de que
+                    quiera eliminar un elemento.</p>
+                    <p>También cuenta con un botón de "Vista de Usuario", con el que puede navegar por la página con la vista que tendrá el usuario final.</p>
+                </fieldset>
+            </div>
+        </section>
+
+        <!-- Sketches -->
+        <section id="sketches">
+            <hr />
+            <!-- template Sketches-->
+            <div class="code">
+                <h3>Pantallas Genéricas</h3>
+            </div> 
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/inicio.png" />
+                        <div class="description">
+                            <h3>Pantalla de inicio</h3>
+                            <p>Pantalla de bienvenida al entrar en la web.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/registrarse_iniciar_sesion.png" />
+                        <div class="description">
+                            <h3>Pantalla de Registro / Inicio de sesión</h3>
+                            <p>Pantalla para que un usuario nuevo se registre o, en caso de ya tener una cuenta de usuario, inicie sesión.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/menu_usuario.png" />
+                        <div class="description">
+                            <h3>Menú de usuario registrado</h3>
+                            <p>Pantalla con todas las opciones disponibles, propias de un usuario registrado.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/peliculas.png" />
+                        <div class="description">
+                            <h3>Cartelera</h3>
+                            <p>Pantalla con información sobre todas las películas disponibles en ese momento.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/cine.png" />
+                        <div class="description">
+                            <h3>Cines</h3>
+                            <p>Pantalla con un mapa que indica la geolocalización de todos los cines de FDI-Cines.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/selector_horario.png" />
+                        <div class="description">
+                            <h3>Selección de Horario</h3>
+                            <p>Pantalla que muestra los horarios disponibles por salas para un cine y película elegidos.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/mapa_asientos.png" />
+                        <div class="description">
+                            <h3>Mapa de los Asientos</h3>
+                            <p>Pantalla con un mapa para selccionar los asientos que se quieren escoger. Los asientos ocupados no pondrán ser seleccionados.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/pagar.png" />
+                        <div class="description">
+                            <h3>Pagar</h3>
+                            <p>Pantalla para realizar el pago, después de haber selecionado película, cine, sala, horario y butacas.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/compra_realizada.png" />
+                        <div class="description">
+                            <h3>Compra Realizada</h3>
+                            <p>Pantalla de confirmación con los datos de compra.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/about_us.png" />
+                        <div class="description">
+                            <h3>Sobre nosotros</h3>
+                            <p>Pantalla con información sobre FDI-Cines.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/contacto.png" />
+                        <div class="description">
+                            <h3>Formulario de Contacto</h3>
+                            <p>Pantalla con un formulario para realizar una consulta a los administradores.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/terminos_y_condiciones.png" />
+                        <div class="description">
+                            <h3>Términos y Condiciones</h3>
+                            <p>Pantalla con todos los términos y condiciones de uso del servicio.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Manager Sketches-->
+            <div class="code">
+                <h3>Pantallas de Gerentes</h3>
+            </div> 
+            <div class="row">
+                <div class="column side">
+                    <div class="sketches">
+                        <img src="../../img/panel_inicio_gerente.png" />
+                        <div class="description">
+                            <h3>Panel de Incio Gerente</h3>
+                            <p>Pantalla con las funciones exclusivas a las que puede acceder un Gerente.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column middle">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_salas.png" />
+                        <div class="description">
+                            <h3>Gestionar salas</h3>
+                            <p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar la sala de un cine.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column side">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_sesiones.png" />
+                        <div class="description">
+                            <h3>Gestionar Sesiones</h3>
+                            <p>Pantalla en la que los Gerentes pueden interactuar para añadir, modificar o eliminar las sesiones de una película.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Admin Sketches-->
+            <div class="code">
+                <h3>Pantallas de Administradores</h3>
+            </div> 
+            <div class="row">
+                <div class="column left">
+                    <div class="sketches">
+                        <img src="../../img/panel_inicio_admin.png" />
+                        <div class="description">
+                            <h3>Panel Inicio Administrador</h3>
+                            <p>Pantalla con las funciones exclusivas a las que puede acceder un Administrador.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column right">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_peliculas.png" />
+                        <div class="description">
+                            <h3>Gestionar Películas</h3>
+                            <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las películas de la cartelera.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column side">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_cines.png" />
+                        <div class="description">
+                            <h3>Gestionar Cines</h3>
+                            <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar los cines.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column middle">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_promociones.png" />
+                        <div class="description">
+                            <h3>Gestionar Promociones</h3>
+                            <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar las promociones existentes.</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="column side">
+                    <div class="sketches">
+                        <img src="../../img/gestionar_admins_gerentes.png" />
+                        <div class="description">
+                            <h3>Gestionar Administradores y Gerentes</h3>
+                            <p>Pantalla en la que los Administradores pueden interactuar para añadir, modificar o eliminar tanto otros Administradores como Gerentes.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+
+    </body>
+
+</html>
diff --git a/fdicines/detalles/index.php b/fdicines/detalles/index.php
new file mode 100644
index 0000000..7ba3516
--- /dev/null
+++ b/fdicines/detalles/index.php
@@ -0,0 +1,121 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+		<?php
+			$template->print_header();
+        ?>
+
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><a href='../../'><img src="../../img/logo_trasparente.png" alt="logo_FDI-Cines" /></a></div>
+			<!-- Sub Header -->
+            <?php
+                $template->print_subheader();
+            ?>
+        </div>
+
+        <!-- Details -->
+		<section id="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.
+					</br>
+						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>
+		</section>
+		<!-- User and Functionalities -->
+		<section id="user_functionalities">
+			<div class ="row">
+				<div class="column left">
+					<div class = "code details">
+						<h2>Tipos de usuario</h2>
+						<hr />	
+						<fieldset>
+							<legend>Usuario No Registrado</legend>
+							<p>
+								Este tipo de usuario, puede interactuar con la web sin necesidad de estar registrado. Podrá realizar compras, ver horarios y cartelera, sin necesidad de realizar ningún registro.
+								No podrá usar ninguna de las promociones, pues estas estarán únicamente destinadas a los usuarios registrados.
+							</p>
+						</fieldset>
+						<fieldset>
+							<legend>Usuario Registrado</legend>
+							<p>
+								Estos usuarios son aquellos que previamente han realizado un registro en la base de datos del sistema. Tendrán las mismas funcionalidades básicas 
+								que un usuario no registrado y además, podrán acceder a ofertas y aplicar promociones y descuentos y ver el historial de sus compras.
+								Además, estos usuarios podrán cancelar una compra previamente hecha, pues estas se asociarían a su cuenta, algo que sería imposible
+								con un usuario no registrado.
+							</p>
+						</fieldset>
+						<fieldset>
+							<legend>Gerente de Cine</legend>
+							<p>
+								Un administrador de rango bajo capaz de acceder a la vista de administradores, puede ver las peliculas que hay en la base de datos. 
+								Este usuario está asociado a un cine, sobre el cual puede añadir sesiones con peliculas existentes y modificar la disposicion de butacas.
+							</p>
+						</fieldset>
+						<fieldset>
+						<legend>Administrador</legend>
+							<p>
+								El administrador es capaz de ascender cuentas de usuario registradas a cuentas de gerente de cine. Ademas es el encargado de añadir nuevos cines y peliculas.
+								Para comprobar el correcto funcionamiento de la pagina podrá cambiar entre distintas vistas de usuario. 
+								Las cuales le permitirán comprobar que cada usuario tiene acceso únicamente a sus funcionalidades y no a funcionalidades de otro rango superior.
+							</p>
+						</fieldset>
+					</div>
+				</div>
+				<div class="column right">
+					<div class = "code details">
+						<h1>Funcionalidad</h1>
+						<hr />
+						<p>
+							La aplicación debe permitir la compra online de entradas para sesiones de cine, mostrando los cines y
+							horarios en los que se encuentra disponible la película seleccionada por el usuario dentro del catálogo disponible en ese momento (la cartelera).
+							Los usuarios podrán acceder a la compra de entradas buscando la película que desean ver y luego escogiendo un cine y horario determinado. 
+							Además de una búsqueda específica, también se ofrecerá la posibilidad de visionar toda la cartelera, y escoger una película, horario y cine, de entre todas las posibilidades.
+						<p>
+							Una vez escogido todo, se mostrará una página en la que el usuario decidirá la o las butacas en las que se sentará. Se mostrarán butacas disponibles y butacas ocupadas (en caso de que las haya).
+							Antes de realizar la compra, los usuarios podrán aplicar promociones especificas que le permitan obtener algun snack en el cine o descuentos disponibles en la aplicación.
+						</p>
+						<p>
+							Por otro lado la aplicacion debe permitir a los gerentes y administradores visionar la lista y contenido de todas las peliculas que hay en cartelera, 
+							siendo los administradores los encargados de modificarlas y añadir nuevas.
+							De igual forma, ambos podran ver todos los cines activos de la aplicacion, pero solo los administradores serán capaces de añadir o modificar cines existentes.
+						<p>
+							Cada cine tiene una cantidad de salas y sesiones con horarios específicos pora cada una de las películas. 
+							Aunque ambos roles (administrador y gerente) pueden ver estas salas y horarios, es el gerente de cine el encargado de modificar las salas, 
+							su disposición de butacas, modificar el horario de las sesiones y añadir nuevas sesiones, y crear promociones específicas para una sesión concreta o para el cine completo. 
+							Todo esto unicamente para el cine con el cual esta relacionado.
+						</p>
+					</div>
+				</div>
+			</div>
+		</section>
+        <!-- Footer -->
+        <?php
+			$template->print_footer();
+        ?>
+       
+    </body>
+</html>
diff --git a/fdicines/index.php b/fdicines/index.php
new file mode 100644
index 0000000..10f3c9f
--- /dev/null
+++ b/fdicines/index.php
@@ -0,0 +1,3 @@
+<?php
+    header('Location: ./about_us/');
+?>
\ No newline at end of file
diff --git a/fdicines/miembros/index.php b/fdicines/miembros/index.php
new file mode 100644
index 0000000..f1abbfb
--- /dev/null
+++ b/fdicines/miembros/index.php
@@ -0,0 +1,178 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><img src="../../img/logo_trasparente.png" /></div>
+            <!-- Sub Header -->
+            <?php
+                $template->print_subheader();
+            ?>
+            <section id="members_table">
+                <h1>Miembros</h1>
+                <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 -->
+        <section id="members">
+            <div class="row">
+                <div class="column side">
+                    <!-- Marco Esposito -->
+                    <section id="MEP">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/mep.jpg" />
+                                <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>
+                        </div>
+                    </section>
+                </div>
+                <div class="column middle">
+                    <!-- Fernando Méndez -->
+                    <section id="FMT">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/fmt.jpg" />
+                                <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>
+                        </div>
+                    </section>
+                </div>
+                <div class="column side">
+                    <!-- Daniel Muñoz -->
+                    <section id="DMG">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/dmg.jpg" />
+                                <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>
+                        </div>
+                    </section>
+                </div>
+            </div>
+            <div class="row">
+                <div class="column side">
+                    <!-- Ioan Marian -->
+                    <section id="IMT">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/imt.jpg" />
+                                <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>
+                        </div>
+                    </section>
+                </div>
+                <div class="column middle">
+                    <!-- Óscar Ruiz -->
+                    <section id="ORP">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/orp.jpg" />               
+                                <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>
+                        </div>
+                    </section>
+                </div>
+                <div class="column side">
+                    <!-- Adrian Real -->
+                    <section id="ARN">
+                        <div class="zoom">
+                            <div class="code">
+                                <img src="../../img/arn.jpg" />
+                                <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>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </section>
+        
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+       
+    </body>
+
+</html>
+
+</html>
diff --git a/fdicines/planificacion/index.php b/fdicines/planificacion/index.php
new file mode 100644
index 0000000..8f2944e
--- /dev/null
+++ b/fdicines/planificacion/index.php
@@ -0,0 +1,296 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <?php
+            $template->print_main();
+        ?>
+        
+        <!-- Planning -->
+        <section class="planning">
+            <div class="row">
+                <div class="column side">
+                    <div class="code plan">
+                        <h2>Tareas</h2>
+                        <hr />
+                        <fieldset>
+                            <legend>Implementaciones Generales de la Web</legend>
+                            <ul>
+                                <li>Pantalla de Inicio (incluye promociones y estrenos) [Fer && Adrián]</li>
+                                <li>Cartelera Dinámica [Fer --> Marian && Daniel]</li>
+                                <li>Selección Cines (mapa) [Fer]</li>
+                                <li>Listado de Horarios [Fer]</li>
+                                <li>Selección de butacas [Fer --> Marco && Óscar]</li>
+                                <li>Pagar + opción para código promocional [Fer]</li>
+                                <li>Sobre FDI-Cines (About us) [Fer && Adrián]</li>
+                                <li>Formulario de Contacto [Fer]</li>
+                                <li>Términos y Condiciones [Fer && Adrián]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Paneles de Usuario Registrado</legend>
+                            <ul>
+                                <li>Registrarse e Iniciar sesión [Adrián]</li>
+                                <li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Paneles de Gerente</legend>
+                            <ul>
+                                <li>Pantalla de inicio de gerente [Marco && Óscar]</li>
+                                <li>Eliminar sesión de una película [Marco && Óscar]</li>
+                                <li>Deshabilitar salas [Marco && Óscar]</li>
+                                <li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Paneles de Administrador</legend>
+                            <ul>
+                                <li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
+                                <li>Ver como >> Usuario no registrado || Usuario registrado || (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
+                                <li>Panel añadir/editar/eliminar cine [Marian && Daniel]</li>
+                                <li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Daniel]</li>
+                                <li>Panel añadir/editar/eliminar promociones [Marian && Daniel]</li>
+                                <li>Panel añadir/editar/eliminar gerentes [Marian && Daniel]</li>
+                            </ul>
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="column middle">
+                    <div class="code plan">
+                        <h2>Divisón del trabajo</h2>
+                        <hr />
+                        <fieldset>
+                            <legend>Marco Expósito Pérez</legend>
+                            <ul>
+                                <li>Pantalla de inicio de gerente [Gerente]</li>
+                                <li>Eliminar sesión de una película [Gerente]</li>
+                                <li>Deshabilitar salas [Gerente]</li>
+                                <li>Deshabilitar asientos en una sala [Gerente]</li>
+                                <li>Selección de butacas [General (de apoyo)]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Fernando Méndez Torrubiano</legend>
+                            <ul>
+                                <li>Pantalla de Inicio (incluye promociones y estrenos) [General]</li>
+                                <li>Cartelera Dinámica [General]</li>
+                                <li>Selección Cines (mapa) [General]</li>
+                                <li>Listado de Horarios [General]</li>
+                                <li>Selección de butacas [General]</li>
+                                <li>Pagar + opción para código promocional [General]</li>
+                                <li>Sobre FDI-Cines (About us) [General (de apoyo)]</li>
+                                <li>Formulario de Contacto [General]</li>
+                                <li>Términos y Condiciones [General (de apoyo)]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Daniel Muñoz García</legend>
+                            <ul>
+                                <li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Administrador]</li>
+                                <li>Ver como >> Usuario no registrado || Usuario registrado || (Gerente: Añadir si vamos bien de tiempo) [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar cine [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar películas a la cartelera [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar promociones [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar gerentes [Administrador]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Ioan Marian Tulai</legend>
+                            <ul>
+                                <li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Administrador]</li>
+                                <li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar cine [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar películas a la cartelera [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar promociones [Administrador]</li>
+                                <li>Panel añadir/editar/eliminar gerentes [Administrador]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Óscar Ruiz de Pedro</legend>
+                            <ul>
+                                <li>Pantalla de inicio de gerente [Gerente]</li>
+                                <li>Eliminar sesión de una película [Gerente]</li>
+                                <li>Deshabilitar salas [Gerente]</li>
+                                <li>Deshabilitar asientos en una sala [Gerente]</li>
+                                <li>Selección de butacas [General (de apoyo)]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Adrian Real del Noval</legend>
+                            <ul>
+                                <li>Registrarse e Iniciar sesión [Usuario Registrado]</li>
+                                <li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Usuario Registrado]</li>
+                                <li>Sobre FDI-Cines (About us) [General]</li>
+                                <li>Términos y Condiciones [General]</li>
+                                <li>Pantalla de Inicio (incluye promociones y estrenos) [General (de apoyo)]</li>
+                            </ul>
+                        </fieldset>
+                    </div>
+                </div>
+                <div class="column side">
+                    <div class="code plan">
+                        <h2>Plazos</h2>
+                        <hr />
+                        <fieldset>
+                            <legend>Práctica 1 [HTML]</legend>
+                            <div class="bar">100%</div>
+                            <ul>
+                                <li>Inicio</li>
+                                <li>Detalles</li>
+                                <li>Bocetos</li>
+                                <li>Miembros</li>
+                                <li>Planificación</li>
+                                <li>Contacto</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Práctica 2 [HTML + PHP]</legend>
+                            <div class="bar">100%</div>
+                            <ul>
+                                <li>Sobre FDI-Cines (About us) [Fer && Adrián]</li>
+                                <li>Formulario de Contacto [Fer]</li>
+                                <li>Términos y Condiciones [Fer && Adrián]</li>
+                                <li>Pantalla de inicio de gerente [Marco && Óscar]</li>
+                            </ul>
+                            <div class="bar seventyfive">75%</div>
+                            <ul>
+                                <li>Pantalla de Inicio (incluye promociones y estrenos) [Fer && Adrián]</li>
+                                <li>Listado de Horarios [Fer]</li>
+                            </ul>
+                            <div class="bar fifty">50%</div>
+                            <ul>
+                                <li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
+                                <li>Eliminar sesión de una película [Marco && Óscar]</li>
+                                <li>Deshabilitar salas [Marco && Óscar]</li>
+                                <li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
+                                <li>Panel añadir/editar/eliminar cine [Marian && Dani]</li>
+                                <li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Dani]</li>
+                            </ul>
+                            <div class="bar twentyfive">25%</div>
+                            <ul>
+                                <li>Registrarse && Iniciar sesión [Adrián]</li>
+                                <li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
+                                <li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
+                                <li>Panel añadir/editar/eliminar promociones [Marian && Dani]</li>
+                                <li>Panel añadir/editar/eliminar gerentes [Marian && Dani]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Práctica 3 [HTML + PHP + CSS]</legend>
+                            <div class="bar">100%</div>
+                            <ul>
+                                <li>Eliminar sesión de una película [Marco && Óscar]</li>
+                                <li>Deshabilitar salas [Marco && Óscar]</li>
+                            </ul>
+                            <div class="bar seventyfive">75%</div>
+                            <ul>
+                                <li>Registrarse && Iniciar sesión [Adrián]</li>
+                                <li>Menú y panel de Usuario (Historial compras, cambiar contraseña, datos de pago y eliminar usuario) [Adrián]</li>
+                                <li>Panel de inicio administrador (ver todas la funcionalidades de admin de un vistazo) [Daniel && Marian]</li>
+                                <li>Panel añadir/editar/eliminar cine [Marian && Dani]</li>
+                                <li>Panel añadir/editar/eliminar películas a la cartelera [Marian && Dani]</li>
+                            </ul>
+                            <div class="bar fifty">50%</div>
+                            <ul>
+                                <li>Deshabilitar asientos en una sala [Marco && Óscar]</li>
+                                <li>Ver como >> Usuario no registrado | Usuario registrado | (Gerente: Añadir si vamos bien de tiempo) [Daniel && Marian]</li>
+                                <li>Panel añadir/editar/eliminar promociones [Marian && Dani]</li>
+                                <li>Panel añadir/editar/eliminar gerentes [Marian && Dani]</li>
+                            </ul>
+                        </fieldset>
+                        <fieldset>
+                            <legend>Entrega Final [HTML + PHP + CSS + JS]</legend>
+                            <div class="bar">100%</div>
+                            <ul>
+                                <li>Todo el trabajo restante.</li>
+                            </ul>
+                        </fieldset>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Timeline -->
+        <section id="timeline" class="timeline">
+            <h2>Línea Temporal</h2>
+            <hr />
+            <div class="image"><img src="../../img/linea_temporal.png" /></div>
+        </section>
+
+        <!-- Timeline Table -->
+        <section id="timeline table">
+            <h2>Hitos</h2>
+            <hr />
+            <table>
+                <thead>
+                    <tr>
+                        <th>Hito</th>
+                        <th>Fecha estimada</th>
+                        <th>Estado</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>Práctica 0</td>
+                        <td>4 de Marzo de 2021</td>
+                        <td>ENTREGADO</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 1</td>
+                        <td>18 de Marzo de 2021</td>
+                        <td>ENTREGADO</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 2</td>
+                        <td>15 de Abril de 2021</td>
+                        <td>EN PROCESO</td>
+                    </tr>
+                    <tr>
+                        <td>Práctica 3</td>
+                        <td>7 de Mayo de 2021</td>
+                        <td>PENDIENTE</td>
+                    </tr>
+                    <tr>
+                        <td>Entrega Final</td>
+                        <td>28 de Mayo de 2021</td>
+                        <td>PENDIENTE</td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
+        <!-- Warning -->
+        <section id="warning">
+            <p>
+                *Esta planificación es orientativa y puede ir cambiando a lo largo del tiempo 
+                en función de los requisitos de las prácticas y nuestra carga de trabajo.
+            </p>
+        </section>
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+       
+    </body>
+
+</html>
\ No newline at end of file
diff --git a/fdicines/terms_conditions/index.php b/fdicines/terms_conditions/index.php
new file mode 100644
index 0000000..34e2313
--- /dev/null
+++ b/fdicines/terms_conditions/index.php
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<?php 
+    session_start(); 
+    require_once('../../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><img src="../../img/logo_trasparente.png" /></div>
+        </div>
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+
+    </body>
+
+</html>
diff --git a/img/about_us.png b/img/about_us.png
new file mode 100644
index 0000000..a5d24b4
Binary files /dev/null and b/img/about_us.png differ
diff --git a/img/arn.jpg b/img/arn.jpg
new file mode 100644
index 0000000..380ea99
Binary files /dev/null and b/img/arn.jpg differ
diff --git a/img/avengers_age_of_ultron.jpg b/img/avengers_age_of_ultron.jpg
new file mode 100644
index 0000000..f2a97d1
Binary files /dev/null and b/img/avengers_age_of_ultron.jpg differ
diff --git a/img/avengers_end_game.jpg b/img/avengers_end_game.jpg
new file mode 100644
index 0000000..2663768
Binary files /dev/null and b/img/avengers_end_game.jpg differ
diff --git a/img/avengers_inifinity_war.jpg b/img/avengers_inifinity_war.jpg
new file mode 100644
index 0000000..e7f2ef8
Binary files /dev/null and b/img/avengers_inifinity_war.jpg differ
diff --git a/img/capitan_america_civil_war.jpg b/img/capitan_america_civil_war.jpg
new file mode 100644
index 0000000..006a486
Binary files /dev/null and b/img/capitan_america_civil_war.jpg differ
diff --git a/img/capitan_america_el_primer_vengador.jpg b/img/capitan_america_el_primer_vengador.jpg
new file mode 100644
index 0000000..efe8da8
Binary files /dev/null and b/img/capitan_america_el_primer_vengador.jpg differ
diff --git a/img/capitan_america_el_soldado_de_invierno.jpg b/img/capitan_america_el_soldado_de_invierno.jpg
new file mode 100644
index 0000000..b9f3d67
Binary files /dev/null and b/img/capitan_america_el_soldado_de_invierno.jpg differ
diff --git a/img/cine.png b/img/cine.png
new file mode 100644
index 0000000..47a66b1
Binary files /dev/null and b/img/cine.png differ
diff --git a/img/compra_realizada.png b/img/compra_realizada.png
new file mode 100644
index 0000000..831c2bc
Binary files /dev/null and b/img/compra_realizada.png differ
diff --git a/img/contacto.png b/img/contacto.png
new file mode 100644
index 0000000..bb2b56e
Binary files /dev/null and b/img/contacto.png differ
diff --git a/img/dmg.jpg b/img/dmg.jpg
new file mode 100644
index 0000000..c76d85c
Binary files /dev/null and b/img/dmg.jpg differ
diff --git a/img/favicon.png b/img/favicon.png
new file mode 100644
index 0000000..002676a
Binary files /dev/null and b/img/favicon.png differ
diff --git a/img/favicon2.png b/img/favicon2.png
new file mode 100644
index 0000000..cce04d6
Binary files /dev/null and b/img/favicon2.png differ
diff --git a/img/fmt.jpg b/img/fmt.jpg
new file mode 100644
index 0000000..18f0137
Binary files /dev/null and b/img/fmt.jpg differ
diff --git a/img/gestionar_admins_gerentes.png b/img/gestionar_admins_gerentes.png
new file mode 100644
index 0000000..8f39c3c
Binary files /dev/null and b/img/gestionar_admins_gerentes.png differ
diff --git a/img/gestionar_cines.png b/img/gestionar_cines.png
new file mode 100644
index 0000000..d83a9c6
Binary files /dev/null and b/img/gestionar_cines.png differ
diff --git a/img/gestionar_peliculas.png b/img/gestionar_peliculas.png
new file mode 100644
index 0000000..5983e7f
Binary files /dev/null and b/img/gestionar_peliculas.png differ
diff --git a/img/gestionar_promociones.png b/img/gestionar_promociones.png
new file mode 100644
index 0000000..852d802
Binary files /dev/null and b/img/gestionar_promociones.png differ
diff --git a/img/gestionar_salas.png b/img/gestionar_salas.png
new file mode 100644
index 0000000..8f97f01
Binary files /dev/null and b/img/gestionar_salas.png differ
diff --git a/img/gestionar_sesiones.png b/img/gestionar_sesiones.png
new file mode 100644
index 0000000..8aebe9d
Binary files /dev/null and b/img/gestionar_sesiones.png differ
diff --git a/img/imt.jpg b/img/imt.jpg
new file mode 100644
index 0000000..355d3a7
Binary files /dev/null and b/img/imt.jpg differ
diff --git a/img/inicio.png b/img/inicio.png
new file mode 100644
index 0000000..b76b60f
Binary files /dev/null and b/img/inicio.png differ
diff --git a/img/iron_man.jpg b/img/iron_man.jpg
new file mode 100644
index 0000000..f70600e
Binary files /dev/null and b/img/iron_man.jpg differ
diff --git a/img/iron_man_2.jpg b/img/iron_man_2.jpg
new file mode 100644
index 0000000..e8eab6e
Binary files /dev/null and b/img/iron_man_2.jpg differ
diff --git a/img/iron_man_3.jpg b/img/iron_man_3.jpg
new file mode 100644
index 0000000..1cc0092
Binary files /dev/null and b/img/iron_man_3.jpg differ
diff --git a/img/linea_temporal.png b/img/linea_temporal.png
new file mode 100644
index 0000000..7d475c3
Binary files /dev/null and b/img/linea_temporal.png differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000..72ffd51
Binary files /dev/null and b/img/logo.png differ
diff --git a/img/logo_trasparente.png b/img/logo_trasparente.png
new file mode 100644
index 0000000..418e6f0
Binary files /dev/null and b/img/logo_trasparente.png differ
diff --git a/img/mapa_asientos .png b/img/mapa_asientos .png
new file mode 100644
index 0000000..3db5ab6
Binary files /dev/null and b/img/mapa_asientos .png differ
diff --git a/img/mapa_asientos.png b/img/mapa_asientos.png
new file mode 100644
index 0000000..3db5ab6
Binary files /dev/null and b/img/mapa_asientos.png differ
diff --git a/img/marvel_avengers.jpg b/img/marvel_avengers.jpg
new file mode 100644
index 0000000..7150fd8
Binary files /dev/null and b/img/marvel_avengers.jpg differ
diff --git a/img/menu_usuario.png b/img/menu_usuario.png
new file mode 100644
index 0000000..944c58d
Binary files /dev/null and b/img/menu_usuario.png differ
diff --git a/img/mep.jpg b/img/mep.jpg
new file mode 100644
index 0000000..adcbef6
Binary files /dev/null and b/img/mep.jpg differ
diff --git a/img/orp.jpg b/img/orp.jpg
new file mode 100644
index 0000000..9baf98d
Binary files /dev/null and b/img/orp.jpg differ
diff --git a/img/pagar.png b/img/pagar.png
new file mode 100644
index 0000000..7087d2e
Binary files /dev/null and b/img/pagar.png differ
diff --git a/img/panel_inicio_admin.png b/img/panel_inicio_admin.png
new file mode 100644
index 0000000..ed53e68
Binary files /dev/null and b/img/panel_inicio_admin.png differ
diff --git a/img/panel_inicio_gerente.png b/img/panel_inicio_gerente.png
new file mode 100644
index 0000000..b55939e
Binary files /dev/null and b/img/panel_inicio_gerente.png differ
diff --git a/img/peliculas.png b/img/peliculas.png
new file mode 100644
index 0000000..e5e0949
Binary files /dev/null and b/img/peliculas.png differ
diff --git a/img/plantilla.png b/img/plantilla.png
new file mode 100644
index 0000000..78f5fc8
Binary files /dev/null and b/img/plantilla.png differ
diff --git a/img/registrarse_iniciar_sesion.png b/img/registrarse_iniciar_sesion.png
new file mode 100644
index 0000000..f29d7b6
Binary files /dev/null and b/img/registrarse_iniciar_sesion.png differ
diff --git a/img/sala1.jpg b/img/sala1.jpg
new file mode 100644
index 0000000..019bd36
Binary files /dev/null and b/img/sala1.jpg differ
diff --git a/img/selector_horario.png b/img/selector_horario.png
new file mode 100644
index 0000000..e0d3886
Binary files /dev/null and b/img/selector_horario.png differ
diff --git a/img/terminos_y_condiciones.png b/img/terminos_y_condiciones.png
new file mode 100644
index 0000000..3da4927
Binary files /dev/null and b/img/terminos_y_condiciones.png differ
diff --git a/img/terminosyCondiciones.png b/img/terminosyCondiciones.png
new file mode 100644
index 0000000..3da4927
Binary files /dev/null and b/img/terminosyCondiciones.png differ
diff --git a/login/index.php b/login/index.php
new file mode 100644
index 0000000..680ac7e
--- /dev/null
+++ b/login/index.php
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<?php
+    session_start();
+    require('login_register.php');
+
+    require_once('../assets/php/template.php');
+    $template = new Template();    
+?>
+<!--
+    Práctica 2 - Sistemas Web | Grupo D
+    CompluCine - FDI-cines
+-->
+<html lang="es">
+    <!-- Head -->
+    <?php
+        $template->print_head();
+    ?>
+    <body>
+        <!-- Header -->
+        <?php
+            $template->print_header();
+        ?>
+
+        <!-- Main -->
+        <div class="main">
+            <div class="image"><img src="../img/logo_trasparente.png" /></div>
+            <h1>Acceso</h1>
+            <hr />
+        </div>
+        
+        <!-- Login / Register -->
+        <section id="login_register">
+			<div class ="row">
+                <?php
+                    if($isLogin){
+                        echo $login;
+                    } else {
+                        echo $register;
+                    }
+                ?>
+            </div>	
+		</section>
+
+        <!-- Footer -->
+        <?php
+            $template->print_footer();
+        ?>
+
+    </body>
+
+</html>
diff --git a/login/login_register.php b/login/login_register.php
new file mode 100644
index 0000000..9b6d1a5
--- /dev/null
+++ b/login/login_register.php
@@ -0,0 +1,96 @@
+<?php
+    $isLogin = setLogin(true);
+
+    if(array_key_exists('register',$_POST)){
+        $isLogin = setLogin(false);
+    }
+    else if(array_key_exists('login',$_POST)){
+        $isLogin = setLogin(true);
+    }
+
+    function setLogin($set){
+       return $set;
+    }
+    
+
+    $register = '<!-- Register -->
+                <div class="column left">
+                    <h2>Registro</h2>
+                    <form method="post" action="">
+                        <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>
+                                <div class="_passwd">
+                                    <input type="password" name="pass" id="pass" value="" placeholder="Contraseña" />
+                                </div>
+                                <div class="_passwd">
+                                    <input type="password" name="repass" id="repass" value="" placeholder="Repita la contraseña" />
+                                </div>
+                            </fieldset>
+                            <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="Registrarse" class="primary" />
+                                <input type="reset" id="reset" value="Borrar" />       
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <div class="column right">
+                    <div class="code info">
+                        <h2>¿Ya estás registrado?</h2>
+                        <hr />
+                        <p>Si dispones de una cuenta de usuario, no es necesario que rellenes este formulario nuevamente</p>
+                        <p>Haz click en el botón para iniciar sesión.</p>
+                        <form method="post">
+                            <button type="submit" name="login" id="login">Inicia Sesión</button>
+                        </form>
+                    </div>
+                </div>'."\n";
+
+    $login = '<!-- Login -->
+                <div class="column left">
+                    <div class="code info">
+                        <h2>¿No tienes una cuenta?</h2>
+                        <hr />
+                        <p>Para crear una cuenta de usuario es necesario haber rellenado el formulario de registro previamente</p>
+                        <p>Haz click en el botón para registrate.</p>
+                        <form method="post">
+                            <button type="submit" name="register" id="register">Registrate</button>
+                        </form>
+                    </div>
+                </div>
+                <div class="column right">
+                    <h2>Iniciar Sesión</h2>
+                    <form method="post" action="validate.php">
+                        <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>
+                                -->
+                                <div class="_passwd">
+                                    <input type="password" name="pass" id="pass" value="" placeholder="Contraseña" />
+                                </div>
+                            </fieldset>
+                            <div class="actions"> 
+                                <input type="submit" id="submit" value="Iniciar Sesión" class="primary" />
+                                <input type="reset" id="reset" value="Borrar" />       
+                            </div>
+                        </div>
+                    </form>
+                </div>'."\n";
+?>
\ No newline at end of file