web-dev-open · Gowtham3173 · Oct 14, 2024 · Oct 14, 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/css/style.css b/css/style.css
@@ -0,0 +1,125 @@
+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/1.jpg);
+    color: #000000; 
+}
+
+/* About Page Styles */
+body.about1 {
+    background: url(images/2.jpg);
+    color: #333; 
+}
+
+/* Works Page Styles */
+body.works1 {
+    background: url(images/3.jpg);
+    color: #333; 
+}
+
+/* Gallery Page Styles */
+body.gallery1 {
+    background: url(images/4.jpg);
+    color: #333; 
+}
+
+body.works {
+    background: url(images/5.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/1.jpg b/public/images/1.jpg
diff --git a/public/images/2.jpg b/public/images/2.jpg
diff --git a/public/images/3.jpg b/public/images/3.jpg
diff --git a/public/images/4.jpg b/public/images/4.jpg
diff --git a/public/images/5.jpg b/public/images/5.jpg
diff --git a/public/images/6.jpg b/public/images/6.jpg
diff --git a/public/images/7.jpg b/public/images/7.jpg
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,33 @@
+<!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/style.css">
+  <title>About Futuristic Art</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 Futuristic Art</h1>
+  <img src="/images/2.jpg"width="300">
+  <p>Welcome to the world of **futuristic art**, a genre where the boundaries of imagination are constantly being pushed. This evolving artistic expression fuses cutting-edge technology, light manipulation, and abstract forms to create experiences that transcend traditional mediums. Artists of this movement challenge conventional norms, offering a glimpse into what the future of human creativity and culture might look like.</p>
+
+  <p>**Futuristic art** often draws inspiration from speculative technologies, science fiction, and the limitless potential of the human mind. Through the use of digital tools, holographic imagery, and immersive installations, artists explore themes such as **humanity’s interaction with artificial intelligence**, the convergence of organic and mechanical life, and the exploration of new dimensions in space and time. The vibrant, surreal colors and ethereal shapes evoke a sense of wonder, transporting viewers into an unfamiliar, yet captivating reality.</p>
+
+  <p>At its core, this art form seeks to redefine our relationship with technology and the world around us. By blending elements of design, architecture, and fashion, **futuristic art** not only reflects the present but speculates on the future. It serves as a visual representation of the rapid advancements in science and technology, while also exploring the emotional and philosophical implications of these changes. In a world that is constantly evolving, futuristic artists envision societies beyond our current understanding, offering bold interpretations of what our future could hold.</p>
+
+  <p>Whether through interactive digital environments, luminous sculptures, or avant-garde fashion pieces, futuristic art opens new possibilities for **creative expression**. It challenges viewers to consider how humanity might adapt to new realities and technologies, and how our sense of identity, culture, and expression will continue to evolve. In many ways, futuristic art is not just about visual aesthetics, but a profound exploration of the existential questions facing modern society.</p>
+
+  <p>**Step into this mesmerizing world** and witness the powerful interplay of light, technology, and imagination, where art defies the rules of the past and envisions a limitless future. From immersive installations that blur the lines between the real and virtual worlds to artistic pieces that redefine fashion and form, futuristic art invites us to imagine the future and our place within it.</p>
+
+</body>
+</html>
diff --git a/views/gallery.html b/views/gallery.html
@@ -0,0 +1,38 @@
+<!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/style.css">
+  <title>About Futuristic Art</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 Futuristic Art</h1>
+  <img src="/images/1.jpg"width="300">
+  <img src="/images/2.jpg"width="300">
+  <img src="/images/3.jpg"width="300">
+  <img src="/images/4.jpg"width="300">
+  <img src="/images/5.jpg"width="300">
+  <img src="/images/6.jpg"width="300">
+  <img src="/images/7.jpg"width="300">
+  <p>Welcome to the world of **futuristic art**, a genre where the boundaries of imagination are constantly being pushed. This evolving artistic expression fuses cutting-edge technology, light manipulation, and abstract forms to create experiences that transcend traditional mediums. Artists of this movement challenge conventional norms, offering a glimpse into what the future of human creativity and culture might look like.</p>
+
+  <p>**Futuristic art** often draws inspiration from speculative technologies, science fiction, and the limitless potential of the human mind. Through the use of digital tools, holographic imagery, and immersive installations, artists explore themes such as **humanity’s interaction with artificial intelligence**, the convergence of organic and mechanical life, and the exploration of new dimensions in space and time. The vibrant, surreal colors and ethereal shapes evoke a sense of wonder, transporting viewers into an unfamiliar, yet captivating reality.</p>
+
+  <p>At its core, this art form seeks to redefine our relationship with technology and the world around us. By blending elements of design, architecture, and fashion, **futuristic art** not only reflects the present but speculates on the future. It serves as a visual representation of the rapid advancements in science and technology, while also exploring the emotional and philosophical implications of these changes. In a world that is constantly evolving, futuristic artists envision societies beyond our current understanding, offering bold interpretations of what our future could hold.</p>
+
+  <p>Whether through interactive digital environments, luminous sculptures, or avant-garde fashion pieces, futuristic art opens new possibilities for **creative expression**. It challenges viewers to consider how humanity might adapt to new realities and technologies, and how our sense of identity, culture, and expression will continue to evolve. In many ways, futuristic art is not just about visual aesthetics, but a profound exploration of the existential questions facing modern society.</p>
+
+  <p>**Step into this mesmerizing world** and witness the powerful interplay of light, technology, and imagination, where art defies the rules of the past and envisions a limitless future. From immersive installations that blur the lines between the real and virtual worlds to artistic pieces that redefine fashion and form, futuristic art invites us to imagine the future and our place within it.</p>
+
+</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/style.css">
+  <title>Futuristic Art</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 World of Futuristic Art</h1>
+  <img src="/images/1.jpg"  width="300">
+    <p>Explore the **cutting-edge realm** of futuristic art, where the lines between technology and creativity blur to create awe-inspiring experiences. This emerging genre captivates viewers with its bold experimentation with light, form, and digital mediums. **Futuristic art** invites you to experience a visual journey that transcends conventional artistic boundaries, offering a glimpse of tomorrow’s innovations today.</p>
+
+    <p>From **holographic installations** to interactive virtual worlds, futuristic art explores themes of human evolution, artificial intelligence, and the convergence of organic and mechanical forms. These creations invite us to question what it means to exist in a rapidly advancing world, blending surreal aesthetics with deep emotional resonance.</p>
+
+    <p>Beyond the visual spectacle, futuristic art serves as a reflection of society’s evolving relationship with technology, inspiring **innovation** while challenging traditional perceptions of what art can achieve. Join us in celebrating the artists who push the boundaries of imagination, merging the physical and the virtual, and paving the way for a limitless future of creative expression.</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/style.css">
+  <title>Futuristic Art Works</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 Futuristic Art</h1>
+  <div class="container">
+    <h2>Key Exhibitions</h2>
+    <ul>
+      <li><strong>Transcendence (2021):</strong> A breakthrough in digital and holographic art, blending light and motion to create immersive experiences.</li>
+      <li><strong>Beyond Reality (2022):</strong> A bold exhibition that challenged traditional boundaries by merging human forms with artificial intelligence.</li>
+      <li><strong>Future Visions (2023):</strong> Featured works that explore the symbiotic relationship between humans and machines in an evolving world.</li>
+    </ul>
+
+    <h2>Signature Installations</h2>
+    <ul>
+      <li><strong>Quantum Reflections (2021):</strong> A mesmerizing piece where light, glass, and fractals interact to create multidimensional illusions.</li>
+      <li><strong>AI Dreams (2022):</strong> A stunning representation of artificial intelligence's take on human emotion, projected through abstract forms and color.</li>
+      <li><strong>Ethereal Horizons (2023):</strong> A fusion of organic and mechanical shapes that invites viewers to contemplate the future of human existence.</li>
+    </ul>
+
+    <h2>Achievements</h2>
+    <p>Futuristic art has rapidly gained recognition worldwide for its **avant-garde approach**, blending technology with emotion. These works challenge perceptions, inspire innovation, and push the limits of artistic expression. With growing exhibitions and digital showcases, futuristic art is reshaping the creative landscape globally.</p>
+  </div>
+</body>
+</html>