?

css/home.css

@@ -10,4 +10,79 @@
   }
 .person:hover {
     border-color: #f1f1f1;
-  }
+  }
+.carousel-inner img {
+    -webkit-filter: grayscale(90%);
+    filter: grayscale(90%); /* make all photos black and white */
+    width: 100%; /* Set width to 100% */
+    margin: auto;
+  }
+  
+.carousel-caption h3 {
+    color: #fff !important;
+  }
+  
+@media (max-width: 600px) {
+.carousel-caption {
+    display: none; /* Hide the carousel text when the screen is less than 600 pixels wide */
+    }
+  }
+
+.bg-1 {
+    background: #2d2d30;
+    color: #bdbdbd;
+  }
+.bg-1 h3 {color: #fff;}
+.bg-1 p {font-style: italic;}
+
+ /* Remove rounded borders from list */
+.list-group-item:first-child {
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+  }
+  
+.list-group-item:last-child {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  
+  /* Remove border and add padding to thumbnails */
+.thumbnail {
+    padding: 0 0 15px 0;
+    border: none;
+    border-radius: 0;
+  }
+  
+.thumbnail p {
+    margin-top: 15px;
+    color: #555;
+  }
+  
+  /* Black buttons with extra padding and without rounded borders */
+.btn {
+    padding: 10px 20px;
+    background-color: #333;
+    color: #f1f1f1;
+    border-radius: 0;
+    transition: .2s;
+  }
+  
+  /* On hover, the color of .btn will transition to white with black text */
+.btn:hover, .btn:focus {
+    border: 1px solid #333;
+    background-color: #fff;
+    color: #000;
+  }
+
+.modal-header, h4, .close {
+    background-color: #333;
+    color: #fff !important;
+    text-align: center;
+    font-size: 30px;
+  }
+  
+.modal-header, .modal-body {
+    padding: 40px 50px;
+  }
+
+  

home.html

@@ -84,6 +84,106 @@
     </div>
   </div>
 </div>
+<!--
+<div class="bg-1">
+    <div class="container">
+      <h3 class="text-center">UPCOMING EVENTS</h3>
+      <p class="text-center">idk what to put here yet<br> Remember to book your tickets!</p>
+  
+      <ul class="list-group">
+        <li class="list-group-item">September <span class="label label-danger">Sold Out!</span></li>
+        <li class="list-group-item">October Sold Out!</li>
+        <li class="list-group-item">November 3</li>
+      </ul>
+    </div>
+  </div>
+ <div class="row text-center">
+  <div class="col-sm-4">
+    <div class="thumbnail">
+      <img src="paris.jpg" alt="Paris">
+      <p><strong>Paris</strong></p>
+      <p>Fri. 27 November 2015</p>
+      <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
+    </div>
+  </div>
+  <div class="col-sm-4">
+    <div class="thumbnail">
+      <img src="newyork.jpg" alt="New York">
+      <p><strong>New York</strong></p>
+      <p>Sat. 28 November 2015</p>
+      <button class="btn" data-toggle="modal" data-target="#myModal">Buy Tickets</button>
+    </div>
+  </div>
+  <div class="col-sm-4">
+    <div class="thumbnail">
+      <img src="sanfran.jpg" alt="San Francisco">
+      <p><strong>San Francisco</strong></p>
+      <p>Sun. 29 November 2015</p>
+      <button class="btn data-toggle="modal" data-target="#myModal"">Buy Tickets</button>
+    </div>
+  </div>
+</div> 
+
+<div class="modal fade" id="myModal" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h4><span class="glyphicon glyphicon-lock"></span> Tickets</h4>
+        </div>
+        <div class="modal-body">
+          <form role="form">
+            <div class="form-group">
+              <label for="psw"><span class="glyphicon glyphicon-shopping-cart"></span> Tickets, $23 per person</label>
+              <input type="number" class="form-control" id="psw" placeholder="How many?">
+            </div>
+            <div class="form-group">
+              <label for="usrname"><span class="glyphicon glyphicon-user"></span> Send To</label>
+              <input type="text" class="form-control" id="usrname" placeholder="Enter email">
+            </div>
+            <button type="submit" class="btn btn-block">Pay
+              <span class="glyphicon glyphicon-ok"></span>
+            </button>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">
+            <span class="glyphicon glyphicon-remove"></span> Cancel
+          </button>
+          <p>Need <a href="#">help?</a></p>
+        </div>
+      </div>
+    </div>
+  </div>
+-->
 
+<div class="container">
+    <h3 class="text-center">Contact</h3>
+    <p class="text-center"><em>We love our fans!</em></p>
+    <div class="row test">
+      <div class="col-md-4">
+        <p>Drop a note.</p>
+        <p><span class="glyphicon glyphicon-map-marker"></span>Denver, US</p>
+        <p><span class="glyphicon glyphicon-phone"></span>Phone: +00 1515151515</p>
+        <p><span class="glyphicon glyphicon-envelope"></span>Email: mail@mail.com</p>
+      </div>
+      <div class="col-md-8">
+        <div class="row">
+          <div class="col-sm-6 form-group">
+            <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
+          </div>
+          <div class="col-sm-6 form-group">
+            <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
+          </div>
+        </div>
+        <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea>
+        <div class="row">
+          <div class="col-md-12 form-group">
+            <button class="btn pull-right" type="submit">Send</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> 
 </body>
 </html>