Mini Kabibi Habibi
<div data-options="dxView : { name: 'Index', layout: 'index', 'current-navigation-item-id': 'home' } " >
<div data-options="dxContent : { targetPlaceholder: 'content' } " >
<div class="index-center">
<h1>Go Somewhere Beautiful</h1>
<div class="index-trip-list">
<h2 class="lighter flight-icon has-icon">Next trip</h2>
<div class="clickable" style="line-height:17px;">
<span class="marker-icon index-marker-icon">1</span>
<span data-bind="text: nextTrip().location, dxAction: nextTrip().summaryAction" style="font-size: 1.3em; "></span>
</div>
<h2 class="softer hot-deals-gray-icon has-icon" style="margin-top: 16px; ">Hot deals</h2>
<ul>
<!-- ko foreach: suggestedLocations -->
<li style="line-height:17px;">
<span class="marker-icon index-marker-icon" data-bind="text: $index() + 2"></span>
<a data-bind="text: $data, attr: { href: 'http://google.com/search?q=' + $data }" target="_blank"></a>
</li>
<!-- /ko -->
<li class="has-icon">
many others …
</li>
</ul>
</div>
<div class="index-map">
<img src="images/map-of-the-world.png" style="width: 100%;"/>
<div class="index-images-container">
<div class="index-next-trip-name" data-bind="dxAction: nextTrip().summaryAction">
<span data-bind="text: nextTrip().location"></span>
<br />
<span data-bind="text: nextTrip().dates"></span>
</div>
<img class="index-next-trip-image" src="images/index-new-york.jpg"/>
<div class="index-suggested-trips">Suggested Trips</div>
<div class="index-hot-deals-images">
<img src="images/paris.jpg" />
<img src="images/praga.jpg" />
<img src="images/sarasotaflorida.jpg" />
</div>
</div>
</div>
</div>
<div class="index-bottom-wrapper ">
<div class="index-bottom-bevel"></div>
<div class="index-bottom-grid">
<!-- row 1 -->
<div class="index-bottom-cell-title">
<h2 class="lighter gray-create-icon">Create A Trip</h2>
</div>
<!-- row 2 -->
<div class="index-bottom-cell-caption index-bottom-new-line">
From
</div>
<div class="index-bottom-cell-caption">
Destination
</div>
<!-- row 3 -->
<div class="index-bottom-cell-label index-bottom-new-line flight-icon">
</div>
<div class="index-bottom-cell-editor">
<input type="text" placeholder="Type here..." />
</div>
<div class="index-bottom-cell-label flight-return-icon">
</div>
<div class="index-bottom-cell-editor">
<input type="text" placeholder="Type here..." />
</div>
<div class="index-bottom-cell-editor">
<div class="index-find-deal-button" onclick="DXTravel.notImplemented()"></div>
</div>
<!-- row 4 -->
<div class="index-bottom-cell-label index-bottom-new-line">
Date
</div>
<div class="index-bottom-cell-editor">
<input type="date" data-bind="value: Globalize.format(new Date(), 'yyyy-MM-dd')" />
</div>
<div class="index-bottom-cell-label">
Date
</div>
<div class="index-bottom-cell-editor">
<input type="date" />
</div>
</div>
</div>
</div>
</div>