ironhack-labs · RickyJary · Nov 2, 2024 · Nov 2, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,20 @@
+const express = require('express');
+
+const app = express();
+
+app.use(express.static('public'))
+
+app.get('/', (req, res, next) => {
+    res.sendFile(__dirname + '/views/home.html')
+})
+app.get('/works', (req, res, next) => {
+    res.sendFile(__dirname + '/views/works.html')
+})
+app.get('/about', (req, res, next) => {
+    res.sendFile(__dirname + '/views/about.html')
+})
+app.get('/gallery', (req, res, next) => {
+    res.sendFile(__dirname + '/views/gallery.html')
+})
+
+app.listen(3000, () => {})
diff --git a/package.json b/package.json
@@ -0,0 +1,18 @@
+{
+  "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": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "",
+    "dev": "nodemon app.js --ext js,hbs,css"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "nodemon": "^3.1.7"
+  }
+}
diff --git a/public/css/style.css b/public/css/style.css
@@ -0,0 +1,4 @@
+img {
+    width: 50px;
+    height: 50px;
+}
diff --git a/public/img/archivotormentas.jpeg b/public/img/archivotormentas.jpeg
diff --git a/public/img/bs.jpeg b/public/img/bs.jpeg
diff --git a/public/img/elantris.jpg b/public/img/elantris.jpg
diff --git a/public/img/mistborn.jpeg b/public/img/mistborn.jpeg
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sobre Brandon Sanderson</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f0f0f5;
+            margin: 0;
+            padding: 0;
+            color: #333;
+        }
+        .container {
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            color: #004d99;
+            text-align: center;
+        }
+        h2 {
+            color: #0066cc;
+            margin-top: 1em;
+        }
+        p {
+            line-height: 1.6;
+        }
+        .highlight {
+            font-weight: bold;
+            color: #004d99;
+        }
+        ul {
+            list-style-type: square;
+            margin-left: 20px;
+        }
+        /* Navbar */
+        nav {
+            background-color: #004d99;
+            padding: 1em;
+        }
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+        }
+        nav ul li {
+            margin: 0 15px;
+        }
+        nav ul li a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+        nav ul li a:hover {
+            color: #ffdd57;
+        }
+
+    </style>
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/gallery">Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>Sobre Brandon Sanderson</h1>
+        <p><span class="highlight">Brandon Sanderson</span> es un autor estadounidense conocido por sus extensas sagas de fantasía y su habilidad para construir mundos ricos en detalle. Nacido el 19 de diciembre de 1975 en Lincoln, Nebraska, Sanderson ha ganado fama mundial por sus complejos sistemas de magia y sus personajes bien desarrollados.</p>
+
+        <h2>Obras Principales</h2>
+        <p>Sanderson es autor de múltiples series de fantasía y ciencia ficción. Algunas de sus obras más reconocidas incluyen:</p>
+        <ul>
+            <li><span class="highlight">El Archivo de las Tormentas</span>: una saga épica que explora un mundo de tormentas constantes y caballeros mágicos llamados Radiantes. La serie comienza con <em>El Camino de los Reyes</em>.</li>
+            <li><span class="highlight">Mistborn (Nacidos de la Bruma)</span>: una trilogía centrada en un mundo donde los villanos ganaron. Con un sistema de magia basado en metales, los personajes pueden obtener habilidades especiales al ingerir metales específicos.</li>
+            <li><span class="highlight">Elantris</span>: su primera novela publicada, que trata sobre una ciudad de dioses caídos y los misterios detrás de su decaimiento.</li>
+        </ul>
+
+        <h2>Estilo y Temas</h2>
+        <p>Sanderson es conocido por su enfoque en los sistemas de magia, que son consistentes y bien definidos. Sus obras frecuentemente exploran temas de sacrificio, redención y el equilibrio entre el poder y la responsabilidad.</p>
+
+        <h2>Datos Curiosos</h2>
+        <ul>
+            <li>Brandon Sanderson fue elegido para completar la serie de <em>La Rueda del Tiempo</em> de Robert Jordan después de su fallecimiento, lo cual consolidó aún más su reputación.</li>
+            <li>Cada uno de sus libros forma parte del universo compartido llamado <span class="highlight">Cosmere</span>, con historias interconectadas que se desarrollan en diferentes planetas.</li>
+            <li>Es profesor de escritura creativa en la Universidad Brigham Young, donde inspira a nuevas generaciones de escritores.</li>
+        </ul>
+    </div>
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
diff --git a/views/home.html b/views/home.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brandon Sanderson - Landing Page</title>
+    <style>
+        /* Estilos básicos */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f5;
+            color: #333;
+        }
+
+        /* Navbar */
+        nav {
+            background-color: #004d99;
+            padding: 1em;
+        }
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+        }
+        nav ul li {
+            margin: 0 15px;
+        }
+        nav ul li a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+        nav ul li a:hover {
+            color: #ffdd57;
+        }
+
+        /* Secciones */
+        .section {
+            padding: 50px;
+            max-width: 800px;
+            margin: 20px auto;
+            background-color: #fff;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+        .section h2 {
+            color: #004d99;
+            text-align: center;
+            margin-top: 0;
+        }
+        .section p {
+            line-height: 1.6;
+        }
+
+        /* Estilo para la Galería */
+        .gallery {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            justify-content: center;
+        }
+        .gallery img {
+            width: 100%;
+            max-width: 250px;
+            border-radius: 5px;
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
+        }
+    </style>
+</head>
+<body>
+
+
+    <nav>
+        <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/gallery">Gallery</a></li>
+        </ul>
+    </nav>
+  <img src="img/bs.jpeg" alt="">
+</body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Brandon Sanderson - Works</title>
+    <style>
+        /* Estilos básicos */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f5;
+            color: #333;
+        }
+
+        /* Contenedor principal */
+        .container {
+            max-width: 1000px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: #fff;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+
+        /* Títulos */
+        h1 {
+            text-align: center;
+            color: #004d99;
+            margin-top: 0;
+        }
+
+        /* Tarjetas de obras */
+        .works-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            justify-content: center;
+        }
+
+        .work-card {
+            background-color: #e6e6ff;
+            border-radius: 8px;
+            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+            max-width: 250px;
+            text-align: center;
+            overflow: hidden;
+            transition: transform 0.2s;
+        }
+
+        .work-card:hover {
+            transform: scale(1.05);
+        }
+
+        .work-card img {
+            width: 250px;
+            height: 384px;
+            border-bottom: 2px solid #004d99;
+        }
+
+        .work-card h2 {
+            color: #004d99;
+            font-size: 1.2em;
+            margin: 15px 0 5px;
+        }
+
+        .work-card p {
+            padding: 0 10px;
+            font-size: 0.9em;
+            line-height: 1.4;
+        }
+        /* Navbar */
+        nav {
+            background-color: #004d99;
+            padding: 1em;
+        }
+        nav ul {
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            display: flex;
+            justify-content: center;
+        }
+        nav ul li {
+            margin: 0 15px;
+        }
+        nav ul li a {
+            color: #fff;
+            text-decoration: none;
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+        nav ul li a:hover {
+            color: #ffdd57;
+        }
+        img {
+
+        }
+    </style>
+</head>
+<body>
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="works">Works</a></li>
+            <li><a href="gallery">Gallery</a></li>
+        </ul>
+    </nav>
+
+    <div class="container">
+        <h1>Works by Brandon Sanderson</h1>
+        <div class="works-container">
+
+            <!-- Tarjeta 1 -->
+            <div class="work-card">
+                <img src="/img/archivotormentas.jpeg" alt="El Archivo de las Tormentas">
+                <h2>El Archivo de las Tormentas</h2>
+                <p>Una épica serie que sigue la lucha de caballeros Radiantes en un mundo azotado por tormentas constantes. La saga explora temas de heroísmo, poder y sacrificio.</p>
+            </div>
+
+            <!-- Tarjeta 2 -->
+            <div class="work-card">
+                <img src="/img/mistborn.jpeg" alt="Mistborn (Nacidos de la Bruma)">
+                <h2>Mistborn (Nacidos de la Bruma)</h2>
+                <p>Una trilogía donde los "Mistborn" usan metales para obtener habilidades especiales. En un mundo oscuro, la serie explora el poder y la resistencia frente a la opresión.</p>
+            </div>
+
+            <!-- Tarjeta 3 -->
+            <div class="work-card">
+                <img src="/img/elantris.jpg" alt="Elantris">
+                <h2>Elantris</h2>
+                <p>La historia de una ciudad de dioses caídos. <em>Elantris</em> es un mundo de misterio, magia y redención, que fue la primera novela publicada de Sanderson.</p>
+            </div>
+
+
+
+        </div>
+    </div>
+
+</body>
+</html>