Organisms
Availability
Availability and Pricing
1 Bedroom
Ask for price
Area from 441 sqft
| 1 Bedroom | Ask for price | Area from 441 sqft |
| Type | Bed | Baths | SQFT | Actions |
|---|---|---|---|---|
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 |
1 Bedroom
Ask for price
Area from 441 sqft
| 1 Bedroom | Ask for price | Area from 441 sqft |
| Type | Bed | Baths | SQFT | Actions |
|---|---|---|---|---|
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 |
1 Bedroom
Ask for price
Area from 441 sqft
| 1 Bedroom | Ask for price | Area from 441 sqft |
| Type | Bed | Baths | SQFT | Actions |
|---|---|---|---|---|
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 | |
| Unit 142 | 5 | 6 | 1114 |
<div class="availability-description">
<h4 class="brand-alt6"><strong>Availability and Pricing</strong></h4>
<hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<table width="100%">
<tr>
<td>1 Bedroom</td>
<td><a href="#">Ask for price</a></td>
<td>Area from 441 sqft</td>
</tr>
</table>
</div>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Bed</th>
<th>Baths</th>
<th>SQFT</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<table width="100%">
<tr>
<td>1 Bedroom</td>
<td><a href="#">Ask for price</a></td>
<td>Area from 441 sqft</td>
</tr>
</table>
</div>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Bed</th>
<th>Baths</th>
<th>SQFT</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<div class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<table width="100%">
<tr>
<td>1 Bedroom</td>
<td><a href="#">Ask for price</a></td>
<td>Area from 441 sqft</td>
</tr>
</table>
</div>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Type</th>
<th>Bed</th>
<th>Baths</th>
<th>SQFT</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
<tr>
<td>Unit 142</td>
<td>5</td>
<td>6</td>
<td>1114</td>
<td>
<button type="button" class="btn btn-alt5-secondary">View Floorplan</button>
<button type="button" class="btn btn-alt5-secondary">Add to compare</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>Cards Slideshow
<div class="container" ng-controller="CardController">
<div class="row">
<owl-carousel id="owl-example" class="owl-carousel" option="owlOptions">
<div class="owl-card-wrapper" owl-carousel-item ng-repeat="($index, listing) in listings">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<div class="cards-price-section">
From: S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 - 3<i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">1 - 3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
</owl-carousel>
</div>
</div>Comparison Table
Table Heading 2 |
Table Heading 3 |
|
|---|---|---|
Table Footer 2 |
Table Footer 3 |
|
| Table Cell 1 | ||
| Table Cell 1 | ||
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 |
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center brand-alt1-bg"></th>
<th class="text-center brand-alt1-bg white-color">
<h5>Table Heading 2</h5>
</th>
<th class="text-center brand-alt1-bg white-color">
<h5>Table Heading 3</h5>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center brand-alt1-bg"></th>
<th class="text-center brand-alt1-bg white-color">
<h5>Table Footer 2</h5>
</th>
<th class="text-center brand-alt1-bg white-color">
<h5>Table Footer 3</h5>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="text-center"><strong>Table Cell 1</strong></td>
<td class="text-center brand-alt3-color"><span class="glyphicon glyphicon-check check"></span></td>
<td class="text-center brand-alt3-color"><span class="glyphicon glyphicon-check check"></span></td>
</tr>
<tr>
<td class="text-center"><strong>Table Cell 1</strong></td>
<td class="text-center brand-alt3-color"><span class="glyphicon glyphicon-check check"></span></td>
<td class="text-center brand-alt3-color"><span class="glyphicon glyphicon-check check"></span></td>
</tr>
<tr>
<td class="text-center"><strong>Table Cell 1</strong></td>
<td class="text-center">Table Cell 2</td>
<td class="text-center">Table Cell 3</td>
</tr>
<tr>
<td class="text-center"><strong>Table Cell 1</strong></td>
<td class="text-center">Table Cell 2</td>
<td class="text-center">Table Cell 3</td>
</tr>
</tbody>
</table>
</div>Description Panel
Type
Condominium
TOP
-
Tenure
999 Years
Bed
3
Built-In
1,590
Built-In
1,590
Built-In
1,590
Built-In
1,590
<div class="description-panel">
<div class="row">
<div class="col-xs-4"><strong>Type</strong></div>
<div class="col-xs-8 text-right">Condominium</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>TOP</strong></div>
<div class="col-xs-8 text-right">-</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Tenure</strong></div>
<div class="col-xs-8 text-right">999 Years</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Bed</strong></div>
<div class="col-xs-8 text-right">3</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Built-In</strong></div>
<div class="col-xs-8 text-right">1,590</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Built-In</strong></div>
<div class="col-xs-8 text-right">1,590</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Built-In</strong></div>
<div class="col-xs-8 text-right">1,590</div>
</div>
<div class="row">
<div class="col-xs-4"><strong>Built-In</strong></div>
<div class="col-xs-8 text-right">1,590</div>
</div>
</div>Form
<!--<form action="">
<div>
<label for="textInput">Text input</label>
<input type="text" id="textInput" /> </div>
</form>-->
<form class="long-contact-form">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Long Contact Form (2 column)</h1>
</div>
</div>
<div class="long-contact-form-container">
<div class="row">
<div class="col-md-6 col-sm-12 contact-form-left">
<label>Input 01</label>
<input type="text" class="form-control">
<label>Input 02</label>
<input type="text" class="form-control">
<label>Input 03</label>
<input type="text" class="form-control">
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Input 04</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-sm-12">
<label>Input 05</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<label>Input 05</label>
<textarea rows="10" cols="2" class="form-control">
</textarea>
</div>
</div>
<div class="row">
<div class="col-md-12 contact-submit">
<hr>
<button type="button" class="btn btn-alt5 btn-lg">Submit</button>
</div>
</div>
</div>
</div>
</form>
<form class="long-contact-form">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Long Contact Form (1 column)</h1>
</div>
</div>
<div class="long-contact-form-container">
<div class="row">
<div class="col-md-12 col-sm-12">
<label>Input 01</label>
<input type="text" class="form-control">
<label>Input 02</label>
<input type="text" class="form-control">
<label>Input 03</label>
<input type="text" class="form-control">
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Input 04</label>
<input type="text" class="form-control">
</div>
<div class="col-md-6 col-sm-12">
<label>Input 05</label>
<input type="text" class="form-control">
</div>
</div>
<label>Input 05</label>
<textarea rows="10" cols="2" class="form-control">
</textarea>
<div class="option-container">
<div class="row">
<div class="col-md-12">
<input type="radio" name="options" value="option1"> <strong>Option 1</strong>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 contact-submit">
<hr>
<button type="button" class="btn btn-alt5 btn-lg">Submit</button>
</div>
</div>
</div>
</div>
</form>Listing Description
15C Tanjong Pagar Road, D2
Condominium
Singapore 88438
S$3,300,000
<div class="listing-description">
<div class="row">
<div class="col-md-9 col-sm-12">
<h3>15C Tanjong Pagar Road, D2<br>Condominium</h3>
<p>Singapore 88438</p>
<h3><strong>S$3,300,000</strong></h3>
</div>
<div class="col-md-3 col-sm-12 listing-badge text-right">
<img src="https://s3-ap-southeast-1.amazonaws.com/truuue/static/images/hilite-badge-1.png" alt="hilite-listing-badge" width="120">
</div>
</div>
<div class="row">
<div class="col-xs-12 text-right">
<button type="button" class="btn btn-alt5-secondary"><span class="fa fa-heart-o"></span> Shortlist</button>
<button type="button" class="btn btn-alt5-secondary"><span class="fa fa-share-alt"></span> Share</button>
</div>
</div>
</div>Page Section
On going Offers
Secure these property deals before it's too late!
<div class="page-section">
<div class="container">
<div class="row page-section-header">
<div class="col-xs-12">
<h2 class="text-center">On going Offers</h2>
<p class="text-center">Secure these property deals before it's too late!</p>
</div>
</div>
<div class="row page-section-body">
<div class="container" ng-controller="CardController">
<div class="row">
<owl-carousel id="owl-example" class="owl-carousel" option="owlOptions">
<div class="owl-card-wrapper" owl-carousel-item ng-repeat="($index, listing) in listings">
<a class="cards" href="#">
<div class="cards-header">
<div class="cards-header-picture" style="background-image:url('https://placehold.it/230x200')">
<div class="cards-price-section">
From: S$ 1,970,000
</div>
</div>
</div>
<div class="cards-body">
<div class="cards-title-section">
<div class="title">Lorem ipsum dolor sit amet ad...</div>
<div class="h-card-action">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<div class="subtitle"> <i class="icon-map-pin"></i> 28 Race Course Lane • D28</div>
</div>
<div class="cards-feature-section">
<div class="feature">
<span class="value">1 - 3<i class="icon-room-bed"></i></span>
</div>
<div class="feature">
<span class="value">1 - 3 <i class="icon-bath"></i></span>
</div>
<div class="feature">
<span class="value">450 <i class="icon-unit-area"></i></span>
</div>
</div>
</div>
</a>
</div>
</owl-carousel>
</div>
</div>
</div>
<div class="row page-section-footer">
<div class="col-xs-12 text-center">
<button class="btn btn-alt2">More Ongoing Offers</button>
</div>
</div>
</div>
</div>Timer
<div ng-controller="TimerController">
<count-down endtime="endtime"></count-down>
</div>