done

app.js

@@ -0,0 +1,31 @@
+const express = require('express');
+const app = express();
+const port = 3000;
+
+//configure the statis folder
+app.use(express.static(__dirname + '/public'));
+
+//add port
+app.listen(port, () => {
+    console.log(`Server is running at http://localhost:${port}`)
+});
+
+//configure route for home page
+app.get('/', (request, response) => {
+    response.sendFile(__dirname + '/public/views/home.html');
+});
+
+//configure route for about page
+app.get('/about', (request, response) => {
+    response.sendFile(__dirname + '/public/views/about.html');
+});
+
+//consfigure route for works page
+app.get('/works', (request, response) => {
+    response.sendFile(__dirname + '/public/views/works.html');
+});
+
+//consfigure route for works page
+app.get('/photos', (request, response) => {
+    response.sendFile(__dirname + '/public/views/photos.html');
+});

package.json

@@ -0,0 +1,16 @@
+{
+  "name": "lab-express-basic",
+  "version": "1.0.0",
+  "description": "<img src=\"https://imgur.com/XOS1Vdh.png\"  width=\"150px\" height=\"150px\">",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "create-react-app": "^5.0.1",
+    "express": "^4.18.2"
+  }
+}

public/stylesheets/about.css

@@ -0,0 +1,79 @@
+body {
+    margin: 0px;
+
+    height: 100%;
+}
+
+.container {
+    margin: 0px;
+}
+
+.heading-container {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: flex-start;
+
+    width: 100%;
+    height: 800px;
+
+    margin-top: 0px;
+
+    background-image: url(../images/TS_Eras_Tour_pink_gown_full.webp);
+    background-size: cover;
+}
+
+h2{
+    margin: 30px;
+    margin-bottom: 0px;
+    padding: 10px;
+    color: white;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: 80px;
+}
+
+.links {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+
+    margin-top: 10px;
+    margin-left: 30px;
+
+    padding-bottom: 120px;
+}
+
+.link {
+    margin: 10px;
+
+    color: white;
+    font-size: 20px;
+}
+
+a:hover {
+    color: rgb(31, 7, 82);
+    font-weight: bold;
+}
+
+.content-container {
+    margin: 10px;
+    margin-top: 0px;
+    padding: 10px;
+    padding-top: 0px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+h3 {
+    font-size: 30px;
+    color: crimson;
+    margin: 10px 0px;
+}
+
+p {
+    font-size: 15px;
+}
+
+footer {
+    margin: 10px;
+}

public/stylesheets/home.css

@@ -0,0 +1,56 @@
+body {
+    display: flex;
+    flex-flow: row nowrap;
+
+    /* background-image: url("../images/TS_Eras_Tour_closeup.webp"); */
+}
+
+#background-image {
+    width: 800px;
+    height: 600px;
+
+    margin: 20px;
+    margin-bottom: 0px;
+
+    opacity: 1.0;
+}
+
+.container {
+    display: flex;
+    flex-flow: column nowrap;
+    justify-content: center;
+    align-items: center;
+}
+
+h1{
+    font-size: 80px;
+    margin: 0px;
+    padding: 10px;
+}
+
+.ts-description {
+    font-size: 40px;
+    margin: 0px;
+}
+
+.links {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-evenly;
+    align-items: center;
+
+    margin-top: 50px;
+}
+
+.link {
+    margin: 10px;
+
+    color: red;
+    font-size: 20px;
+}
+
+a:hover {
+    color: black;
+    font-weight: bold;
+}
+