红色欧美风格响应式品牌设计官网网页模板代码下载



4 12 5



模板描述:响应式品牌设计官网,红色欧美风格响应式品牌设计官网网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/animate.css" media="screen" rel="stylesheet">
<link href="css/prettyPhoto.css" rel="stylesheet">

2. 引入JS

<script src="js/libs/modernizr.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/general.js"></script>
<script src="js/jquery.onecarousel.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.powerful-placeholder.min.js"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="js/dropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.0.js"></script>
<script type="text/javascript" src="js/modernizr.mediaqueries.transforms3d.js"></script>
<script type="text/javascript" src="js/responsive-hub.js"></script>
<script type="text/javascript" src="js/jquery.silver_track.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.navigator.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.bullet_navigator.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.remote_content.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.responsive_hub_connector.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.silver_track.css3_animation.js" charset="utf-8"></script>
<script type="text/javascript" src="js/script.js" charset="utf-8"></script>
<script type="text/javascript" src="js/example4.js" charset="utf-8"></script>
<script src="js/classie.js"></script>
<script src="js/tiltSlider.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/jquery.dlmenu.js"></script>

3. HTML代码

		<ul class="cb-slideshow">
            <li><span>Image 01</span><div><h3></h3></div></li>
            <li><span>Image 02</span><div><h3></h3></div></li>
            <li><span>Image 03</span><div><h3></h3></div></li>
            <li><span>Image 04</span><div><h3></h3></div></li>
            <li><span>Image 05</span><div><h3></h3></div></li>
            <li><span>Image 06</span><div><h3></h3></div></li>
        </ul>
    	<div class="container">
            <nav class="navbar navbar-default" role="navigation">
              <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <a class="navbar-brand" href="#">Brand</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                  <ul class="nav navbar-nav hidden-xs">
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown" data-delay="1000" data-close-others="false">Dropdown <b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                    <li><a href="contact.html">Contact</a></li>
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>
            <div id="dl-menu" class="dl-menuwrapper visible-xs">
						<button class="dl-trigger">Open Menu</button>
						<ul class="dl-menu">
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="about.html">About</a>
							</li>
							<li>
								<a href="portfolio.html">Portfolio</a>
							</li>
							<li>
								<a href="blog.html">Blog</a>
							</li>
                            <li>
								<a href="team.html">Team</a>
							</li>
							<li>
								<a href="#">Dropdown</a>
								<ul class="dl-submenu">
									<li>
										<a href="#">Living Room</a>
										<ul class="dl-submenu">
											<li><a href="#">Sofas &amp; Loveseats</a></li>
											<li><a href="#">Coffee &amp; Accent Tables</a></li>
											<li><a href="#">Chairs &amp; Recliners</a></li>
											<li><a href="#">Bookshelves</a></li>
										</ul>
									</li>
									<li>
										<a href="#">Bedroom</a>
										<ul class="dl-submenu">
											<li>
												<a href="#">Beds</a>
												<ul class="dl-submenu">
													<li><a href="#">Upholstered Beds</a></li>
													<li><a href="#">Divans</a></li>
													<li><a href="#">Metal Beds</a></li>
													<li><a href="#">Storage Beds</a></li>
													<li><a href="#">Wooden Beds</a></li>
													<li><a href="#">Children's Beds</a></li>
												</ul>
											</li>
											<li><a href="#">Bedroom Sets</a></li>
											<li><a href="#">Chests &amp; Dressers</a></li>
										</ul>
									</li>
									<li><a href="#">Home Office</a></li>
									<li><a href="#">Dining &amp; Bar</a></li>
									<li><a href="#">Patio</a></li>
								</ul>
							</li>
							<li>
								<a href="contact.html">Contact</a>
							</li>
						</ul>
					</div><!-- /dl-menuwrapper -->
            <div class="container">
                <!-- row-->
                <div class="row">
                    <div class="col-sm-12">
                        <!-- Main Slider -->
                        <div id="myCarousel" class="main-slider carousel carousel-red slide myCarousel">
                            <div class="carousel-inner">
                                <div class="item active">
                                    <div class="carousel-caption">
                                        <div class="slider-title" data-animate="flipInY">
                                            <a href="#">A complete online solutions provider! We think big, we will take your business and make it global!</a>
                                        </div>
                                        <a href="#" class="btn btn-turquoise" data-animate="fadeInDown"><span>Read More</span></a>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <div class="slider-title" data-animate="bounceIn">
                                            <a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry, the global standard.</a>
                                        </div>
                                        <a href="#" class="btn btn-turquoise" data-animate="rotateIn"><span>Read More</span></a>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="carousel-caption">
                                        <div class="slider-title" data-animate="lightSpeedIn">
                                            <a href="#">We help your business connect better &amp; reach higher, so we will take it and make it global!</a>
                                        </div>
                                        <a href="#" class="btn btn-turquoise" data-animate="rollIn"><span>Read More</span></a>
                                    </div>
                                </div>
                            </div>
                            <a href="https://www.51qianduan.com/">51前端</a>
                            <a href="https://www.51qianduan.com/">51前端</a>
                        </div>
                        <script type="text/javascript">
                            $(document).ready(function() {
                                $('.myCarousel').oneCarousel({
                                    easeIn: 'rotateIn',
                                    interval: 5000,
                                    pause: 'hover'
                                });
                            });
                        </script>
                        <!--/ Main Slider -->
                    </div>
                </div>
                <!--/ row-->
            </div>
            <!--/ container-->
    </div><!-- /container -->
    <div class="main-content st-feature">
    	<div class="container">
        	<div class="row">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                	<div class="box">
                    	<p class="f-icon pull-left">
                        	<i class="fa fa-users"></i>
                        </p>
                        <div class="feature-content pull-right">
                        <h2>24/7 Professional Staff Support</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                	<div class="box">
                    	<p class="f-icon pull-left">
                        	<i class="fa fa-shield"></i>
                        </p>
                        <div class="feature-content pull-right">
                        <h2>Secure Data Management</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                	<div class="box">
                    	<p class="f-icon pull-left">
                        	<i class="fa fa-usd"></i>
                        </p>
                        <div class="feature-content pull-right">
                        <h2>Money Back Guarantee</h2>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/ .st-feature  -->
    <div class="main-content nd-feature">
    	<div class="container">
            <div class="headline">
        		<h2><i class="fa fa-tasks"></i> Our Work Process</h2>
        	</div>
        	<div class="row">
            	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                	<div class="feature-img">
                        <img src="img/img1.png" alt="feature-img" class="img-responsive" />
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                	<div class="w-process">
                    	<div class="w-process-icon pull-left">
                        	<i class="fa fa-wrench fa-lg"></i>
                        </div>
                        <div class="w-process-content">
                        	<h5>Research and Analysis</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div><!--w-process-->
                    <div class="w-process">
                    	<div class="w-process-icon pull-left">
                        	<i class="fa fa-clock-o fa-lg"></i>
                        </div>
                        <div class="w-process-content">
                        	<h5>Submission</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div><!--w-process-->
                    <div class="w-process">
                    	<div class="w-process-icon pull-left">
                        	<i class="fa fa-cog fa-lg"></i>
                        </div>
                        <div class="w-process-content">
                        	<h5>Strategy</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div><!--w-process-->
                    <div class="w-process">
                    	<div class="w-process-icon pull-left">
                        	<i class="fa fa-anchor fa-lg"></i>
                        </div>
                        <div class="w-process-content">
                        	<h5>Link Building</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div><!--w-process-->
                    <div class="w-process w-process-last">
                    	<div class="w-process-icon pull-left">
                        	<i class="fa fa-bullseye fa-lg"></i>
                        </div>
                        <div class="w-process-content">
                        	<h5>Content Management</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                        </div>
                    </div><!--/w-process-->
                </div>
            </div>
            <div class="services">
                <div class="headline">
                    <h2><i class="fa fa-cogs"></i> Our Powerful Services</h2>
                </div>
                <div class="row">
                	<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    	<div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-envelope-o"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>Email Marketing</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                        <div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-shopping-cart"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>Ecommerce Solution</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                        <div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-qrcode"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>Email Marketing</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                    	<div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-chain-broken"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>Link Building</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                        <div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-rocket"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>Web Development</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                        <div class="services-box">
                        	<div class="services-icon pull-left">
                            	<i class="fa fa-shield"></i>
                            </div>
                        	<div class="services-content">
                        	<h5>SEO Consulting</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut et.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/services-->
        </div>
    </div>
    <div class="interested-offer">
            <div class="container">
            <!-- Main Slider -->
                        <div class="m-testemonial">
          		<div class="testimonials">
                        <ul id="testimonials-1">
                            <li>
                                <div class="testimonials-text"><p>About the author: Brent is a writer who has a love for creativity and enjoys experimenting with various techniques in print &amp; web writing. Check out his tutorials and articles.</p></div>
                                <div class="testimonials-author"><a href="#"><span>BRENT JARVIS</span>, author</a></div>
                                <div class="testimonials-avatar"><a href="#"><img src="images/temp/avatar4.png" alt="" /></a></div>
                            </li>
                            <li>
                                <div class="testimonials-text"><p>About the author: Lene Marlin made her Norwegian debut on 12 October 1998, with the single "Unforgivable Sinner". It was the fastest selling single in Norwegian music history.</p></div>
                                <div class="testimonials-author"><a href="#"><span>Lene Marlin</span>, singer</a></div>
                                <div class="testimonials-avatar"><a href="#"><img src="images/temp/avatar5.png" alt="" /></a></div>
                            </li>
                            <li>
                                <div class="testimonials-text"><p>About the author: Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Nullam in dui maurisiva mus hendrerit arcu sed erat mole stie vehi cula. Sed auctor neque eu tellus.</p></div>
                                <div class="testimonials-author"><a href="#"><span>John Doe</span>, artist</a></div>
                                <div class="testimonials-avatar"><a href="#"><img src="images/temp/avatar6.png" alt="" /></a></div>
                            </li>
                        </ul>
                        <a id="testimonials-prev-1" class="prev" href="#">prev</a>
                        <a id="testimonials-next-1" class="next" href="#">next</a>
                    </div><!--/ .testimonials -->
          </div><!--/ .m-testemonial -->
                        <script type="text/javascript">
                            jQuery(document).ready(function($) {
								$('#testimonials-1').carouFredSel({
									next : "#testimonials-next-1",
									prev : "#testimonials-prev-1",
									infinite: false,
									items: 1,
									auto: {
										play: true,
										timeoutDuration: 8000
									},
									scroll: {
										items : 1,
										fx: "crossfade",
										easing: "linear",
										pauseOnHover: true,
										duration: 200
									}
								});
								$(window).resize(function() {
									$('#testimonials-1').carouFredSel({
										next : "#testimonials-next-1",
										prev : "#testimonials-prev-1",
										infinite: false,
										items: 1,
										auto: {
											play: true,
											timeoutDuration: 8000
										},
										scroll: {
											items : 1,
											fx: "crossfade",
											easing: "linear",
											pauseOnHover: true,
											duration: 200
										}
									});
									$('#partners').carouFredSel({
										next : "#partners-next",
										prev : "#partners-prev",
										auto: 8000,
										scroll: {items : 1}
									});
								});
							});
                        </script>
                </div><!-- /container -->
                        <!--/ Main Slider -->
    </div><!-- /interested-offer -->
    <div class="main-content">
    	<div class="container">
            <div class="recent-project">
                <div class="headline">
                    <h2><i class="fa fa-flask"></i> Our Recent Project</h2>
                </div>
                    <div class="track example-4">
                        <div class="inner">
                          <div class="view-port">
                            <div id="example-4" class="slider-container">
                              <div class="item">
                                <img src="img/img1.jpg" alt="01">
                              </div>
                              <div class="item">
                                <img src="img/img2.jpg" alt="02" >
                              </div>
                              <div class="item">
                                <img src="img/img3.jpg" alt="03">
                              </div>
                              <div class="item">
                                <img src="img/img4.jpg" alt="04" >
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05" >
                              </div>
                              <div class="item">
                                <img src="img/img6.jpg" alt="06" >
                              </div>
                              <div class="item">
                                <img src="img/img7.jpg" alt="07">
                              </div>
                              <div class="item">
                                <img src="img/img8.jpg" alt="08">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05" >
                              </div>
                              <div class="item">
                                <img src="img/img6.jpg" alt="06" >
                              </div>
                              <div class="item">
                                <img src="img/img7.jpg" alt="07">
                              </div>
                              <div class="item">
                                <img src="img/img8.jpg" alt="08">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05" >
                              </div>
                              <div class="item">
                                <img src="img/img6.jpg" alt="06" >
                              </div>
                              <div class="item">
                                <img src="img/img7.jpg" alt="07">
                              </div>
                              <div class="item">
                                <img src="img/img8.jpg" alt="08">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05" >
                              </div>
                              <div class="item">
                                <img src="img/img6.jpg" alt="06" >
                              </div>
                              <div class="item">
                                <img src="img/img7.jpg" alt="07">
                              </div>
                              <div class="item">
                                <img src="img/img8.jpg" alt="08">
                              </div>
                              <div class="item">
                                <img src="img/img5.jpg" alt="05">
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="pagination">
                          <a href="#" class="prev disabled"></a>
                          <a href="#" class="next disabled"></a>
                        </div>
                      </div>
            </div><!-- /recent-project -->
    	</div><!-- /container -->
        <div class="quote">
            <div class="container">
                <div class="row">
                	<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                        <div class="quote-icon">
                            <i class="fa fa-thumbs-up"></i>
                        </div>
                        <div class="quote-content">
                            <h1>Are you interested in our offer?</h1>
                            <h6>This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit</h6>
                        </div><!-- /quote-content -->
                        </div>
                        <div class="col-xs-12 col-sm-4 col-md-2 col-lg-2">
                        	<a href="#" class="quote-btn">Get a Quote</a>
                        </div>
                	</div><!-- /row -->
            </div><!-- /container -->
        </div><!-- /quote -->
        <div class="container">
                <div class="headline">
                    <h2><i class="fa fa-user"></i> Our Honorable Client</h2>
                </div>
                 <div class="top-brand">
                            <div class="partners">
                            	<a id="partners-prev" class="prev" href="#">prev</a>
                                <a id="partners-next" class="next" href="#">next</a>
                                <ul id="partners">
                                    <li><a href="#"><img src="images/temp/partner1.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner2.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner3.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner4.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner5.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner1.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner2.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner3.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner4.png" alt="" /></a></li>
                                    <li><a href="#"><img src="images/temp/partner5.png" alt="" /></a></li>
                                </ul>
                            </div>
                  </div><!--/ .top-brand  -->
        </div><!-- /container -->
        <div class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    	<div class="f-about">
                        	<div class="headline">
                                <h2><i class="fa fa-building-o"></i> Our Honorable Client</h2>
                            </div>
                            <ul>
                            	<li><a href="#">About Us</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">Team</a></li>
                                <li><a href="#">Privacy</a></li>
                                <li><a href="#">Support</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    	<div class="f-recent-post">
                        	<div class="headline">
                                <h2><i class="fa fa-pencil"></i> Recent Blog Post</h2>
                            </div>
                            <ul>
                            	<li>
                                	<div class="f-recent-post-pic">
                                    	<img src="img/img1.jpg" alt="1" />
                                    </div>
                                    <div class="f-recent-post-contect">
                                    	<div class="f-recent-post-date"><p>Dec-07-13 Super User</p></div>
                                        <h6>Strict Standards:</h6>
                                        <p>This is Photoshop's version of Lorem Ipsum. <a href="#">Proin gravida nibh vel velit auctor aliquet.</a></p>
                                    </div>
                                </li>
                                <li>
                                	<div class="f-recent-post-pic">
                                    	<img src="img/img1.jpg" alt="1" />
                                    </div>
                                    <div class="f-recent-post-contect">
                                    	<div class="f-recent-post-date"><p>Dec-07-13 Super User</p></div>
                                        <h6>Strict Standards:</h6>
                                        <p>This is Photoshop's version of Lorem Ipsum. <a href="#">Proin gravida nibh vel velit auctor aliquet.</a></p>
                                    </div>
                                </li>
                                <li>
                                	<div class="f-recent-post-pic">
                                    	<img src="img/img1.jpg" alt="1" />
                                    </div>
                                    <div class="f-recent-post-contect">
                                    	<div class="f-recent-post-date"><p>Dec-07-13 Super User</p></div>
                                        <h6>Strict Standards:</h6>
                                        <p>This is Photoshop's version of Lorem Ipsum. <a href="#">Proin gravida nibh vel velit auctor aliquet.</a></p>
                                    </div>
                                </li>
                            </ul>
                        </div><!-- /f-recent-post -->
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
                    	<div class="f-getintuch">
                        	<div class="headline">
                                <h2><i class="fa fa-location-arrow"></i> Get In Touch With Us</h2>
                            </div>
                            <h3>Meet</h3>
                            <p>Chandgaon Abashik, B block,</p>
                            <p>Building No. 503, Road No. 1</p>
                            <p>Chittagong, Bangladesh</p>
                            <h3>Call</h3>
                            <p>+880123456789</p>
                            <h3>Support</h3>
                            <p>info@brand.com</p>
                            <form class="form-inline" role="form">
                              <div class="form-group">
                                <label class="sr-only" for="exampleInputEmail2">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
                              </div>
                              <button type="submit" class="btn btn-default">Search</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="row">
					<div class="clo-xs-12" style="font-size: 14px;color: #000;">
						Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
					</div>
				</div>
            </div>
        </div><!-- /footer -->
    </div>
		<script>
			new TiltSlider( document.getElementById( 'slideshow' ) );
			$( '#dl-menu' ).dlmenu({
					animationClasses : { classin : 'dl-animate-in-3', classout : 'dl-animate-out-3' }
				});
		</script>
    <!-- /responsive menu -->
    <script>
    	$(function() {
				$( '#dl-menu' ).dlmenu({
					animationClasses : { classin : 'dl-animate-in-3', classout : 'dl-animate-out-3' }
				});
			});
    </script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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