蓝色欧美样式html5别墅房产开发网页模板代码下载



5 19 7



模板描述:蓝色 欧美 html5 别墅房产开发 网页模板 代码下载,蓝色欧美样式html5别墅房产开发网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="css/font-awesome.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet">

2. HTML代码

    <!-- mian-content -->
    <div class="main-content" id="home">
        <!--/Top-Header-->
        <div class="top-bar-w3layouts pt-4">
            <div class="container">
                <div class="row">
                    <div class="offset-xl-5">
                    </div>
                    <div class="col-xl-7 top-social-lavi text-md-right text-center mt-md-0 mt-2">
                        <div class="row right-top-info">
                            <div class="col-md-6 header-top text-xl-right text-center">
                                <p class="mr-2">
                                    <span class="fa fa-map-marker mr-2"></span> Parma Via, Italy
                                </p>
                                <p>
                                    <i class="fa fa-phone mr-2"></i> +1 000263676
                                </p>
                            </div>
                            <!-- social icons -->
                            <ul class="col-md-6 top-right-info text-md-right text-center">
                                <li>
                                    <p>Follow Us :</p>
                                </li>
                                <li class="ml-3 mr-1">
                                    <a href="#">
											<span class="fa fa-facebook-f"></span>
										</a>
                                </li>
                                <li>
                                    <a href="#">
											<span class="fa fa-twitter"></span>
										</a>
                                </li>
                                <li class="mx-1">
                                    <a href="#">
											<span class="fa fa-google-plus"></span>
										</a>
                                </li>
                                <li>
                                    <a href="#">
											<span class="fa fa-dribbble"></span>
										</a>
                                </li>
                            </ul>
                            <!-- //social icons -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--//Top-Header-->
        <!-- header -->
        <header class="header">
            <div class="container">
                <!-- nav -->
                <nav class="pb-3">
                    <div id="logo">
                        <h1> <a class="navbar-brand" href="index.html"><span>B</span>ooker</a>
                        </h1>
                    </div>
                    <label for="drop" class="toggle">Menu</label>
                    <input type="checkbox" id="drop" />
                    <ul class="menu mt-2">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="about.html">About</a></li>
                        <li>
                            <!-- First Tier Drop Down -->
                            <label for="drop-2" class="toggle">Drop Down <span class="fa fa-angle-down" aria-hidden="true"></span> </label>
                            <a href="#">More Info <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                            <input type="checkbox" id="drop-2" />
                            <ul>
                                <li><a href="features.html">Features</a>
                                </li>
                                <li><a href="blogs.html">Blogs</a>
                                </li>
                                <li><a href="features.html">Services</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="contact.html">Contact</a>
                        </li>
                        <li class="header-right">
                            <a href="contact.html" class="contact"> <span class="fa fa-user"></span> Get Started</a>
                        </li>
                    </ul>
                </nav>
                <!-- //nav -->
            </div>
        </header>
        <!-- //header -->
        <!-- banner -->
        <section class="banner">
            <div class="container">
                <div class="row banner-grids">
                    <div class="col-lg-6 banner-info-w3ls">
                        <h2>A Vision For Your Life
                        </h2>
                        <h3 class="mb-3">Build Your Real & Dream Home ,At Real Time</h3>
                        <p class="mb-4"> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis. </p>
                        <a href="single.html" class="btn">Read More</a>
                    </div>
                    <div class="col-lg-6 banner-image">
                        <div class="img-effect">
                            <img src="images/img.jpg" alt="" class="img-fluid image1">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- //banner -->
    </div>
    <!--/ab -->
    <section class="about py-lg-5 py-md-5 py-5">
        <div class="container">
            <div class="inner-sec-w3pvt py-lg-5 py-3">
                <h3 class="tittle text-center mb-lg-5 mb-3 px-lg-5"><span class="sub-tittle">About.</span>Get everything you need to pick the right Agent.</h3>
                <div class="feature-grids row mt-3 mb-lg-5 mb-3 text-center">
                    <div class="col-lg-4" data-aos="fade-up">
                        <div class="bottom-gd px-3">
                            <span class="fa fa-building-o" aria-hidden="true"></span>
                            <h3 class="my-4"> Modern Residence</h3>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                    <div class="col-lg-4" data-aos="fade-up">
                        <div class="bottom-gd2-active px-3">
                            <span class="fa fa-cogs" aria-hidden="true"></span>
                            <h3 class="my-4"> Development Services</h3>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                    <div class="col-lg-4" data-aos="fade-up">
                        <div class="bottom-gd px-3">
                            <span class="fa fa-cogs" aria-hidden="true"></span>
                            <h3 class="my-4">Property Management</h3>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                </div>
                <!-- services -->
                <div class="fetured-info pt-lg-5">
                    <h3 class="tittle  text-center my-lg-5 my-3"><span class="sub-tittle">What we do</span> Our Featured Services</h3>
                    <div class="row fetured-sec mt-lg-5 mt-3">
                        <div class="col-lg-6 p-0">
                            <div class="img-effect">
                                <img src="images/img1.jpg" alt="" class="img-fluid image1">
                            </div>
                        </div>
                        <div class="col-lg-6 serv_bottom feature-grids pl-lg-5">
                            <div class="featured-left text-left">
                                <div class="bottom-gd px-3">
                                    <span class="fa fa-hospital-o" aria-hidden="true"></span>
                                    <h3 class="my-4"> For Renters</h3>
                                    <p>Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                                </div>
                                <div class="bottom-gd fea active p-4" data-aos="fade-left">
                                    <span class="fa fa-key" aria-hidden="true"></span>
                                    <h3 class="my-3 ">For Developers</h3>
                                    <p>Integer sit amet mattis quam, sit amet ultricies velit.convallis at tellus. Nulla quis lorem ipnut libero malesuada feugiat..</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3 class="tittle text-center my-lg-5 mb-3"><span class="sub-tittle">View Our</span>Recent Properties</h3>
                    <div class="row mid-slide">
                        <div class="col-lg-4 featured-content">
                            <img src="images/n10.jpg" alt="" class="img-fluid image1">
                            <span class="money">$25,000</span>
                            <!--/Property_info-->
                            <div class="property-info-list">
                                <div class="detail">
                                    <h4 class="title">
                                        <a href="single.html">Tittle goes here</a>
                                    </h4>
                                    <div class="location mt-2">
                                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                    </div>
                                    <ul class="facilities-list clearfix">
                                        <li>
                                            <span class="fa fa-bed"></span> 4 Bedrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-shower"></span> 4 Bathrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> Sq Ft:3400
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> 1 Garage
                                        </li>
                                    </ul>
                                </div>
                                <div class="footer-properties">
                                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                    <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                                </div>
                            </div>
                            <!--//Property_info-->
                        </div>
                        <div class="col-lg-4 featured-content">
                            <img src="images/n11.jpg" alt="" class="img-fluid image1">
                            <span class="money">$28,000</span>
                            <!--/Property_info-->
                            <div class="property-info-list">
                                <div class="detail">
                                    <h4 class="title">
                                        <a href="single.html">Tittle goes here</a>
                                    </h4>
                                    <div class="location mt-2">
                                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                    </div>
                                    <ul class="facilities-list clearfix">
                                        <li>
                                            <span class="fa fa-bed"></span> 4 Bedrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-shower"></span> 4 Bathrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> Sq Ft:3400
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> 1 Garage
                                        </li>
                                    </ul>
                                </div>
                                <div class="footer-properties">
                                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                    <span class="year text-right"> <span class="fa fa-calendar"></span> 2 years ago</span>
                                </div>
                            </div>
                            <!--//Property_info-->
                        </div>
                        <div class="col-lg-4 featured-content">
                            <img src="images/n12.jpg" alt="" class="img-fluid image1">
                            <span class="money">$29,000</span>
                            <!--/Property_info-->
                            <div class="property-info-list">
                                <div class="detail">
                                    <h4 class="title">
                                        <a href="single.html">Tittle goes here</a>
                                    </h4>
                                    <div class="location mt-2">
                                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                    </div>
                                    <ul class="facilities-list clearfix">
                                        <li>
                                            <span class="fa fa-bed"></span> 4 Bedrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-shower"></span> 4 Bathrooms
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> Sq Ft:3400
                                        </li>
                                        <li>
                                            <span class="fa fa-building-o"></span> 1 Garage
                                        </li>
                                    </ul>
                                </div>
                                <div class="footer-properties">
                                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                    <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                                </div>
                                <!--//Property_info-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- //services -->
    </section>
    <!-- //ab -->
    <!--/counter-->
    <section class="stats py-lg-5 py-4">
        <div class="container">
            <div class="row text-center">
                <div class="col">
                    <div class="counter">
                        <h3 class="timer count-title count-number">1100</h3>
                        <p class="count-text">Support</p>
                    </div>
                </div>
                <div class="col">
                    <div class="counter">
                        <h3 class="timer count-title count-number">1700</h3>
                        <p class="count-text">Happy Hours</p>
                    </div>
                </div>
                <div class="col">
                    <div class="counter">
                        <h3 class="timer count-title count-number">11900</h3>
                        <p class="count-text">Trusted Agents</p>
                    </div>
                </div>
                <div class="col">
                    <div class="counter">
                        <h3 class="timer count-title count-number">157</h3>
                        <p class="count-text">Cups of Coffee</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//counter-->
    <!--//team -->
    <section class="banner-bottom py-lg-5 py-4">
        <div class="container">
            <div class="inner-sec-w3pvt speak">
                <h3 class="tittle  text-center my-lg-5 my-3"><span class="sub-tittle">Amazing People</span> Professional Agents</h3>
                <div class="row mt-lg-5 mt-4">
                    <div class="col-md-4 team-gd text-center">
                        <div class="team-img mb-4">
                            <img src="images/team.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="team-info">
                            <h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Agent</span> Jason Donoghue</h3>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
                            <ul class="social_section_1info mt-md-4 mt-3">
                                <li class="mb-2 facebook"><a href="#"><i class="fa fa-facebook mr-1"></i>facebook</a></li>
                                <li class="mb-2 twitter"><a href="#"><i class="fa fa-twitter mr-1"></i>twitter</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4 team-gd second text-center">
                        <div class="team-img mb-4">
                            <img src="images/team1.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="team-info">
                            <h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Agent</span> Mariana Noe</h3>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
                            <ul class="social_section_1info mt-md-4 mt-3">
                                <li class="google"><a href="#"><i class="fa fa-google-plus mr-1"></i>google</a></li>
                                <li class="linkedin"><a href="#"><i class="fa fa-linkedin mr-1"></i>linkedin</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-4 team-gd text-center">
                        <div class="team-img mb-4">
                            <img src="images/team2.jpg" class="img-fluid" alt="user-image">
                        </div>
                        <div class="team-info">
                            <h3 class="mt-md-4 mt-3"><span class="sub-tittle-team">Agent</span> Daniel Doe</h3>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s.</p>
                            <ul class="social_section_1info mt-md-4 mt-3">
                                <li class="mb-2 facebook"><a href="#"><i class="fa fa-facebook mr-1"></i>facebook</a></li>
                                <li class="mb-2 twitter"><a href="#"><i class="fa fa-twitter mr-1"></i>twitter</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//team -->
    <!-- middle section -->
    <div class="middle-tem-insidel pt-lg-5">
        <div class="progress-info">
            <!-- slides images -->
            <div class="slide-img" id="masthead">
            </div>
            <!-- //slides images -->
            <div class="left-build-main-temps">
                <h3 class="tittle  text-left my-lg-5 my-3"><span class="sub-tittle">What we do</span> Our Services</h3>
                <ul class="tic-info list-unstyled">
                    <li class="progress-tittle">
                        <span class="fa fa-bell-o"></span> Investment Consulting
                    </li>
                    <li class="progress-tittle">
                        <span class="fa fa-database"></span> Construction Services
                    </li>
                    <li class="progress-tittle">
                        <span class="fa fa-bullhorn"></span> Maintenance
                    </li>
                    <li class="progress-tittle">
                        <span class="fa fa-diamond"></span> Good Previews
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--//middle section -->
    <!-- portfolio -->
    <section class="portfolio-flyer py-5" id="gallery">
        <div class="container pt-lg-3 pb-md-5">
            <h3 class="tittle  text-center my-lg-5 my-3"><span class="sub-tittle"> Recent Works </span>Stunning Properties</h3>
            <div class="row news-grids pb-lg-5 mt-3">
                <div class="col-lg-4 gal-img">
                    <div class="gal-info">
                        <a href="#gal1"><img src="images/1.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 3 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 2 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 gal-img">
                    <div class="gal-info">
                        <a href="#gal2"><img src="images/2.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 2 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 3 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 4 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 gal-img">
                    <div class="gal-info">
                        <a href="#gal3"><img src="images/3.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 4 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 4 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 gal-img mt-lg-4">
                    <div class="gal-info">
                        <a href="#gal4"><img src="images/4.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 2 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 3 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 4 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 gal-img mt-lg-4">
                    <div class="gal-info">
                        <a href="#gal5"><img src="images/5.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 4 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 5 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 2 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 gal-img mt-lg-4">
                    <div class="gal-info">
                        <a href="#gal6"><img src="images/6.jpg" alt="news image" class="img-fluid"></a>
                        <div class="property-info-list">
                            <div class="detail">
                                <h4 class="title">
                                    <a href="single.html">Tittle goes here</a>
                                </h4>
                                <div class="location mt-2">
                                    <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                                </div>
                                <ul class="facilities-list clearfix">
                                    <li>
                                        <span class="fa fa-bed"></span> 3 Bedrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-shower"></span> 2 Bathrooms
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> Sq Ft:3400
                                    </li>
                                    <li>
                                        <span class="fa fa-building-o"></span> 1 Garage
                                    </li>
                                </ul>
                            </div>
                            <div class="footer-properties">
                                <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                                <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //portfolio -->
    <!-- popup-->
    <div id="gal1" class="pop-overlay animate">
        <div class="popup">
            <img src="images/1.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 3 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 2 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal2" class="pop-overlay animate">
        <div class="popup">
            <img src="images/2.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 2 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 3 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 4 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal3" class="pop-overlay animate">
        <div class="popup">
            <img src="images/3.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 4 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 4 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup3 -->
    <!-- popup-->
    <div id="gal4" class="pop-overlay animate">
        <div class="popup">
            <img src="images/4.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 2 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 3 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 4 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal5" class="pop-overlay animate">
        <div class="popup">
            <img src="images/5.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 4 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 5 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 2 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal6" class="pop-overlay animate">
        <div class="popup">
            <img src="images/6.jpg" alt="Popup Image" class="img-fluid" />
            <div class="property-info-list mode-info">
                <div class="detail">
                    <h4 class="title">
                        <a href="single.html">Tittle goes here</a>
                    </h4>
                    <div class="location mt-2">
                        <a href="single.html">
                                   <span class="fa fa-map-marker"></span> 123 Location. Example City,
                                </a>
                    </div>
                    <ul class="facilities-list clearfix">
                        <li>
                            <span class="fa fa-bed"></span> 3 Bedrooms
                        </li>
                        <li>
                            <span class="fa fa-shower"></span> 2 Bathrooms
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> Sq Ft:3400
                        </li>
                        <li>
                            <span class="fa fa-building-o"></span> 1 Garage
                        </li>
                    </ul>
                </div>
                <div class="footer-properties">
                    <a class="admin" href="#">
                                <span class="fa fa-user"></span> Jhon Doe
                            </a>
                    <span class="year text-right"> <span class="fa fa-calendar"></span> 6 years ago</span>
                </div>
            </div>
            <a class="close" href="#gallery">&times;</a>
        </div>
    </div>
    <!-- //popup -->
    <!--//portfolio-->
    <!-- /hand-crafted -->
    <section class="hand-crafted py-5">
        <div class="container py-lg-5">
            <div class="row accord-info">
                <div class="col-lg-6 pl-md-5">
                    <h3 class="mb-md-5 tittle">This is Our Responsibility To Give Good Property</h3>
                    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla mollis dapibus nunc, ut rhoncus turpis sodales quis.Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.</p>
                    <p class="mt-3">Integer sit amet mattis quam, sit amet ultricies velit. Praesent ullamcorper dui turpis.
                        <p>
                </div>
                <div class="col-lg-6 banner-image">
                    <div class="img-effect">
                        <img src="images/img3.jpg" alt="" class="img-fluid image1">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //hand-crafted -->
    <!-- testimonials -->
    <div class="testimonials py-md-5 py-5">
        <div class="container py-xl-5 py-lg-3">
            <h3 class="tittle  text-center mb-lg-5 mb-3"><span class="sub-tittle">Clients Reviews</span> What Our Clients Say</h3>
            <div class="testimonials_grid_w3ls mt-lg-0 mt-4">
                <div class="p-md-5 p-4">
                    <p class="sub-test"><span class="fa fa-quote-left" aria-hidden="true"></span> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod possimus, omnis voluptas.Integer sit amet mattis quam, sit amet ultricies velit.
                    </p>
                    <div class="row mt-4">
                        <div class="col-3 testi-img-res">
                            <img src="images/te2.jpg" alt="" class="img-fluid" />
                        </div>
                        <div class="col-9 testi_grid mt-xl-3 mt-lg-2 mt-md-4 mt-2">
                            <h5 class="mb-2">Adam Ster</h5>
                            <p>Company Name</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- //testimonials -->
    <!--footer -->
    <footer>
        <div class="footer_1its py-5">
            <div class="container py-md-4">
                <div class="row footer-top mb-md-5 mb-4">
                    <div class="col-lg-4 col-md-6 footer-grid_section_1its" data-aos="fade-right">
                        <div class="footer-title-w3pvt">
                            <h3>Address</h3>
                        </div>
                        <div class="footer-text">
                            <p>Address : 1234 lock, Charlotte, North Carolina, United States</p>
                            <p>Phone : +12 534894364</p>
                            <p>Email : <a href="https://www.51qianduan.com/">51前端</a></p>
                            <p>Fax : +12 534894364</p>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 mt-md-0 mt-4 footer-grid_section_1its">
                        <div class="footer-title-w3pvt">
                            <h3>Quick Links</h3>
                        </div>
                        <div class="row">
                            <ul class="col-6 links">
                                <li><a href="about.html">Why Choose Us </a></li>
                                <li><a href="about.html">Overview </a></li>
                                <li><a href="features.html">Services</a></li>
                                <li><a href="gallery.html">Gallery</a></li>
                                <li><a href="contact.html">Contact </a></li>
                            </ul>
                            <ul class="col-6 links">
                                <li><a href="#">Privacy Policy </a></li>
                                <li><a href="#">General Terms </a></li>
                                <li><a href="#">Faq's </a></li>
                                <li><a href="#">Knowledge </a></li>
                                <li><a href="#">Forum </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-12 mt-lg-0 mt-4 col-sm-12 footer-grid_section_1its" data-aos="fade-left">
                        <div class="footer-title-w3pvt">
                            <h3>Newsletter</h3>
                        </div>
                        <div class="footer-text">
                            <p>By subscribing to our mailing list you will always get latest news and updates from us.</p>
                            <form action="#" method="post">
                                <input type="email" name="Email" placeholder="Enter your email..." required="">
                                <button class="btn1"><span class="fa fa-paper-plane-o" aria-hidden="true"></span></button>
                                <div class="clearfix"> </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="footer-grid_section my-lg-5 text-center">
                    <div class="footer-title-w3pvt mb-4">
                        <h3>Recent Properties</h3>
                    </div>
                    <ul class="d-flex list-unstyled foot-bottom-last">
                        <li class="mr-2">
                            <a href="single.html"> <img src="images/1.jpg" alt="" class="img-fluid image1"></a></li>
                        <li class="mr-2">
                            <a href="single.html"> <img src="images/2.jpg" alt="" class="img-fluid image1"></a></li>
                        <li class="mr-2">
                            <a href="single.html"> <img src="images/3.jpg" alt="" class="img-fluid image1"></a></li>
                        <li class="mr-2">
                            <a href="single.html"> <img src="images/4.jpg" alt="" class="img-fluid image1"></a></li>
                        <li>
                            <a href="single.html"> <img src="images/5.jpg" alt="" class="img-fluid image1"></a></li>
                    </ul>
                </div>
                <div class="footer-grid_section text-center">
                    <div class="footer-title-w3pvt mb-4">
                        <h3>Follow with us</h3>
                    </div>
                    <ul class="social_section_1info">
                        <li class="mb-2 facebook"><a href="#"><span class="fa fa-facebook mr-1"></span>facebook</a></li>
                        <li class="mb-2 twitter"><a href="#"><span class="fa fa-twitter mr-1"></span>twitter</a></li>
                        <li class="google"><a href="#"><span class="fa fa-google-plus mr-1"></span>google</a></li>
                        <li class="linkedin"><a href="#"><span class="fa fa-linkedin mr-1"></span>linkedin</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    <!-- //footer -->
    <!-- copyright -->
    <div class="cpy-right text-center py-3">
        <p class="copy-w3layouts">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
        </p>
        <div class="move-top"><a href="https://www.51qianduan.com/">51前端</a></div>
    </div>
    <!-- //copyright -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 蓝色 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 大气 霸气 房地产 房地产公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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