web-dev-open · Bharathkompally · Jun 28, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,32 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = 3000;
+
+// Serve static files from the public directory
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Route for the home page
+app.get('/', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views', 'index.html'));
+});
+
+// Route for the about page
+app.get('/about', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views', 'about.html'));
+});
+
+// Route for the works page
+app.get('/works', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views', 'works.html'));
+});
+
+// Route for the gallery page
+app.get('/gallery', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views', 'gallery.html'));
+});
+
+app.listen(port, () => {
+    console.log(`Server is running at http://localhost:${port}`);
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "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": {
+    "express": "^4.19.2"
+  }
+}
diff --git a/public/images/ed1.jpg b/public/images/ed1.jpg
diff --git a/public/images/ed2.jpg b/public/images/ed2.jpg
diff --git a/public/images/ed3.jpg b/public/images/ed3.jpg
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -0,0 +1,89 @@
+/* Base Styles */
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f4f4f4;
+    color: #333;
+}
+
+h1, h2 {
+    color: #2c3e50;
+}
+
+p {
+    line-height: 1.6;
+}
+
+/* Navigation */
+nav {
+    background-color: #34495e;
+    padding: 10px 0;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 20px;
+}
+
+nav ul li a {
+    color: #ecf0f1;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+nav ul li a:hover {
+    text-decoration: underline;
+}
+
+/* Container */
+.container {
+    width: 80%;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+/* Images */
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 10px 0;
+}
+
+.gallery img {
+    width: 30%;
+    margin-right: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.gallery img:last-child {
+    margin-right: 0;
+}
+
+/* Footer */
+footer {
+    text-align: center;
+    padding: 10px 0;
+    background-color: #34495e;
+    color: #ecf0f1;
+    position: fixed;
+    width: 100%;
+    bottom: 0;
+}
+
+footer p {
+    margin: 0;
+}
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <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">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>About Ed Sheeran</h1>
+        <p>Ed Sheeran is a globally renowned singer-songwriter known for his soulful voice and heartfelt lyrics. Born on February 17, 1991, in Halifax, England, Ed began writing songs at a young age. His breakthrough came with the release of his debut album "+" in 2011, which included hits like "The A Team" and "Lego House". Since then, Ed has released multiple chart-topping albums, including "x", "÷", and "No.6 Collaborations Project". He has won numerous awards and is known for his live performances, often using a loop pedal to create layered sounds. Ed Sheeran continues to be one of the most influential artists in contemporary music.</p>
+    </div>
+    <footer>
+        <p>&copy; 2024 Ed Sheeran Fan Site</p>
+    </footer>
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <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">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>Photo Gallery</h1>
+        <p>Here are some photos of Ed Sheeran:</p>
+        <div class="gallery">
+            <img src="/images/ed1.jpg" alt="Ed Sheeran performing live">
+            <img src="/images/ed2.jpg" alt="Ed Sheeran with his guitar">
+            <img src="/images/ed3.jpg" alt="Ed Sheeran at an award ceremony">
+            <!-- Add more images as needed -->
+        </div>
+    </div>
+    <footer>
+        <p>&copy; 2024 Ed Sheeran Fan Site</p>
+    </footer>
+</body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Home</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <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">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>Welcome to Ed Sheeran's Website</h1>
+        <p>Welcome to the official fan site of Ed Sheeran!</p>
+    </div>
+    <footer>
+        <p>&copy; 2024 Ed Sheeran Fan Site</p>
+    </footer>
+</body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Works</title>
+    <link rel="stylesheet" href="/stylesheets/style.css">
+</head>
+<body>
+    <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">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="container">
+        <h1>Works of Ed Sheeran</h1>
+        <p>Ed Sheeran has released several critically acclaimed albums and singles. Here are some highlights:</p>
+        <ul>
+            <li><strong>Albums:</strong></li>
+            <ul>
+                <li>+</li>
+                <li>x</li>
+                <li>÷</li>
+                <li>No.6 Collaborations Project</li>
+                <li>=</li>
+            </ul>
+            <li><strong>Popular Singles:</strong></li>
+            <ul>
+                <li>"The A Team"</li>
+                <li>"Lego House"</li>
+                <li>"Sing"</li>
+                <li>"Thinking Out Loud"</li>
+                <li>"Shape of You"</li>
+                <li>"Perfect"</li>
+                <li>"I Don't Care" (with Justin Bieber)</li>
+            </ul>
+        </ul>
+    </div>
+    <footer>
+        <p>&copy; 2024 Ed Sheeran Fan Site</p>
+    </footer>
+</body>
+</html>