ironhack-labs · DohaData · May 30, 2024 · May 30, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,22 @@
+const express = require("express");
+const app = express();
+const port = 3000;
+
+
+app.use(express.static("public"));
+
+app.get("/", (req, res) => {
+  res.sendFile(`${__dirname}/views/index.html`);
+});
+
+app.get("/about", (req, res) => {
+    res.sendFile(`${__dirname}/views/about.html`);
+    });
+
+app.get("/works", (req, res) => {
+    res.sendFile(`${__dirname}/views/works.html`);
+    });
+
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
+});
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.19.2"
+  }
+}
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -0,0 +1,165 @@
+@import url("https://fonts.googleapis.com/css2?family=Bangers&display=swap");
+
+body {
+  background-color: #f8f9fa;
+  font-family: "Bangers", cursive;
+  font-size: 16px;
+}
+
+img {
+  height: 100vh;
+}
+
+h1 {
+  font-size: 3rem;
+  text-align: center;
+}
+
+h2 {
+  font-size: 2rem;
+  text-align: center;
+}
+a {
+  font-size: 1rem;
+  text-align: center;
+  list-style: none;
+}
+
+ul {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  list-style: none;
+}
+
+li {
+  font-size: 1rem;
+  text-align: center;
+  list-style: none;
+  margin-top: 1rem;
+}
+
+#navbar-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  margin-bottom: 10px;
+}
+
+#navbar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+
+#navbar a {
+  margin: 0 1rem;
+  text-decoration: none;
+  color: black;
+  transition: color 0.3s;
+  font-size: 1.5rem;
+}
+
+#navbar a:hover {
+  color: #007bff;
+}
+
+#navbar a.active {
+  color: #007bff;
+}
+
+#navbar a.active::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 2px;
+  background: #007bff;
+  transition: width 0.3s;
+}
+
+#navbar a.active:hover::after {
+  width: 100%;
+}
+
+#hero-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  height: 100vh;
+}
+
+#landing-container {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  height: 100vh;
+  flex-direction: row;
+}
+
+#landing-container h1 {
+  font-size: 5rem;
+}
+
+#landing-container img {
+  width: 50vw;
+}
+
+#personality-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+#achievements-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+#about-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+#about-container img {
+  width: 50vw;
+}
+
+.line {
+  border-bottom: 1px solid #888;
+}
+
+#team-containers {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+#team-containers p {
+  font-size: 1.5rem;
+  font-style: italic;
+}
+
+#works-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100vh;
+  flex-direction: column;
+}
+
+#works-container img {
+  width: 50vw;
+}
diff --git a/public/images/about_bart.png b/public/images/about_bart.png
diff --git a/public/images/bart.png b/public/images/bart.png
diff --git a/public/images/burns.png b/public/images/burns.png
diff --git a/public/images/love_bart.png b/public/images/love_bart.png
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>About</title>
+    <link rel="stylesheet" href="./css/styles.css" />
+  </head>
+  <body>
+    <div id="navbar-container">
+      <ul id="navbar">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/works">Works</a></li>
+      </ul>
+    </div>
+    <div id="about-container">
+      <h1>About Us</h1>
+      <p>We are a group of people who love Bart Simpson.</p>
+      <p>He is the ultimate badboy.</p>
+      <p>
+        He is a prankster, a skateboarder, an underachiever, and a bad student.
+      </p>
+      <p>
+        He sucks at school, is mean to his sister Lisa, loves his parents
+        though, and is the ultimate skateboarder.
+      </p>
+      <p>He is the best!</p>
+      <img src="/images/about_bart.png" alt="Bart Simpson" />
+    </div>
+    <hr />
+    <div id="team-containers">
+      <h2>Our team</h2>
+      <img src="/images/burns.png" alt="" />
+      <p>
+        PS: Actually it's just Montgomery Burns who created this website,
+        shut!!!
+      </p>
+    </div>
+  </body>
+</html>
diff --git a/views/index.html b/views/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home</title>
+    <link rel="stylesheet" href="./css/styles.css" />
+  </head>
+  <body>
+    <div id="navbar-container">
+      <ul id="navbar">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/works">Works</a></li>
+      </ul>
+    </div>
+    <div id="hero-section">
+      <h1>Bart is the ulimate badboy</h1>
+      <img src="/images/bart.png" alt="Bart Simpson" />
+    </div>
+    <div id="landing-container">
+      <div id="personality-container">
+        <h2 class="title">Bart Simpson</h2>
+        <ul>
+          <li>Prankster</li>
+          <li>Skateboarder</li>
+          <li>Underachiever</li>
+          <li>Bad student</li>
+        </ul>
+      </div>
+      <div id="achievements-container">
+        <h2>Life achievements</h2>
+        <ul>
+          <li>Sucks at school</li>
+          <li>Mean to his sister Lisa</li>
+          <li>Loves his parents though</li>
+          <li>The utimate skateboader</li>
+        </ul>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/views/works.html b/views/works.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" />
+    <title>Works</title>
+    <link rel="stylesheet" href="./css/styles.css" />
+  </head>
+  <body>
+    <div id="navbar-container">
+      <ul id="navbar">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/works">Works</a></li>
+      </ul>
+    </div>
+    <div id="works-container">
+      <h1>Bart Life's Work</h1>
+      <ul>
+        <li>Managed to repeat every single class</li>
+        <li>Pull every possible prank in the book on the school principle</li>
+        <li>Got his dad to buy him a skateboard</li>
+        <li>Got his friend Milhouse to do his homework</li>
+        <li>Managed to find a way into our hearts ❤️</li>
+      </ul>
+      <img src="/images/love_bart.png" alt="Bart Simpson" />
+    </div>
+  </body>
+</html>