黄色简洁形式pc+wap室内家居设计网页模板代码



5 18 7



模板描述:黄色 简洁 pc+wap 室内家居设计 网页模板代码,黄色简洁形式pc+wap室内家居设计网页模板代码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=Raleway:100,100i,200,200i,300,300i,400,400i,500,600,700" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">

2. HTML代码

    <!-- mian-content -->
    <div class="main-content" id="home">
        <div class="layer">
            <!-- header -->
            <header>
                <div class="container-fluid px-lg-5">
                    <!-- nav -->
                    <nav class="py-4 d-lg-flex">
                        <div id="logo">
                            <h1> <a href="index.html"><span class="fa fa-gg" aria-hidden="true"></span> Dcor</a></h1>
                        </div>
                        <label for="drop" class="toggle">Menu</label>
                        <input type="checkbox" id="drop" />
                        <ul class="menu mt-2 ml-auto">
                            <li class="active"><a href="index.html">Home</a></li>
                            <li><a href="#about" class="scroll">About</a></li>
                            <li><a href="#blog" class="scroll">Blogs</a></li>
                            <li>
                                <!-- First Tier Drop Down -->
                                <label for="drop-2" class="toggle">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 class="inner-ul">
                                    <li><a class="scroll" href="#gallery">Gallery</a></li>
                                    <li><a href="#plans" class="scroll">Plans</a></li>
                                    <li><a href="#blog" class="scroll">Events</a></li>
                                </ul>
                            </li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                        </ul>
                    </nav>
                    <!-- //nav -->
                </div>
            </header>
            <!-- //header -->
            <div class="container">
                <!-- /banner -->
                <div class="banner-info-w3layouts">
                    <h3>Out Standing Office's</h3>
                    <p class="my-3">Lorem Ipsum has been the industry's standard since the 1500s.Vestibulum ante ipsum primis in faucibus orci luctus.</p> <a href="single.html" class="read-more mt-3 btn">Read More </a> </div>
            </div>
        </div>
        <!-- //banner -->
    </div>
    <!--// mian-content -->
    <!-- banner-bottom-wthree -->
    <section class="banner-bottom-wthree py-5" id="about">
        <div class="container py-md-5 px-lg-5">
            <div class="content-left-bottom text-center">
                <h3 class="tittle mb-lg-5 mb-4">About Us<span>.</span></h3>
            </div>
            <div class="content-right-bottom mt-md-0 mt-3 text-center">
                <p class="mt-2">Integer pulvinar leo id viverra feugiat.<strong class="text-capitalize"> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit.</strong> Sed porttitor orci vel fermentum elit maximus. Curabitur ut turpis massa in condimentum libero. Pellentesque maximus Pellentesque libero justo Nulla uter sollicitudin velit. Sed porttitor orci vel ferm semper at vel, ultrices in ligula semper at vel.</p>
                <p class="mt-3"><strong class="text-capitalize">Integer pulvinar leo id viverra feugiat.</strong> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit. Sed porttitor orci vel ferm semper at vel, ultrices in ligula.</p>
            </div>
            <div class="row banner-grids mt-lg-5">
                <div class="col-lg-4 banner-grid">
                    <div class="content-grid-info">
                        <div class="row">
                            <div class="col-lg-2">
                                <span class="fa fa-user" aria-hidden="true"></span>
                            </div>
                            <div class="col-lg-10">
                                <h4 class="mb-3">Mission</h4>
                                <p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 banner-grid">
                    <div class="content-grid-info">
                        <div class="row">
                            <div class="col-lg-2">
                                <span class="fa fa-eye" aria-hidden="true"></span>
                            </div>
                            <div class="col-lg-10">
                                <h4 class="mb-3">Vission</h4>
                                <p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 banner-grid">
                    <div class="content-grid-info">
                        <div class="row">
                            <div class="col-lg-2">
                                <span class="fa fa-tasks" aria-hidden="true"></span>
                            </div>
                            <div class="col-lg-10">
                                <h4 class="mb-3">Work</h4>
                                <p>Vestibulum ante ipsum primis in faucibus orci luctus.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //banner-bottom-wthree -->
    <!--/ about -->
    <section class="services py-5" id="services">
        <div class="container py-md-5">
            <div class="header pb-lg-3 pb-3 text-center">
                <h3 class="tittle mb-lg-3 mb-3">Maintenance Services<span>.</span></h3>
            </div>
            <div class="row ab-info second mt-lg-4">
                <div class="col-lg-3 ab-content">
                    <div class="ab-content-inner">
                        <img src="images/2.jpg" alt="news image" class="img-fluid">
                        <div class="ab-info-con">
                            <h4>Floor Design</h4>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit ullamcorper.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 ab-content">
                    <div class="ab-content-inner">
                        <img src="images/1.jpg" alt="news image" class="img-fluid">
                        <div class="ab-info-con">
                            <h4>Commercial Interior</h4>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit ullamcorper.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 ab-content">
                    <div class="ab-content-inner">
                        <img src="images/3.jpg" alt="news image" class="img-fluid">
                        <div class="ab-info-con">
                            <h4>Exterior Design</h4>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit ullamcorper.</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 ab-content">
                    <div class="ab-content-inner">
                        <img src="images/4.jpg" alt="news image" class="img-fluid">
                        <div class="ab-info-con">
                            <h4>Architecture Design</h4>
                            <p>Integer sit amet mattis quam, sit amet ultricies velit ullamcorper.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--// about -->
    <!--/mid-sec-->
    <section class="mid-sec py-5" id="mid">
        <div class="container py-lg-5">
            <div class="row">
                <div class="col-md-6 mid-right-content text-left mt-4">
                    <div class="row">
                        <div class="col-md-4 mid-left-img">
                            <img src="images/5.jpg" alt="news image" class="img-fluid">
                        </div>
                        <div class="col-md-8 mid-right-info">
                            <h5 class="mb-4">AGENCY INTERIOR</h5>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                    <div class="row my-4">
                        <div class="col-md-4 mid-left-img">
                            <img src="images/6.jpg" alt="news image" class="img-fluid">
                        </div>
                        <div class="col-md-8 mid-right-info">
                            <h5 class="mb-4">RESIDENTIAL INTERIOR</h5>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 mid-left-img">
                            <img src="images/7.jpg" alt="news image" class="img-fluid">
                        </div>
                        <div class="col-md-8 mid-right-info">
                            <h5 class="mb-4">COFFESHOP INTERIOR</h5>
                            <p>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mid-left-content text-left pl-lg-4">
                    <img src="images/mid.jpg" alt="news image" class="img-fluid">
                </div>
            </div>
        </div>
    </section>
    <!--//mid-sec-->
    <!-- Gallery -->
    <section class="gallery py-5" id="gallery">
        <div class="container py-md-5">
            <div class="header text-center">
                <h3 class="tittle mb-lg-5 mb-3">Our Gallery<span>.</span></h3>
            </div>
            <div class="row news-grids text-center">
                <div class="col-md-4 gal-img">
                    <a href="#gal1"><img src="images/g1.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal2"><img src="images/g2.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal3"><img src="images/g3.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal4"><img src="images/g4.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal5"><img src="images/g5.jpg" alt="news image" class="img-fluid"></a>
                </div>
                <div class="col-md-4 gal-img">
                    <a href="#gal6"><img src="images/g6.jpg" alt="news image" class="img-fluid"></a>
                </div>
            </div>
            <!-- popup-->
            <div id="gal1" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g1.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup -->
            <!-- popup-->
            <div id="gal2" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g2.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup -->
            <!-- popup-->
            <div id="gal3" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g3.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup3 -->
            <!-- popup-->
            <div id="gal4" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g4.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup -->
            <!-- popup-->
            <div id="gal5" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g5.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup -->
            <!-- popup-->
            <div id="gal6" class="pop-overlay animate">
                <div class="popup">
                    <img src="images/g6.jpg" alt="Popup Image" class="img-fluid" />
                    <p class="mt-4">Nulla viverra pharetra se, eget pulvinar neque pharetra ac int. placerat placerat dolor.</p>
                    <a class="close" href="#gallery">&times;</a>
                </div>
            </div>
            <!-- //popup -->
        </div>
    </section>
    <!--// gallery -->
    <!--/counter-->
    <section class="stats" id="plans">
        <div class="container">
            <div class="row text-center stats-content-w3pvt">
                <div class="col-lg-6 text-left pr-lg-5">
                    <h3 class="tittle two mb-lg-5 mb-4">Stats & Pricing Plans<span>.</span></h3>
                    <p><strong class="text-capitalize"> Pellentesque libero justo, semper at tempus vel, ultrices in sed ligula. Nulla uter sollicitudin velit.</strong>Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
                </div>
                <div class="col-md-6 stats-left">
                    <div class="row">
                        <div class="col-md-6 counter-gd">
                            <div class="counter">
                                <h3 class="timer count-title count-number">312</h3>
                                <p class="count-text">Fresh Ideas</p>
                            </div>
                        </div>
                        <div class="col-md-6 counter-gd">
                            <div class="counter">
                                <h3 class="timer count-title count-number">1980</h3>
                                <p class="count-text">Project Completed</p>
                            </div>
                        </div>
                        <div class="col-md-6 counter-gd">
                            <div class="counter">
                                <h3 class="timer count-title count-number">600</h3>
                                <p class="count-text">Hours Of Work</p>
                            </div>
                        </div>
                        <div class="col-md-6 counter-gd">
                            <div class="counter">
                                <h3 class="timer count-title count-number">550</h3>
                                <p class="count-text">Clients</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row ab-info mt-lg-5">
                <div class="col-lg-3 price-main text-center">
                    <div class="pricing-grid card">
                        <div class="card-body">
                            <h4 class="text-uppercase mb-3">ECONOMY</h4>
                            <h5 class="card-title pricing-card-title">
                                <span class="align-top">$</span>199
                                <label>Per Month</label>
                            </h5>
                            <ul class="price-in list-unstyled mt-3 mb-4">
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                            </ul>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase scroll" href="#contact">
                                            Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 price-main text-center">
                    <div class="pricing-grid card">
                        <div class="card-body">
                            <h4 class="text-uppercase mb-3">BUSINESS</h4>
                            <h5 class="card-title pricing-card-title">
                                <span class="align-top">$</span>199
                                <label>Per Month</label>
                            </h5>
                            <ul class="price-in list-unstyled mt-3 mb-4">
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                            </ul>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase scroll" href="#contact">
                                            Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 price-main text-center">
                    <div class="pricing-grid card">
                        <div class="card-body">
                            <h4 class="text-uppercase mb-3">GOLD</h4>
                            <h5 class="card-title pricing-card-title">
                                <span class="align-top">$</span>199
                                <label>Per Month</label>
                            </h5>
                            <ul class="price-in list-unstyled mt-3 mb-4">
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                            </ul>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase scroll" href="#contact">
                                            Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 price-main text-center">
                    <div class="pricing-grid card">
                        <div class="card-body">
                            <h4 class="text-uppercase mb-3">PLATINUM</h4>
                            <h5 class="card-title pricing-card-title">
                                <span class="align-top">$</span>199
                                <label>Per Month</label>
                            </h5>
                            <ul class="price-in list-unstyled mt-3 mb-4">
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                                <li>Lorem Ipsum</li>
                            </ul>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase scroll" href="#contact">
                                            Get Started</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--//counter-->
    <!-- blog -->
    <section class="blog_w3ls py-5" id="blog">
        <div class="container py-xl-5 py-lg-3">
            <div class="header text-center">
                <h3 class="tittle mb-lg-5 mb-4">Blog Posts<span>.</span></h3>
            </div>
            <div class="row">
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 med-blog">
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g1.jpg" alt="image">
							</a>
                        </div>
                        <div class="card-body border border-top-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 12, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6 mt-md-0 mt-5">
                    <div class="card border-0 med-blog">
                        <div class="card-body border border-bottom-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 14, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                            </div>
                        </div>
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g3.jpg" alt="image">
							</a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
                    <div class="card border-0 med-blog">
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g2.jpg" alt="image">
							</a>
                        </div>
                        <div class="card-body border border-top-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 16, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
            </div>
            <div class="row mt-5">
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6">
                    <div class="card border-0 med-blog">
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g6.jpg" alt="image">
							</a>
                        </div>
                        <div class="card-body border border-top-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 18, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6 mt-md-0 mt-5">
                    <div class="card border-0 med-blog">
                        <div class="card-body border border-bottom-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 20, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <div class="price-button mt-md-3 mt-2">
                                    <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g5.jpg" alt="image">
							</a>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
                <!-- blog grid -->
                <div class="col-lg-4 col-md-6 mt-lg-0 mt-5">
                    <div class="card border-0 med-blog">
                        <div class="card-header p-0">
                            <a href="single.html">
								<img class="card-img-bottom" src="images/g4.jpg" alt="image">
							</a>
                        </div>
                        <div class="card-body border border-top-0 pb-5">
                            <div class="mb-3">
                                <h5 class="blog-title card-title font-weight-bold m-0">
                                    <a href="single.html">Dictum porta auris</a>
                                </h5>
                                <div class="blog_w3icon">
                                    <span>
										Jan 24, 2019 - loremipsum</span>
                                </div>
                            </div>
                            <p class="mb-4">Cras ultricies ligula sed magna dictum porta auris blandita.</p>
                            <div class="price-button mt-md-3 mt-2">
                                <a class="btn text-uppercase" href="single.html">
                                          Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- //blog grid -->
            </div>
        </div>
    </section>
    <!-- //blog -->
    <!--/testimonials-->
    <section class="testimonials py-5" id="testimonials">
        <div class="container py-md-3">
            <div class="header-wthree text-center">
                <h3 class="tittle mb-lg-5 mb-3"> Client Reviews<span>.</span></h3>
            </div>
            <div class="row">
                <div class="col-md-6 test-info-w3ls text-left">
                    <p><span class="fa fa-quote-left"></span> Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. <span class="fa fa-quote-right"></span></p>
                    <div class="test-img text-right mb-3">
                        <img src="images/te2.jpg" class="img-fluid" alt="user-image">
                    </div>
                    <h3 class="my-md-2 my-3 text-right">Jenifer Burns</h3>
                    <ul class="list-unstyled w3ls-icons clients text-right">
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star-half-o"></span>
						</a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6 test-info-w3ls text-left">
                    <p><span class="fa fa-quote-left"></span> Lorem Ipsum has been the industry's standard since the 1500s. Praesent ullamcorper dui turpis.Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. <span class="fa fa-quote-right"></span></p>
                    <div class="test-img text-right mb-3">
                        <img src="images/te3.jpg" class="img-fluid" alt="user-image">
                    </div>
                    <h3 class="my-md-2 my-3 text-right"> Abraham Smith</h3>
                    <ul class="list-unstyled w3ls-icons clients text-right">
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-star-half-o"></span>
						</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!--//testimonials-->
    <!-- contact -->
    <section class="contact py-5" id="contact">
        <div class="container pb-5">
            <div class="header py-lg-5 pb-3 text-center">
                <h3 class="tittle mb-lg-5 mb-3"> Contact Us<span>.</span></h3>
            </div>
            <ul class="list-unstyled row text-left mb-lg-5 mb-3">
                <li class="col-lg-4 adress-info">
                    <div class="row">
                        <div class="col-md-3 text-lg-center adress-icon">
                            <span class="fa fa-map-marker"></span>
                        </div>
                        <div class="col-md-9 text-left">
                            <h6>Location</h6>
                            <p>The company name
                                <br>New York City. </p>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 adress-info">
                    <div class="row">
                        <div class="col-md-3 text-lg-center adress-icon">
                            <span class="fa fa-envelope-open-o"></span>
                        </div>
                        <div class="col-md-9 text-left">
                            <h6>Email</h6>
                            <a href="https://www.51qianduan.com/">51前端</a>
                            <br>
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                    </div>
                </li>
                <li class="col-lg-4 adress-info">
                    <div class="row">
                        <div class="col-md-3 text-lg-center adress-icon">
                            <span class="fa fa-mobile"></span>
                        </div>
                        <div class="col-md-9 text-left">
                            <h6>Phone Number</h6>
                            <p>+ 1234567890</p>
                            <p>+ 0987654321</p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="contact-form mx-auto text-left mt-lg-5 mt-4">
                <form name="contactform" id="contactform1" method="post" action="#">
                    <div class="row">
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Name *</label>
                                <input type="text" class="form-control" id="name" placeholder="" name="name" required="">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Email *</label>
                                <input type="email" class="form-control" id="email" placeholder="" name="email" required="">
                            </div>
                        </div>
                        <div class="col-lg-4 con-gd">
                            <div class="form-group" data-aos="fade-up">
                                <label>Phone No. *</label>
                                <input type="text" class="form-control" id="phone" placeholder="" name="phone" required="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group mb-5">
                        <label>How can we help?</label>
                        <textarea name="issues" class="form-control" id="iq" placeholder="" required=""></textarea>
                    </div>
                    <div class="contact-page">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </form>
            </div>
            <div class="map mt-md-5 mt-4">
                <iframe src="" class="map" style="border:0" allowfullscreen=""></iframe> </div>
        </div>
    </section>
    <!-- //contact -->
    <!-- footer -->
    <footer class="footer-content">
        <div class="layer footer">
            <div class="container-fluid">
                <div class="row footer-top-inner-w3ls">
                    <div class="col-lg-4 col-md-6 footer-top mt-md-0 mt-sm-5">
                        <h2>
                            <a class="navbar-brand" href="index.html"><span class="fa fa-gg" aria-hidden="true"></span>
                          Dcor
                        </a>
                        </h2>
                        <p class="my-3">Donec consequat sam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus</p>
                        <p>
                            Id quod possimusapien ut leo cursus rhoncus. Nullam dui mi, vulputate ac metus at, semper varius orci.
                        </p>
                    </div>
                    <div class="col-lg-2 col-md-6 mt-md-0 mt-5">
                        <div class="footer-w3pvt">
                            <h3 class="mb-3 w3pvt_title">Navigation</h3>
                            <hr>
                            <ul class="list-info-w3pvt">
                                <li>
                                    <a href="#home" class="scroll">
                                    Home
                                </a>
                                </li>
                                <li class="my-2">
                                    <a href="#about" class="scroll">
                                    About Us
                                </a>
                                </li>
                                <li class="my-2">
                                    <a href="#gallery" class="scroll">
                                    Gallery
                                </a>
                                </li>
                                <li class="mb-2">
                                    <a href="#services" class="scroll">
                                    Services
                                </a>
                                </li>
                                <li>
                                    <a href="#contact" class="scroll">
                                    Contact Us
                                </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-lg-0 mt-5">
                        <div class="footer-w3pvt">
                            <h3 class="mb-3 w3pvt_title">Links</h3>
                            <hr>
                            <ul class="list-info-w3pvt">
                                <li>
                                    <a href="#about" class="scroll">
                                    Our Mission
                                </a>
                                </li>
                                <li class="my-2">
                                    <a href="#blog" class="scroll">
                                    Latest Posts
                                </a>
                                </li>
                                <li class="my-2">
                                    <a href="#">
                                    Explore
                                </a>
                                </li>
                                <li class="mb-2">
                                    <a href="#contact" class="scroll">
                                    Find us
                                </a>
                                </li>
                                <li>
                                    <a href="index.html">
                                    Privacy Policy
                                </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-lg-0 mt-5">
                        <div class="footer-w3pvt">
                            <h3 class="mb-3 w3pvt_title">Contact Us</h3>
                            <hr>
                            <div class="last-w3ls-contact">
                                <p>
                                    <a href="https://www.51qianduan.com/">51前端</a>
                                </p>
                            </div>
                            <div class="last-w3ls-contact my-2">
                                <p>+ 456 123 7890</p>
                            </div>
                            <div class="last-w3ls-contact">
                                <p>+ 90 nsequursu dsdesdc,
                                    <br>xxx Honey State 049436.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <p class="copy-right-grids text-li text-center my-sm-4 my-4">Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
                <div class="w3ls-footer text-center mt-4">
                    <ul class="list-unstyled w3ls-icons">
                        <li>
                            <a href="#">
							<span class="fa fa-facebook-f"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-twitter"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-dribbble"></span>
						</a>
                        </li>
                        <li>
                            <a href="#">
							<span class="fa fa-vk"></span>
						</a>
                        </li>
                    </ul>
                </div>
                <div class="move-top text-right"><a href="https://www.51qianduan.com/">51前端</a></div>
            </div>
            <!-- //footer bottom -->
        </div>
    </footer>
    <!-- //footer -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 黄色 大气 霸气 设计 设计公司

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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