web-dev-open · Shashank519915 · Feb 4, 2024 · Feb 4, 2024 · Feb 4, 2024 · Feb 4, 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/public/css/style.css b/public/css/style.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(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjU0NmJhdGNoMy1teW50LTM0LWJhZGdld2F0ZXJjb2xvcl8xLmpwZw.jpg) ;
+    color: #000000; 
+  }
+
+  /* About Page Styles */
+  body.about1 {
+    background: url(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjU0NmJhdGNoMy1teW50LTM0LWJhZGdld2F0ZXJjb2xvcl8xLmpwZw.jpg) ;
+    color: #333; 
+  }
+
+  /* Works Page Styles */
+  body.works1 {
+    background: url(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjU0NmJhdGNoMy1teW50LTM0LWJhZGdld2F0ZXJjb2xvcl8xLmpwZw.jpg) ;
+    color: #333; 
+  }
+
+  /* Gallery Page Styles */
+  body.gallery1 {
+    background: url(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjU0NmJhdGNoMy1teW50LTM0LWJhZGdld2F0ZXJjb2xvcl8xLmpwZw.jpg) ;
+    color: #333; 
+  }
+
+  body.works {
+    background: url(https://images.rawpixel.com/image_800/czNmcy1wcml2YXRlL3Jhd3BpeGVsX2ltYWdlcy93ZWJzaXRlX2NvbnRlbnQvbHIvdjU0NmJhdGNoMy1teW50LTM0LWJhZGdld2F0ZXJjb2xvcl8xLmpwZw.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/views/about.html b/views/about.html
@@ -0,0 +1,27 @@
+<!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 Linkin Park</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 Linkin Park</h1>
+  <p>Linkin Park is an influential rock band that has made a significant impact...</p>
+  <p>Welcome to the dynamic world of Linkin Park, a genre-defying rock band that has shaped the musical landscape since its formation. Established in 1996, Linkin Park gained widespread recognition with their groundbreaking debut album "Hybrid Theory," featuring a unique fusion of rock, rap, and electronic elements.</p>
+
+    <p>Linkin Park's discography spans across diverse sounds, from the raw energy of "Meteora" to the experimental tones of "A Thousand Suns." With iconic singles like "In the End," "Numb," and "Crawling," the band has created a sonic journey that resonates with millions of fans globally.</p>
+
+    <p>Beyond their musical prowess, Linkin Park has been actively involved in charitable endeavors and has addressed important social issues. Join us as we delve into the multifaceted journey of Linkin Park, celebrating their innovation, influence, and commitment to making a positive impact.</p>
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
@@ -0,0 +1,27 @@
+<!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 Linkin Park</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 Linkin Park</h1>
+  <p>Linkin Park is an influential rock band that has made a significant impact...</p>
+  <p>Welcome to the dynamic world of Linkin Park, a genre-defying rock band that has shaped the musical landscape since its formation. Established in 1996, Linkin Park gained widespread recognition with their groundbreaking debut album "Hybrid Theory," featuring a unique fusion of rock, rap, and electronic elements.</p>
+
+    <p>Linkin Park's discography spans across diverse sounds, from the raw energy of "Meteora" to the experimental tones of "A Thousand Suns." With iconic singles like "In the End," "Numb," and "Crawling," the band has created a sonic journey that resonates with millions of fans globally.</p>
+
+    <p>Beyond their musical prowess, Linkin Park has been actively involved in charitable endeavors and has addressed important social issues. Join us as we delve into the multifaceted journey of Linkin Park, celebrating their innovation, influence, and commitment to making a positive impact.</p>
+</body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,27 @@
+<!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>Linkin Park</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 Linkin Park Website</h1>
+    <p>Explore the powerful sound of Linkin Park, a groundbreaking rock band that has left an indelible mark on the music industry. From their debut album "Hybrid Theory" to the experimental "Minutes to Midnight" and beyond, Linkin Park has consistently pushed boundaries and connected with fans worldwide.</p>
+
+    <p>Discover their iconic singles, such as "In the End," "Numb," and "What I've Done," each carrying the band's signature blend of rock, rap, and electronic elements. Linkin Park's music is a journey through emotion and intensity, resonating with listeners across generations.</p>
+
+    <p>Beyond their musical achievements, Linkin Park has engaged in philanthropy and social issues, making a positive impact beyond the stage. Join us as we celebrate the creativity, innovation, and influence of Linkin Park.</p>
+</body>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,40 @@
+<!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 Linkin Park</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 Linkin Park</h1>
+  <div class="container">
+    <h2>Albums</h2>
+    <ul>
+      <li><strong>Hybrid Theory (2000):</strong> Debut album featuring hits like "In the End" and "Crawling."</li>
+      <li><strong>Meteora (2003):</strong> A follow-up album with successful tracks such as "Numb" and "Somewhere I Belong."</li>
+      <li><strong>Minutes to Midnight (2007):</strong> Marked a shift in style with singles like "What I've Done" and "Bleed It Out."</li>
+    </ul>
+
+    <h2>Singles</h2>
+    <ul>
+      <li><strong>In the End (2001):</strong> Iconic song known for its powerful lyrics and memorable chorus.</li>
+      <li><strong>Numb (2003):</strong> Emotional single that became one of Linkin Park's signature songs.</li>
+      <li><strong>What I've Done (2007):</strong> Featured in the film Transformers, addressing themes of redemption.</li>
+    </ul>
+
+    <h2>Achievements</h2>
+    <p>Linkin Park has achieved global success with numerous awards, including Grammy Awards. They are recognized for their blend of rock and electronic elements, and their impact on the alternative music scene.</p>
+  </div>
+</body>
+</html>