commit c88a442eaa0a4cb9af21e11671d3754b355604b5
Author: Araozu <tbyuyfcjjll@gmail.com>
Date:   Mon Sep 24 19:16:24 2018 -0500

    Initial

diff --git a/.htaccess b/.htaccess
new file mode 100644
index 0000000..65b9561
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,22 @@
+RewriteEngine On
+
+# redirigir y eliminar php (Yay! Funciona c:)
+RewriteCond %{THE_REQUEST} /([^.]+)\.php [NC]
+RewriteRule ^ /%1 [NC,L,R=301]
+
+RewriteCond %{THE_REQUEST} /([^.]+)\.html [NC]
+RewriteRule ^ /%1 [NC,L,R=301]
+
+RewriteCond %{REQUEST_FILENAME}.php -f
+RewriteRule ^ %{REQUEST_URI}.php [NC,L]
+
+## Desabilitar cache de Apache
+<FilesMatch "\.(html|htm|js|css)$">
+  FileETag None
+  <IfModule mod_headers.c>
+    Header unset ETag
+    Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
+    Header set Pragma "no-cache"
+    Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
+  </IfModule>
+</FilesMatch>
\ No newline at end of file
diff --git a/css/base.css b/css/base.css
new file mode 100644
index 0000000..70a5ae0
--- /dev/null
+++ b/css/base.css
@@ -0,0 +1,428 @@
+@import url("https://fonts.googleapis.com/css?family=Muli|Open+Sans");
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+header {
+  background-color: #44A;
+  box-shadow: 0 5px 5px #999999;
+}
+
+nav {
+  background-color: #3d3d7c;
+  color: white;
+}
+
+section {
+  overflow: hidden;
+  transition: height 150ms ease-out;
+  height: auto;
+}
+
+footer {
+  background-color: #333;
+  color: #EEE;
+  box-shadow: inset 0 5px 5px #999999;
+  padding: 40px;
+}
+
+.contenedor {
+  max-width: 1200px;
+  width: 80%;
+  margin: auto;
+}
+
+.col-1 {
+  width: 8.33%;
+}
+
+.col-2 {
+  width: 16.66%;
+}
+
+.col-3 {
+  width: 25%;
+}
+
+.col-4 {
+  width: 33.33%;
+}
+
+.col-5 {
+  width: 41.66%;
+}
+
+.col-6 {
+  width: 50%;
+}
+
+.col-7 {
+  width: 58.33%;
+}
+
+.col-8 {
+  width: 66.66%;
+}
+
+.col-9 {
+  width: 75%;
+}
+
+.col-10 {
+  width: 83.33%;
+}
+
+.col-11 {
+  width: 91.66%;
+}
+
+.col-12 {
+  width: 100%;
+}
+
+[class*=col-] {
+  float: left;
+}
+
+.row::after {
+  content: "";
+  clear: both;
+  display: table;
+}
+
+.center {
+  text-align: center;
+}
+
+#tituloP {
+  padding: 30px;
+  color: white;
+  font-size: 50px;
+  font-family: "Muli";
+}
+
+#tituloP--descripcion {
+  padding: 10px;
+  font-size: large;
+  font-family: "Open Sans";
+}
+
+.center {
+  text-align: center;
+}
+
+.boton {
+  display: inline-block;
+  margin: 20px;
+  border-radius: 3px;
+  box-shadow: 1px 1px 3px #090909;
+  padding: 10px 30px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.mySeccion {
+  overflow: hidden;
+  transition: height 150ms ease-out;
+  height: auto;
+}
+
+#botonRegistro {
+  background-color: green;
+  color: white;
+  font-size: large;
+  transition: transform 200ms, box-shadow 200ms;
+}
+
+#botonRegistro:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 7px #050505;
+}
+
+#botonInicioSesion {
+  background-color: white;
+  transition: transform 200ms, box-shadow 200ms;
+}
+
+#botonInicioSesion:hover {
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 7px #050505;
+}
+
+#botonInicioSesion:visited {
+  color: black;
+}
+
+.contenido {
+  margin: 40px 0;
+}
+
+.image {
+  padding: 0 20px;
+  width: 100%;
+  height: auto;
+}
+
+.descripcionComida {
+  padding: 0 30px;
+  text-align: center;
+  font-size: large;
+}
+
+.inicio_registro {
+  color: white;
+}
+
+input {
+  min-width: 80%;
+  min-height: 40px;
+  padding: 10px;
+  color: #44A;
+  font-size: large;
+}
+
+.botonEnviarForm {
+  background-color: white;
+  box-shadow: 1px 1px 2px gray;
+  cursor: pointer;
+  border: none;
+  transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms;
+}
+
+.botonEnviarForm:hover {
+  background-color: #4949e2;
+  color: white;
+  transform: translate(-1px, -1px);
+  box-shadow: 2px 2px 2px gray;
+}
+
+.google-button {
+  height: 40px;
+  border-width: 0;
+  background: white;
+  color: #737373;
+  border-radius: 5px;
+  white-space: nowrap;
+  box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05);
+  transition-property: background-color, box-shadow;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  padding: 0;
+  cursor: pointer;
+}
+
+.google-button:focus, .google-button:hover {
+  box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1);
+}
+
+.google-button:active {
+  background-color: #e5e5e5;
+  box-shadow: none;
+  transition-duration: 10ms;
+}
+
+.google-button__icon {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 8px 0 8px 8px;
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+}
+
+.google-button__text {
+  display: inline-block;
+  vertical-align: middle;
+  padding: 0 24px;
+  font-size: 14px;
+  font-weight: bold;
+  font-family: "Roboto", arial, sans-serif;
+}
+
+.unseen {
+  visibility: hidden;
+}
+
+.botonAddCart {
+  background-color: white;
+  padding: 5px;
+  color: #4444aa;
+  box-shadow: 0.1px 0.1px grey;
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: large;
+  transition: background-color 250ms, color 250ms;
+  user-select: none;
+}
+
+.botonAddCart:hover {
+  background-color: #4444AA;
+  color: white;
+}
+
+.caja {
+  border-radius: 4px;
+  box-shadow: 1px 1px 2px gray;
+  padding: 15px;
+}
+
+.botonPayPal, .botonVisa {
+  background-color: #0070ba;
+  color: white;
+  font-size: large;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 0 5px;
+}
+
+.botonVisa {
+  background-color: #1a1f5e;
+}
+
+.linksNavBar {
+  margin: 0;
+}
+.linksNavBar li {
+  list-style: none;
+  float: left;
+  transition: background-color 250ms;
+}
+.linksNavBar li a {
+  cursor: pointer;
+  display: inline-block;
+  padding: 15px;
+  color: white;
+  text-decoration: none;
+}
+.linksNavBar li:after {
+  clear: both;
+}
+.linksNavBar li:hover {
+  background-color: #35356a;
+}
+
+.plato--Titulo {
+  font-size: x-large;
+  font-weight: bold;
+  font-family: "Muli";
+  color: #3d3d7c;
+}
+
+.plato--Descripcion {
+  font-size: large;
+  color: #333333;
+}
+
+.plato--Precio {
+  font-size: large;
+}
+.plato--Precio:before {
+  color: green;
+  content: "Precio unitario: ";
+}
+.plato--Precio:after {
+  content: " S/.";
+}
+
+.plato--Cantidad {
+  font-size: large;
+  font-weight: bold;
+  display: inline-table;
+  padding: 15px;
+}
+
+.plato--Cantidad--Icon {
+  display: table-cell;
+  vertical-align: top;
+  cursor: pointer;
+  transition: color 250ms;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.plato--Cantidad--Icon:hover {
+  color: #4444aa;
+}
+
+.carrito {
+  text-align: left;
+}
+
+#carrito--elementos, #carrito--precio {
+  padding: 0 10px;
+}
+
+.carritoElem:after {
+  clear: both;
+}
+
+.carritoElem--img {
+  float: left;
+  margin: 10px 20px;
+  width: 200px;
+}
+
+.carrito--subTotal {
+  text-align: right;
+  font-weight: bold;
+  font-family: "Muli", sans-serif;
+  font-size: x-large;
+}
+.carrito--subTotal:before {
+  content: "Subtotal: ";
+}
+.carrito--subTotal:after {
+  content: " S/.";
+}
+
+.carrito--precio--contenido--titulo {
+  text-align: center;
+  font-family: "Muli", sans-serif;
+  font-size: x-large;
+  font-weight: 900;
+}
+
+.carrito--precio--contenido--botonPagar {
+  display: inline-block;
+  width: 100%;
+  text-align: center;
+  padding: 10px;
+  background-color: #4444aa;
+  color: white;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.carrito--precio--contenido--botonPagar:hover {
+  background-color: #3d3d7c;
+}
+
+#carrito--boton--seguircomprando {
+  margin: 10px 0;
+  padding: 10px 20px;
+  background-color: green;
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+}
+#carrito--boton--seguircomprando:visited {
+  color: white;
+}
+
+#carrito--tituloprincipal {
+  text-align: center;
+  font-size: xx-large;
+  font-family: "Muli", sans-serif;
+  font-weight: 900;
+  margin: 10px 0;
+}
+
+/*# sourceMappingURL=base.css.map */
diff --git a/css/base.css.map b/css/base.css.map
new file mode 100644
index 0000000..af69bf5
--- /dev/null
+++ b/css/base.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["base.sass"],"names":[],"mappings":"AAAQ;AAKR;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EAEE;EACA,aAvFY;;;AAyFhB;EACE;EAEE;EACA,aA5Fc;;;AA8FlB;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EAEE;;;AAEF;EACE;;AACA;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEN;EAEI;EACA;EACA,aAzQY;EA0Qd;;;AAEF;EAEI;EACF;;;AAEF;EACE;;AACA;EACE;EACA;;AACF;EACE;;;AAEJ;EAEI;EACA;EACF;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;;;AAEF;EACE;;;AAGA;EACE;;;AAEJ;EACE;EACA;EACA;;;AAEF;EACE;EAEE;EACA;EACA;;AACF;EACE;;AACF;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;;AAEJ;EACE;EAEE;EACA;EACA;EACF","file":"base.css"}
\ No newline at end of file
diff --git a/css/base.sass b/css/base.sass
new file mode 100644
index 0000000..eca6e53
--- /dev/null
+++ b/css/base.sass
@@ -0,0 +1,366 @@
+@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
+
+$fuenteTitulos: 'Muli'
+$fuentePrincipal: 'Open Sans'
+
+*
+  box-sizing: border-box
+
+html, body
+  margin: 0
+  padding: 0
+  font-family: $fuentePrincipal, sans-serif
+
+header
+  background-color: #44A
+  box-shadow: 0 5px 5px #999999
+
+nav
+  background-color: #3d3d7c
+  color: white
+
+section
+  overflow: hidden
+  transition: height 150ms ease-out
+  height: auto
+
+footer
+  background-color: #333
+  color: #EEE
+  box-shadow: inset 0 5px 5px #999999
+  padding: 40px
+
+.contenedor
+  max-width: 1200px
+  width: 80%
+  margin: auto
+
+.col-1
+  width: 8.33%
+
+.col-2
+  width: 16.66%
+
+.col-3
+  width: 25%
+
+.col-4
+  width: 33.33%
+
+.col-5
+  width: 41.66%
+
+.col-6
+  width: 50%
+
+.col-7
+  width: 58.33%
+
+.col-8
+  width: 66.66%
+
+.col-9
+  width: 75%
+
+.col-10
+  width: 83.33%
+
+.col-11
+  width: 91.66%
+
+.col-12
+  width: 100%
+
+[class*="col-"]
+  float: left
+
+.row::after
+  content: ""
+  clear: both
+  display: table
+
+.center
+  text-align: center
+
+#tituloP
+  padding: 30px
+  color: white
+  font:
+    size: 50px
+    family: $fuenteTitulos
+
+#tituloP--descripcion
+  padding: 10px
+  font:
+    size: large
+    family: $fuentePrincipal
+
+.center
+  text-align: center
+
+.boton
+  display: inline-block
+  margin: 20px
+  border-radius: 3px
+  box-shadow: 1px 1px 3px #090909
+  padding: 10px 30px
+  cursor: pointer
+  text-decoration: none
+
+.mySeccion
+  overflow: hidden
+  transition: height 150ms ease-out
+  height: auto
+
+#botonRegistro
+  background-color: green
+  color: white
+  font-size: large
+  transition: transform 200ms, box-shadow 200ms
+
+#botonRegistro:hover
+  transform: translate(-1px, -1px)
+  box-shadow: 2px 2px 7px #050505
+
+#botonInicioSesion
+  background-color: white
+  transition: transform 200ms, box-shadow 200ms
+
+#botonInicioSesion:hover
+  transform: translate(-1px, -1px)
+  box-shadow: 2px 2px 7px #050505
+
+#botonInicioSesion:visited
+  color: black
+
+.contenido
+  margin: 40px 0
+
+.image
+  padding: 0 20px
+  width: 100%
+  height: auto
+
+.descripcionComida
+  padding: 0 30px
+  text-align: center
+  font-size: large
+
+.inicio_registro
+  color: white
+
+input
+  min-width: 80%
+  min-height: 40px
+  padding: 10px
+  color: #44A
+  font-size: large
+
+.botonEnviarForm
+  background-color: white
+  box-shadow: 1px 1px 2px gray
+  cursor: pointer
+  border: none
+  transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
+
+.botonEnviarForm:hover
+  background-color: #4949e2
+  color: white
+  transform: translate(-1px, -1px)
+  box-shadow: 2px 2px 2px gray
+
+.google-button
+  height: 40px
+  border-width: 0
+  background: white
+  color: #737373
+  border-radius: 5px
+  white-space: nowrap
+  box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
+  transition-property: background-color, box-shadow
+  transition-duration: 150ms
+  transition-timing-function: ease-in-out
+  padding: 0
+  cursor: pointer
+
+.google-button:focus, .google-button:hover
+  box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
+
+.google-button:active
+  background-color: #e5e5e5
+  box-shadow: none
+  transition-duration: 10ms
+
+.google-button__icon
+  display: inline-block
+  vertical-align: middle
+  margin: 8px 0 8px 8px
+  width: 18px
+  height: 18px
+  box-sizing: border-box
+
+.google-button__text
+  display: inline-block
+  vertical-align: middle
+  padding: 0 24px
+  font-size: 14px
+  font-weight: bold
+  font-family: 'Roboto', arial, sans-serif
+
+.unseen
+  visibility: hidden
+
+.botonAddCart
+  background-color: white
+  padding: 5px
+  color: #4444aa
+  box-shadow: 0.1px 0.1px grey
+  border-radius: 2px
+  cursor: pointer
+  font-size: large
+  transition: background-color 250ms, color 250ms
+  user-select: none
+
+.botonAddCart:hover
+  background-color: #4444AA
+  color: white
+
+.caja
+  border-radius: 4px
+  box-shadow: 1px 1px 2px gray
+  padding: 15px
+
+.botonPayPal
+  background-color: #0070ba
+  color: white
+  font-size: large
+  padding: 10px
+  border: none
+  border-radius: 5px
+  cursor: pointer
+  margin: 0 5px
+
+.botonVisa
+  @extend .botonPayPal
+  background-color: #1a1f5e
+
+.linksNavBar
+  margin: 0
+  li
+    list-style: none
+    float: left
+    transition: background-color 250ms
+    a
+      cursor: pointer
+      display: inline-block
+      padding: 15px
+      color: white
+      text-decoration: none
+    &:after
+      clear: both
+    &:hover
+      background-color: #35356a
+
+.plato--Titulo
+  font:
+    size: x-large
+    weight: bold
+    family: $fuenteTitulos
+  color: #3d3d7c
+
+.plato--Descripcion
+  font:
+    size: large
+  color: #333333
+
+.plato--Precio
+  font-size: large
+  &:before
+    color: green
+    content: "Precio unitario: "
+  &:after
+    content: " S/."
+
+.plato--Cantidad
+  font:
+    size: large
+    weight: bold
+  display: inline-table
+  padding: 15px
+
+.plato--Cantidad--Icon
+  display: table-cell
+  vertical-align: top
+  cursor: pointer
+  transition: color 250ms
+  -webkit-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+  &:hover
+    color: #4444aa
+
+.carrito
+  text-align: left
+
+#carrito--elementos, #carrito--precio
+  padding: 0 10px
+
+.carritoElem
+  &:after
+    clear: both
+
+.carritoElem--img
+  float: left
+  margin: 10px 20px
+  width: 200px
+
+.carrito--subTotal
+  text-align: right
+  font:
+    weight: bold
+    family: $fuenteTitulos, sans-serif
+    size: x-large
+  &:before
+    content: "Subtotal: "
+  &:after
+    content: " S/."
+
+.carrito--precio--contenido--titulo
+  text-align: center
+  font:
+    family: $fuenteTitulos, sans-serif
+    size: x-large
+    weight: 900
+
+.carrito--precio--contenido--botonPagar
+  display: inline-block
+  width: 100%
+  text-align: center
+  padding: 10px
+  background-color: #4444aa
+  color: white
+  border-radius: 3px
+  cursor: pointer
+  &:hover
+    background-color: #3d3d7c
+
+#carrito--boton--seguircomprando
+  margin: 10px 0
+  padding: 10px 20px
+  background-color: green
+  color: white
+  text-decoration: none
+  border-radius: 4px
+  &:visited
+    color: white
+
+#carrito--tituloprincipal
+  text-align: center
+  font:
+    size: xx-large
+    family: $fuenteTitulos, sans-serif
+    weight: 900
+  margin: 10px 0
+
+
diff --git a/index.php b/index.php
new file mode 100644
index 0000000..4153bfe
--- /dev/null
+++ b/index.php
@@ -0,0 +1,192 @@
+<!DOCTYPE HTML>
+<html lang="es">
+<head>
+    <title>Cocina Francesa</title>
+    <link rel="stylesheet" href="./css/base.css" type="text/css"/>
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
+          rel="stylesheet">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+</head>
+<body>
+
+<script src="./js/topbar.js"></script>
+
+<header id="header">
+    <div class="contenedor">
+        <div id="tituloP" class="center">
+            <a href="./#" style="color: white; text-decoration: none">Cocina Francesa</a>
+            <div id="tituloP--descripcion">
+                Descubre un nuevo sabor
+            </div>
+        </div>
+    </div>
+    <div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
+        <a href="./#registro" id="botonRegistro" class="boton">
+            Registrarse
+        </a>
+        <a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
+            Iniciar Sesion
+        </a>
+        <br/>
+        <br/>
+        <br/>
+    </div>
+    <div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
+
+</header>
+
+<nav id="navBar" class="mySeccion"  data-collapsed="true">
+    <ul class="linksNavBar">
+        <li><a href="./#">Inicio</a></li>
+        <li><a href="./#usuarios/">Comprar</a></li>
+        <li><a href="./#usuarios/mi-cuenta">Mi cuenta</a></li>
+        <li><a href="./#usuarios/pagos">Carrito</a></li>
+    </ul>
+</nav>
+
+<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
+    <div class="row contenido">
+        <div class="col-5">
+            <img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
+                 alt="Plato Francés"/>
+        </div>
+        <div class="col-7">
+            <div class="descripcionComida">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+                fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
+                deserunt mollit anim id est laborum.
+            </div>
+        </div>
+    </div>
+    <br/>
+    <div class="row">
+        <div class="col-7 center">
+            <div class="descripcionComida">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
+                malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
+                gravida
+                cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
+                sagittis.
+            </div>
+        </div>
+        <div class="col-5">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
+                 alt="Plato Francés" class="image">
+        </div>
+    </div>
+    <br/>
+</section>
+
+<section id="sectionS" class="contenedor mySeccion">
+</section>
+
+<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="true" style="height: 0">
+    <br/>
+    <br/>
+    <div class="center">
+        <div id="carrito--tituloprincipal">
+            Carrito de compras
+        </div>
+        <br/>
+        <a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
+        <br/>
+        <br/>
+        <div id="carrito" class="row carrito">
+
+            <div id="carrito--elementos" class="col-8">
+                <div id="carrito--elementos--contenido" class="caja">
+                    <template v-if="noEstaVacio">
+                        <template v-for="producto in item">
+                            <div class="carritoElem">
+                                <img class="carritoElem--img" v-bind:src="producto.imgUrl">
+                                <div class="plato--Titulo">{{ producto.nombre }}</div>
+                                <br>
+                                <div class="plato--Precio">{{ producto.precio }}</div>
+                                <div class="plato--Cantidad">Cantidad:
+                                    <i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
+                                    <span>{{ producto.cantidad }}</span>
+                                    <i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
+                                </div>
+                                <br>
+                                <div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
+                                <hr>
+                            </div>
+                        </template>
+                    </template>
+                    <template v-else>
+                        No hay nada en tu carrito de compras :c
+                    </template>
+                </div>
+            </div>
+
+            <div id="carrito--precio" class="col-4">
+
+                <div id="carrito--precio--contenido" class="caja">
+                    <template v-if="noEstaVacio">
+                        <div id="pagos">
+                            <div style="display: inline-block;">
+                                {{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
+                            </div>
+                            <div style="display: inline-block; float: right; clear: both">
+                                {{ subTotal }} S/.
+                            </div>
+                        </div>
+                        <div>
+                            <div style="display: inline-block;">
+                                Descuentos:
+                            </div>
+                            <div style="display: inline-block; float: right; clear: both">
+                                {{ descuento }} S/.
+                            </div>
+                        </div>
+                        <br>
+                        <br>
+                        <div>
+                            <div class="carrito--precio--contenido--titulo" style="display: inline-block;">
+                                Total:
+                            </div>
+                            <div class="carrito--precio--contenido--titulo"
+                                 style="display: inline-block; float: right; clear: both">
+                                {{ total }} S/.
+                            </div>
+                        </div>
+                        <br>
+                        <br>
+                        <a class="carrito--precio--contenido--botonPagar">
+                            Completar Transaccion
+                        </a>
+                    </template>
+                    <template v-else>
+                        No hay nada en tu carrito de compras :c
+                    </template>
+                </div>
+            </div>
+        </div>
+    </div>
+    <br/>
+    <br/>
+</section>
+
+<footer id="footer">
+    <div class="contenedor">
+        Cocina Francesa.<br/>
+        Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
+        Se utilizaron: Vue.js, BEM, Sass, npm, y PHP.<br>
+        <br/>
+        Desarrollado por Fernando Araoz, 20173373.
+    </div>
+</footer>
+
+<!-- Vue -->
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
+<!-- Logica principal -->
+<script src="./js/base.js?v=2"></script>
+
+</body>
+</html>
diff --git a/iniciar-sesion.php b/iniciar-sesion.php
new file mode 100644
index 0000000..fddc1bc
--- /dev/null
+++ b/iniciar-sesion.php
@@ -0,0 +1,67 @@
+<div class="contenedor inicio_registro">
+    <div class="center">
+        Inicia Sesión.
+    </div>
+    <br />
+    <br />
+    <br />
+    <div class="row">
+        <div class="col-7 center">
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <br>
+            <img src="https://www.sbs.com.au/food/sites/sbs.com.au.food/files/styles/full/public/nicoise-salad.jpg?itok=MK0Y7QKN&mtime=1499834368"
+                 alt="plato de comida" class="image">
+        </div>
+        <div class="col-5 center">
+            <br />
+            <br />
+            <button type="button" class="google-button" style="width: 213px">
+                <span class="google-button__icon">
+                    <svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
+                    </svg>
+                </span>
+                <span class="google-button__text">Iniciar con Google</span>
+            </button>
+            <br />
+            <br />
+            <button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
+             border-radius: 3px">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+                     id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
+                     style="max-height: 18px" xml:space="preserve">
+                    <g>
+                        <path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803   c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654   c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246   c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
+                    </g>
+                </svg>
+                <span class="google-button__text" style="color: white; padding: 0 13px">Iniciar con Facebook</span>
+            </button>
+            <br />
+            <br />
+            O inicia sesión con tu correo:<br />
+            <br />
+            <br />
+            <form method="post" onsubmit="return false">
+                Correo Electrónico:<br />
+                <input type="text"  placeholder="Tu correo Electrónico"><br />
+                <br />
+                Contraseña:<br />
+                <input type="password" placeholder="Contraseña"><br />
+                <br />
+                <input class="botonEnviarForm" type="submit" value="Iniciar Sesión">
+            </form>
+            <br />
+            <br />
+            ¿No tienes una cuenta?<br />
+            <a href="./#registro" id="botonRegistro" class="boton">
+                Regístrate
+            </a>
+        </div>
+    </div>
+    <br />
+    <br />
+</div>
\ No newline at end of file
diff --git a/js/Router.js b/js/Router.js
new file mode 100644
index 0000000..1e1d402
--- /dev/null
+++ b/js/Router.js
@@ -0,0 +1,603 @@
+/* global window, module */
+
+;(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+            global.Router = factory()
+}(this, (function () {
+
+    /**
+     * Router
+     *
+     * @version: 1.2.7
+     * @author Graidenix
+     *
+     * @constructor
+     *
+     * @param {object} options
+     * @returns {Router}
+     */
+    function Router(options) {
+        var settings = this._getSettings(options);
+
+
+        this.notFoundHandler = settings.page404;
+        this.mode = (!window.history || !window.history.pushState) ? "hash" : settings.mode;
+        this.root = settings.root === "/" ? "/" : "/" + this._trimSlashes(settings.root) + "/";
+        this.beforeHook = settings.hooks.before;
+        this.securityHook = settings.hooks.secure;
+
+        this.routes = [];
+        if (settings.routes && settings.routes.length > 0) {
+            var _this = this;
+            settings.routes.forEach(function (route) {
+                _this.add(route.rule, route.handler, route.options);
+            });
+        }
+
+        this._pageState = null;
+        this._currentPage = null;
+        this._skipCheck = false;
+        this._action = null;
+
+        if (this.mode === "hash") {
+            this._historyStack = [];
+            this._historyIdx = 0;
+            this._historyState = "add"
+        }
+
+        return this;
+    }
+
+    /**
+     * Define Router Page
+     *
+     * @param {string} uri
+     * @param {object} query
+     * @param {Array} params
+     * @param {object} state
+     * @param {object} options
+     *
+     * @constructor
+     */
+    Router.Page = function (uri, query, params, state, options) {
+        this.uri = uri || "";
+        this.query = query || {};
+        this.params = params || [];
+        this.state = state || null;
+        this.options = options || {};
+    };
+
+    /**
+     * Sanitize options and add default values
+     *
+     * @param {object} options
+     * @returns {object}
+     * @private
+     */
+    Router.prototype._getSettings = function (options) {
+        var settings = {};
+        var defaults = {
+            routes: [],
+            mode: "history",
+            root: "/",
+            hooks: {
+                "before": function () {
+                },
+                "secure": function () {
+                    return true;
+                }
+            },
+            page404: function (page) {
+                console.error({
+                    page: page,
+                    message: "404. Page not found"
+                });
+            }
+        };
+
+        options = options || {};
+        ["routes", "mode", "root", "page404"].forEach(function (key) {
+            settings[key] = options[key] || defaults[key];
+        });
+
+        settings.hooks = Object.assign({}, defaults.hooks, options.hooks || {});
+
+        return settings;
+    };
+
+    /**
+     * Get URI for Router "history" mode
+     *
+     * @private
+     * @returns {string}
+     */
+    Router.prototype._getHistoryFragment = function () {
+        var fragment = decodeURI(window.location.pathname);
+        if (this.root !== "/") {
+            fragment = fragment.replace(this.root, "");
+        }
+        return this._trimSlashes(fragment);
+    };
+
+    /**
+     * Get URI for router "hash" mode
+     *
+     * @private
+     * @returns {string}
+     */
+    Router.prototype._getHashFragment = function () {
+        var hash = window.location.hash.substr(1).replace(/(\?.*)$/, "");
+        return this._trimSlashes(hash);
+    };
+
+    /**
+     * Get current URI
+     *
+     * @private
+     * @returns {string}
+     */
+    Router.prototype._getFragment = function () {
+        if (this.mode === "history") {
+            return this._getHistoryFragment();
+        } else {
+            return this._getHashFragment();
+        }
+    };
+
+    /**
+     * Trim slashes for path
+     *
+     * @private
+     * @param {string} path
+     * @returns {string}
+     */
+    Router.prototype._trimSlashes = function (path) {
+        if (typeof path !== "string") {
+            return "";
+        }
+        return path.toString().replace(/\/$/, "").replace(/^\//, "");
+    };
+
+    /**
+     * 404 Page Handler
+     *
+     * @private
+     */
+    Router.prototype._page404 = function (path) {
+        this._currentPage = new Router.Page(path);
+        this.notFoundHandler(path);
+    };
+
+    /**
+     * Convert the string route rule to RegExp rule
+     *
+     * @param {string} route
+     * @returns {RegExp}
+     * @private
+     */
+    Router.prototype._parseRouteRule = function (route) {
+        if (typeof route !== "string") {
+            return route;
+        }
+        var uri = this._trimSlashes(route);
+        var rule = uri
+            .replace(/([\\\/\-\_\.])/g, "\\$1")
+            .replace(/\{[a-zA-Z]+\}/g, "(:any)")
+            .replace(/\:any/g, "[\\w\\-\\_\\.]+")
+            .replace(/\:word/g, "[a-zA-Z]+")
+            .replace(/\:num/g, "\\d+");
+
+        return new RegExp("^" + rule + "$", "i");
+    };
+
+    /**
+     * Parse query string and return object for it
+     *
+     * @param {string} query
+     * @returns {object}
+     * @private
+     */
+    Router.prototype._parseQuery = function (query) {
+        var _query = {};
+        if (typeof query !== "string") {
+            return _query;
+        }
+
+        if (query[0] === "?") {
+            query = query.substr(1);
+        }
+
+        this._queryString = query;
+        query.split("&").forEach(function (row) {
+            var parts = row.split("=");
+            if (parts[0] !== "") {
+                if (parts[1] === undefined) {
+                    parts[1] = true;
+                }
+                _query[decodeURIComponent(parts[0])] = parts[1];
+            }
+        });
+        return _query;
+    };
+
+    /**
+     * Get query for `history` mode
+     *
+     * @returns {Object}
+     * @private
+     */
+    Router.prototype._getHistoryQuery = function () {
+        return this._parseQuery(window.location.search);
+    };
+
+    /**
+     * Get query for `hash` mode
+     *
+     * @returns {Object}
+     * @private
+     */
+    Router.prototype._getHashQuery = function () {
+        var index = window.location.hash.indexOf("?");
+        var query = (index !== -1) ? window.location.hash.substr(index) : "";
+        return this._parseQuery(query);
+    };
+
+    /**
+     * Get query as object
+     *
+     * @private
+     * @returns {Object}
+     */
+    Router.prototype._getQuery = function () {
+        if (this.mode === "history") {
+            return this._getHistoryQuery();
+        } else {
+            return this._getHashQuery();
+        }
+    };
+
+    /**
+     * Add route to routes list
+     *
+     * @param {string|RegExp} rule
+     * @param {function} handler
+     * @param {{}} options
+     * @returns {Router}
+     */
+    Router.prototype.add = function (rule, handler, options) {
+        this.routes.push({
+            rule: this._parseRouteRule(rule),
+            handler: handler,
+            options: options
+        });
+        return this;
+    };
+
+    /**
+     * Remove a route from routes list
+     *
+     * @param param
+     * @returns {Router}
+     */
+    Router.prototype.remove = function (param) {
+        var _this = this;
+        if (typeof param === "string") {
+            param = this._parseRouteRule(param).toString();
+        }
+        this.routes.some(function (route, i) {
+            if (route.handler === param || route.rule.toString() === param) {
+                _this.routes.splice(i, 1);
+                return true;
+            }
+            return false;
+        });
+
+        return this;
+    };
+
+    /**
+     * Reset the state of Router
+     *
+     * @returns {Router}
+     */
+    Router.prototype.reset = function () {
+        this.routes = [];
+        this.mode = null;
+        this.root = "/";
+        this._pageState = {};
+        this.removeUriListener();
+
+        return this;
+    };
+
+    /**
+     * Add current page in history stack
+     * @private
+     */
+    Router.prototype._pushHistory = function () {
+        var _this = this,
+            fragment = this._getFragment();
+
+        if (this.mode === "hash") {
+            if (this._historyState === "add") {
+                if (this._historyIdx !== this._historyStack.length - 1) {
+                    this._historyStack.splice(this._historyIdx + 1);
+                }
+
+                this._historyStack.push({
+                    path: fragment,
+                    state: _this._pageState
+                });
+
+                this._historyIdx = this._historyStack.length - 1;
+            }
+            this._historyState = "add";
+        }
+    };
+
+    /**
+     *
+     * @param asyncRequest boolean
+     * @returns {PromiseResult<boolean> | boolean}
+     * @private
+     */
+    Router.prototype._unloadCallback = function (asyncRequest) {
+        var result;
+
+        if (this._skipCheck) {
+            return asyncRequest ? Promise.resolve(true) : true;
+        }
+
+        if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
+            result = this._currentPage.options.unloadCb(this._currentPage, asyncRequest);
+            if (!asyncRequest || result instanceof Promise) {
+                return result;
+            }
+            return result ? Promise.resolve(result) : Promise.reject(result);
+        } else {
+            return asyncRequest ? Promise.resolve(true) : true;
+        }
+    };
+
+    /**
+     * Check if router has the action for current path
+     *
+     * @returns {boolean}
+     * @private
+     */
+    Router.prototype._findRoute = function () {
+        var _this = this,
+            fragment = this._getFragment();
+
+        return this.routes.some(function (route) {
+            var match = fragment.match(route.rule);
+            if (match) {
+                match.shift();
+                var query = _this._getQuery();
+                var page = new Router.Page(fragment, query, match, _this._pageState, route.options);
+
+                if (!_this.securityHook(page)) {
+                    return false;
+                }
+
+                _this._currentPage = page;
+                if (_this._skipCheck) {
+                    _this._skipCheck = false;
+                    return true;
+                }
+                _this.beforeHook(page);
+                route.handler.apply(page, match);
+                _this._pageState = null;
+
+                window.onbeforeunload = function (ev) {
+                    if (_this._unloadCallback(false)) {
+                        return;
+                    }
+                    ev.returnValue = true;
+                    return true;
+                };
+
+                return true;
+            }
+            return false;
+        });
+    };
+
+    /**
+     *
+     */
+    Router.prototype._treatAsync = function () {
+        var result;
+
+        result = this._currentPage.options.unloadCb(this._currentPage, true);
+        if (!(result instanceof Promise)) {
+            result = result ? Promise.resolve(result) : Promise.reject(result);
+        }
+
+        result
+            .then(this._processUri.bind(this))
+            .catch(this._resetState.bind(this));
+    };
+
+    /**
+     *
+     * @private
+     */
+    Router.prototype._resetState = function () {
+        this._skipCheck = true;
+        this.navigateTo(this._current, this._currentPage.state, true);
+    };
+
+    /**
+     * Replace current page with new one
+     */
+    Router.prototype._processUri = function () {
+        var fragment = this._getFragment(),
+            found;
+
+        this._current = fragment;
+        this._pushHistory();
+
+        found = this._findRoute.call(this);
+        if (!found) {
+            this._page404(fragment);
+        }
+    };
+
+    /**
+     * Check the URL and execute handler for its route
+     *
+     * @returns {Router}
+     */
+    Router.prototype.check = function () {
+        if (this._skipCheck) return this;
+
+        // if page has unload cb treat as promise
+        if (this._currentPage && this._currentPage.options && this._currentPage.options.unloadCb) {
+            this._treatAsync();
+        } else {
+            this._processUri();
+        }
+        return this;
+    };
+
+    /**
+     * Add the URI listener
+     *
+     * @returns {Router}
+     */
+    Router.prototype.addUriListener = function () {
+        if (this.mode === "history") {
+            window.onpopstate = this.check.bind(this);
+        } else {
+            window.onhashchange = this.check.bind(this);
+        }
+
+        return this;
+    };
+
+    /**
+     * Remove the URI listener
+     *
+     * @returns {Router}
+     */
+    Router.prototype.removeUriListener = function () {
+        window.onpopstate = null;
+        window.onhashchange = null;
+        return this;
+    };
+
+    /**
+     * Redirect to a page with replace state
+     *
+     * @param {string} path
+     * @param {object} state
+     * @param {boolean} silent
+     *
+     * @returns {Router}
+     */
+    Router.prototype.redirectTo = function (path, state, silent) {
+        path = this._trimSlashes(path) || "";
+        this._pageState = state || null;
+        this._skipCheck = !!silent;
+
+        if (this.mode === "history") {
+            history.replaceState(state, null, this.root + this._trimSlashes(path));
+            return this.check();
+        } else {
+            this._historyIdx--;
+            window.location.hash = path;
+        }
+        return this;
+    };
+
+    /**
+     * Navigate to a page
+     *
+     * @param {string} path
+     * @param {object} state
+     * @param {boolean} silent
+     *
+     * @returns {Router}
+     */
+    Router.prototype.navigateTo = function (path, state, silent) {
+        path = this._trimSlashes(path) || "";
+        this._pageState = state || null;
+        this._skipCheck = !!silent;
+
+        if (this.mode === "history") {
+            history.pushState(state, null, this.root + this._trimSlashes(path));
+            return this.check();
+        } else {
+            window.location.hash = path;
+        }
+        return this;
+    };
+
+    /**
+     * Refresh page with recall route handler
+     * @returns {Router}
+     */
+    Router.prototype.refresh = function () {
+        if (!this._currentPage) {
+            return this;
+        }
+        var path = this._currentPage.uri + "?" + this._queryString;
+        return this.navigateTo(path, this._currentPage.state);
+    };
+
+    /**
+     * Go Back in browser history
+     * Simulate "Back" button
+     *
+     * @returns {Router}
+     */
+    Router.prototype.back = function () {
+        if (this.mode === "history") {
+            window.history.back();
+            return this;
+        }
+
+        return this.go(this._historyIdx - 1);
+    };
+
+    /**
+     * Go Forward in browser history
+     * Simulate "Forward" button
+     *
+     * @returns {Router}
+     */
+    Router.prototype.forward = function () {
+        if (this.mode === "history") {
+            window.history.forward();
+            return this;
+        }
+
+        return this.go(this._historyIdx + 1);
+    };
+
+    /**
+     * Go to a specific history page
+     *
+     * @param {number} count
+     * @returns {Router}
+     */
+    Router.prototype.go = function (count) {
+        if (this.mode === "history") {
+            window.history.go(count);
+            return this;
+        }
+
+        var page = this._historyStack[count];
+        if (!page) {
+            return this;
+        }
+
+        this._historyIdx = count;
+        this._historyState = "hold";
+        return this.navigateTo(page.path, page.state);
+    };
+
+    return Router;
+})));
\ No newline at end of file
diff --git a/js/base.js b/js/base.js
new file mode 100644
index 0000000..47668e9
--- /dev/null
+++ b/js/base.js
@@ -0,0 +1,563 @@
+let navBar = new Vue({
+    el: '#navBar',
+    data: {
+        visible: true
+    }
+});
+
+const carritoUsuario = [];
+
+window.addEventListener("hashchange", () => {
+    render(decodeURI(window.location.hash));
+});
+
+const render = url => {
+    switch (url) {
+        case "#registro":
+            abrirRegistro();
+            break;
+        case "#iniciar-sesion":
+            abrirInicioSesion();
+            break;
+        case "#usuarios/":
+            abrirUsuarios();
+            break;
+        case "#usuarios/mi-cuenta":
+            abrirMiCuenta();
+            break;
+        case "#usuarios/pagos":
+            abrirCarrito();
+            break;
+        case "#staff/":
+            abrirStaff();
+            break;
+        default:
+            abrirPagPrin();
+            return;
+    }
+};
+
+const sectionP = document.getElementById("sectionP");
+const contenedorInicioRegistro = document.getElementById("contenedorInicio-Registro");
+const formInicioRegistro = document.getElementById("inicio_registro");
+const sectionS = document.getElementById("sectionS");
+const sectionCarrito = document.getElementById("sectionCarrito");
+
+const manipularTopBar = status => {
+    switch (status) {
+        case 1:
+            cambiarProgreso(25);
+            break;
+        case 2:
+            cancelarTransicion();
+            cambiarProgreso(50);
+            break;
+        case 3:
+            cancelarTransicion();
+            cambiarProgreso(75);
+            break;
+        default:
+            cancelarTransicion();
+            reiniciarTopBar();
+    }
+};
+
+const abrirUsuarios = () => {
+
+    const crearPlatos = () => {
+        return new Promise((resolve, reject) => {
+            const ajax = new XMLHttpRequest();
+            ajax.onreadystatechange = () => {
+                if (ajax.status === 200 && ajax.readyState === 4) {
+
+                    const data = JSON.parse(ajax.responseText);
+                    const divR = document.getElementById("productos");
+
+                    let contenedor = document.createElement("div");
+                    contenedor.className = "row";
+                    let contador = 0;
+                    for (const itemI in data) {
+                        if (data.hasOwnProperty(itemI)) {
+                            const item = data[itemI];
+                            contador++;
+                            if (contador >= 4) {
+                                divR.appendChild(contenedor);
+                                divR.appendChild(document.createElement("br"));
+                                contenedor = document.createElement("div");
+                                contenedor.className = "row";
+                                contador = 1;
+                            }
+
+                            const itemDiv = document.createElement("div");
+                            itemDiv.className = "col-4 caja plato";
+
+                            const img = document.createElement("img");
+                            img.className = "image";
+                            img.src = item["imgUrl"];
+                            itemDiv.appendChild(img);
+
+                            const nombre = document.createElement("div");
+                            nombre.className = "plato--Titulo";
+                            nombre.innerText = item["nombre"];
+                            itemDiv.appendChild(nombre);
+
+                            itemDiv.appendChild(document.createElement("br"));
+
+                            const descripcion = document.createElement("div");
+                            descripcion.className = "plato--Descripcion";
+                            descripcion.innerText = item["descripcion"];
+                            itemDiv.appendChild(descripcion);
+                            itemDiv.appendChild(document.createElement("br"));
+
+                            const precioUnitario = document.createElement("div");
+                            precioUnitario.className = "plato--Precio";
+                            precioUnitario.innerText = `${item["precio"]}`;
+                            itemDiv.appendChild(precioUnitario);
+
+                            const cantidad = document.createElement("div");
+                            cantidad.className = "plato--Cantidad";
+                            cantidad.appendChild(document.createTextNode("Cantidad: "));
+                            const unidades = document.createElement("span");
+                            const botonMenos = document.createElement("i");
+                            botonMenos.className = "material-icons plato--Cantidad--Icon";
+                            botonMenos.innerText = "remove";
+                            botonMenos.addEventListener("click",() => {
+                                const valorActual = parseInt(unidades.innerText);
+                                if (valorActual > 1) {
+                                    unidades.innerText = valorActual-1;
+                                } else {
+                                    unidades.innerText = "1";
+                                }
+                            });
+
+                            cantidad.appendChild(botonMenos);
+                            unidades.innerText = "1";
+                            cantidad.appendChild(unidades);
+                            const botonMas = document.createElement("i");
+                            botonMas.className = "material-icons plato--Cantidad--Icon";
+                            botonMas.innerText = "add";
+                            botonMas.addEventListener("click",() => {
+                                const valorActual = parseInt(unidades.innerText);
+                                if (valorActual > 0) {
+                                    unidades.innerText = valorActual+1;
+                                } else {
+                                    unidades.innerText = "1";
+                                }
+                            });
+                            cantidad.appendChild(botonMas);
+
+                            itemDiv.appendChild(cantidad);
+                            itemDiv.appendChild(document.createElement("br"));
+
+                            const botonAddCart = document.createElement("button");
+                            botonAddCart.className = "botonAddCart";
+                            botonAddCart.addEventListener("click",() => {
+                                const cantidad = parseInt(unidades.innerText);
+                                if (cantidad > 0) {
+                                    const item = data[itemI];
+                                    item["cantidad"] = cantidad;
+
+                                    //  carritoUsuario[itemI] = item;
+
+                                     carritoUsuario.push(item);
+                                    console.log(`JSON del usuario|>\n${JSON.stringify(carritoUsuario)}`);
+                                    window.location.replace("./#usuarios/pagos");
+                                } else {
+                                    alert("");
+                                }
+                            });
+                            botonAddCart.innerHTML = "<i class='material-icons'>add_shopping_cart</i> Añadir al carrito";
+                            itemDiv.appendChild(botonAddCart);
+
+                            contenedor.appendChild(itemDiv);
+                        }
+                    }
+                    divR.appendChild(contenedor);
+
+                    resolve();
+                }
+            };
+
+            ajax.open("POST", "./usuarios/platos.json", true);
+            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+            ajax.send();
+        });
+    };
+
+    const ajax = new XMLHttpRequest();
+
+    reiniciarTopBar();
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(formInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionCarrito);
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            abrirElemF(sectionS, () => {
+                sectionS.innerHTML = ajax.responseText;
+                crearPlatos();
+            });
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./usuarios/index.php", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+};
+
+const abrirMiCuenta = () => {
+    const ajax = new XMLHttpRequest();
+
+    reiniciarTopBar();
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(formInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionCarrito);
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            abrirElemF(sectionS, () => {
+                sectionS.innerHTML = ajax.responseText;
+            });
+
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./usuarios/mi-cuenta.php", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+};
+
+const abrirCarrito = () => {
+
+    reiniciarTopBar();
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(formInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionS);
+
+    /* Metodo antiguo
+    const ajax = new XMLHttpRequest();
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            abrirElemF(sectionCarrito, () => {
+                sectionCarrito.innerHTML = ajax.responseText;
+                crearCarrito();
+            });
+
+            sectionCarrito.setAttribute("vacio","false");
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./usuarios/pagos.php", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+        */
+
+    /* Metodo con Vue */
+    abrirElemF(sectionCarrito);
+
+};
+
+const abrirStaff = () => {
+    const ajax = new XMLHttpRequest();
+
+    reiniciarTopBar();
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(formInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionCarrito);
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            abrirElemF(sectionS, () => {
+                sectionS.innerHTML = ajax.responseText;
+            });
+
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./staff/", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+};
+
+const abrirInicioSesion = () => {
+    const ajax = new XMLHttpRequest();
+
+    reiniciarTopBar();
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionCarrito);
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            const elem = document.getElementById("inicio_registro");
+            abrirElemF(elem, () => {
+                elem.innerHTML = ajax.responseText
+            });
+
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./iniciar-sesion.php", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+};
+
+const abrirRegistro = () => {
+    const ajax = new XMLHttpRequest();
+
+    reiniciarTopBar();
+
+    cerrarElemF(contenedorInicioRegistro);
+    cerrarElemF(sectionP);
+    cerrarElemF(sectionCarrito);
+
+    ajax.onreadystatechange = () => {
+        if (ajax.status === 200 && ajax.readyState === 4) {
+
+            cambiarProgreso(100).then(ocultarTopBar);
+
+            const elem = document.getElementById("inicio_registro");
+            abrirElemF(elem, () => {
+                elem.innerHTML = ajax.responseText
+            });
+
+        } else {
+            manipularTopBar(ajax.readyState);
+        }
+    };
+
+    ajax.open("POST", "./registro.php", true);
+    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    ajax.send();
+};
+
+const abrirPagPrin = () => {
+    const inicio_registro = document.getElementById("inicio_registro");
+    cerrarElemF(inicio_registro, () => inicio_registro.innerHTML = "");
+    cerrarElemF(sectionS, () => sectionS.innerHTML = "");
+    cerrarElemF(sectionCarrito);
+    abrirElemF(contenedorInicioRegistro);
+    abrirElemF(sectionP);
+};
+
+/* Height Transition by CSS Tricks. Returns a Promise */
+const collapseSection = element => {
+    return new Promise((resolve, reject) => {
+
+        // get the height of the element's inner content, regardless of its actual size
+        let sectionHeight = element.scrollHeight;
+
+        // temporarily disable all css transitions
+        let elementTransition = element.style.transition;
+        element.style.transition = '';
+
+        // on the next frame (as soon as the previous style change has taken effect),
+        // explicitly set the element's height to its current pixel height, so we
+        // aren't transitioning out of 'auto'
+
+
+        requestAnimationFrame(function () {
+            element.style.height = sectionHeight + 'px';
+            element.style.transition = elementTransition;
+
+            // on the next frame (as soon as the previous style change has taken effect),
+            // have the element transition to height: 0
+            requestAnimationFrame(function () {
+                element.style.height = 0 + 'px';
+                setTimeout(() => {
+                    resolve("Termine de ocultar we v':");
+                }, 160);
+            });
+        });
+
+        // mark the section as "currently collapsed"
+        element.setAttribute('data-collapsed', 'true');
+    });
+};
+
+const expandSection = element => {
+    return new Promise((resolve, reject) => {
+        // get the height of the element's inner content, regardless of its actual size
+        let sectionHeight = element.scrollHeight;
+
+        // have the element transition to the height of its inner content
+        element.style.height = sectionHeight + 'px';
+
+        // when the next css transition finishes (which should be the one we just triggered)
+        element.addEventListener('transitionend', function (e) {
+            // remove this event listener so it only gets triggered once
+            element.removeEventListener('transitionend', arguments.callee);
+
+            // remove "height" from the element's inline styles, so it can return to its initial value
+            element.style.height = null;
+            setTimeout(() => {
+                resolve("Termine de ampliar we v':");
+            }, 0);
+        });
+
+        // mark the section as "currently not collapsed"
+        element.setAttribute('data-collapsed', 'false');
+    });
+};
+
+const abrirElemF = (element, midF, postF) => {
+    if (element.getAttribute("data-collapsed") === "true") {
+        if (midF !== undefined)
+            midF();
+        expandSection(element).then(() => {
+            if (postF !== undefined)
+                postF();
+        });
+    } else {
+        collapseSection(element).then(() => {
+            if (midF !== undefined)
+                midF();
+            expandSection(element).then(() => {
+                if (postF !== undefined)
+                    postF();
+            });
+        });
+    }
+};
+
+const cerrarElemF = (element, postF) => {
+    if (element.getAttribute("data-collapsed") === "false") {
+        collapseSection(element).then(() => {
+            if (postF !== undefined)
+                postF();
+        });
+    }
+};
+
+render(decodeURI(window.location.hash));
+
+
+const carrito = new Vue({
+    el: "#carrito",
+    data: {
+        item: carritoUsuario,
+        descuento: 0
+    },
+    computed: {
+        cantidadItems: function () {
+            let items = 0;
+            for (const i in this.item)
+                items++;
+            return items;
+        },
+        subTotal: function () {
+            let subT = 0;
+            for (const itemI in this.item ) {
+                if (this.item.hasOwnProperty(itemI)){
+                    const item = this.item[itemI];
+                    subT += (item["precio"] * item["cantidad"]);
+                }
+            }
+            return subT;
+        },
+        total: function () {
+            return this.subTotal - this.descuento;
+        },
+        noEstaVacio: function () {
+            for (const i in this.item) {
+                return true;
+            }
+            return false;
+        },
+    },
+    methods: {
+        restarCantidad: function (elem) {
+            const cantidad = parseInt(elem.cantidad);
+            if (cantidad > 0)
+                elem.cantidad = cantidad -1;
+        },
+        aumentarCantidad: function (elem) {
+            const cantidad = parseInt(elem.cantidad);
+            if (cantidad >= 0)
+                elem.cantidad = cantidad+1;
+        }
+    }
+});
+
+/* Metodo con Antiguo
+const crearCarrito = () => {
+    carrito = new Vue({
+        el: "#carrito",
+        data: {
+            item: carritoUsuario,
+            descuento: 0
+        },
+        computed: {
+            cantidadItems: function () {
+                let items = 0;
+                for (const i in this.item)
+                    items++;
+                return items;
+            },
+            subTotal: function () {
+                let subT = 0;
+                for (const itemI in this.item ) {
+                    if (this.item.hasOwnProperty(itemI)){
+                        const item = this.item[itemI];
+                        subT += (item["precio"] * item["cantidad"]);
+                    }
+                }
+                return subT;
+            },
+            total: function () {
+                return this.subTotal - this.descuento;
+            },
+            noEstaVacio: function () {
+                for (const i in this.item) {
+                    return true;
+                }
+                return false;
+            },
+        },
+        methods: {
+            restarCantidad: function (elem) {
+                const cantidad = parseInt(elem.cantidad);
+                if (cantidad > 0)
+                    elem.cantidad = cantidad -1;
+            },
+            aumentarCantidad: function (elem) {
+                const cantidad = parseInt(elem.cantidad);
+                if (cantidad >= 0)
+                    elem.cantidad = cantidad+1;
+            }
+        }
+    });
+};
+*/
+
+
diff --git a/js/topbar.js b/js/topbar.js
new file mode 100644
index 0000000..a6b170b
--- /dev/null
+++ b/js/topbar.js
@@ -0,0 +1,46 @@
+const topBar = document.createElement("div");
+topBar.style.position = "fixed";
+topBar.style.minHeight = "3px";
+topBar.style.backgroundColor = "red";
+topBar.style.zIndex = "1";
+
+const transitionD = 500;
+topBar.style.transition = `min-width ${transitionD}ms, opacity 250ms`;
+topBar.style.minWidth = "0";
+
+let widthDestino = 0;
+
+document.body.appendChild(topBar);
+
+let promesaActual;
+
+const cambiarProgreso = progreso => {
+    widthDestino = progreso;
+    promesaActual = new Promise((resolve, reject) => {
+        topBar.style.minWidth = `${progreso}%`;
+        setTimeout(() => resolve(),transitionD);
+    });
+    return promesaActual;
+};
+
+const cancelarTransicion = () => {
+    const transiciones = topBar.style.transition;
+    topBar.style.transition = "";
+    topBar.style.minWidth = `${widthDestino}%`;
+    topBar.style.transition = transiciones;
+};
+
+const ocultarTopBar = () => {
+    topBar.style.opacity = "0";
+    setTimeout(() => {
+        topBar.style.minWidth = "0%";
+    },250);
+};
+
+const reiniciarTopBar = () => {
+    const transiciones = topBar.style.transition;
+    topBar.style.transition = "";
+    topBar.style.minWidth = `0`;
+    topBar.style.opacity = "1";
+    topBar.style.transition = transiciones;
+};
diff --git a/registro.php b/registro.php
new file mode 100644
index 0000000..e7b88f8
--- /dev/null
+++ b/registro.php
@@ -0,0 +1,69 @@
+<div class="contenedor inicio_registro">
+    <div class="center">
+        Registrate para tener lo mejor de la cocina francesa en la comodida de tu casa.<br />
+    </div>
+    <br />
+    <br />
+    <div class="row">
+        <div class="col-7 center">
+
+            <br />
+            <button type="button" class="google-button" style="width: 213px">
+                <span class="google-button__icon">
+                    <svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
+                    </svg>
+                </span>
+                <span class="google-button__text">Regístrate con Google</span>
+            </button>
+            <br />
+            <br />
+            <button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
+             border-radius: 3px">
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
+                     id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
+                     style="max-height: 18px" xml:space="preserve">
+                    <g>
+                    <path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803   c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654   c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246   c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
+                </g>
+                </svg>
+                <span class="google-button__text" style="color: white; padding: 0 13px">Regístrate con Facebook</span>
+            </button>
+            <br />
+            <br />
+            <br />
+            O crea tu cuenta con tu correo electrónico:
+            <br />
+            <br />
+            <br />
+            <form method="post" onsubmit="return false">
+                Nombre:<br />
+                <input placeholder="Tu nombre" name="userName"><br />
+                <br />
+                Correo Electrónico:<br />
+                <input placeholder="Tu correo Electrónico" name="userEmail"><br />
+                <br />
+                Contraseña<br />
+                <input type="password" placeholder="Contraseña" name="userPass"><br />
+                <br />
+                <input class="botonEnviarForm" type="submit" value="¡Crear mi cuenta!">
+            </form>
+            <br />
+            <br />
+            ¿Ya tienes una cuenta?<br />
+            <a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
+                Inicia Sesion
+            </a>
+        </div>
+        <div class="col-5 center">
+            <br>
+            <br>
+            <img class="image" alt="Torre Eiffel" src="https://kids.nationalgeographic.com/content/dam/kids/photos/Countries/A-G/france-eiffel-tower.ngsversion.1396531559251.adapt.1900.1.jpg">
+            <br>
+            <br>
+            <img class="image" src="https://www.slh.com/globalassets/country-pages/hero-images/france3.jpg" alt="Vista de francia">
+        </div>
+    </div>
+    <br />
+    <br />
+</div>
\ No newline at end of file
diff --git a/staff/index.php b/staff/index.php
new file mode 100644
index 0000000..272997e
--- /dev/null
+++ b/staff/index.php
@@ -0,0 +1,13 @@
+<br />
+<br />
+<div class="center">
+    Personal<br />
+    <br />
+    <br />
+    <a href="./#usuarios/">Volver a la carta</a>
+    <br />
+    <br />
+
+</div>
+<br />
+<br />
\ No newline at end of file
diff --git a/usuarios/index.php b/usuarios/index.php
new file mode 100644
index 0000000..f24a739
--- /dev/null
+++ b/usuarios/index.php
@@ -0,0 +1,13 @@
+<br />
+<br />
+<div class="center">
+    Pedidos<br />
+    <br />
+    <a href="./#usuarios/mi-cuenta">Ver mi cuenta</a><br />
+    <br />
+    <br />
+    <div id="productos">
+    </div>
+</div>
+<br />
+<br />
\ No newline at end of file
diff --git a/usuarios/mi-cuenta.php b/usuarios/mi-cuenta.php
new file mode 100644
index 0000000..3e99a1e
--- /dev/null
+++ b/usuarios/mi-cuenta.php
@@ -0,0 +1,53 @@
+<br/>
+<br/>
+<div class="center" style="font-size: large">
+    Mi cuenta<br/>
+    <br/>
+    <a href="./#usuarios/">Seguir comprando</a>
+    <br/>
+    <br/>
+    <div class="row">
+        <div class="col-6">
+            Mis datos:<br/>
+            <br/>
+            <div style="text-align: left">
+                Nombre: {{ userName }}<br/>
+                Correo electrónico: {{ userEmail }}<br/>
+                Métodos de pago: {{ userPaymentMethods }}<br/>
+            </div>
+        </div>
+        <div class="col-6">
+            Historial de compras:<br/>
+            <br/>
+            <div class="row">
+                <div class="col-3 unseen">.</div>
+                <div class="col-6">
+                    <img class="image" src="https://www.expatica.com/media/upload/714571.jpg">
+                    <div>Soupe à l'oignon</div>
+                    <br>
+                    <div>Sopa tradicional hecha con cebolla y carne.</div>
+                    <div class="center">20 S/.</div>
+                    <div>Fecha de compra: 17/09/18</div>
+                    <br>
+                </div>
+                <div class="col-3 unseen">.</div>
+            </div>
+            <br />
+            <div class="row">
+                <div class="col-3 unseen">.</div>
+                <div class="col-6">
+                    <img class="image" src="https://www.expatica.com/media/upload/714573.jpg">
+                    <div>Cassoulet</div>
+                    <br>
+                    <div>Plato de habas con carne y especies.</div>
+                    <div class="center">5 S/.</div>
+                    <div>Fecha de compra: 15/09/18</div>
+                    <br>
+                </div>
+                <div class="col-3 unseen">.</div>
+            </div>
+        </div>
+    </div>
+</div>
+<br/>
+<br/>
\ No newline at end of file
diff --git a/usuarios/pagos.php b/usuarios/pagos.php
new file mode 100644
index 0000000..bae17bd
--- /dev/null
+++ b/usuarios/pagos.php
@@ -0,0 +1,84 @@
+<br/>
+<br/>
+<div class="center">
+    <div id="carrito--tituloprincipal">
+        Carrito de compras
+    </div>
+    <br/>
+    <a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
+    <br/>
+    <br/>
+    <div id="carrito" class="row carrito">
+
+        <div id="carrito--elementos" class="col-8">
+            <div id="carrito--elementos--contenido" class="caja">
+                <template v-if="noEstaVacio">
+                    <template v-for="producto in item">
+                        <div class="carritoElem">
+                            <img class="carritoElem--img" v-bind:src="producto.imgUrl">
+                            <div class="plato--Titulo">{{ producto.nombre }}</div>
+                            <br>
+                            <div class="plato--Precio">{{ producto.precio }}</div>
+                            <div class="plato--Cantidad">Cantidad:
+                                <i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
+                                <span>{{ producto.cantidad }}</span>
+                                <i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
+                            </div>
+                            <br>
+                            <div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
+                            <hr>
+                        </div>
+                    </template>
+                </template>
+                <template v-else>
+                    No hay nada en tu carrito de compras :c
+                </template>
+            </div>
+        </div>
+
+        <div id="carrito--precio" class="col-4">
+
+            <div id="carrito--precio--contenido" class="caja">
+                <template v-if="noEstaVacio">
+                    <div id="pagos">
+                        <div style="display: inline-block;">
+                            {{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
+                        </div>
+                        <div style="display: inline-block; float: right; clear: both">
+                            {{ subTotal }} S/.
+                        </div>
+                    </div>
+                    <div>
+                        <div style="display: inline-block;">
+                            Descuentos:
+                        </div>
+                        <div style="display: inline-block; float: right; clear: both">
+                            {{ descuento }} S/.
+                        </div>
+                    </div>
+                    <br>
+                    <br>
+                    <div>
+                        <div class="carrito--precio--contenido--titulo" style="display: inline-block;">
+                            Total:
+                        </div>
+                        <div class="carrito--precio--contenido--titulo"
+                             style="display: inline-block; float: right; clear: both">
+                            {{ total }} S/.
+                        </div>
+                    </div>
+                    <br>
+                    <br>
+                    <a class="carrito--precio--contenido--botonPagar">
+                        Completar Transaccion
+                    </a>
+                </template>
+                <template v-else>
+                    No hay nada en tu carrito de compras :c
+                </template>
+            </div>
+        </div>
+    </div>
+</div>
+<br/>
+<br/>
\ No newline at end of file
diff --git a/usuarios/platos.json b/usuarios/platos.json
new file mode 100644
index 0000000..3385cb9
--- /dev/null
+++ b/usuarios/platos.json
@@ -0,0 +1,50 @@
+[
+  {
+    "nombre": "Soupe à l'oignon",
+    "descripcion": "Sopa tradicional hecha con cebolla y carne.",
+    "imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
+    "precio": 20
+  },
+  {
+    "nombre": "Coq au vin",
+    "descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
+    "imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
+    "precio": 50
+  },
+  {
+    "nombre": "Beef bourguignon",
+    "descripcion": "Filete cocinado en vino, sasonado con especias",
+    "imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
+    "precio": 30
+  },
+  {
+    "nombre": "Cassoulet",
+    "descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
+    "precio": 22
+  },
+  {
+    "nombre": "Fondue de queso",
+    "descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
+    "precio": 5
+  },
+  {
+    "nombre": "Ratatouille",
+    "descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
+    "precio": 35
+  },
+  {
+    "nombre": "Magret de canard",
+    "descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
+    "precio": 17
+  },
+  {
+    "nombre": "Merluza al beurre blanc",
+    "descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
+    "imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
+    "precio": 22
+  }
+]
\ No newline at end of file