web-dev-open · MeetSoni1 · Feb 3, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,28 @@
+const express = require('express');
+const path = require('path');
+
+const app = express();
+const port = 3000;
+
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'index.html'));
+});
+
+app.get('/about', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'about.html'));
+});
+
+app.get('/works', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'works.html'));
+});
+
+app.get('/gallery', (req, res) => {
+    res.sendFile(path.join(__dirname, 'views', 'gallery.html'));
+  });
+
+
+app.listen(port, () => {
+  console.log(`Server is running on http://localhost:${port}`);
+});
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "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"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/helip0269/lab-express-basic.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/helip0269/lab-express-basic/issues"
+  },
+  "homepage": "https://github.com/helip0269/lab-express-basic#readme",
+  "dependencies": {
+    "express": "^4.18.2"
+  }
+}
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -0,0 +1,128 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+  }
+
+  h1 {
+    color: #333;
+  }
+
+  nav {
+    background-color: #333;
+    padding: 10px;
+  }
+
+  nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  nav ul li {
+    margin-right: 20px;
+  }
+
+  nav a {
+    text-decoration: none;
+    color: #fff;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-gap: 20px;
+    margin-top: 20px;
+  }
+
+  .gallery img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+ /* Home Page Styles */
+body.home1 {
+    background: url('/images/back1.jpg') ;
+    color: #000000; 
+  }
+
+  /* About Page Styles */
+  body.about1 {
+    background: url('/images/back1.jpg') ;
+    color: #333; 
+  }
+
+  /* Works Page Styles */
+  body.works1 {
+    background: url('/images/back1.jpg') ;
+    color: #333; 
+  }
+
+  /* Gallery Page Styles */
+  body.gallery1 {
+    background: url('/images/back1.jpg') ;
+    color: #333; 
+  }
+
+  body.works {
+    background: url('/images/works-background.jpg') center/cover no-repeat;
+    color: #333;
+  }
+
+  .container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: rgba(255, 255, 255, 0.8);
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+
+  h1, h2 {
+    color: #333;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+  }
+
+  ul li {
+    margin-bottom: 15px;
+  }
+
+  ul li strong {
+    font-weight: bold;
+  }
+
+  nav {
+    background-color: #333;
+    padding: 10px;
+  }
+
+  nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+
+  nav ul li {
+    margin-right: 20px;
+  }
+
+  nav a {
+    text-decoration: none;
+    color: #fff;
+    font-weight: bold;
+    font-size: 18px;
+  }
+
+
diff --git a/public/images/back1.jpg b/public/images/back1.jpg
diff --git a/public/images/back2.jpg b/public/images/back2.jpg
diff --git a/public/images/back3.jpg b/public/images/back3.jpg
diff --git a/public/images/back4.jpg b/public/images/back4.jpg
diff --git a/public/images/taylorswift1.jpg b/public/images/taylorswift1.jpg
diff --git a/public/images/taylorswift2.jpg b/public/images/taylorswift2.jpg
diff --git a/public/images/taylorswift3.jpg b/public/images/taylorswift3.jpg
diff --git a/public/js/script.js b/public/js/script.js
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/css/styles.css">
+  <title>About Taylor Swift</title>
+</head>
+<body class="about1">
+  <br>
+  <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>
+  <h1>About Taylor Swift</h1>
+  <p>Taylor Swift is a talented singer, songwriter, and actress...</p>
+  <p>Welcome to the enchanting world of Taylor Swift, a multifaceted artist whose musical journey has captivated hearts around the globe. Born on December 13, 1989, Taylor Swift embarked on her musical odyssey with the release of her self-titled debut album in 2006, marking the inception of an extraordinary career.</p>
+
+    <p>Swift's artistry transcends genres, seamlessly transitioning from country to pop, and her discography is a tapestry of emotion, honesty, and relatable storytelling. From chart-topping hits like "Love Story" to the empowering anthem "Shake It Off," each song reflects Swift's ability to connect with audiences on a deeply personal level.</p>
+
+    <p>Beyond her musical achievements, Taylor Swift is a cultural icon, actively engaging with her fans and using her platform to address important social issues. Her journey is not just a chronicle of success but also a testament to resilience, authenticity, and the transformative power of self-expression.</p>
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/css/styles.css">
+  <title>Photo Gallery of Taylor Swift</title>
+</head>
+<body class="gallery1">
+<br>
+
+  <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>
+  <h1>Photo Gallery of Taylor Swift</h1>
+  <div class="gallery">
+    <img src="/images/taylorswift1.jpg" alt="Taylor Swift Photo 1">
+    <img src="/images/taylorswift2.jpg" alt="Taylor Swift Photo 2">
+    <img src="/images/taylorswift3.jpg" alt="Taylor Swift Photo 2">
+
+  </div>
+</body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/css/styles.css">
+
+  <title>Taylor Swift</title>
+</head>
+<body class=" home1">
+    <br>
+  <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>
+
+  <h1>Welcome to the Taylor Swift Website</h1>
+    <p>Explore the enchanting world of Taylor Swift, a globally celebrated singer, songwriter, and actress. With a career that spans genres and generations, Taylor Swift has become a cultural icon known for her heartfelt lyrics, captivating melodies, and unwavering authenticity.</p>
+
+    <p>Discover her chart-topping albums, from the country-infused tunes of "Fearless" to the pop anthems of "1989" and the emotional depth of "Red." Immerse yourself in timeless singles like "Love Story," "Shake It Off," and "Blank Space," each telling a unique story that resonates with fans worldwide.</p>
+
+    <p>Beyond her musical prowess, Taylor Swift actively engages with her audience, using her platform to address social issues and inspire positive change. Join us on this journey to celebrate the artistry, resilience, and impact of Taylor Swift.</p>
+</body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/css/styles.css">
+  <title>Works of Taylor Swift</title>
+</head>
+<body class=" works1">
+<br>
+  <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>
+
+
+  <h1>Works of Taylor Swift</h1>
+  <div class="container">
+    <h2>Albums</h2>
+    <ul>
+      <li><strong>Fearless (2008):</strong> A critically acclaimed album featuring hits like "Love Story" and "You Belong with Me."</li>
+      <li><strong>1989 (2014):</strong> A pop masterpiece, including chart-toppers like "Shake It Off" and "Blank Space."</li>
+      <li><strong>Red (2012):</strong> Known for its emotional depth, with standout tracks like "All Too Well" and "I Knew You Were Trouble."</li>
+    </ul>
+
+    <h2>Singles</h2>
+    <ul>
+      <li><strong>Love Story (2008):</strong> An iconic song blending country and pop elements, inspired by Romeo and Juliet.</li>
+      <li><strong>Shake It Off (2014):</strong> A catchy anthem promoting self-confidence and resilience.</li>
+      <li><strong>Blank Space (2014):</strong> Known for its satirical take on media portrayals of Swift's personal life.</li>
+    </ul>
+
+    <h2>Achievements</h2>
+    <p>Taylor Swift has garnered numerous awards, including multiple Grammy Awards, Billboard Music Awards, and MTV Video Music Awards. She has consistently broken records and is recognized for her songwriting prowess and influence on contemporary music.</p>
+  </div>
+</body>
+</html>