pennlabs · sknop8 · Apr 8, 2017 · Apr 8, 2017 · Apr 8, 2017 · Apr 8, 2017
diff --git a/index.html b/index.html
@@ -4,16 +4,35 @@
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link rel="stylesheet" type="text/css" href="/style/main.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   </head>
   <body>
-    <div id="container">
-      <div id="title"> Hi, this is penn course lmk.</div>
+    <div class="container center-div">
+      <div class="row">
+        <div class="text-center">
+          <h1 class="title"> PennCourseLMK </h1>
+          <h4 class="subtitle"> Add courses that you want, and we'll let you know when they open up! </h4>
+        </div>
+      </div>
+
+      <form class="form-vertical" action="/submitted" method="POST">
+          <div id="bloodhound" class="form-group form-group-lg col-md-4 col-md-offset-4">
+              <input class="form-control typeahead" type="text"
+                placeholder="Add courses" name="course">
+          </div>
+
+          <div class="form-group form-group-lg col-md-4 col-md-offset-4">
+            <input class="form-control" type="email" placeholder="Email"
+              name="email">
+          </div>
+
+          <div class="col-md-4 col-md-offset-4">
+            <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
+          </div>
+      </form>
     </div>
-    <form action="/submitted" method="POST">
-      <input type="text" placeholder="email" name="email">
-      <div id="bloodhound"><input type="text" class="typeahead" placeholder="course" name="course"></div>
-      <button type="submit">Submit</button>
-    </form>
+
     <script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
     <script type="text/javascript" src="/typeahead.bundle.js"></script>
     <script type="text/javascript" src="/searchbar.js"></script>

diff --git a/package.json b/package.json
@@ -5,10 +5,10 @@
   "main": "",
   "dependencies": {
     "body-parser": "^1.17.1",
+    "emailjs": "^1.0.8",
     "express": "^4.15.2",
     "mongodb": "^2.2.25",
-    "penn-sdk": "^0.2.1",
-    "emailjs": "^1.0.8"
+    "penn-sdk": "^0.2.1"
   },
   "devDependencies": {
     "nodemon": "^1.11.0"

diff --git a/src/main.js b/src/main.js
@@ -8,6 +8,8 @@ const courses = require('../courses.json')['result']
 
 app.use(bodyParser.urlencoded({extended: true}))
 
+app.use('/style', express.static(path.join(__dirname, 'style')))
+
 app.listen(3000, () => {
   console.log('listening on 3000')
   MongoHelper.CreateCollections()

diff --git a/src/style/main.css b/src/style/main.css
@@ -0,0 +1,40 @@
+
+.title {
+  color: rgb(150, 0, 0)
+}
+
+.twitter-typeahead{
+  width: 100%;
+}
+
+.subtitle {
+  font-weight: 300;
+  margin-left: 10vw;
+  margin-right: 10vw;
+}
+
+.tt-menu {
+  width: 100%;
+  background-color: rgba(250, 250, 250, 0.95);
+
+  -webkit-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.2), -2px 2px 10px 1px rgba(0,0,0,0.1);
+  -moz-box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.2), -2px 2px 10px 1px rgba(0,0,0,0.1);
+  box-shadow: 2px 2px 10px 1px rgba(0,0,0,0.2), -2px 2px 10px 1px rgba(0,0,0,0.1);
+}
+
+.tt-suggestion {
+  font-weight: 500;
+  padding: 10px;
+  font-size: 12pt;
+  line-height: normal;
+  color: rgb(90, 90, 90);
+}
+
+.tt-suggestion small {
+  font-weight: 300;
+}
+
+.tt-cursor,  .tt-selectable:hover{
+  background-color: rgba(177, 212, 239, 0.95);
+  color: black;
+}