completed

app.js

@@ -0,0 +1,46 @@
+const express = require("express");
+const app = express();
+const path = require("path");
+const hbs = require("hbs");
+
+
+app.use(express.static(path.join(__dirname, "public")));
+app.set("views", path.join(__dirname, "views"));
+app.set("view engine", "hbs");
+hbs.registerPartials(__dirname + "/views/partials");
+
+app.get("/", (req, res, next) => {
+  res.render("index");
+});
+app.get("/trabajos", (req, res, next) => {
+    res.render("trabajos");
+  });
+  app.get("/fotos", (req, res, next) => {
+     const pokemons = [{
+        name: "pikachu",
+        image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png"
+     },
+     {
+        name: "charmander",
+        image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/4.png"
+     },
+     {
+        name: "bulbasur",
+        image:  "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/1.png"
+     },
+     {
+        name: "squirtle",
+        image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png"
+     },
+
+    ]
+    res.render("fotos", { pokemons });
+  });
+  app.get("/acercade", (req, res, next) => {
+    res.render("acercade");
+  });
+
+
+app.listen(3000, () => {
+    console.log("Server is running on port 3000");
+  });

package.json

@@ -0,0 +1,20 @@
+{
+  "name": "lab-express-basic-site",
+  "version": "1.0.0",
+  "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)",
+  "main": "app.js",
+  "scripts": {
+    "start": "node app.js",
+    "dev":  "nodemon app.js --ext js,hbs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "hbs": "^4.2.0",
+    "nodemon": "^3.1.7"
+  }
+}

public/css/index.css

@@ -0,0 +1,27 @@
+body {
+    box-sizing: border-box!important;
+    background-color: bisque;
+  }
+
+  #fondo-index{
+    width: 100vw;       
+    height: 100vh;
+
+  }
+  .absolute{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    color: white;                   
+    font-size: 2em;                  
+    text-align: center;              
+    z-index: 1;    
+    background-color: rgba(0, 0, 0, 0.5);   
+    padding: 10px; 
+    border-radius: 10px;
+  }
+  h2, p{
+    margin: 20px;
+  }
+

views/acercade.hbs

@@ -0,0 +1,12 @@
+
+
+
+
+<h2 class="acerca">¿Qué son los Pokémon?</h2>
+<p class="acerca">Los Pokémon son criaturas de todo tipo de formas y tamaños que viven bien en un medio salvaje o junto a los seres humanos. La mayoría de los Pokémon solo hablan para decir sus nombres. En la actualidad, hay más de 700 criaturas que habitan el universo Pokémon.
+
+Los dueños de los Pokémon (denominados “Entrenadores”) los crían y los cuidan. Durante sus aventuras, los Pokémon crecen y adquieren más experiencia, e incluso, en ocasiones, evolucionan para convertirse en Pokémon más fuertes.
+
+Hay más de doce tipos diferentes de Pokémon, como el tipo Fuego, el tipo Psíquico o el tipo Dragón. Cada tipo de Pokémon tiene sus ventajas e inconvenientes a la hora de luchar contra otros Pokémon. Por ejemplo, un Pokémon de tipo Fuego tendrá ventaja sobre un Pokémon de tipo Planta, pero estará en desventaja ante un Pokémon de tipo Agua. Esto hace que la estrategia, el posicionamiento y el uso que hagas de los Pokémon en tu equipo sean de crucial importancia en el desarrollo de los combates.
+
+Estos son algunos ejemplos del aspecto que tienen los diferentes Pokémon:</p>

views/fotos.hbs

@@ -0,0 +1,22 @@
+<h1>POKEMONS</h1>
+<div class="container">
+  <h1>Players</h1>
+  <div class="row">
+      {{#each pokemons}}
+        <div class="col-md-4">
+  <div class="card">
+    <img
+      class="card-img-top"
+      src="{{this.image}}"
+      alt="{{this.name}}"
+    />
+    <div class="card-body">
+      <h5 class="card-title">{{this.name}}</h5>
+
+    </div>
+  </div>
+</div>
+
+      {{/each}}
+  </div>
+</div>

views/index.hbs

@@ -0,0 +1,5 @@
+
+<div id="fondo">
+    <img src="/images/fondo.jpg" alt="fondo-pokemon" id="fondo-index">
+    <h3 class ="absolute">Bienvenido entrenador</h3>
+</div>

views/layout.hbs

@@ -0,0 +1,23 @@
+<!-- views/layout.hbs -->
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Inicio</title>
+    <link rel="stylesheet" href="/css/index.css"/>
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+  </head>
+  <body>
+    {{> navbar }}
+
+
+    {{{body}}}
+
+
+  </body>
+</html>

views/partials/enlaces.hbs

@@ -0,0 +1,3 @@
+<a class="enlaces" href="/acercade">acercade</a>
+<a class="enlaces" href="/trabajos">trabajos</a>
+<a class="enlaces" href="/fotos">fotos</a>

views/partials/navbar.hbs

@@ -0,0 +1,25 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+  <a class="navbar-brand" href="#">IronHack</a>
+  <button
+    class="navbar-toggler"
+    type="button"
+    data-toggle="collapse"
+    data-target="#navbarNavAltMarkup"
+    aria-controls="navbarNavAltMarkup"
+    aria-expanded="false"
+    aria-label="Toggle navigation"
+  >
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
+    <div class="navbar-nav">
+       <a class="nav-item nav-link active" href="/">
+        Inicio
+        <span class="sr-only">(current)</span>
+      </a>
+      <a class="nav-item nav-link" href="/acercade">acerca de</a>
+      <a class="nav-item nav-link" href="/fotos">fotos</a>
+      <a class="nav-item nav-link" href="/trabajos">trabajos</a>
+    </div>
+  </div>
+</nav>

views/trabajos.hbs

@@ -0,0 +1,28 @@
+
+
+<div>
+<h2>pokemon GO</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam provident sequi quo ducimus. Amet repudiandae, quae quibusdam totam accusantium placeat incidunt. Tempore maiores necessitatibus quasi in! Ut eaque sit sequi.</p>
+
+</div>
+
+
+<div>
+<h2>Pokemon escudo</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam provident sequi quo ducimus. Amet repudiandae, quae quibusdam totam accusantium placeat incidunt. Tempore maiores necessitatibus quasi in! Ut eaque sit sequi.</p>
+
+</div>
+
+
+<div>
+<h2>pokemon espada</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam provident sequi quo ducimus. Amet repudiandae, quae quibusdam totam accusantium placeat incidunt. Tempore maiores necessitatibus quasi in! Ut eaque sit sequi.</p>
+
+</div>
+
+
+<div>
+<h2>pokemon tgc pocket</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam provident sequi quo ducimus. Amet repudiandae, quae quibusdam totam accusantium placeat incidunt. Tempore maiores necessitatibus quasi in! Ut eaque sit sequi.</p>
+
+</div>