diff --git a/index.css b/index.css
new file mode 100644
index 00000000..b3109421
--- /dev/null
+++ b/index.css
@@ -0,0 +1,90 @@
+
+/**************************** General ***************************/
+
+main {
+ padding: 80px 0 24em 0;
+ background-image: url("https://cdn.pixabay.com/photo/2016/03/17/23/00/world-1264062_1280.jpg");
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-attachment: fixed;
+ background-position: center;
+}
+
+
+a { color: #3B4463; }
+a:hover { color: #f7e7d7; }
+
+.button { background-color: #3B4463; }
+.button:hover { background-color: #3C6F47; }
+
+
+
+/**************************** nav ***************************/
+
+.top-bar, li {
+ background-color: white;
+ color: #0a0a0a;;
+ position: fixed;
+ width: 100%;
+}
+
+
+
+/**************************** footer ***************************/
+
+footer {
+ background-color: #070201;
+ padding: 2.5% 0;
+ bottom: 0;
+ left:0;
+ height:12em;
+ width:100%;
+}
+
+footer a, h4 {
+ color: #dbd9de;
+}
+footer h4 {
+ margin: 0;
+}
+
+footer a {
+display: block;
+position: relative;
+}
+
+
+/********************** Index ********************/
+
+.trip-block {
+ text-align: center;
+ background-color: rgba(255,255,255, 0.75);
+ padding: 2.25rem;
+ margin: 1em 0;
+ width: auto;
+ height: inherit;
+ border-radius: 2em;
+}
+
+.trip-block h3, h4 {
+ display: inline-block;
+ margin: 0 1rem;
+}
+
+.trip-block h3 { color: #3C6F47; }
+
+.trip-block h4 { color: #30271d; }
+
+/****************** Show Details *****************/
+
+#trip-index { color: #30271d; }
+
+.show {
+ background-color: white;
+ padding: 1em;
+ border: 1px solid #cacaca;
+}
+
+.show, form {
+ margin: 0 1em;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..f39e73e7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,105 @@
+
+
+
+
+
+
+ Tripsea
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
new file mode 100644
index 00000000..ffe566aa
--- /dev/null
+++ b/index.js
@@ -0,0 +1,90 @@
+$(document).ready(function(){
+ $('#explore').click(indexClickHandler);
+});
+
+
+// ####################### Trip Index/List ####################### //
+
+var indexClickHandler = function(){
+ url = 'https://trektravel.herokuapp.com/trips';
+ $.get(url, indexSuccessCallback).fail(failureCallback);
+
+};
+
+
+var indexSuccessCallback = function(response){
+
+ $('#trip-index').empty();
+
+
+ var tripIndexTemplate = _.template($('#trip-index-template').html());
+
+ for(var i=0;i 5 && response[i].weeks > 0 && response[i].continent.length > 3){
+
+ var generatedHtml = tripIndexTemplate({
+ trip: response[i],
+ });
+ }
+ }
+ $('#trip-index').append(generatedHtml);
+ }
+ $('#trip-index').on('click', '#trip-link', showClickHandler);
+};
+
+
+var failureCallback = function(){
+ $('#errors').html("Oops Something Went Wrong
");
+};
+
+
+// ####################### Trip Show/Details ####################### //
+
+var showClickHandler = function(event){
+
+ var tripId = $(event.target)[0].getAttribute('id');
+
+ url = 'https://trektravel.herokuapp.com/trips/' + tripId;
+
+ $.get(url, showSuccessCallback).fail(failureCallback);
+};
+
+var showSuccessCallback = function(response){
+
+ var tripShowTemplate = _.template($('#trip-show-template').html());
+
+ var url = 'https://trektravel.herokuapp.com/trips/'+response.id+'/reserve';
+
+ var generatedHtml = tripShowTemplate({
+ trip: response,
+ url: url
+ });
+
+ // TODO what is the difference between .append and .html
+ $('#trip-index').html($(generatedHtml));
+ // $('#trip-show').append($(generatedHtml));
+
+};
+
+// ####################### Reservation ####################### //
+
+
+
+
+$('#trip-index').on('click', 'button', function(e) {
+
+ e.preventDefault();
+
+ var url = $('form').attr("action");
+ var formData = $('form').serialize();
+
+ $.post(url, formData, function(response){
+
+ alert("Your reservation has been requested!");
+ $('form').empty();
+ })
+ .fail(failureCallback);
+});