diff --git a/app.js b/app.js index e69de29bb..a855293d7 100644 --- a/app.js +++ b/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"); + }); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 000000000..003a3fbde --- /dev/null +++ b/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" + } +} diff --git a/public/css/index.css b/public/css/index.css new file mode 100644 index 000000000..ff9be294a --- /dev/null +++ b/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; + } + \ No newline at end of file diff --git a/public/images/fondo.jpg b/public/images/fondo.jpg new file mode 100644 index 000000000..653109789 Binary files /dev/null and b/public/images/fondo.jpg differ diff --git a/views/acercade.hbs b/views/acercade.hbs new file mode 100644 index 000000000..d286bad8e --- /dev/null +++ b/views/acercade.hbs @@ -0,0 +1,12 @@ + + + + +

¿Qué son los Pokémon?

+

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:

\ No newline at end of file diff --git a/views/fotos.hbs b/views/fotos.hbs new file mode 100644 index 000000000..abc760f2d --- /dev/null +++ b/views/fotos.hbs @@ -0,0 +1,22 @@ +

POKEMONS

+
+

Players

+
+ {{#each pokemons}} +
+
+ {{this.name}} +
+
{{this.name}}
+ +
+
+
+ + {{/each}} +
+
\ No newline at end of file diff --git a/views/index.hbs b/views/index.hbs new file mode 100644 index 000000000..215b1c124 --- /dev/null +++ b/views/index.hbs @@ -0,0 +1,5 @@ + +
+ fondo-pokemon +

Bienvenido entrenador

+
\ No newline at end of file diff --git a/views/layout.hbs b/views/layout.hbs new file mode 100644 index 000000000..f743954da --- /dev/null +++ b/views/layout.hbs @@ -0,0 +1,23 @@ + + + + + + Inicio + + + + + {{> navbar }} + + + {{{body}}} + + + + \ No newline at end of file diff --git a/views/partials/enlaces.hbs b/views/partials/enlaces.hbs new file mode 100644 index 000000000..f7f9bd288 --- /dev/null +++ b/views/partials/enlaces.hbs @@ -0,0 +1,3 @@ +acercade +trabajos +fotos \ No newline at end of file diff --git a/views/partials/navbar.hbs b/views/partials/navbar.hbs new file mode 100644 index 000000000..602b6dcad --- /dev/null +++ b/views/partials/navbar.hbs @@ -0,0 +1,25 @@ + diff --git a/views/trabajos.hbs b/views/trabajos.hbs new file mode 100644 index 000000000..59fd859a2 --- /dev/null +++ b/views/trabajos.hbs @@ -0,0 +1,28 @@ + + +
+

pokemon GO

+

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.

+ +
+ + +
+

Pokemon escudo

+

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.

+ +
+ + +
+

pokemon espada

+

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.

+ +
+ + +
+

pokemon tgc pocket

+

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.

+ +
\ No newline at end of file