蓝色简洁风格响应式房源交易平台网页模板代码



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

43 171 58



模板描述:响应式房源交易平台。蓝色简洁风格响应式房源交易平台网页模板代码html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/animate.css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css">
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">

2. 引入JS

<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/owl.carousel.js"></script>
<script src="assets/js/jquery.magnific-popup.js"></script>
<script src="assets/js/rangeslider.js"></script>
<script src="assets/js/waypoints.min.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.counterup.min.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

    <!-- preloader begin-->
    <div class="preloader">
        <div class="loader">Loading...</div>
    </div>
    <!-- preloader end -->
    <!-- header begin -->
    <header class="header-area">
        <!-- header top begin -->
        <div class="header-top">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-xl-7 col-lg-12">
                        <div class="support-bar">
                            <ul>
                                <li>
                                    <p><span><i class="fas fa-phone"></i></span>+1 514-286-4242</p>
                                </li>
                                <li>
                                    <p><span><i class="far fa-envelope"></i></span>[email protected]</p>
                                </li>
                                <li>
                                    <p><span><i class="fas fa-question"></i></span>Ask Your Question</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-12">
                        <div class="connect-bar">
                            <div class="social">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                <a href="#"><i class="fab fa-instagram"></i></a>
                            </div>
                            <div class="connect">
                                <a href="#">Login</a>
                                <a href="#">Register</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header top end -->
        <!-- header bottom begin -->
        <div class="header-bottom">
            <div class="container">
                <div class="row d-flex">
                    <div class="col-xl-2 col-lg-2 col-6 d-flex align-items-center">
                        <div class="logo">
                            <a href="index.html"><img src="assets/img/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-6 d-xl-none d-lg-none d-md-block d-sm-block d-block">
                        <button class="menu-button navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
                        </button>
                    </div>
                    <div class="col-xl-8 col-lg-10 col-12 d-flex align-items-center">
                        <nav class="main-menu navbar navbar-expand-lg navbar-light">
                            <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                                <ul class="navbar-nav mt-2 mt-lg-0 justify-content-end">
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="01" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Home <i class="fas fa-angle-down"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="01">
                                            <a class="dropdown-item" href="index.html">Homepage 1</a>
                                            <a class="dropdown-item" href="index-2.html">Homepage 2</a>
                                            <a class="dropdown-item" href="index-3.html">Homepage 3</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="02" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Properties <i class="fas fa-angle-down"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="02">
                                            <a class="dropdown-item" href="property-listing.html">Proprety Listing</a>
                                            <a class="dropdown-item" href="single-property.html">Single Property</a>
                                            <a class="dropdown-item" href="properties-sidebar.html">Property Sidebar</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="03" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Agents <i class="fas fa-angle-down"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="03">
                                            <a class="dropdown-item" href="agent-grid.html">Agent Grid</a>
                                            <a class="dropdown-item" href="agent-details.html">Agent Details</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="04" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Pages <i class="fas fa-angle-down"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="04">
                                            <a class="dropdown-item" href="about.html">About</a>
                                            <a class="dropdown-item" href="gallery.html">Gallery</a>
                                            <a class="dropdown-item" href="privacy-and-policy.html">Privacy Policy</a>
                                            <a class="dropdown-item" href="faq.html">FAQ</a>
                                            <a class="dropdown-item" href="error.html">404</a>
                                        </div>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" href="#" id="05" data-toggle="dropdown" aria-haspopup="true"
                                            aria-expanded="false">
                                            Blog <i class="fas fa-angle-down"></i>
                                        </a>
                                        <div class="dropdown-menu" aria-labelledby="05">
                                            <a class="dropdown-item" href="blog-details.html">Blog Details</a>
                                            <a class="dropdown-item" href="blog-grid.html">Blog Grid</a>
                                            <a class="dropdown-item" href="blog-left-sidebar.html">Blog L-Sidebar</a>
                                            <a class="dropdown-item" href="blog-right-sidebar.html">Blog R-Sidebar</a>
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" href="contact.html">Contact</a>
                                    </li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <div class="col-xl-2 col-lg-2 align-items-center">
                        <div class="submit-button">
                            <a href="#">Submit Property</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- header bottom end -->
    </header>
    <!-- header end -->
    <!-- banner begin -->
    <div class="banner-area">
        <div class="banner-inner">
            <!-- banner carousel begin -->
            <div class="banner-carousel" id="banner-carousel">
                <div class="single-banner-item slider-bg-1">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-8 col-lg-8 col-md-12">
                                <h1>Let us Guide You Home.</h1>
                                <p>Our experienced agents have the knowledge and skills to<br/> guide you to your new home.</p>
                                <a href="#">Talk to an Agent</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="single-banner-item slider-bg-1">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-8 col-lg-8 col-md-12">
                                <h1>Let us Guide You Home.</h1>
                                <p>Our experienced agents have the knowledge and skills to<br/> guide you to your new home.</p>
                                <a href="#">Talk to an Agent</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="single-banner-item slider-bg-1">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-xl-8 col-lg-8 col-md-12">
                                <h1>Let us Guide You Home.</h1>
                                <p>Our experienced agents have the knowledge and skills to<br/> guide you to your new home.</p>
                                <a href="#">Talk to an Agent</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- banner carousel end -->
            <!-- selection board begin -->
            <div class="selection-board">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="select-board">
                                <div class="row">
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Any Location</option>
                                                <option>Any Location</option>
                                                <option>Any Location</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Any Status</option>
                                                <option>Any Status</option>
                                                <option>Any Status</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Any Type</option>
                                                <option>Any Type</option>
                                                <option>Any Type</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Min. Bedrooms</option>
                                                <option>Min. Bedrooms</option>
                                                <option>Min. Bedrooms</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Min Size</option>
                                                <option>Any Location</option>
                                                <option>Any Location</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Max Size</option>
                                                <option>Any Location</option>
                                                <option>Any Location</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Baths</option>
                                                <option>Baths</option>
                                                <option>Baths</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="suitch">
                                            <select>
                                                <option>Stories</option>
                                                <option>Stories</option>
                                                <option>Stories</option>
                                            </select>
                                            <div class="icon">
                                                <i class="fas fa-sort-down"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="price-range-slider">
                                            <div id="result">$0 - $269,000</div>
                                          <div id="my-slider" data-min="0" data-step="1" data-min-value="0" data-max-value="269000" data-max="269000" class="slider">
                                            <div class="slider-touch-left">
                                              <span></span>
                                            </div>
                                            <div class="slider-touch-right">
                                              <span></span>
                                            </div>
                                            <div class="slider-line">
                                              <span></span>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-3 col-lg-3 col-md-6">
                                        <div class="price-range-slider-2">
                                            <div id="result-2">0 SqFt - 2000 SqFt</div>
                                          <div id="my-slider-2" data-min="0" data-step="1" data-min-value="0" data-max-value="2000" data-max="2000" class="slider">
                                            <div class="slider-touch-left">
                                              <span></span>
                                            </div>
                                            <div class="slider-touch-right">
                                              <span></span>
                                            </div>
                                            <div class="slider-line">
                                              <span></span>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                    <div class="col-xl-6 col-lg-6">
                                        <div class="search-button">
                                            <button type="submit">search properties</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- selection board end -->
        </div>
    </div>
    <!-- banner end -->
    <!-- feature begin -->
    <div class="feature-area">
            <div class="container"><div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>How It Works</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered
                            alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-home"></i>
                        </div>
                        <div class="part-text">
                            <h3>Sell Property</h3>
                            <p>There are many variations of passages of Lorem a Ipsum available to but the majority have suffered alteration in some for my believable.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-real-state-seller"></i>
                        </div>
                        <div class="part-text">
                            <h3>Expert Agents</h3>
                            <p>There are many variations of passages of Lorem a Ipsum available to but the majority have suffered alteration in some for my believable.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-list"></i>
                        </div>
                        <div class="part-text">
                            <h3>Daily Listings</h3>
                            <p>There are many variations of passages of Lorem a Ipsum available to but the majority have suffered alteration in some for my believable.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- feature end -->
    <!-- feature properties begin -->
    <div class="feature-properties">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>Featured Properties</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-1.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Villa with Pool for Rent</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-2.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Modern apartment in the city</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-3.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Minimalist and bright flat</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-4.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Two storey modern flat</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-5.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Place perfect for nature lovers</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-property">
                        <div class="part-img">
                            <img src="assets/img/feature-property-6.jpg" alt="">
                            <div class="content-on-img">
                                <div class="cat-list">
                                    <a href="#">For rent</a>
                                    <a href="#">Modern villa</a>
                                </div>
                                <div class="price-n-time">
                                    <h3>$6000<span><i class="far fa-calendar-alt"></i> 4 months</span></h3>
                                </div>
                            </div>
                        </div>
                        <div class="part-details">
                            <div class="title-nd-place">
                                <h4><a href="#">Summer house with a pole</a></h4>
                                <p> Dr. Elbert K. St Claire III, East 65th Street, New York</p>
                            </div>
                            <div class="rent-info">
                                <ul>
                                    <li><span><i class="flaticon-bed"></i></span>5 bed</li>
                                    <li><span><i class="flaticon-bathtub"></i></span>baths</li>
                                    <li><span><i class="flaticon-school-material"></i></span>1300 SqFt</li>
                                </ul>
                            </div>
                            <div class="posted-info">
                                <div class="poster">
                                    <div class="poster-img">
                                        <img src="assets/img/poster-1.jpg" alt="">
                                    </div>
                                    <div class="poster-name">
                                        <h5>John Silver</h5>
                                    </div>
                                </div>
                                <div class="icon">
                                    <a href="#"><i class="fas fa-share-alt"></i></a>
                                    <a href="#"><i class="fas fa-heart"></i></a>
                                    <a href="#"><i class="fas fa-plus-circle"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="container">
                    <div class="col-xl-12 col-lg-12">
                        <div class="load-more-button">
                            <button>Load More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- feature properties end -->
    <!-- testimonial begin -->
    <div class="testimonial-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>Our Clients' Words</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="testimonial-slider">
                    <div class="col-xl-6 col-lg-6">
                        <div class="single-testimonial">
                            <div class="part-text">
                                <div class="icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p>There are many variations of passages of Lorem to Ipsum the available but the majority have suffered to alteration in by injected dummy text.</p>
                            </div>
                            <div class="part-details">
                                <div class="part-img">
                                    <img src="assets/img/poster-1.jpg" alt="">
                                </div>
                                <div class="part-name">
                                    <h3>Jamie Hunt,</h3>
                                    <h4>Creative [email protected]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="single-testimonial">
                            <div class="part-text">
                                <div class="icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p>There are many variations of passages of Lorem to Ipsum the available but the majority have suffered to alteration in by injected dummy text.</p>
                            </div>
                            <div class="part-details">
                                <div class="part-img">
                                    <img src="assets/img/poster-1.jpg" alt="">
                                </div>
                                <div class="part-name">
                                    <h3>Jamie Hunt,</h3>
                                    <h4>Creative [email protected]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="single-testimonial">
                            <div class="part-text">
                                <div class="icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p>There are many variations of passages of Lorem to Ipsum the available but the majority have suffered to alteration in by injected dummy text.</p>
                            </div>
                            <div class="part-details">
                                <div class="part-img">
                                    <img src="assets/img/poster-1.jpg" alt="">
                                </div>
                                <div class="part-name">
                                    <h3>Jamie Hunt,</h3>
                                    <h4>Creative [email protected]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="single-testimonial">
                            <div class="part-text">
                                <div class="icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p>There are many variations of passages of Lorem to Ipsum the available but the majority have suffered to alteration in by injected dummy text.</p>
                            </div>
                            <div class="part-details">
                                <div class="part-img">
                                    <img src="assets/img/poster-1.jpg" alt="">
                                </div>
                                <div class="part-name">
                                    <h3>Jamie Hunt,</h3>
                                    <h4>Creative [email protected]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="single-testimonial">
                            <div class="part-text">
                                <div class="icon">
                                    <i class="fas fa-quote-left"></i>
                                </div>
                                <p>There are many variations of passages of Lorem to Ipsum the available but the majority have suffered to alteration in by injected dummy text.</p>
                            </div>
                            <div class="part-details">
                                <div class="part-img">
                                    <img src="assets/img/poster-1.jpg" alt="">
                                </div>
                                <div class="part-name">
                                    <h3>Jamie Hunt,</h3>
                                    <h4>Creative [email protected]</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- testimonial end -->
    <!-- big feature begin -->
    <div class="big-feature-area">
        <div class="container">
            <div class="row d-flex">
                <div class="col-xl-7 col-lg-6 d-flex align-items-center">
                    <div class="heading">
                        <h2>Buy or sell your house in few Seconds with Benaa</h2>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-6 d-flex align-items-center">
                    <div class="button-links">
                        <a href="#">submit property</a>
                        <a href="#">browse properties</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- big feature end -->
    <!-- popular category begin -->
    <div class="popular-category-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>Popular Categories</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Amazing Villa</h3>
                                <a href="#">3 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category-2.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Family House</h3>
                                <a href="#">5 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category-3.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Apartment</h3>
                                <a href="#">5 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category-4.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Beach House</h3>
                                <a href="#">3 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category-5.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Mount House</h3>
                                <a href="#">5 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-category">
                        <img src="assets/img/popular-category-6.jpg" alt="">
                        <div class="content-on-img">
                            <div class="part-text">
                                <h3>Frank Mount</h3>
                                <a href="#">5 Properties</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- popular category end -->
    <!-- limelight feature begin -->
    <div class="limelight-feature">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-heart"></i>
                        </div>
                        <div class="part-text">
                            <h3>Great Features</h3>
                            <p>There are many variations of passages of Lorem Ipsum the available but the majority dummy now dummy now.
                            dummy text the available.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-property"></i>
                        </div>
                        <div class="part-text">
                            <h3>Submit Property</h3>
                            <p>There are many variations of passages of Lorem Ipsum the available but the majority dummy now dummy now.
                            dummy text the available.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-feature">
                        <div class="part-icon">
                            <i class="flaticon-settings"></i>
                        </div>
                        <div class="part-text">
                            <h3>Page Builder</h3>
                            <p>There are many variations of passages of Lorem Ipsum the available but the majority dummy now dummy now.
                            dummy text the available.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- limelight feature end -->
    <!-- team area begin -->
    <div class="team-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>Meet our Agents</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-member">
                        <div class="part-img">
                            <img src="assets/img/member-1.jpg" alt="">
                        </div>
                        <div class="part-text">
                            <h3>Bethany Kertzmann</h3>
                            <h4>Founder & CEO</h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration dummy text.</p>
                        </div>
                        <div class="part-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-google-plus-g"></i></a>
                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-member">
                        <div class="part-img">
                            <img src="assets/img/member-2.jpg" alt="">
                        </div>
                        <div class="part-text">
                            <h3>Angela Mayer</h3>
                            <h4>Web Designer</h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration dummy text.</p>
                        </div>
                        <div class="part-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-google-plus-g"></i></a>
                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-member">
                        <div class="part-img">
                            <img src="assets/img/member-3.jpg" alt="">
                        </div>
                        <div class="part-text">
                            <h3>Edward Powlowski</h3>
                            <h4>Web Developer</h4>
                            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration dummy text.</p>
                        </div>
                        <div class="part-social">
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                            <a href="#"><i class="fab fa-google-plus-g"></i></a>
                            <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- team area end -->
    <!-- video area begin -->
    <div class="video-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-lg-10">
                    <div class="part-video">
                        <a class="venobox mfp-iframe" href=""><i class="fas fa-play"></i></a>
                        <h2>advertisment punchline: building greece</h2>
                        <p>There are many variations of passages of Lorem Ipsum available but the majority have suffered alteration in some<br/> form, by injected humour randomised words which don't look even slightly believable. </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- video area end -->
    <!-- blog begin -->
    <div class="blog-area">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-8 col-md-8">
                    <div class="section-title">
                        <h2>Most Recent Blog</h2>
                        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form by injected humour randomised words believable.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-blog">
                        <div class="part-img">
                            <img src="assets/img/blog-1.jpg" alt="">
                            <div class="content-on-img">
                                <a href="#">Corporate Office</a>
                            </div>
                        </div>
                        <div class="part-text">
                            <span>February 25,2018</span>
                            <h3><a href="">Complete Corporate Office near that to sabestian villa</a></h3>
                            <p>There are many variations of passages a dumm to about Lorem Ipsum available but the majority the an have suffered alteration in some form to that  and  injected humour or randomised.</p>
                        </div>
                        <div class="part-admin">
                            <ul>
                                <li>
                                    <h4><span><i class="fas fa-user"></i></span>Robert Johnson</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-comments"></i></span>015</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-heart"></i></span>475</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-blog">
                        <div class="part-img">
                            <img src="assets/img/blog-2.jpg" alt="">
                            <div class="content-on-img">
                                <a href="#">City sabestian</a>
                            </div>
                        </div>
                        <div class="part-text">
                            <span>February 25,2018</span>
                            <h3><a href="">Law firm opened near to that gonig to sabestian villa</a></h3>
                            <p>There are many variations of passages a dumm to about Lorem Ipsum available but the majority the an have suffered alteration in some form to that  and  injected humour or randomised.</p>
                        </div>
                        <div class="part-admin">
                            <ul>
                                <li>
                                    <h4><span><i class="fas fa-user"></i></span>Robert Johnson</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-comments"></i></span>015</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-heart"></i></span>475</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-6">
                    <div class="single-blog">
                        <div class="part-img">
                            <img src="assets/img/blog-3.jpg" alt="">
                            <div class="content-on-img">
                                <a href="#">Guest House</a>
                            </div>
                        </div>
                        <div class="part-text">
                            <span>February 25,2018</span>
                            <h3><a href="">Complete Corporate Office near that to sabestian villa</a></h3>
                            <p>There are many variations of passages a dumm to about Lorem Ipsum available but the majority the an have suffered alteration in some form to that  and  injected humour or randomised.</p>
                        </div>
                        <div class="part-admin">
                            <ul>
                                <li>
                                    <h4><span><i class="fas fa-user"></i></span>Robert Johnson</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-comments"></i></span>015</h4>
                                </li>
                                <li>
                                    <h4><span><i class="far fa-heart"></i></span>475</h4>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- blog end -->
    <!-- brand begin-->
    <div class="brand-area">
        <div class="container">
            <div class="col-xl-12 col-lg-12 px-0">
                <div class="brand-carousel" id="brand-carousel">
                    <div class="single-brand-logo">
                        <img src="assets/img/01.png" alt="brangs logo">
                    </div>
                    <div class="single-brand-logo">
                        <img src="assets/img/02.png" alt="brangs logo">
                    </div>
                    <div class="single-brand-logo">
                        <img src="assets/img/03.png" alt="brangs logo">
                    </div>
                    <div class="single-brand-logo">
                        <img src="assets/img/04.png" alt="brangs logo">
                    </div>
                    <div class="single-brand-logo">
                        <img src="assets/img/02.png" alt="brangs logo">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- brand end -->
    <!-- footer begin -->
    <footer class="footer-area">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="single-foot">
                            <h3>Our Services</h3>
                            <ul class="useful-links">
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>My Properties</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Create Property</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Research Market Analyst</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Register</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Quality Property Services</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Management Service Agreements</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="single-foot">
                            <h3>Our Support</h3>
                            <ul class="useful-links">
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Help & Support</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Contact Us</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>I Need Support</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Telephone Functions</a></li>
                                <li><a href="#"><span><i class="fas fa-angle-right"></i></span>Our Company</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="single-foot">
                            <h3>Contact Us</h3>
                            <p>There are many variations of passages
                            Lorem Ipsum available but the majority
                            have suffered alteration.</p>
                            <ul class="live-contact">
                                <li><span><i class="far fa-envelope"></i></span>[email protected]</li>
                                <li><span><i class="fas fa-phone"></i></span>+00- 254-025-2162</li>
                                <li><span><i class="fas fa-map-marker-alt"></i></span>PO Box 16122 Collins Street<br/>West Victoria 8007 Australia</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xl-3 col-lg-3 col-md-6">
                        <div class="single-foot">
                            <h3>Newsletter</h3>
                            <p>Subscribe to our newsletter and get
                            all the cool news.</p>
                            <form class="newsletter">
                                <input type="text" placeholder="Enter Your Email">
                                <button type="submit"><i class="fas fa-paper-plane"></i></button>
                            </form>
                            <div class="social">
                                <a href="#"><i class="fab fa-facebook-f"></i></a>
                                <a href="#"><i class="fab fa-twitter"></i></a>
                                <a href="#"><i class="fab fa-google-plus-g"></i></a>
                                <a href="#"><i class="fab fa-pinterest-p"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-xl-6 col-lg-6">
                        <div class="logo">
                            <img src="assets/img/footer-logo.png" alt="">
                        </div>
                    </div>
                    <div class="col-xl-6 col-lg-6">
                        <div class="copyright">
                            <p>Copyright &copy; 2018.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- footer end -->
    <!-- jquery -->
	<!-- bootstrap -->
    <!-- owl carousel -->
    <!-- magnific popup -->
    <!-- rangeslider -->
    <!-- way poin js-->
    <!-- wow js-->
    <!-- counterup js-->
    <!-- main -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 扁平化 养生会馆 植物花草 宽屏全屏 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到