ironhack-labs · vladys00 · Oct 31, 2024 · Nov 1, 2024 · Nov 1, 2024 · Nov 1, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,21 @@
+const express = require("express");
+const app = express();
+
+app.use(express.static("public"));
+
+app.get("/home",(request,response,next)=>
+response.sendFile(__dirname + "/views/index.html"));
+
+
+
+app.get("/about",(request,response,next)=>
+    response.sendFile(__dirname + "/views/about.html"));
+
+app.get("/works",(request,response,next)=>
+    response.sendFile(__dirname + "/views/works.html"));
+
+app.get("/photoGallery",(request,response,next)=>
+    response.sendFile(__dirname + "/views/photoGAllery.html"));
+
+app.listen(3000, () => console.log("listening port 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.21.1"
+  }
+}
diff --git a/public/images/Babbage.jpg b/public/images/Babbage.jpg
diff --git a/public/images/ada-portrait.jpg b/public/images/ada-portrait.jpg
diff --git a/public/images/ada-young.jpg b/public/images/ada-young.jpg
diff --git a/public/images/ada_portrait.webp b/public/images/ada_portrait.webp
diff --git a/public/images/babbage-machine.avif b/public/images/babbage-machine.avif
diff --git a/public/images/back.jpg b/public/images/back.jpg
diff --git a/public/stylesheets/about.css b/public/stylesheets/about.css
@@ -0,0 +1,12 @@
+body {
+    height: 100%;
+    width: 100%;
+
+}
+#about-div {
+
+   margin: 30px 45px 30px 45px;
+   background-color: white;
+   padding: 15px;
+   border-radius: 4px;
+}
diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css
@@ -0,0 +1,14 @@
+body {
+    background-image: url("/images/back.jpg");
+
+}
+body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(255, 255, 255, 0.7); /* White overlay with 50% opacity */
+    z-index: -1; /* Keeps it behind content */
+  }
diff --git a/public/stylesheets/gallery.css b/public/stylesheets/gallery.css
@@ -0,0 +1,5 @@
+img {
+    width: 100%;
+    height: 700px;
+    object-fit:contain;
+}
diff --git a/public/stylesheets/index.css b/public/stylesheets/index.css
@@ -0,0 +1,20 @@
+.card{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    .card-body {
+        display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    }
+}
+#ada-portrait{
+    width:30rem;
+}
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,108 @@
+<!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/common.css">
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="/stylesheets/about.css" />
+    <title>About</title>
+  </head>
+  <body>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="/home">Ada Lovelace</a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNav"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link active" aria-current="page" href="/home"
+                >Home</a
+              >
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/about">About</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/works">Works</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link" href="/photoGallery">Gallery</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+    <div id="about-div">
+      <h2>About Ada Lovelace</h2>
+      <p>
+        Ada Lovelace, born in 1815 as the daughter of famed poet Lord Byron, was
+        a British mathematician and writer who is often celebrated as the
+        world’s first computer programmer. From a young age, Lovelace displayed
+        an extraordinary aptitude for mathematics and science, nurtured by her
+        mother, who aimed to ground her in logic and prevent her from inheriting
+        her father’s romantic tendencies. This academic focus led her to work
+        closely with Charles Babbage, an inventor and mathematician best known
+        for his designs for the Analytical Engine, a mechanical precursor to
+        modern computers.
+      </p>
+
+      <p>
+        Lovelace’s most significant work emerged from her collaboration with
+        Babbage, for whom she translated an article on the Analytical Engine
+        written by Italian engineer Luigi Menabrea. In addition to translating
+        the work, she appended her own series of notes, which were more
+        extensive than the original article. These notes, labeled A through G,
+        contained deep insights and laid out the potential for the machine to
+        perform sequences of operations beyond pure calculations—a visionary
+        concept that foresaw future uses of computers.
+      </p>
+
+      <p>
+        One of her most notable achievements within these notes was an algorithm
+        she created to compute Bernoulli numbers, widely regarded as the first
+        computer program. By envisioning the machine’s potential to follow coded
+        instructions for complex calculations, Lovelace effectively invented the
+        concept of programming, earning her the title of the first computer
+        programmer.
+      </p>
+      <p>
+        More impressively, Lovelace’s notes went beyond technical
+        specifications, exploring the philosophical implications of computing.
+        She speculated that machines could process symbols, generate music, and
+        create art if they were given the right instructions, an insight that
+        set her apart from her contemporaries and laid an early theoretical
+        foundation for artificial intelligence and multimedia applications in
+        computing.
+      </p>
+      <p>
+        Though Ada Lovelace died young, at just 36, her work remained
+        influential and was rediscovered in the 20th century, inspiring
+        generations of computer scientists. Today, she is remembered not only
+        for her technical contributions but for her visionary ideas that
+        predated modern computing by more than a century.
+      </p>
+    </div>
+
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="/stylesheets/index.css">
+    <link rel="stylesheet" href="/stylesheets/common.css">
+    <title>Home</title>
+</head>
+<body>
+    <nav id="nav-bar"class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="/home">Ada Lovelace</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="/home">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/about">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/works">Works</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link " href="/photoGallery">Gallery</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <div  class="card" style="width: 50rem; height: 30rem; ">
+        <img id="ada-portrait" src="/images/ada-portrait.jpg" class="card-img-top" alt="...">
+        <div class="card-body">
+          <h5 class="card-title">Welcome to the Ada Lovelace Website</h5>
+          <p class="card-text">Ada Lovelace was an English mathematician and writer, recognized as the first computer programmer in history. Her visionary work on Charles Babbage’s Analytical Engine laid the foundation for modern computing. Explore the different sections to learn more about her life, her contributions, and achievements. </p>
+          <a href="/about" class="btn btn-primary">Get to know more!</a>
+        </div>
+      </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>
diff --git a/views/photoGallery.html b/views/photoGallery.html
@@ -0,0 +1,62 @@
+<!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/gallery.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
+    <link rel="stylesheet" href="/stylesheets/common.css">
+    <title>PhotoGallery</title>
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg bg-body-tertiary">
+        <div class="container-fluid">
+          <a class="navbar-brand" href="/home">Ada Lovelace</a>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link active" aria-current="page" href="/home">Home</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/about">About</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/works">Works</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link " href="/photoGallery">Gallery</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </nav>
+      <div id="carouselExample" class="carousel slide">
+        <div class="carousel-inner">
+          <div class="carousel-item active">
+            <img src="/images/ada-young.jpg" class="d-block w-80" alt="...">
+          </div>
+          <div class="carousel-item">
+            <img src="/images/ada_portrait.webp" class="d-block w-10" alt="...">
+          </div>
+          <div class="carousel-item">
+            <img src="/images/babbage-machine.avif" class="d-block w-100" alt="...">
+          </div>
+          <div class="carousel-item">
+            <img src="/images/Babbage.jpg" class="d-block w-80" alt="...">
+          </div>
+        </div>
+        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Previous</span>
+        </button>
+        <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+          <span class="visually-hidden">Next</span>
+        </button>
+      </div>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+</body>
+</html>