diff --git a/404.md b/404.md
new file mode 100644
index 0000000..a516a9c
--- /dev/null
+++ b/404.md
@@ -0,0 +1 @@
+##**hola**
diff --git a/css/supereuro.css b/css/supereuro.css
new file mode 100644
index 0000000..c145b7a
--- /dev/null
+++ b/css/supereuro.css
@@ -0,0 +1,143 @@
+body{
+  color: red;
+}
+:root {
+  --colorNavbar: #5b9bd5;
+  --colorBorde: red;
+}
+
+#modalLogin .fa-money-bill-alt {
+  height: 43px;
+  line-height: 0.7;
+}
+
+.navegacion {
+  background-color: var(--colorNavbar);
+  font-size: 1.5rem;
+}
+
+#logo * {
+  color: white;
+  text-decoration: none;
+}
+
+.supereuro,
+.destacado {
+  font-weight: bold;
+}
+
+#logo .fa-money-bill-alt,
+#modalLogin .fa-money-bill-alt {
+  color: green;
+  background-color: rgb(200, 248, 160);
+}
+
+.navbar .fa-shopping-cart {
+  color: rgb(73, 56, 7);
+}
+
+body {
+  /* Para ver comportamiento de ancho de cabecera*/
+  min-width: 580px;
+}
+
+.cabecera {
+  /* afecta aqui para no romper la primera linea 
+    margin: 3rem calc(-5rem + 10vw);
+    width: 520px;*/
+  width: 520px;
+  margin: 3rem auto;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+.destacado {
+  font-size: 1.2em;
+  text-decoration: underline;
+}
+
+.reglaMain {
+  border-color: var(--colorNavbar);
+  width: 90%;
+}
+
+.familiaProducto {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+}
+
+.miniaturaProducto {
+  background-color: lightgray;
+  padding: 1.5rem;
+}
+
+/* Descomentar para que todas las miniaturas tengan la misma altura */
+.miniaturaProducto {
+  height: 100%;
+}
+.miniaturaProducto img {
+  height: 12rem;
+}
+
+.card-body p {
+  padding-left: 1rem;
+  margin-top: 1rem;
+  font-size: 1.4rem;
+}
+
+.miniaturaProducto .card-text {
+  font-style: italic;
+}
+
+.precio {
+  font-size: 1.8rem !important;
+  font-weight: bold;
+}
+
+#modalLogin .modal-header {
+  background-color: #70ad47;
+}
+
+.modal-title {
+  font-size: 2rem;
+}
+
+.modal-footer button {
+  font-size: 1.4rem;
+  margin: 0 2rem !important;
+}
+
+.form-control {
+  border-color: var(--colorBorde);
+  border-width: 3px;
+}
+
+/* Usadas en pagina de producto */
+.productoMain {
+  margin-top: 3rem;
+}
+
+.descripcionMain {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.descripcionMain .row {
+  margin-bottom: 2rem;
+}
+
+.nombreProducto {
+  font-size: 3rem;
+}
+
+.cantidad label {
+  font-size: 1rem;
+  font-weight: 500;
+}
+
+#cantidad {
+  width: 5rem;
+  font-size: 1.4rem;
+}
+
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a785481
--- /dev/null
+++ b/index.html
@@ -0,0 +1,201 @@
+<!doctype html>
+<html lang="es">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="Ejercicio HTML con Bootstrap">
+    <meta name="author" content="Proto de HTML and Bootstrap contributors">
+    <title>Super Euro - Jamón</title>
+
+    <!-- Font Awesome-->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css"
+        integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
+    <!-- Bootstrap core CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css"
+        integrity="sha384-PDle/QlgIONtM1aqA2Qemk5gPOE7wFq8+Em+G/hmo5Iq0CCmYZLv3fVRDJ4MMwEA" crossorigin="anonymous">
+
+    <!-- Custom styles for this template -->
+    <link href="css/supereuro.css" rel="stylesheet">
+    
+
+</head>
+
+<body>
+  <h1>HOLA</h1>
+    <header>
+        <nav class="navbar navbar-expand-md navbar-dark navegacion">
+            <span id="logo">
+                <a href="supereuro.html">
+                    <span class="supereuro pr-1 d-none d-md-inline">Super&lt;Euro&gt;</span>
+                    <i class="far fa-money-bill-alt fa-lg"></i>
+                </a>
+            </span>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSuperEuro"
+                aria-controls="navbarSuperEuro" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarSuperEuro">
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="#">
+                            <i class="fas fa-shopping-cart fa-lg"></i>
+                            <span class="sr-only">(current)</span>
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="#" data-toggle="modal" data-target="#modalLogin">Log in</a>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    </header>
+
+    <main role="main">
+        <div class="container">
+            <div class="row productoMain">
+                <div class="col-4">
+                    <div>
+                        <img class="img-fluid" src="img/jamon.jpg" alt="Jamón" />
+                    </div>
+                </div>
+                <div class="col-8 descripcionMain">
+                    <div class="row">
+                        <div class="col-12 nombreProducto">Paletilla</div>
+                    </div>
+                    <div class="row descripcion">
+                        <div class="col-auto">Descripción:</div>
+                        <div class="col">Una fabulosa paletilla de jamón…
+                            <br /> … que sigue vendiéndotelo …
+                            <br /> … en varias líneas.
+                        </div>
+                    </div>
+                    <div class="form-group row cantidad">
+                        <label for="cantidad" class="col-auto col-form-label">Cantidad</label>
+                        <div class="col-auto">
+                            <input type="number" class="form-control" id="cantidad" value="1">
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-12">Precio:
+                            <span class="precio">300€</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="py-5">
+            <div class="container">
+                <hr class="reglaMain">
+                </hr>
+                <div class="familiaProducto">Otros compraron:</div>
+                <div class="row justify-content-center">
+                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4 order-md-first">
+                        <div class="card shadow-sm miniaturaProducto bordeMiniatura">
+                            <a href="#">
+                                <div>
+                                    <img class="img-fluid" src="img/huevos.jpg" alt="Huevos" />
+                                </div>
+                            </a>
+                            <div class="card-body p-0">
+                                <p class="precio">5€</p>
+                                <p class="card-text">docena</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4 order-first">
+                        <div class="card shadow-sm miniaturaProducto bordeMiniatura">
+                            <a href="#">
+                                <div>
+                                    <img class="img-fluid" src="img/jamon.jpg" alt="Jamón" />
+                                </div>
+                            </a>
+                            <div class="card-body p-0">
+                                <p class="card-text">
+                                    <span class="precio">300€</span>
+                                    <br />
+                                    paletilla
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-lg-4 col-md-6 col-sm-12 mb-4">
+                        <div class="card miniaturaProducto">
+                            <a href="#">
+                                <div>
+                                    <img class="img-fluid" src="img/lechuga.jpg" alt="Lechuga" />
+                                </div>
+                            </a>
+                            <div class="card-body p-0">
+                                <p class="precio">1€</p>
+                                <p class="card-text">kilo</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Modal -->
+        <div class="modal fade" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel"
+            aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <div class="modal-title w-100 text-center" id="modalLoginLabel">
+                            <div class="float-left">
+                                <i class="far fa-money-bill-alt fa-2x"></i>
+                            </div>
+                            <div class="d-inline mx-auto text-white">Log in</div>
+                        </div>
+                        <!--<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>-->
+                    </div>
+                    <div class="modal-body">
+                        <form>
+                            <div class="form-group row">
+                                <label for="usuario" class="col-sm-3 col-form-label">Usuario</label>
+                                <div class="col-sm-9">
+                                    <input type="text" class="form-control" id="usuario" placeholder='"Nombre"'>
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label for="inputPassword" class="col-sm-3 col-form-label">Contraseña</label>
+                                <div class="col-sm-9">
+                                    <input type="password" class="form-control" id="inputPassword" placeholder="******">
+                                </div>
+                            </div>
+                            <div class="form-group row">
+                                <label for="recordar" class="col-sm-3 col-form-label">Recordarme</label>
+                                <div class="col-sm-1">
+                                    <input type="checkbox" class="form-control" id="recordar" placeholder='"Nombre"'>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                    <div class="modal-footer justify-content-center">
+                        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Cancelar</button>
+                        <button type="button" class="btn btn-success">Entrar</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="text-muted">
+    </footer>
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+        crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"
+        integrity="sha384-7aThvCh9TypR7fIc2HV4O/nFMVCBwyIUKL8XCtKE+8xgCgl/PQGuFsvShjr74PBp"
+        crossorigin="anonymous"></script>
+</body>
+
+</html>
