ironhack-labs · Shada-M · Mar 17, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,22 @@
+const express = require("express");
+
+const app = express();
+
+app.use(express.static('public'));
+
+
+
+app.get("/about", (req, res) =>
+
+    res.sendFile(__dirname + "/views/about.html"));
+
+app.get("/home", (req, res) =>
+
+    res.sendFile(__dirname + "/views/home.html"));
+
+app.get("/works", (req, res) =>
+
+    res.sendFile(__dirname + "/views/works.html"));
+
+
+app.listen(3000); 
diff --git a/package.json b/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "lab-express-basic-site",
+  "version": "1.0.0",
+  "description": "![logo_ironhack_blue 7](https://user-images.githubusercontent.com/23629340/40541063-a07a0a8a-601a-11e8-91b5-2f13e4e6b441.png)",
+  "main": "app.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.18.3"
+  }
+}
diff --git a/public/etelpainting.jpg b/public/etelpainting.jpg
diff --git a/public/ethelbook.jpg b/public/ethelbook.jpg
diff --git a/public/style-about.css b/public/style-about.css
@@ -0,0 +1,13 @@
+#info {
+
+    width: 60%;
+    height: 500px;
+    align-items: center;
+    font-size: 1em;
+    font-family: 'Courier New', Courier, monospace;
+    text-align: justify;
+    position: absolute;
+    top: 25%;
+    right: 25%;
+
+}
diff --git a/public/style-home.css b/public/style-home.css
@@ -0,0 +1,72 @@
+
+body {
+    font-family: 'Courier New', Courier, monospace;
+  margin: 0;
+}
+
+
+#main {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin: 20px;
+    padding: 20px;
+    height: 500px;
+    width: 100%;
+
+
+
+
+
+}
+
+#img-container {
+    width: 50%; 
+    height:100%; 
+    align-items: center;
+    justify-content: center;
+
+    padding-left: 20px;
+
+
+
+}
+
+#title-img {
+
+    width: 70%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+
+}
+
+
+.link {
+
+    text-decoration: none;
+    font-size: 2em;
+    color: rgb(143, 74, 83);
+    margin: 30px;
+    text-align: left;
+
+}
+
+#links-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: left;
+    width: 20%; 
+    height: 100%; 
+
+}
+
+h1 {
+
+
+    margin-bottom: 70px;
+    font-size: 4em;
+}
diff --git a/public/style-works.css b/public/style-works.css
@@ -0,0 +1,64 @@
+body {
+    font-family: 'Courier New', Courier, monospace;
+  margin: 0;
+}
+
+h1 {
+    font-size: 4em;
+    text-align: center;
+}
+
+h2 {
+    font-size: 2em;
+    text-align: center;
+}
+
+#works {
+
+    display: flex;
+    width: 100%; 
+    flex-direction: row;
+    justify-content: center;
+
+
+
+
+}
+
+#literature {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 30%; 
+    padding: 20px;
+}
+
+#paitnings {
+    width: 30%; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 20px;
+    margin-top: -50px;
+
+
+
+}
+
+#book {
+ width: 100%; 
+ height: 400px; 
+ justify-content: center ;
+
+}
+
+#painting-img {
+    width: 100%; 
+    height: 400px; 
+    justify-content: center;
+
+}
+
+p {
+    text-align: justify;
+}
diff --git a/public/title-img.jpg b/public/title-img.jpg
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,24 @@
+<html> 
+
+<head>
+    <meta charset="utf-8" />
+    <title>About Etel Adnan</title>
+    <link rel="stylesheet" href="/style-about.css">
+</head>
+
+<body> 
+
+    <div id = info> 
+        <p>
+            Etel Adnan, is a highly regarded Lebanese-American poet, essayist, and visual artist. She was born on February 24, 1925, in Beirut, Lebanon. Adnan's work often explores themes of identity, war, politics, and the natural world. She has written poetry in both English and French and is known for her minimalist and evocative style.
+
+Adnan gained international recognition for her book "Sitt Marie Rose," a novel that explores the complexities of the Lebanese Civil War. She has also published numerous collections of poetry, essays, and visual art.
+
+In addition to her literary contributions, Adnan is an accomplished visual artist, known for her abstract paintings inspired by nature and her experiences. Her artwork has been exhibited in galleries and museums around the world.
+
+Throughout her career, Adnan has been recognized with numerous awards and honors for her contributions to literature and art. She continues to be an influential figure in the world of poetry and visual arts.
+        </p>
+    </div>
+</body>
+<script src="../app.js"></script>
+</html>
diff --git a/views/home.html b/views/home.html
@@ -0,0 +1,29 @@
+<html> 
+
+<head>
+    <meta charset="utf-8" />
+    <title>Home Etel Adnan</title>
+    <link rel="stylesheet"  href="/style-home.css">
+</head>
+
+<body> 
+
+    <section id= main> 
+    <div id = img-container> 
+
+        <img id = title-img src = "/title-img.jpg"/> 
+
+    </div>
+    <div id = links-div>
+
+        <h1> Etel Adnan</h1>
+
+        <a class = link href="http://localhost:3000/about" > About</a>
+        <a class = link href="http://localhost:3000/works" > Works</a>
+
+    </div>
+</section>
+
+</body>
+<script src="../app.js"></script>
+</html>
diff --git a/views/works.html b/views/works.html
@@ -0,0 +1,33 @@
+<html> 
+
+<head>
+    <meta charset="utf-8" />
+    <title>About Etel Adnan</title>
+    <link rel="stylesheet" href="/style-works.css">
+</head>
+
+<body>
+<section>
+    <h1> Major Works</h1>
+
+<div id= works>
+<div id=literature>
+    <h2>Literary Works</h2>
+    <img id=book src="\ethelbook.jpg"> 
+    <p>Adnan’s poetry incorporates surrealist imagery and powerful metaphorical leaps with language-based and formal experimentation, using unexpected and experimental techniques to address the nature of exile and political, social, and gender-based injustice. Adnan is the author of numerous books of prose and poetry.</p>
+
+</div>
+<div id=paitnings >
+<h2> Paintings</h2>
+<img id= painting-img src="\etelpainting.jpg ">
+<p> Adnan said that ‘colours exist for me as entities in themselves, as metaphysical beings, like the attributes of God exist as metaphysical entities’, and this idea continued to be a key characteristic of her work.</p>
+
+</div>
+
+</div>
+
+
+</section>
+
+</body>
+</html>