<!
DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Theme Starz">
<link href="assets/fonts/font-awesome-4.0.3/css/font-awesome.min.css" rel="s
tylesheet" type="text/css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css" type="text/
css">
<link rel="stylesheet" href="assets/css/owl.carousel.css" type="text/css">
<link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
<!--<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css">
-->
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<title>Condio - Real Estate HTML Landing Page</title>
</head>
<body data-spy="scroll" data-target=".navigation" data-offset="90">
<!-- Wrapper -->
<section id="home"></section>
<div class="wrapper">
<div class="navigation fixed">
<div class="container">
<header class="navbar" id="top" role="banner">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="col
lapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand nav" id="brand">
<a href="index.html"><img src="assets/img/logo.png" alt=
"brand"></a>
</div>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse navbar-r
ight" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#features">Why Condio</a></li>
<li><a href="#features-boxes">Features</a></li>
<li><a href="#footer">Contact</a></li>
</ul>
</nav><!-- /.navbar collapse-->
</header><!-- /.navbar -->
</div><!-- /.container -->
</div><!-- /.navigation -->
<section id="slider">
<div class="flexslider loading">
<div id="loading-icon"><i class="fa fa-cog fa-spin"></i></div>
<ul class="slides">
<li class="slide"><img src="assets/img/slide-01.jpg" alt=""></li
>
<li class="slide"><img src="assets/img/slide-02.jpg" alt=""></li
>
<li class="slide"><img src="assets/img/slide-03.jpg" alt=""></li
>
</ul><!-- /.slides -->
</div><!-- /.flexslider -->
<div class="slider-banner">
<div class="container">
<div class="row">
<div class="col-md-8 col-sm-8">
<div class="title">
<h2>Final inspection just started!</h2>
<figure class="subtitle">Subscribe and get notified
about new condos for you</figure>
<i class="fa fa-arrow-circle-o-right"></i>
</div><!-- /.title -->
</div><!-- /.col-md-8 -->
<div class="col-md-4 col-sm-4">
<div class="form-slider-wrapper">
<header>
<h3>Welcome to your</h3>
<h1>New Living!</h1>
</header>
<hr>
<form role="form" id="form-slider">
<div class="form-group">
<label for="name">Your Name<em>*</em></label
>
<input type="text" class="form-control" id="
name" name="name" required>
</div><!-- /.form-group -->
<div class="form-group">
<label for="email">Your Email<em>*</em></lab
el>
<input type="email" class="form-control" id=
"email" name="email" required>
</div><!-- /.form-group -->
<div class="form-group">
<label for="phone">Your Phone<em>*</em></lab
el>
<input type="text" class="form-control" id="
phone" name="phone" required>
</div><!-- /.form-group -->
<div class="form-group">
<div id="form-slider-status"></div>
<button type="submit" id="form-slider-submit
" class="btn btn-default">Get Notified!</button>
</div><!-- /.form-group -->
</form><!-- /#form-slider -->
<figure>*Required Fields</figure>
</div><!-- /.form-slider-wrapper -->
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</div><!-- /.slider-banner -->
</section><!-- /#slider -->
<section id="features" class="block">
<div class="container">
<header><h3>Why to Live in Condio?</h3></header>
<div class="row">
<div class="col-md-4 col-sm-4">
<ul class="features-list">
<li>Living inside a nature</li>
<li>Underground parking</li>
<li>Easy access for all</li>
<li>Non-stop security</li>
<li>Spacious Apartments</li>
</ul><!-- /.features-list -->
</div><!-- /.col-md-8 -->
<div class="col-md-8 col-sm-8">
<div class="image-carousel">
<div class="image-carousel-slide">
<div class="row">
<div class="col-md-5 col-sm-5">
<a href="assets/img/box-image-02.jpg" class=
"image-popup">
<img src="assets/img/features-slide-01.j
pg" alt="">
</a>
</div>
<div class="col-md-7 col-sm-7">
<h4>Nullam in nisl vitae elit sollicitudin b
ibendum in quis magna. Integer commodo velit nec orci</h4>
<p>Nullam in nisl vitae elit sollicitudin bi
bendum in quis magna. Integer commodo velit nec orci aliquam congue.
Pellentesque euismod ac erat et dapibus.
</p>
<a href="assets/img/box-image-02.jpg" class=
"btn btn-framed image-popup">Zoom Picture <span class="fa fa-search-plus"></span
></a>
</div>
</div><!-- /.row -->
</div><!-- /.image-carousel-slide -->
<div class="image-carousel-slide">
<div class="row">
<div class="col-md-5 col-sm-5">
<a href="http://vimeo.com/24506451" class="v
ideo-popup">
<img src="assets/img/features-slide-02.j
pg" alt="">
</a>
</div>
<div class="col-md-7 col-sm-7">
<h4>Nullam in nisl vitae elit sollicitudin b
ibendum in quis magna. Integer commodo velit nec orci</h4>
<p>Nullam in nisl vitae elit sollicitudin bi
bendum in quis magna. Integer commodo velit nec orci aliquam congue.
Pellentesque euismod ac erat et dapibus.
</p>
<a href="http://vimeo.com/24506451" class="b
tn btn-framed video-popup">Play Video <span class="fa fa-search-plus"></span></a
>
</div>
</div><!-- /.row -->
</div><!-- /.image-carousel-slide -->
<div class="image-carousel-slide">
<a href="assets/img/box-image-02.jpg" class="image-p
opup">
<img src="assets/img/features-slide-03.jpg" alt=
"">
</a>
</div>
</div><!-- /.image-carousel -->
</div><!-- /.col-md-8 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#features .block -->
<section id="features-boxes" class="block background-color-grey-light">
<div class="container">
<header><h3>Our Features</h3></header>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="feature-box">
<header>
<img src="assets/img/icon-01.png" alt="">
<h4>Nature All Around You</h4>
</header>
<p>Fresh air, singing birds during the day and peaceful
silence during the night.
Let your life surrounds by the nature.
</p>
</div><!-- /.feature-box -->
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-4">
<div class="feature-box">
<header>
<img src="assets/img/icon-02.png" alt="">
<h4>Get Free Parking Place</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing el
it. Suspendisse faucibus,
risus sit amet auctor sodales, justo erat tempor ero
s, non
</p>
</div><!-- /.feature-box -->
</div><!-- /.col-md-4 -->
<div class="col-md-4 col-sm-4">
<div class="feature-box">
<header>
<img src="assets/img/icon-03.png" alt="">
<h4>You Are Safe. 24/7 Security</h4>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing el
it. Suspendisse faucibus,
risus sit amet auctor sodales, justo erat tempor ero
s, non
</p>
</div><!-- /.feature-box -->
</div><!-- /.col-md-4 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#features-boxes .block -->
<section id="boxes" class="block background-color-grey-light">
<div class="container">
<div class="box">
<div class="image width-50 pull-left">
<img src="assets/img/box-image-01.jpg" class="top-50" alt=""
>
</div>
<div class="description width-50">
<div class="description-wrapper">
<header><h3>Plenty of Room For Everyone <br> Even For Yo
ur Car</h3></header>
<p>We understand your privacy. Every person should have
his own space where he can live his own private live.
Even the smallest apartments are big and space enoug
h to feel comfortable.
And we think that your car deserves the same in the
garage.</p>
<a href="#home" class="btn roll">Be the first to know!</
a>
</div>
</div><!-- /.description -->
</div><!-- /.box -->
<div class="box">
<div class="description width-30 pull-left">
<div class="description-wrapper top-180">
<header><h3>Spectacular Views</h3></header>
<p>Start your day by enjoying the unforgettable view fro
m your home.
Open the window and smell the fresh air of the pure
nature.</p>
<a href="#home" class="btn roll">Be the first to know!</
a>
</div>
</div><!-- /.description -->
<div class="image width-70">
<img src="assets/img/box-image-02.jpg" alt="">
</div>
</div><!-- /.box -->
<section class="video">
<iframe src="//player.vimeo.com/video/34741214?title=0&bylin
e=0&portrait=0&color=ffffff" width="500" height="281" frameborder="0" we
bkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</section>
<div class="box with-empty-space">
<div class="width-40 pull-left">
<div class="empty-space"></div>
</div>
<div class="description width-60">
<div class="description-wrapper">
<header><h3>Plenty of Room For Everyone <br> Even For Yo
ur Car</h3></header>
<p>We understand your privacy. Every person should have
his own space where he can live his own private live.
Even the smallest apartments are big and space enoug
h to feel comfortable.
And we think that your car deserves the same in the
garage.</p>
<a href="#home" class="btn roll">Be the first to know!</
a>
</div>
</div><!-- /.description -->
</div><!-- /.box -->
</div><!-- /.container -->
</section><!-- /#boxes -->
<section id="properties" class="block">
<div class="container">
<header><h3>Available Apartments</h3></header>
<div class="row">
<div class="col-md-3 col-sm-3">
<div class="property-wrapper">
<div class="property">
<a href="assets/img/box-image-02.jpg" class="image-p
opup">
<div class="image-wrapper">
<img src="assets/img/property-01.jpg" alt=""
>
</div>
</a>
<header><h4>A3</h4></header>
<div class="description">
<dl>
<dt>Floor No.:</dt>
<dd>2</dd>
<dt>Rooms:</dt>
<dd>3</dd>
<dt>Area:</dt>
<dd>98 m<sup>2</sup></dd>
<dt>Price:</dt>
<dd><strong>$89,900</strong></dd>
</dl>
</div><!-- /.description -->
</div><!-- /.property -->
</div><!-- /.property-wrapper -->
</div><!-- /.col-md-3 -->
<div class="col-md-3 col-sm-3">
<div class="property-wrapper">
<div class="property">
<a href="assets/img/box-image-02.jpg" class="image-p
opup">
<div class="image-wrapper">
<img src="assets/img/property-02.jpg" alt=""
>
</div>
</a>
<header><h4>A4</h4></header>
<div class="description">
<dl>
<dt>Floor No.:</dt>
<dd>4</dd>
<dt>Rooms:</dt>
<dd>2</dd>
<dt>Area:</dt>
<dd>56 m<sup>2</sup></dd>
<dt>Price:</dt>
<dd><strong>$186,300</strong></dd>
</dl>
</div><!-- /.description -->
</div><!-- /.property -->
</div><!-- /.property-wrapper -->
</div><!-- /.col-md-3 -->
<div class="col-md-3 col-sm-3">
<div class="property-wrapper">
<div class="property">
<a href="assets/img/box-image-02.jpg" class="image-p
opup">
<div class="image-wrapper">
<img src="assets/img/property-03.jpg" alt=""
>
</div>
</a>
<header><h4>B2</h4></header>
<div class="description">
<dl>
<dt>Floor No.:</dt>
<dd>6</dd>
<dt>Rooms:</dt>
<dd>5</dd>
<dt>Area:</dt>
<dd>220 m<sup>2</sup></dd>
<dt>Price:</dt>
<dd><strong>$200,000</strong></dd>
</dl>
</div><!-- /.description -->
</div><!-- /.property -->
</div><!-- /.property-wrapper -->
</div><!-- /.col-md-3 -->
<div class="col-md-3 col-sm-3">
<div class="property-wrapper">
<div class="property">
<a href="assets/img/box-image-02.jpg" class="image-p
opup">
<div class="image-wrapper">
<img src="assets/img/property-04.jpg" alt=""
>
</div>
</a>
<header><h4>B5</h4></header>
<div class="description">
<dl>
<dt>Floor No.:</dt>
<dd>3</dd>
<dt>Rooms:</dt>
<dd>2</dd>
<dt>Area:</dt>
<dd>52 m<sup>2</sup></dd>
<dt>Price:</dt>
<dd><strong>$69,000</strong></dd>
</dl>
</div><!-- /.description -->
</div><!-- /.property -->
</div><!-- /.property-wrapper -->
</div><!-- /.col-md-3 -->
</div><!-- /.row -->
</div><!-- /.container -->
</section><!-- /#properties -->
<section id="testimonials" class="block">
<div class="container">
<header class="section-title"><h3>Testimonials</h3></header>
<div class="owl-carousel testimonials-carousel">
<blockquote class="testimonial">
<figure>
<div class="image">
<img alt="" src="assets/img/client-01.jpg">
</div>
</figure>
<aside class="cite">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing el
it. In orci justo, commodo non ante molestie, rhoncus tincidunt neque.</p>
<footer>John Doe</footer>
</aside>
</blockquote>
<blockquote class="testimonial">
<figure>
<div class="image">
<img alt="" src="assets/img/client-02.jpg">
</div>
</figure>
<aside class="cite">
<p>Fusce risus metus, placerat in consectetur eu, portti
tor a est sed sed dolor lorem cras adipiscing</p>
<footer>Natalie Jenkins</footer>
</aside>
</blockquote>
</div><!-- /.testimonials-carousel -->
</div><!-- /.container -->
</section><!-- /#testimonials -->
<hr>
<section id="logos" class="block">
<div class="container">
<header><h3>Our Other Successful Projects</h3></header>
<div class="logos">
<div class="logo"><a href=""><img src="assets/img/logo-partner-0
1.png" alt=""></a></div>
<div class="logo"><a href=""><img src="assets/img/logo-partner-0
2.png" alt=""></a></div>
<div class="logo"><a href=""><img src="assets/img/logo-partner-0
3.png" alt=""></a></div>
<div class="logo"><a href=""><img src="assets/img/logo-partner-0
4.png" alt=""></a></div>
<div class="logo"><a href=""><img src="assets/img/logo-partner-0
5.png" alt=""></a></div>
</div><!-- /.logos -->
</div><!-- /.container -->
</section><!-- /#logos -->
<section id="contact" class="block background-color-grey-dark has-dark-backg
round">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<header><h3>Our Agent</h3></header>
<section class="agent">
<div class="agent-id">
<img src="assets/img/agent.jpg" alt="">
<div class="agent-wrapper">
<h4>John Doe</h4>
<p>Aliquam sit amet augue non arcu mollis suscip
it. Quisque scelerisque</p>
</div>
</div>
<div class="agent-contact">
<div><strong>Phone:</strong> (123) 456 789 000</div>
<div><strong>E-mail:</strong> <a href="#">john.doe@e
xample.com</a></div>
<div><strong>Skype:</strong> John Doe</div>
</div>
</section>
</div>
<div class="col-md-8 col-sm-8">
<header><h3>Contact Form</h3></header>
<form role="form" id="form-contact" method="post" action="">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="contact-form-name">Your Name<em>
*</em></label>
<input type="text" class="form-control" id="
contact-form-name" name="contact-form-name" required>
</div><!-- /.form-group -->
</div><!-- /.col-md-6 -->
<div class="col-md-6">
<div class="form-group">
<label for="contact-form-email">Your Email<e
m>*</em></label>
<input type="email" class="form-control" id=
"contact-form-email" name="contact-form-email" required>
</div><!-- /.form-group -->
</div><!-- /.col-md-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="contact-form-message">Your Messa
ge<em>*</em></label>
<textarea class="form-control" id="contact-f
orm-message" rows="6" name="contact-form-message" required></textarea>
</div><!-- /.form-group -->
</div><!-- /.col-md-12 -->
</div><!-- /.row -->
<div class="form-group">
<button type="submit" class="btn pull-right btn-larg
e" id="form-contact-submit">Send a Message</button>
</div><!-- /.form-group -->
<div id="form-status"></div>
</form><!-- /#form-contact -->
</div>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<figure>(C) ThemeStarz</figure>
</div>
</footer>
</div>
<!-- end Wrapper -->
<script type="text/javascript" src="assets/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="assets/js/jquery-migrate-1.2.1.min.js"></scr
ipt>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></scri
pt>
<script type="text/javascript" src="assets/js/owl.carousel.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.flexslider-min.js"></script
>
<script type="text/javascript" src="assets/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="assets/js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.magnific-popup.min.js"></sc
ript>
<script type="text/javascript" src="assets/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="assets/js/scrollReveal.min.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script>
</body>
