ironhack-labs · MikeBDiazB · Nov 2, 2024 · Nov 2, 2024 · Nov 2, 2024
diff --git a/app.js b/app.js
@@ -0,0 +1,26 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+const port = 3000;
+
+// Serve static files from the public folder
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Define routes for each page
+app.get('/', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'home.html'));
+});
+
+app.get('/about', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'about.html'));
+});
+
+app.get('/work', (req, res) => {
+  res.sendFile(path.join(__dirname, 'views', 'work.html'));
+});
+
+// Start the server
+app.listen(port, () => {
+  console.log(`Server is running on http://localhost:${port}`);
+});
+
diff --git a/package.json b/package.json
@@ -0,0 +1,17 @@
+{
+  "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",
+    "dev": "nodemon app.js --ext js,hbs"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.21.1",
+    "nodemon": "^3.1.7"
+  }
+}
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,76 @@
+/* Reset some default styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%; /* Ensure the body takes the full height of the viewport */
+}
+
+body {
+  display: flex; /* Make the body a flex container */
+  flex-direction: column; /* Arrange children in a column */
+  font-family: Arial, sans-serif;
+  line-height: 1.6;
+  background-color: #f4f4f4;
+  color: #333;
+}
+
+/* Header styles */
+header {
+  background: #333;
+  color: #fff;
+  padding: 10px 0;
+  text-align: center;
+}
+
+header h1 {
+  margin-bottom: 10px;
+}
+
+nav {
+  margin: 20px 0;
+}
+
+nav a {
+  color: #fff;
+  text-decoration: none;
+  padding: 10px 15px;
+}
+
+nav a:hover {
+  background: #444;
+  transition: background 0.3s;
+}
+
+/* Main content styles */
+main {
+  flex: 1; /* Allow main to grow and fill available space */
+  padding: 20px;
+  max-width: 800px;
+  margin: auto;
+}
+
+section {
+  background: #fff;
+  margin: 20px 0;
+  padding: 20px;
+  border-radius: 5px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  margin-bottom: 10px;
+}
+
+/* Footer styles */
+footer {
+  text-align: center;
+  padding: 10px 0;
+  background: #333;
+  color: #fff;
+  width: 100%; /* Make sure it stretches the full width */
+}
+
diff --git a/views/about.html b/views/about.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - Tony Hawk</title>
+  <link rel="stylesheet" href="/styles.css"> <!-- Link to your CSS file -->
+</head>
+<body>
+
+  <header>
+    <h1>About Tony Hawk</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/work">Work</a>
+    </nav>
+  </header>
+
+  <main>
+    <section>
+      <h2>Who is Tony Hawk?</h2>
+      <p>Tony Hawk is a legendary professional skateboarder known for his incredible tricks and pioneering skateboarding culture. Born on May 12, 1968, in Carlsbad, California, he became the first skateboarder to land a 900-degree turn in 1999.</p>
+    </section>
+
+    <section>
+      <h2>Career Highlights</h2>
+      <ul>
+        <li>Multiple-time X Games gold medalist</li>
+        <li>Founder of the skateboard company Birdhouse</li>
+        <li>Creator of the Tony Hawk's Pro Skater video game series</li>
+        <li>Philanthropist and advocate for youth sports</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Legacy</h2>
+      <p>Tony Hawk's influence on skateboarding and youth culture is immense. He continues to inspire the next generation of skaters through his work with the Tony Hawk Foundation, which provides funding for public skateparks in low-income communities.</p>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 Tony Hawk</p>
+  </footer>
+
+</body>
+</html>
+
diff --git a/views/home.html b/views/home.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 - Tony Hawk</title>
+  <link rel="stylesheet" href="/styles.css"> <!-- Corrected link to your CSS file -->
+</head>
+<body>
+
+  <header>
+    <h1>Welcome to Tony Hawk's page made by Mike</h1>
+    <nav>
+      <a href="/">Home</a> <!-- Updated link -->
+      <a href="/about">About</a> <!-- Updated link -->
+      <a href="/work">Work</a> <!-- Updated link -->
+    </nav>
+  </header>
+
+  <main>
+    <section>
+      <h2>About Tony Hawk</h2>
+      <p>Tony Hawk, also known as "The Birdman," is a professional skateboarder, entrepreneur, and philanthropist. Explore his legacy in skateboarding!</p>
+      <a href="/about">Learn More</a>
+    </section>
+
+    <section>
+      <h2>Latest News</h2>
+      <p>Check out the latest updates on Tony's events, competitions, and philanthropic efforts!</p>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 Tony Hawk</p>
+  </footer>
+
+</body>
+</html>
+
+
+
+
diff --git a/views/work.html b/views/work.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Works - Tony Hawk</title>
+  <link rel="stylesheet" href="/styles.css"> <!-- Link to your CSS file -->
+</head>
+<body>
+
+  <header>
+    <h1>Tony Hawk's Works</h1>
+    <nav>
+      <a href="/">Home</a>
+      <a href="/about">About</a>
+      <a href="/work">Works</a>
+    </nav>
+  </header>
+
+  <main>
+    <section>
+      <h2>Skateboarding Achievements</h2>
+      <p>Tony has achieved numerous milestones throughout his career, including:</p>
+      <ul>
+        <li>First skater to land a 900</li>
+        <li>Multiple X Games gold medals</li>
+        <li>Induction into the Skateboarding Hall of Fame</li>
+      </ul>
+    </section>
+
+    <section>
+      <h2>Video Game Series</h2>
+      <p>The "Tony Hawk's Pro Skater" series has been pivotal in popularizing skateboarding among youth, showcasing various tricks and skateboarding culture. The series has sold millions of copies worldwide.</p>
+    </section>
+
+    <section>
+      <h2>Philanthropic Efforts</h2>
+      <p>Through the Tony Hawk Foundation, Tony Hawk has helped create over 600 public skateparks in low-income areas, giving youth a safe space to skate and be active.</p>
+    </section>
+  </main>
+
+  <footer>
+    <p>&copy; 2024 Tony Hawk</p>
+  </footer>
+
+</body>
+</html>