蓝色大气形式pc+wap澳洲豪宅出售网页模板代码



4 15 6



模板描述:蓝色 大气 pc+wap 澳洲豪宅出售 网页模板代码,蓝色大气形式pc+wap澳洲豪宅出售网页模板代码html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600" rel="stylesheet">

2. HTML代码

    <div class="main-top" id="home">
      <!-- header -->
      <div class="headder-top">
        <div class="container-fluid">
          <!-- nav -->
          <nav >
            <div id="logo">
              <h1><a class="" href="index.html">Brick</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 class="mx-lg-3 mx-md-2 my-md-0 my-1"><a href="#about">About</a></li>
              <li><a href="#service">Services</a></li>
              <li class="mx-lg-3 mx-md-2 my-md-0 my-1">
                <!-- First Tier Drop Down -->
                <label for="drop-2" class="toggle toogle-2">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span>
                </label>
                <a href="#">Dropdown <span class="fa fa-angle-down" aria-hidden="true"></span></a>
                <input type="checkbox" id="drop-2">
                <ul>
                  <li><a href="#gallery" class="drop-text">Gallery</a></li>
                  <li><a href="#team" class="drop-text">Agents</a></li>
                  <li><a href="#blog" class="drop-text">Blog</a></li>
                </ul>
              </li>
              <li><a href="#contact">Contact Us</a></li>
            </ul>
          </nav>
          <!-- //nav -->
        </div>
      </div>
      <!-- //header -->
      <!-- banner -->
      <div class="slider-img one-img text-center">
        <div class="container">
          <div class="slider-info">
            <h5>Use our site to find your home</h5>
            <div class="slider-banner">
              <h4>Find The Perfect Home</h4>
            </div>
            <div class="outs_more-buttn">
              <a href="#blog">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- //banner -->
    <div class="clearfix"></div>
    <!-- //banner -->
    <!--About -->
    <section class="about py-lg-4 py-md-3 py-sm-3 py-3" id="about">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="about-w3layouts-info">
          <div class="abt-img-gride">
          </div>
          <h3 class="title text-center mt-lg-5 mt-md-4 mt-sm-4 mt-3 mb-2"> About Us</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <div class="abut-wls-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
            </p>
          </div>
          <div class="aubt-right-click">
            <div class="about-more-contact">
              <a href="#contact" class="scroll" >Contact us</a>
            </div>
            <div class="about-more-buttn">
              <a href="#blog" >Read More</a>
            </div>
          </div>
        </div>
        <div class="jst-must-info text-center mt-lg-5 mt-md-4 mt-sm-4 mt-3 mb-2">
          <div class="row stats-info">
            <div class="col-md-3 col-sm-6 col-6 stats-grid-1">
              <div class="stats-grid">
                <div class="about-icon-us">
                  <span class="fa fa-smile-o" aria-hidden="true"></span>
                </div>
                <div class="stat-info py-3">
                  <h5 >Smile</h5>
                </div>
                <div class="counter">445</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-6 stats-grid-2">
              <div class=" stats-grid">
                <div class="about-icon-us">
                  <span class="fa fa-glass" aria-hidden="true"></span>
                </div>
                <div class="stat-info py-3">
                  <h5 >Tea</h5>
                </div>
                <div class="counter">350</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-6 stats-grid-3">
              <div class=" stats-grid">
                <div class="about-icon-us">
                  <span class="fa fa-coffee" aria-hidden="true"></span>
                </div>
                <div class="stat-info py-3">
                  <h5 > Coffee</h5>
                </div>
                <div class="counter">1000</div>
              </div>
            </div>
            <div class="col-md-3 col-sm-6 col-6 stats-grid-4">
              <div class=" stats-grid">
                <div class=" about-icon-us">
                  <span class="fa fa-thumbs-up" aria-hidden="true"></span>
                </div>
                <div class="stat-info py-3">
                  <h5 >Happy</h5>
                </div>
                <div class="counter">560</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//About-->	   
    <!--service-->	
    <section class="service py-lg-4 py-md-3 py-sm-3 py-3" id="service">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Services</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="row pt-lg-5 pt-md-5 pt-sm-4 pt-3">
          <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
            <div class="service-position">
              <div class="icon-wthree-top">
                <span class="fa fa-bookmark-o" aria-hidden="true"></span>
              </div>
              <div class="ser-text-wthree">
                <h4>
                  Commercial
                </h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut </p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
            <div class="service-position">
              <div class="icon-wthree-top">
                <span class="fa fa-eye" aria-hidden="true"></span>
              </div>
              <div class="ser-text-wthree">
                <h4>
                  Security
                </h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut </p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
            <div class="service-position">
              <div class="icon-wthree-top">
                <span class="fa fa-car" aria-hidden="true"></span>
              </div>
              <div class="ser-text-wthree">
                <h4>
                  Garages
                </h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut </p>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 ser-icon text-center">
            <div class="service-position">
              <div class="icon-wthree-top">
                <span class="fa fa-users" aria-hidden="true"></span>
              </div>
              <div class="ser-text-wthree">
                <h4>
                  Management
                </h4>
                <p class="mt-3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//service-->
    <!--history-->	
    <section class="history py-lg-4 py-md-3 py-sm-3 py-3" id="history">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">New Properties</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="page-header">
        </div>
        <ul class="timeline">
          <li>
            <div class="timeline-badge"><span class="fa fa-thumbs-up" aria-hidden="true"></span></div>
            <div class="timeline-panel">
              <div class="timeline-heading mb-3">
                <h4 class="timeline-title mb-3">Renting and Selling Services</h4>
                <p><small class="text-muted "> 11 hours ago via Twitter</small></p>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta.</p>
              </div>
            </div>
          </li>
          <li class="timeline-inverted">
            <div class="timeline-badge"><span class="fa fa-user" aria-hidden="true"></span></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title mb-3">Property Management</h4>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris,</p>
                <p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo </p>
              </div>
            </div>
          </li>
          <li>
            <div class="timeline-badge "><span class="fa fa-paw" aria-hidden="true"></span></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title mb-3">Relaxing Apartment</h4>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis</p>
              </div>
            </div>
          </li>
          <li class="timeline-inverted">
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title mb-3">Modern Family Home</h4>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis.</p>
              </div>
            </div>
          </li>
          <li>
            <div class="timeline-badge"><span class="fa fa-archive" aria-hidden="true"></span></div>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title mb-3">Family House Montana</h4>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum</p>
              </div>
            </div>
          </li>
          <li>
            <div class="timeline-panel">
              <div class="timeline-heading">
                <h4 class="timeline-title mb-3">Renting and Selling Services</h4>
              </div>
              <div class="timeline-body">
                <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!--//history-->	
    <!--team-->	
    <section class="team py-lg-4 py-md-3 py-sm-3 py-3" id="team">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Our Agents</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6 team-grid-list">
            <!-- team-img -->
            <div class="team-img">
              <img src="images/t1.jpg" alt="" class="img-fluid">
              <div class="team-content text-center">
                <h4 class="mt-3 mb-2">Lily will</h4>
                <p class="team-meta">Agent</p>
              </div>
            </div>
          </div>
          <!-- /.team-img -->
          <div class="col-lg-3 col-md-6 col-sm-6 team-grid-list">
            <!-- team-img -->
            <div class="team-img">
              <img src="images/t2.jpg" alt="" class="img-fluid">
              <div class="team-content text-center">
                <h4 class="mt-3 mb-2">Rose Hunt</h4>
                <p class="team-meta">Agent</p>
              </div>
            </div>
          </div>
          <!-- /.team-img -->
          <div class="col-lg-3 col-md-6 col-sm-6 team-grid-list">
            <!-- team-img -->
            <div class="team-img">
              <img src="images/t3.jpg" alt="" class="img-fluid">
              <div class="team-content text-center">
                <h4 class="mt-3 mb-2 ">Jill Kent</h4>
                <p class="team-meta">Agent</p>
              </div>
            </div>
          </div>
          <!-- /.team-img -->
          <div class="col-lg-3 col-md-6 col-sm-6 team-grid-list">
            <!-- team-img -->
            <div class="team-img">
              <img src="images/t4.jpg" alt="" class="img-fluid">
              <div class="team-content text-center">
                <h4 class="mt-3 mb-2 ">Mart kelly</h4>
                <p class="team-meta">Agent</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//team-->	
    <!-- gallery -->
    <section class="gallery py-lg-4 py-md-3 py-sm-3 py-3" id="gallery">
      <div class="container-fluid py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Our Gallery</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="row gallery-info">
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids">
              <a href="#gal7"><img src="images/blog3.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid  p-0">
            <div class="gallery-grids">
              <a href="#gal8"><img src="images/blog4.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid  p-0">
            <div class="gallery-grids">
              <a href="#gal1"><img src="images/blog1.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids">
              <a href="#gal2"><img src="images/blog2.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids">
              <a href="#gal3"><img src="images/blog1.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids">
              <a href="#gal4"><img src="images/blog2.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids">
              <a href="#gal5"><img src="images/blog3.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
          <div class="col-lg-3 col-md-3 col-sm-6 gallery-img-grid p-0">
            <div class="gallery-grids p-0">
              <a href="#gal6"><img src="images/blog4.jpg" alt="news image" class="img-fluid"></a>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--// gallery-main -->
    <!-- popup-->
    <div id="gal7" class="popup-effect">
      <div class="popup">
        <img src="images/blog3.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal8" class="popup-effect">
      <div class="popup">
        <img src="images/blog4.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal1" class="popup-effect">
      <div class="popup">
        <img src="images/blog1.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal2" class="popup-effect">
      <div class="popup">
        <img src="images/blog2.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal3" class="popup-effect">
      <div class="popup">
        <img src="images/blog1.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal4" class="popup-effect">
      <div class="popup">
        <img src="images/blog2.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal5" class="popup-effect">
      <div class="popup">
        <img src="images/blog3.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!-- popup-->
    <div id="gal6" class="popup-effect">
      <div class="popup">
        <img src="images/blog4.jpg" alt="Popup Image" class="img-fluid" />
        <a class="close" href="#gallery">&times;</a>
      </div>
    </div>
    <!-- //popup -->
    <!--//gallery -->
    <!--price-->	
    <section class="price py-lg-4 py-md-3 py-sm-3 py-3" id="price">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Price Table</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="pricing-grids-info row">
          <div class="col-lg-4 col-md-4 pricing-grid">
            <div class="w3ls-bottom grid-two">
              <div class="table-txt-grid">
                <h4>GOLDEN</h4>
              </div>
              <div class="jst-price-tag">
                <div class="price-gride-icon">
                  <span class="fa fa-pie-chart" aria-hidden="true"></span>
                </div>
              </div>
              <div class="mb-3 price-w3layouts-table">
                <h4> <span class="sup">$</span>850 </h4>
              </div>
              <div class="price-list-txt">
                <ul class="count">
                  <li>Lorem ipsum </li>
                  <li>Dolor sit </li>
                  <li>Consectetuer</li>
                  <li>Adipiscing</li>
                  <li>Lorem ipsum </li>
                </ul>
              </div>
              <div class="more">
                <a href="#contact" class="scroll">Buy Now</a>				
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 pricing-grid">
            <div class="w3ls-bottom grid-two">
              <div class="table-txt-grid">
                <h4>PREMIUM</h4>
              </div>
              <div class="jst-price-tag">
                <div class="price-gride-icon">
                  <span class="fa fa-pie-chart" aria-hidden="true"></span>
                </div>
              </div>
              <div class="mb-3 price-w3layouts-table">
                <h4> <span class="sup">$</span>560 </h4>
              </div>
              <div class="price-list-txt">
                <ul class="count">
                  <li>Lorem ipsum </li>
                  <li>Dolor sit </li>
                  <li>Consectetuer</li>
                  <li>Adipiscing</li>
                  <li>Lorem ipsum </li>
                </ul>
              </div>
              <div class="more">
                <a href="#contact" class="scroll">Buy Now</a>				
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 pricing-grid">
            <div class="w3ls-bottom grid-two">
              <div class="table-txt-grid">
                <h4>STANDARD</h4>
              </div>
              <div class="jst-price-tag">
                <div class="price-gride-icon">
                  <span class="fa fa-pie-chart" aria-hidden="true"></span>
                </div>
              </div>
              <div class="mb-3 price-w3layouts-table">
                <h4> <span class="sup">$</span>470 </h4>
              </div>
              <div class="price-list-txt">
                <ul class="count">
                  <li>Lorem ipsum </li>
                  <li>Dolor sit </li>
                  <li>Consectetuer</li>
                  <li>Adipiscing</li>
                  <li>Lorem ipsum </li>
                </ul>
              </div>
              <div class="more">
                <a href="#contact" class="scroll">Buy Now</a>				
              </div>
            </div>
          </div>
          <!--End-slider-script-->
        </div>
      </div>
    </section>
    <!--//price-->	
    <!--blog-->	
    <section class="blog py-lg-4 py-md-3 py-sm-3 py-3" id="blog">
      <div class="container-fluid py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Our Blog</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="row">
          <div class="col-lg-3 col-md-6 col-sm-6 bolg-one blog-grided p-0">
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 blog-grided p-0">
            <div class="w3l-ser-sub-txt ">
              <div class="mb-2 blog-date-grid">
                <p><a href="#about">15 May 2018</a></p>
              </div>
              <div class="mb-lg-4 mb-3 blog-us-grid">
                <h4 ><a href="#about">
                  Family House Montana</a>
                </h4>
              </div>
              <p>Lorem ipsum dolor adipiscing elit, sed do sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 bolg-two blog-grided p-0">
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 blog-grided p-0">
            <div class="w3l-ser-sub-txt ">
              <div class="mb-2 blog-date-grid">
                <p><a href="#about">15 May 2018</a></p>
              </div>
              <div class="mb-lg-4 mb-3 blog-us-grid">
                <h4 ><a href="#about">Property Management</a></h4>
              </div>
              <p>Lorem ipsum dolor adipiscing elit, sed do sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 blog-grided p-0">
            <div class="w3l-ser-sub-txt ">
              <div class="mb-2 blog-date-grid">
                <p><a href="#about">15 May 2018</a></p>
              </div>
              <div class="mb-lg-4 mb-3 blog-us-grid">
                <h4 ><a href="#about">Relaxing Apartment</a></h4>
              </div>
              <p>Lorem ipsum dolor adipiscing elit, sed do sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 bolg-three blog-grided p-0">
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 blog-grided p-0">
            <div class="w3l-ser-sub-txt ">
              <div class="mb-2 blog-date-grid">
                <p><a href="#about">15 May 2018</a></p>
              </div>
              <div class="mb-lg-4 mb-3 blog-us-grid">
                <h4 ><a href="#about">Modern Family Home</a></h4>
              </div>
              <p>Lorem ipsum dolor adipiscing elit, sed do sit amet, consectetur adipiscing elit, sed do
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing
              </p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-6 bolg-four blog-grided p-0">
          </div>
        </div>
      </div>
    </section>
    <!--blog-->	
    <!--//clients-->	
    <section class="client py-lg-4 py-md-3 py-sm-3 py-3" id="client">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="title-sub text-center mb-lg-5 mb-md-4 mb-sm-4 mb-3">
          <h3 class="title mb-2">Our Clients</h3>
          <div class="line-w3ls-title text-center mb-md-4 mb-sm-3 mb-3"></div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <br>tempor incididunt ut labore et</p>
        </div>
        <div class="row">
          <div class="col-lg-6 col-md-6 col-sm-6 cilent-item text-center">
            <div class="mb-lg-4 mb-3 clients-ile-img">
              <img src="images/c1.jpg" alt=" " class="img-fluid">
            </div>
            <div class="clients-color-ile text-center">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
              </p>
              <div class="mt-3 clients-txt-ile">
                <h4>Jack Will</h4>
                <h6 class="mt-2">client</h6>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 cilent-item text-center">
            <div class="mb-lg-4 mb-3 clients-ile-img">
              <img src="images/c2.jpg" alt=" " class="img-fluid">
            </div>
            <div class="clients-color-ile text-center">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
              </p>
              <div class="mt-3 clients-txt-ile">
                <h4 >Rose son</h4>
                <h6 class="mt-2">client</h6>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 cilent-item text-center mt-lg-5 mt-md-4 mt-sm-3 mt-3">
            <div class="mb-lg-4 mb-3 clients-ile-img">
              <img src="images/c2.jpg" alt=" " class="img-fluid">
            </div>
            <div class="clients-color-ile text-center">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
              </p>
              <div class="mt-3 clients-txt-ile">
                <h4>Sam Kent</h4>
                <h6 class="mt-2">client</h6>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6 cilent-item text-center mt-lg-5 mt-md-4 mt-sm-3 mt-3">
            <div class="mb-lg-4 mb-3 clients-ile-img">
              <img src="images/c1.jpg" alt=" " class="img-fluid">
            </div>
            <div class="clients-color-ile ">
              <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit
              </p>
              <div class="mt-3 clients-txt-ile">
                <h4>Sam Kent</h4>
                <h6 class="mt-2">client</h6>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!--//Clents-->
    <!--map-->	
    <section class="map">
      <div class="address_mail_footer_grids">
        <iframe src=""></iframe>
      </div>
    </section>
    <!--//map-->	
    <!--Footer-->	   
    <footer class="py-lg-4 py-md-3 py-sm-3 py-3" id="contact">
      <div class="container py-lg-5 py-md-5 py-sm-4 py-3">
        <div class="row">
          <div class="col-lg-5 footer-left-grid">
            <div class="mb-lg-4 mb-3 footer-w3layouts-head">
              <h2><a href="index.html">Brick</a></h2>
            </div>
            <p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore etLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <div class="mb-3 pt-lg-4 pt-3 footer-address">
              <h4>Get In Touch</h4>
            </div>
            <div class="footer_grid_left">
              <ul>
                <li>
                  <span class="fa fa-map" aria-hidden="true"> </span>
                  <p>Melbourne st,QLD,Australia.
                  </p>
                </li>
                <li>
                  <span class="fa fa-envelope-o" aria-hidden="true"> </span>
                  <p><a href="https://www.51qianduan.com/">51前端</a> 
                  </p>
                </li>
                <li>
                  <span class="fa fa-fax" aria-hidden="true"></span>
                  <p>(000)1122333</p>
                </li>
                <li>
                  <span class="fa fa-phone" aria-hidden="true"> </span>
                  <p>+(000) 123 4565 32</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-7 contact-form pb-lg-3 pb-2">
            <form action="#" method="post">
              <div class="row ile-wls-contact-mid">
                <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                  <input type="text" class="form-control" placeholder="Fist Name" required="">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                  <input type="email" class="form-control" placeholder="Email" required="">
                </div>
              </div>
              <div class="row ile-wls-contact-mid">
                <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                  <input type="text" class="form-control" placeholder="Phone" required="">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 form-group contact-forms">
                  <input type="text" class="form-control" placeholder="subject" required="">
                </div>
              </div>
              <div class="form-group contact-forms">
                <textarea class="form-control" placeholder="Message" required=""></textarea>
              </div>
              <div class=" click-subscribe">
                <button type="submit" class="btn sent-butnn btn-lg">Send</button>
              </div>
            </form>
          </div>
        </div>
		<div class="text-center">
            <a href="https://www.51qianduan.com/">51前端</a>
         </div>
        <div class="bottem-ile-footer text-center pt-lg-4 pt-3">
          <p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
        </div>
      </div>
    </footer>
    <!--//Footer-->	



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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