web-dev-open · Hadiquaa · Oct 4, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,15 @@
+const express = require('express');
+
+
+const app = express();
+
+app.use(express.static('public'));
+
+app.get('/home', (request, response, next) => response.sendFile(__dirname + '/views/home-page.html'));
+app.get('/about', (request, response, next) => response.sendFile(__dirname + '/views/about-page.html'))
+
+app.get('/works', (request, response, next) => response.sendFile(__dirname + '/views/works-page.html'))
+
+app.get('/photo-gallery', (request, response, next) => response.sendFile(__dirname + '/views/photo-gallery-page.html'))
+
+app.listen(3000, () => console.log('My first app listening on port 3000! 🚀'));
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/Hadiquaa/lab-express-basic.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Hadiquaa/lab-express-basic/issues"
+  },
+  "homepage": "https://github.com/Hadiquaa/lab-express-basic#readme",
+  "dependencies": {
+    "express": "^4.21.0"
+  }
+}
diff --git a/public/images/irises.jpg b/public/images/irises.jpg
diff --git a/public/images/potato-eaters.jpg b/public/images/potato-eaters.jpg
diff --git a/public/images/self-potrait.jpg b/public/images/self-potrait.jpg
diff --git a/public/images/starry-night.jpg b/public/images/starry-night.jpg
diff --git a/public/images/sunflowers.jpg b/public/images/sunflowers.jpg
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
@@ -0,0 +1,119 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: honeydew;
+    color: black;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+
+    align-items: center;
+    gap: 1rem;
+}
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: darkslategrey;
+    color: white;
+    height: 5rem;
+    margin-bottom: 1rem;
+    width: 100vw;
+}
+
+.navbar a {
+    text-decoration: none;
+    color: white;
+    padding: 14px 20px;
+}
+
+.brand {
+    font-size: 2.5rem;
+    font-weight: 700;
+}
+
+.navbar ul {
+    list-style: none;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 1.5rem;
+}
+
+.home-desc {
+    font-size: 1.5rem;
+    width: 700px;
+}
+
+.bold {
+    font-weight: 700;
+}
+
+.about-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    gap: 1rem;
+    width: 100%;
+}
+
+.about-desc {
+    width: 700px;
+    font-size: 1.3rem;
+    text-align: left;
+}
+
+.works-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+}
+
+.work-item {
+    display: flex;
+    align-items: center;
+    width: 1000px;
+    margin-top: 2rem;
+    gap: 1rem;
+    text-align: left;
+}
+
+.work-item img {
+    width: 350px;
+    height: 300px;
+}
+
+.gallery-grid {
+    margin-top: 2rem
+}
+
+.gallery-grid img {
+    width: 350px;
+    height: 300px;
+    margin-bottom: 10px;
+    /* Space between images vertically */
+    object-fit: cover;
+    border-radius: 5px;
+    transition: transform 0.3s ease;
+}
+
+/* Hover effect */
+.gallery-grid img:hover {
+    transform: scale(1.05);
+    /* Slight zoom effect on hover */
+}
+
+/* Responsive adjustments */
+@media screen and (max-width: 1200px) {
+    .gallery-grid {
+        column-count: 3;
+        /* Reduce columns on smaller screens */
+    }
+}
diff --git a/views/about-page.html b/views/about-page.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="/stylesheets/styles.css">
+    <title>Vincent Van Gogh</title>
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/home" class="brand">Vincent Van Gogh</a>
+        <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/photo-gallery">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="about-container">
+        <div class="about-desc">
+            <span class="bold">Vincent Willem van Gogh (30 March 1853 - 29 July 1890)</span> was a Dutch post-impressionist painter. Often refferred to as perhaps one of the greatest men who has ever existed, His work had a great influence on modern art because of its striking colours and emotional power. He suffered from delusions and fits of mental illness. When he was 37, he died by committing suicide.When he was a young man, Van Gogh worked for a company of art dealers. He traveled between The Hague, London and Paris. After that, he taught in England. He then wanted to become a pastor and spread the Gospel, and from 1879 he worked as a missionary in a mining place in Belgium. He began drawing the people there, and in 1885, he painted his first important work, The Potato Eaters. He usually painted in dark colors at this time. In March 1886, he moved to Paris and found out about the French impressionists. Later, he moved to the south of France, and the colors in his art became brighter. His special style of art was developed and later fully grown during the time he stayed in Arles in 1888.
+        </div>
+        <div>
+            <img src="/images/self-potrait.jpg" alt="self-potrait" width="300" height="350">
+        </div>
+    </div>
+
+</body>
+</html>
diff --git a/views/home-page.html b/views/home-page.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="/stylesheets/styles.css" />
+    <title>Vincent Van Gogh</title>
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/home" class="brand">Vincent Van Gogh</a>
+        <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/photo-gallery">Photo Gallery</a></li>
+        </ul>
+    </nav>
+
+    <h1 class="home-header">Welcome to Vincent Van Gogh's Website</h1>
+
+    <div>
+        <img src="/images/starry-night.jpg"/>
+    </div>
+    <div class="home-desc">
+        <span class="bold">Vincent Willem van Gogh (30 March 1853 - 29 July 1890)</span> was a Dutch post-impressionist painter and was often refferred to as perhaps one of the greatest men who has ever existed.
+    </div>
+</body>
+</html>
diff --git a/views/photo-gallery-page.html b/views/photo-gallery-page.html
@@ -0,0 +1,30 @@
+<!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="/stylesheets/styles.css">
+    <title>Photo Gallery for Vincent Van Gogh</title>
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/home" class="brand">Vincent Van Gogh</a>
+        <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/photo-gallery">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="photo-gallery">
+        <h2>Photo Gallery for Vincent Van Gogh</h2>
+        <div class="gallery-grid">
+            <img src="/images/starry-night.jpg" alt="starry-night">
+            <img src="/images/self-potrait.jpg" alt="self-portrait">
+            <img src="/images/sunflowers.jpg" alt="sunflowers">
+            <img src="/images/potato-eaters.jpg" alt="potato-eaters">
+            <img src="/images/irises.jpg" alt="irises">
+
+        </div>
+    </div>
+</body>
+</html>
diff --git a/views/works-page.html b/views/works-page.html
@@ -0,0 +1,57 @@
+<!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="/stylesheets/styles.css">
+    <title>Famous works of Van Gogh</title>
+</head>
+<body>
+    <nav class="navbar">
+        <a href="/home" class="brand">Vincent Van Gogh</a>
+        <ul>
+            <li><a href="/about">About</a></li>
+            <li><a href="/works">Works</a></li>
+            <li><a href="/photo-gallery">Photo Gallery</a></li>
+        </ul>
+    </nav>
+    <div class="works-container">
+        <h1>Famous Works of Vincent Van Gogh</h1>
+        <div class="work-item">
+            <img src="/images/self-potrait.jpg" alt="Self-Portrait">
+            <div>
+                <h2>Self-Portrait, 1889</h2>
+                <p>Van Gogh painted many self-portraits during the course of his career, no fewer than 35. The one displayed below, painted in 1889, is one of his most famous. Van Gogh depicted himself wearing what he used to work in – his blue jacket and shirt. In an attempt to be as true to himself as possible, he depicts his sharp features, the furrow in his brow, and the striking red tones of his hair and beard. This is one of the final self-portraits he painted before his death the following year. </p>
+            </div>
+        </div>
+        <div class="work-item">
+            <img src="/images/starry-night.jpg" alt="starry-night">
+            <div>
+                <h2>Starry Night, 1889</h2>
+                <p>Van Gogh's painting Starry Night (1889), is one of his most iconic. Leading up to this point, Van Gogh had been suffering from mental health issues, so much so that it led to him cutting off his left ear. After this incident, in 1888 he was admitted to the Saint-Paul-de-Mausole asylum in Saint-Rémy-de-Provence to recover. The view that we see in Starry Night is actually inspired by the view that Van Gogh saw from his bedroom in the asylum. The swirling blues of the moonlit night sky have become synonymous with the artist’s style and the emotional quality of his use of color. </p>
+            </div>
+        </div>
+        <div class="work-item">
+            <img src="/images/sunflowers.jpg" alt="starry-night">
+            <div>
+                <h2>Sunflowers, 1889</h2>
+                <p>During his time in Arles, South of France, in the years 1888-89, Van Gogh created five paintings of sunflowers in a vase, using only shades of yellow and a touch of green. He wrote that for him sunflowers represented “gratitude” and so hung one of them in his home. Later, his friend and fellow artist Paul Gaugin, while living with him for a short while, said that he very much liked the works and asked Van Gogh for one of the paintings, which he was given. Today, this copy sits in the Van Gogh Museum in Amsterdam. </p>
+            </div>
+        </div>
+        <div class="work-item">
+            <img src="/images/potato-eaters.jpg" alt="potato-eaters">
+            <div>
+                <h2>The Potato Eaters, 1885</h2>
+                <p>The Potato Eaters (1885) stands at a crucial point in the development of Van Gogh’s style and technique. By depicting a family sharing a simple meal of potatoes, not only did he want to establish himself as a painter of peasant life, but also he challenged his artistic abilities to experiment with light and shadows, experimenting with raking light and the chiaroscuro technique to highlight the features of his subjects.</p>
+            </div>
+        </div>
+        <div class="work-item">
+            <img src="/images/irises.jpg" alt="irises">
+            <div>
+                <h2>Irises, 1889</h2>
+                <p>Irises is a series of Van Gogh’s iris paintings that were done during his stay at the asylum in Provence. These flowers were in the asylum’s garden, hence why they feature in so many of his paintings created during that stage of his life. The series is influenced by ukiyo-e Japanese prints which took flowers as the central focus and used interesting forms and colors to portray their soft and light nature. </p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>