first express

app.js

@@ -0,0 +1,29 @@
+const express = require ('express')
+const app = express()
+const port = 3000
+
+app.use(express.static(`${__dirname}/views`)); //connecting Express to the public folder
+app.use(express.static(`${__dirname}/public`));
+
+app.get('/', function (req, res) {
+    res.sendFile('index.html')
+})
+
+app.get('/home', function(req,res) {
+    res.sendFile('home.html')
+})
+
+app.get('/about', function(req,res) {
+    res.sendFile('about.html')
+})
+
+app.get('/works', function(req, res) {
+    res.sendFile('works.html')
+})
+
+
+app.listen(port, () => {
+    console.log(`Example app listening on port ${port}`)
+  })
+
+

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.19.2"
+  }
+}

public/css/style.css

@@ -0,0 +1,175 @@
+html {
+    background-color:beige;
+    font-size: 10px;
+}
+
+body {
+    margin: 0px;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+.first-row {
+display: flex;
+flex-direction: row;
+}
+
+.first-p {
+    display: flex;
+}
+
+.second-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.nav-bar {
+display: flex;
+flex-direction: row;
+background-color: #696969;
+text-decoration: none;
+color: white;
+list-style-type: none;
+justify-content: space-around;
+padding: 2rem;
+margin: 3rem;
+}
+
+.nav-bar li {
+    margin-right: 2rem; 
+    font-size: 2rem;
+}
+
+.nav-bar a {
+    text-decoration: none;
+    color: white; 
+}
+
+.adichie-img {
+    max-height: 80rem;
+}
+
+img  {
+    max-width: 40rem;
+    overflow: hidden;
+    max-height:40rem ;
+}
+
+.img-rect {
+    position: relative;   
+     max-width: 30rem;
+    overflow: hidden;
+    max-height:20rem ;
+}
+
+h1 {
+    font-size: 4rem;
+    text-align: center;
+}
+
+
+.image-container {
+    width: 30rem; 
+    height: 30rem; 
+    overflow: hidden; 
+    position: relative; /
+    margin: 0rem; 
+    animation: slideIn 1s ease-out;
+}
+
+.image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; 
+    object-position: center; 
+    margin: 2rem;
+}
+
+
+
+.first-intro {
+    font-size: 8rem;
+    position: relative;
+    text-align:justify; 
+    margin: 2rem;
+    animation: slideIn 1s ease-out;
+}
+
+.second-intro {
+    font-size: 8rem;
+    position: relative;
+    text-align: center;
+    margin: 2rem;
+    animation: slideIn 1s ease-out;
+}
+
+
+.div-home {
+    margin: 3rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+}
+
+#home-p {
+    font-size: 2rem;
+    font-family: Arial, Helvetica, sans-serif;
+    text-align:justify;
+    padding: 1rem;
+    width: 50%;
+}
+
+.current-page {
+    font-size: 5rem;
+    color: yellow;
+    display: block;
+}
+
+.other-page {
+    font-size: 2rem;
+    color: black;
+    display: block; 
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+    padding: 20px;
+    background-color: #fff;
+    align-items: stretch;
+}
+
+.item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px;
+    padding: 20px;
+    background-color: #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    justify-content: space-evenly;
+}
+
+.item img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+.item p {
+    margin: 10px 0 0;
+    text-align: center;
+    color: #333;
+}

public/js/script.js

@@ -0,0 +1,15 @@
+
+document.addEventListener("DOMContentLoaded", function() {
+    let currentPath = window.location.pathname.split('/').pop();
+    let navLinks = document.querySelectorAll('.nav-bar a');
+
+    navLinks.forEach(link => {
+        if (link.getAttribute('href') === currentPath) {
+            link.parentElement.classList.add('current-page');
+            link.parentElement.classList.remove('other-page');
+        } else {
+            link.parentElement.classList.add('other-page');
+            link.parentElement.classList.remove('current-page');
+        }
+    });
+});

views/about.html

@@ -0,0 +1,34 @@
+<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>Document</title>
+</head>
+<body>
+    <nav>
+        <ul class="nav-bar">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="works.html">Works</a></li>
+            <li><a href="gallery.html">Gallery</a></li>
+        </ul>
+    </nav>
+    <main>
+        <h1> Chimamanda Ngozi Adichie </h1>
+        <div class="div-home">
+        <img src="images/adichie.webp" alt="Picture of Chimamanda Adichie" id="adichie-img">
+        <p id="home-p">Chimamanda Ngozi Adichie is a renowned Nigerian author, celebrated for her insightful and powerful storytelling that bridges cultures and continents. 
+            Born in Enugu, Nigeria, she has captivated global audiences with her critically acclaimed works, including Half of a Yellow Sun, Americanah, and Purple Hibiscus. 
+            Her writing, characterized by its compelling characters and thought-provoking themes, explores the complexities of identity, feminism, and social justice.
+        <br>
+            Adichie's work transcends traditional narratives, offering a fresh perspective on contemporary issues while honoring her Nigerian heritage. 
+            She is not only a prolific writer but also an influential public speaker, known for her TED Talks, 
+            The Danger of a Single Story and We Should All Be Feminists, which have sparked global conversations about culture, gender, and equality.
+            <br>
+            Join us in celebrating the life and works of Chimamanda Adichie, a voice of her generation and a beacon of literary brilliance.</p>
+    </div>
+    </main>
+    <script src="js/script.js"></script>
+</body>
+</html>

views/gallery.html

@@ -0,0 +1,22 @@
+<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>Gallery</title>
+</head>
+<body>
+    <nav>
+        <ul class="nav-bar">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="works.html">Works</a></li>
+            <li><a href="gallery.html">Gallery</a></li>
+        </ul>
+    </nav>
+    <header>
+        <h1></h1>
+    </header>
+    <script src="js/script.js"></script>
+</body>
+</html>

views/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Your Page Title</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <nav>
+        <ul class="nav-bar">
+            <li class="other-page current-page"><a href="index.html">Home</a></li>
+            <li class="other-page current-page"><a href="about.html">About</a></li>
+            <li class="other-page current-page"><a href="works.html">Works</a></li>
+            <li class="other-page current-page"><a href="gallery.html">Gallery</a></li>
+        </ul>
+    </nav>
+    <main>
+        <h1> Welcome to the world of  </h1>
+        <div class="first-row">
+            <div class="image-container">
+                <img src="images/adichie.webp" alt="Picture of Chimamanda Adichie" >
+            </div>
+            <div class="first-p"> 
+                <p class="first-intro">Chimamanda</p>
+            </div>
+        </div>
+        <div class="second-row">
+            <div class="image-container">
+                <img src="images/books.jpg" alt="picture of chimamandas work">
+            </div>
+            <div class="image-container">
+                <img class="img-rect" src="images/speech.jpeg" alt="chimamanda gives speech">
+            </div>
+            <div> 
+                <p class="second-intro">Adichie</p>
+            </div>
+        </div>
+    </main>
+    <header>
+        <h1></h1>
+    </header>
+    <script src="js/script.js"></script>
+</body>
+</html>

views/works.html

@@ -0,0 +1,46 @@
+<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>Document</title>
+</head>
+<body>
+    <nav>
+        <ul class="nav-bar">
+            <li><a href="index.html">Home</a></li>
+            <li><a href="about.html">About</a></li>
+            <li><a href="works.html">Works</a></li>
+            <li><a href="gallery.html">Gallery</a></li>
+        </ul>
+    </nav>
+    <main>
+        <div class="container">
+            <div class="item">
+                <img src="images/america.jpeg" alt="Image 1">
+                <p>Americanah is a 2013 novel by the Nigerian author Chimamanda Ngozi Adichie, for which Adichie won the 2013 U.S. National Book Critics Circle Award for fiction. Americanah tells the story of a young Nigerian woman, Ifemelu, who immigrates to the United States to attend university.</p>
+            </div>
+            <div class="item">
+                <img src="images/half.jpeg" alt="Image 2">
+                <p>Half of a Yellow Sun is a novel by Nigerian author Chimamanda Ngozi Adichie. Published in 2006 by 4th Estate in London, the novel tells the story of the Biafran War through the perspective of the characters Olanna, Ugwu, and Richard. It received critical acclaim and won the Women's Prize for Fiction in 2007.</p>
+            </div>
+            <div class="item">
+                <img src="images/sleeping.jpeg" alt="Image 3">
+                <p>The first children's book from the best-selling author of We Should All Be Feminists and Americanah—a tender story about a little girl’s love for her mother’s scarf, and the adventures she shares with it and her whole family
+
+                    Chino loves the scarf that her mama ties around her hair at night. But when Mama leaves for the day, what happens to her scarf? Chino takes it on endless adventures! Peeking through the colorful haze of the silky scarf, Chino and her toy bunny can look at her whole family as they go through their routines. </p>
+            </div>
+            <div class="item">
+                <img src="images/purple.jpeg" alt="Image 4">
+                <p>Growing up in a wealthy Nigerian home under the domain of a harsh, demanding, and tyrannical father, Kambili and her brother, Jaja, find new happiness during a visit to their Aunty Ifeoma outside the city, but as Kambili enjoys her newfound freedom and falls in love for the first time, the country begins to fall apart under a military coup. A first novel. Reader's Guide available. Reprint. 30,000 first printing.</p>
+            </div>
+            <div class="item">
+                <img src="images/iji.jpeg" alt="Image 6">
+                <p>Dear Ijeawele, or A Feminist Manifesto in Fifteen Suggestions is an epistolary form manifesto written by Nigerian author Chimamanda Ngozi Adichie. Dear Ijeawele was posted on her official Facebook page on October 12, 2016, was subsequently adapted into a book, and published in print on March 7, 2017.</p>
+            </div>
+        </div>
+
+    </main>
+    <script src="js/script.js"></script>
+</body>
+</html>