index.html 15 KB
<!DOCTYPE html>
<head>
	<meta charset="utf-8"> 
	<title>index</title> 
	<!--bootstrap3 css-->
	<link href="../css/bootstrap.css" rel="stylesheet">
	<!--custom css-->
	<link href="../css/ionicons.css" rel="stylesheet">
	<link href="../css/style.css" rel="stylesheet" type="text/css">
	<!--slick css -->
	<link rel="stylesheet" type="text/css" href="../css/slick.css"/>
	<link rel="stylesheet" type="text/css" href="../css/slick-theme.css"/>
	<script src="../js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../js/bootstrap.js"></script>
	<script type="text/javascript" src="../js/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="../js/slick.js"></script>
</head>
<body>
	<header>
        <div id="top-bar" class="container">
            <div>
                <div id="language">
                    <a href="">繁体中文</a>
                    <a href="">简体中文</a>
                    <a href="">English</a>
                </div>
                <div id="search-box">
                    <input type="text" class="form-control" placeholder="Search">
                    <span><i class="glyphicon glyphicon-search"></i></span>
                </div>

            </div>
             
            
        </div>
		<div id="main-nav">
			<div class="container">
				<div class="navbar-header">
                    <button type="button" class="navbar-toggle " data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html"><img src="../img/logo-dark.png" class="img-responsive" alt=""></a>
                </div>
                <div class="navbar-collapse collapse">
	                <ul class="nav navbar-nav navbar-right">
					  <li class="active"><a href="#" class="line-bottom-nav">首页</a></li>
					  <li><a href="#">解决方案</a></li>
					  <li><a href="#">客户案例</a></li>
					  <li><a href="#">关于我们</a></li>
					  <li><a href="#">联系我们</a></li>
					</ul>
                </div>
				
			</div>
			
		</div>	
	</header>
	<div id="carousels" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousels" data-slide-to="0" class="active"></li>
	    <li data-target="#carousels" data-slide-to="1"></li>
	    <li data-target="#carousels" data-slide-to="2"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner" role="listbox">
	    <div class="item active">
	      <img src="../img/img-1.jpg" alt="img1">
	      <div class="carousel-caption">
	        ...
	      </div>
	    </div>
	    <div class="item">
	      <img src="../img/img-2.jpg" alt="img2">
	      <div class="carousel-caption">
	        ...
	      </div>
	    </div>
	    <div class="item">
	      <img src="../img/img-3.jpg" alt="img3">
	      <div class="carousel-caption">
	        ...
	      </div>
	    </div>
	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousels" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left"></span>
	    <span class="sr-only">Previous</span>
	  </a>
	  <a class="right carousel-control" href="#carousels" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right"></span>
	    <span class="sr-only">Next</span>
	  </a>
	</div>
    <div class="space-50"></div>
	<div class="container">
        <div class="row">
            <div class="col-md-12 text-center wow animated fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
                <h2>专注最新WEB技术</h2>
                <h3 class="subtitle">为客户提供最佳的跨平台WEB应用实施方案</h3>
            </div>
            <div class="space-70"></div>
            <div class=" col-sm-4">
                <div class="services-box">
                    <i class="ion-laptop"></i>
                    <h1>内容管理</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl risus, porta sit amet dui eget...
                    </p>
                </div>
            </div><!--services box-->
            <div class=" col-sm-4">
                <div class="services-box">
                    <i class="ion-ios-color-wand-outline"></i>
                    <h1>数字营销</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl risus, porta sit amet dui eget...
                    </p>
                </div>
            </div><!--services box-->
            <div class="col-sm-4">
                <div class="services-box">
                    <i class="ion-social-twitter-outline"></i>
                    <h1>数字分析</h1>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nisl risus, porta sit amet dui eget...
                    </p>
                </div>
            </div><!--services box-->
        </div><!--row end-->
    </div>
    <div class="space-70"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h3 class="heading-sec">最新案例</h3>
            </div>
        </div><!--row-->
        <div class="row">
            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-1.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->
            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-2.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->
            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-3.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->


            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-4.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->
            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->
            <div class="col-md-4 col-sm-6 margin-btm-40 col-xs-8 col-xs-offset-2 col-sm-offset-0">
                <div class="portfolio-sec">
                    <div class="portfolio-thumnail">
                        <a href="portfolio-single.html">
                            <img src="../img/work/work-6.jpg" class="img-responsive" alt="">
                        </a>
                    </div>
                    <div class="portfolio-desc text-center">
                        <h4 class="portfolio-post-title">portfolio item title here</h4>
                    </div>
                </div>
            </div><!--portfolio item -->
        </div><!--row portfolio item-->
    </div>
    <div class="space-70"></div>
    <section id="content-region-1" class="padding-40">
        <div class="container">
            <div class="row">
                <div class="col-md-7 features">
                    <h3 class="line-bottom-title">我们的服务</h3>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ipsum mauris. Fusce condimentum mollis eros vitae facilisis. Praesent gravida dignissim felis, id sagittis mauris rutrum non. Nullam pretium id sem ut hendrerit.
                    </p>
                    <div class="space-30"></div>
                    <div class="row">
                        <div class="col-md-3 services-icon">
                            <i class="ion-laptop"></i>
                        </div>
                        <div class="col-md-9 services-text">
                            <h4 class="heading-mini">100% Responsive layout</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ipsum mauris. Fusce condimentum mollis eros vitae facilisis. 
                            </p>
                        </div>
                    </div><!--services list-->
                    <div class="space-30"></div>
                    <div class="row">
                        <div class="col-md-3 services-icon">
                            <i class="ion-ios-barcode-outline"></i>
                        </div>
                        <div class="col-md-9 services-text">
                            <h4 class="heading-mini">Clean code</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ipsum mauris. Fusce condimentum mollis eros vitae facilisis. 
                            </p>
                        </div>
                    </div><!--services list-->
                    <div class="space-30"></div>
                    <div class="row">
                        <div class="col-md-3 services-icon">
                            <i class="ion-compose"></i>
                        </div>
                        <div class="col-md-9 services-text">
                            <h4 class="heading-mini">Easy customization</h4>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ipsum mauris. Fusce condimentum mollis eros vitae facilisis. 
                            </p>
                        </div>
                    </div><!--services list-->


                </div>
                <div class="col-md-5 visible-md visible-lg">
                    <img src="../img/ipad.png" class="img-responsive" alt="">
                </div>
            </div>

        </div><!--container-->
    </section>
    <div class="space-70"></div>
    <section id="customer" class="padding-40">
        <div class="container">
        	<h3 class="line-bottom-title">我们的客户</h3>
        	 <ul class="pagination">
			    <li><span class="pre">&lt;</span></li>
			    <li><span class="next">&gt;</span></li>
			 </ul>
            <div class="row">
				<div class="col-xs-12 filtering">
				    <div class="display-content">
				    	<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg"  alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				    <div class="display-content">
						<a href="portfolio-single.html">
                            <img src="../img/work/work-5.jpg" alt="">
                        </a>
				    </div>
				</div>
            </div>
        </div><!--container-->
    </section>
    <div class="space-70"></div>
    <footer>
        <div class="copyright">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <span>凝新科技 © 2017 leadstec Technology all right reserved</span> 
                    </div>
                </div>
            </div>
        </div>
    </footer>

</body>
 <script type="text/javascript">
    $(document).ready(function(){
		$('.filtering').slick({
		  autoplay: false,
		  slidesToShow: 4,
		  slidesToScroll: 1,
		  arrows: false,
		});

		$('.pre').on('click', function(){
		  $('.filtering').slick('slickPrev');
		});

        $('.next').on('click', function(){
          $('.filtering').slick('slickNext');
        });
    });
 </script>
</html>