6 - Creating our Views

Neel1105 · Aug 30, 2016 · 1fe4eb3 · 1fe4eb3
1 parent be03162
commit 1fe4eb3
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 2 deletions.
diff --git a/app/routes.js b/app/routes.js
@@ -1,5 +1,6 @@
 // require express
 var express = require('express');
+var path    = require('path');
 
 // create our router object
 var router = express.Router();
@@ -9,12 +10,12 @@ module.exports = router;
 
 // route for our homepage
 router.get('/', function(req, res) {
-  res.send('hello world again!');
+  res.sendFile(path.join(__dirname, '../index.html'));
 });
 
 // route for our about page
 router.get('/about', function(req, res) {
-  res.send('hello world i am the about page!');
+  res.sendFile(path.join(__dirname, '../about.html'));
 });
 
 router.get('/contact');

diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>My Node Site</title>
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">   
+  <link rel="stylesheet" href="/css/styles.css">
+</head>
+<body>
+  <header>
+    <nav class="navbar navbar-inverse">
+      <a href="/" class="navbar-brand">My Site</a>
+      <ul class="nav navbar-nav">
+        <li><a href="/">Home</a></li>
+        <li><a href="/about">About</a></li>
+        <li><a href="/contact">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+
+  <section class="hero">
+    <div class="hero-content">
+      <h2>Welcome to the Site!</h2>
+      <p>The best place to be</p>
+
+      <a href="/" class="btn btn-lg btn-primary">Get Started</a>
+      <a href="/contact" class="btn btn-lg btn-primary">Contact</a>
+    </div>
+  </section>
+
+  <main>
+    <div class="container">
+      <div class="jumbotron text-center">
+        Home Page
+      </div>
+    </div>
+  </main>
+
+  <footer>
+    Awesome Site. Copyright &copy; 2016
+  </footer>
+</body>
+</html>
diff --git a/public/css/styles.css b/public/css/styles.css
@@ -0,0 +1,55 @@
+body {
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+header .navbar {
+  border-radius: 0;
+  margin: 0;
+}
+
+.hero {
+  background-image: url(../img/planet.jpg);
+  background-repeat: no-repeat;;
+  background-size: cover;
+  background-position: center center;
+  padding: 50px 0;
+  min-height: 650px;
+  position: relative;
+}
+
+.hero-content {
+  position: absolute;
+  top: 50%;
+  text-align: center;
+  width: 100%;
+}
+
+.hero-content h2 {
+  color: #FFF;
+  font-size: 80px;
+}
+
+.hero-content p {
+  color: #FFF;
+  font-size: 40px;
+  margin-bottom: 30px;
+}
+
+.hero-content .btn {
+  border-radius: 2px;
+  padding: 20px 30px;
+}  
+
+main {
+  min-height: 500px;
+  padding: 50px 0;
+}
+
+footer {
+  padding: 30px 0;
+  font-size: 14px;
+  color: #BBB;
+  background: #222;
+  text-align: center;
+}
diff --git a/public/img/planet.jpg b/public/img/planet.jpg
diff --git a/server.js b/server.js
@@ -8,6 +8,8 @@ var port = 8080;
 var router = require('./app/routes');
 app.use('/', router);
 
+// set static files (css and images, etc) location
+app.use(express.static(__dirname + '/public'));
 
 // start the server
 app.listen(port, function() {