Skip to content

Instantly share code, notes, and snippets.

@aasumitro

aasumitro/custom-tabs.html

Created August 5, 2019 15:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aasumitro/5c01e30cf72f1df6075ac6a0af16d879 to your computer and use it in GitHub Desktop.
Save aasumitro/5c01e30cf72f1df6075ac6a0af16d879 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
custom-tabs.html
<!-- Start contain wrapp -->
<div class="contain-wrapp padding-bot30">
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- Start Tabs -->
<div class="custom-tabs tabs-icon">
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first2" data-toggle="tab">
<i class="fa fa-plane"></i>
Filght ticket
</a>
</li>
<li>
<a href="#second2" data-toggle="tab">
<i class="fa fa-hotel"></i>
Find hotel
</a>
</li>
<li>
<a href="#third2" data-toggle="tab">
<i class="fa fa-train"></i>
Train ticket
</a>
</li>
<li>
<a href="#fourth2" data-toggle="tab">
<i class="fa fa-map"></i>
Find destination
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="first2">
<form class="custom-form white-form marginbot-clear">
<div class="row">
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>1. Flight Destination</h5>
</div>
<div class="col-md-12 marginbot5">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>From</option>
<optgroup label="INDONESIA">
<option value="bali">Bali/Denpasar</option>
<option value="jak">Jakarta</option>
<option value="mak">Makassar</option>
<option value="med">Medan</option>
<option value="sur">Surabaya</option>
<option value="yog">Yogyakarta</option>
</optgroup>
<optgroup label="SINGAPORE">
<option value="sing">Singapore</option>
</optgroup>
<optgroup label="MALAYSIA">
<option value="johor">Johor Bahru</option>
<option value="kota">Kota Kinabalu</option>
<option value="kuala">Kuala Lumpur</option>
<option value="kuch">Kuching</option>
<option value="pen">Penang</option>
</optgroup>
<optgroup label="THAILAND">
<option value="bang">Bangkok</option>
<option value="hat">Hat Yai</option>
<option value="phu">Phuket</option>
</optgroup>
<optgroup label="AUSTRALIA">
<option value="mel">Melbourne</option>
<option value="per">Perth</option>
</optgroup>
</select>
</div>
<div class="col-md-12 text-center marginbot5">
<i class="fa fa-long-arrow-up fa-2x primary"></i>
<i class="fa fa-long-arrow-down fa-2x primary"></i>
</div>
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>To</option>
<optgroup label="INDONESIA">
<option value="bali">Bali/Denpasar</option>
<option value="jak">Jakarta</option>
<option value="mak">Makassar</option>
<option value="med">Medan</option>
<option value="sur">Surabaya</option>
<option value="yog">Yogyakarta</option>
</optgroup>
<optgroup label="SINGAPORE">
<option value="sing">Singapore</option>
</optgroup>
<optgroup label="MALAYSIA">
<option value="johor">Johor Bahru</option>
<option value="kota">Kota Kinabalu</option>
<option value="kuala">Kuala Lumpur</option>
<option value="kuch">Kuching</option>
<option value="pen">Penang</option>
</optgroup>
<optgroup label="THAILAND">
<option value="bang">Bangkok</option>
<option value="hat">Hat Yai</option>
<option value="phu">Phuket</option>
</optgroup>
<optgroup label="AUSTRALIA">
<option value="mel">Melbourne</option>
<option value="per">Perth</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>2. Date of Flight</h5>
</div>
<div class="col-md-12 marginbot30">
<input type="text" class="form-control default_datetimepicker" placeholder="Departure" />
</div>
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="a1">One-way</option>
<option value="a1">Return</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>3. Search Flights</h5>
</div>
<div class="col-md-4 marginbot30">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Adult</option>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
<option value="a5">5</option>
<option value="a6">6</option>
</select>
</div>
<div class="col-md-4 marginbot30">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Child</option>
<option value="ch1">1</option>
<option value="ch2">2</option>
<option value="ch3">3</option>
<option value="ch4">4</option>
<option value="ch5">5</option>
<option value="ch6">6</option>
</select>
</div>
<div class="col-md-4 marginbot30">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Infant</option>
<option value="in1">1</option>
<option value="in2">2</option>
<option value="in2">3</option>
<option value="in4">4</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Choose seat class</option>
<option value="eco">Economy</option>
<option value="buss">Business</option>
<option value="exe">Executive</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 marginbot10">
<button class="btn btn-default btn-lg btn-3d btn-icon-right icon-divider" type="submit">
Search Flights <i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="second2">
<form class="custom-form white-form marginbot-clear">
<div class="row">
<div class="col-md-8 col-sm-7">
<div class="row">
<div class="col-md-12">
<h5>1. Destination/Hotel Name</h5>
</div>
<div class="col-md-12 marginbot30">
<input type="text" class="form-control" placeholder="Find city, hotel, or place to go" />
</div>
<div class="col-md-12">
<h5>2. Duration of Stay</h5>
</div>
<div class="col-md-4 marginbot10">
<label>Check-in:</label>
<input type="text" class="form-control default_datetimepicker" placeholder="Check-in date" />
</div>
<div class="col-md-4 marginbot10">
<label>Durations:</label>
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="1night">1 night</option>
<option value="2night">2 night</option>
<option value="3night">3 night</option>
<option value="4night">4 night</option>
<option value="5night">5 night</option>
<option value="6night">6 night</option>
<option value="7night">7 night</option>
<option value="8night">8 night</option>
<option value="9night">9 night</option>
<option value="10night">10 night</option>
<option value="11night">11 night</option>
<option value="12night">12 night</option>
<option value="13night">13 night</option>
<option value="14night">14 night</option>
<option value="15night">15 night</option>
</select>
</div>
<div class="col-md-4 marginbot10">
<label>Check-out:</label>
<input type="text" class="form-control default_datetimepicker" placeholder="Check-out date" />
</div>
</div>
</div>
<div class="col-md-4 col-sm-5">
<div class="row">
<div class="col-md-12">
<h5>3. Search hotels</h5>
</div>
<div class="col-md-6 marginbot30">
<label>Guest</label>
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="gue1">1</option>
<option value="gue2">2</option>
<option value="gue3">3</option>
<option value="gue4">4</option>
<option value="gue5">5</option>
<option value="gue6">6</option>
<option value="gue7">7</option>
<option value="gue8">8</option>
<option value="gue9">9</option>
<option value="gue10">10</option>
<option value="gue11">11</option>
<option value="gue12">12</option>
<option value="gue13">13</option>
<option value="gue14">14</option>
</select>
</div>
<div class="col-md-6 marginbot30">
<label>Rooms</label>
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="rm1">1</option>
<option value="rm2">2</option>
<option value="rm3">3</option>
<option value="rm4">4</option>
<option value="rm5">5</option>
<option value="rm6">6</option>
<option value="rm7">7</option>
<option value="rm8">8</option>
</select>
</div>
<div class="col-md-12 marginbot10">
<button class="btn btn-default btn-lg btn-3d btn-icon-right icon-divider" type="submit">
Search Hotels <i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="third2">
<form class="custom-form white-form marginbot-clear">
<div class="row">
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>1. Train Destination</h5>
</div>
<div class="col-md-12 marginbot5">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>From</option>
<optgroup label="INDONESIA">
<option value="bali">Bali/Denpasar</option>
<option value="jak">Jakarta</option>
<option value="mak">Makassar</option>
<option value="med">Medan</option>
<option value="sur">Surabaya</option>
<option value="yog">Yogyakarta</option>
</optgroup>
<optgroup label="SINGAPORE">
<option value="sing">Singapore</option>
</optgroup>
<optgroup label="MALAYSIA">
<option value="johor">Johor Bahru</option>
<option value="kota">Kota Kinabalu</option>
<option value="kuala">Kuala Lumpur</option>
<option value="kuch">Kuching</option>
<option value="pen">Penang</option>
</optgroup>
<optgroup label="THAILAND">
<option value="bang">Bangkok</option>
<option value="hat">Hat Yai</option>
<option value="phu">Phuket</option>
</optgroup>
<optgroup label="AUSTRALIA">
<option value="mel">Melbourne</option>
<option value="per">Perth</option>
</optgroup>
</select>
</div>
<div class="col-md-12 text-center marginbot5">
<i class="fa fa-long-arrow-up fa-2x primary"></i>
<i class="fa fa-long-arrow-down fa-2x primary"></i>
</div>
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>To</option>
<optgroup label="INDONESIA">
<option value="bali">Bali/Denpasar</option>
<option value="jak">Jakarta</option>
<option value="mak">Makassar</option>
<option value="med">Medan</option>
<option value="sur">Surabaya</option>
<option value="yog">Yogyakarta</option>
</optgroup>
<optgroup label="SINGAPORE">
<option value="sing">Singapore</option>
</optgroup>
<optgroup label="MALAYSIA">
<option value="johor">Johor Bahru</option>
<option value="kota">Kota Kinabalu</option>
<option value="kuala">Kuala Lumpur</option>
<option value="kuch">Kuching</option>
<option value="pen">Penang</option>
</optgroup>
<optgroup label="THAILAND">
<option value="bang">Bangkok</option>
<option value="hat">Hat Yai</option>
<option value="phu">Phuket</option>
</optgroup>
<optgroup label="AUSTRALIA">
<option value="mel">Melbourne</option>
<option value="per">Perth</option>
</optgroup>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>2. Date of Travel</h5>
</div>
<div class="col-md-12 marginbot30">
<input type="text" class="form-control default_datetimepicker" placeholder="Departure" />
</div>
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option value="a1">One-way</option>
<option value="a1">Return</option>
</select>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 marginbot30">
<div class="row">
<div class="col-md-12">
<h5>3. Search Train</h5>
</div>
<div class="col-md-6 marginbot30">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Adult</option>
<option value="a1">1</option>
<option value="a2">2</option>
<option value="a3">3</option>
<option value="a4">4</option>
<option value="a5">5</option>
<option value="a6">6</option>
</select>
</div>
<div class="col-md-6 marginbot30">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Infant</option>
<option value="in1">1</option>
<option value="in2">2</option>
<option value="in2">3</option>
<option value="in4">4</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-12">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Choose seat class</option>
<option value="eco">Economy</option>
<option value="buss">Business</option>
<option value="exe">Executive</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 marginbot10">
<button class="btn btn-default btn-lg btn-3d btn-icon-right icon-divider" type="submit">
Search Flights <i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="fourth2">
<form class="custom-form white-form marginbot-clear">
<div class="row">
<div class="col-md-12">
<h5>1. Search Destinations</h5>
</div>
<div class="col-md-5 col-sm-5 marginbot10">
<input type="text" class="form-control" placeholder="Find city, hotel, or place to go" />
</div>
<div class="col-md-4 col-sm-4 marginbot10">
<select class="form-control" data-jcf='{"wrapNative": false, "wrapNativeOnMobile": false}'>
<option>Choose categories</option>
<option value="adv">Adventure</option>
<option value="cul">Culture</option>
<option value="bea">Beach</option>
<option value="vil">Village</option>
<option value="mou">Mountain</option>
<option value="tem">Temple</option>
<option value="res">Restaurant</option>
<option value="bet">Baths</option>
</select>
</div>
<div class="col-md-3 col-sm-3 marginbot10">
<button class="btn btn-default btn-lg btn-3d btn-icon-right icon-divider btn-block" type="submit">
Search <i class="fa fa-search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- End Tabs -->
</div>
</div>
</div>
</div>
<!-- End contain wrapp -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment