ironhack-labs · VINIRR99 · Mar 4, 2022 · Mar 4, 2022 · Mar 4, 2022 · Mar 4, 2022
diff --git a/app.js b/app.js
@@ -0,0 +1,10 @@
+const express = require('express');
+const app = express();
+app.use(express.static('public'));
+
+app.get("/", (request, response) => response.sendFile(__dirname + '/views/home.html'));
+app.get("/about", (request, response) => response.sendFile(__dirname + '/views/about.html'));
+app.get("/works", (request, response) => response.sendFile(__dirname + '/views/works.html'));
+app.get("/gallery", (request, response) => response.sendFile(__dirname + '/views/photo-gallery.html'));
+
+app.listen(3000, () => console.log('My first app listening on port 3000! '));
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/VINIRR99/lab-express-basic-site.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/VINIRR99/lab-express-basic-site/issues"
+  },
+  "homepage": "https://github.com/VINIRR99/lab-express-basic-site#readme",
+  "dependencies": {
+    "express": "^4.17.3"
+  }
+}
diff --git a/public/images/image1.webp b/public/images/image1.webp
diff --git a/public/scripts/navbar.js b/public/scripts/navbar.js
@@ -0,0 +1,18 @@
+const navbar = document.createElement("nav");
+navbar.innerHTML = `
+    <nav>
+        <ul>
+            <li><a href="/">Home</a></li>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/gallery">Gallery</a></li>
+        </ul>
+    </nav>
+`;
+
+const navSpace = document.createElement("div");
+navSpace.setAttribute("style", "height: 26px;");
+
+const body =  document.body;
+body.prepend(navSpace);
+body.prepend(navbar);
diff --git a/public/stylesheets/about.css b/public/stylesheets/about.css
diff --git a/public/stylesheets/home.css b/public/stylesheets/home.css
@@ -0,0 +1,20 @@
+section {
+    height: 589px;
+    background-image: url("/images/image1.webp");
+    background-repeat: no-repeat;
+    background-size: 100% 589px;
+    display: flex;
+    justify-content: center;
+}
+
+div {
+    text-align: center;
+}
+
+h1 {
+    color: red;
+}
+
+h3 {
+    color: blue
+}
diff --git a/public/stylesheets/navbar.css b/public/stylesheets/navbar.css
@@ -0,0 +1,31 @@
+body {
+    margin: 25px 0 0;
+}
+
+nav {
+    width: 100%;
+    background-color: #c4c4c4;
+    border-bottom: 1px solid gray;
+    display: flex;
+    align-items: center;
+    position: fixed;
+}
+
+nav ul {
+    width: 100%;
+    display: flex;
+    justify-content: space-around;
+}
+
+nav li {
+    display: inline;
+}
+
+nav a {
+    text-decoration: none;
+    color: black;
+}
+
+nav a:hover {
+    color: red;
+}
diff --git a/public/stylesheets/photo-gallery.css b/public/stylesheets/photo-gallery.css
diff --git a/public/stylesheets/works.css b/public/stylesheets/works.css
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Zé Ramalho</title>
+        <link rel="stylesheet" href="/stylesheets/navbar.css" />
+        <link rel="stylesheet" href="/stylesheets/about.css" />
+    </head>
+    <body>
+        <div>About</div>
+        <script src="/scripts/navbar.js"></script>
+    </body>
+</html>
diff --git a/views/home.html b/views/home.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Zé Ramalho</title>
+        <link rel="stylesheet" href="/stylesheets/navbar.css" />
+        <link rel="stylesheet" href="/stylesheets/home.css" />
+    </head>
+    <body>
+        <section>
+            <div>
+                <h1>Welcome to the Zé Ramalho fan page</h1>
+                <h3>Here you can discover more information about one of the best brazilian musicians ever!</h3>
+            </div>
+        </section>
+        <script src="/scripts/navbar.js"></script>
+    </body>
+</html>
diff --git a/views/photo-gallery.html b/views/photo-gallery.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Zé Ramalho</title>
+        <link rel="stylesheet" href="/stylesheets/navbar.css" />
+        <link rel="stylesheet" href="/stylesheets/photo-gallery.css" />
+    </head>
+    <body>
+        <div>Gallery</div>
+        <script src="/scripts/navbar.js"></script>
+    </body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Zé Ramalho</title>
+        <link rel="stylesheet" href="/stylesheets/navbar.css" />
+        <link rel="stylesheet" href="/stylesheets/works.css" />
+    </head>
+    <body>
+        <div>Works</div>
+        <script src="/scripts/navbar.js"></script>
+    </body>
+</html>