红色扁平风格bootstrap商务公司网页模板



10 36 13



模板描述:bootstrap商务公司,红色扁平风格bootstrap商务公司网页模板html模板下载

代码结构

1. 引入CSS

<link href='https://fonts.googleapis.com/css?family=Raleway:200,300,400,700,900,800' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto:200,300,400,900,700,500,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/justifiedGallery.min.css">
<link rel="stylesheet" href="css/et-font.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.theme.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/style2.css">

2. 引入JS

<script src="js/modernizr-custom.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="js/vendor/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.justifiedGallery.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/main.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/grid.js"></script>

3. HTML代码

<!-- #preloader -->
<div id="preloader">
	<div class="preloader loading">
		<span class="slice"></span>
		<span class="slice"></span>
		<span class="slice"></span>
		<span class="slice"></span>
		<span class="slice"></span>
		<span class="slice"></span>
	</div>
</div>
<!-- end #preloader -->
<header>
	<nav class="navbar navbar-fixed-top" role="navigation">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="#">
							<img src="img/logo.png" height="45" width="104" alt="">
						</a>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse navbar-ex1-collapse">
						<ul class="nav navbar-nav navbar-right main-menu">
							<li><a href="#">Home</a></li>
							<li><a href="#">Feature</a></li>
							<li><a href="#">About</a></li>
							<li><a href="#">Portfolio</a></li>
							<li><a href="#">Case Study</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div>
			</div>
		</div>
	</nav>
</header>
<section id="slider">
			<div id="banner-slider" class="owl-carousel">
				<div>
					<div class="banner-side slide-1">
						<div class="container">
							<div class="row">
								<div class="col-md-6 text-center">
									<img data-wow-duration=".2s" class="wow zoomIn slider-img" src="img/banner-character.png" alt="">
								</div>
								<div class="col-md-6">
									<div class="content">
										<h1 data-wow-delay=".5s" class="wow fadeInRight">Most Powerfull Onepage Business HTML5 Template</h1>
										<p data-wow-delay=".9s" class="wow fadeInRight">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptates, aut est voluptatem magnam cupiditate.</p>
										<a href="#" class="btn btn-explore">Explore More</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div>
					 <div class="banner-side slide-2">
						<div class="container">
							<div class="row">
								<div class="col-md-6 text-center slide-right">
									<img class="slider-img" src="img/banner-character.png" alt="">
								</div>
								<div class="col-md-6">
									<div class="content text-right">
										<h1>Most Powerfull Onepage Business HTML5 Template</h1>
										<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati voluptates, aut est voluptatem magnam cupiditate.</p>
										<a href="#" class="btn btn-explore">Explore More</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
</section>
<!-- process -->
<div id="service" class="process section">
	<div class="container">
		<div class="title">
			<h2>My Working Process</h2>
			<p>A wonderful serenity has taken possession of my entire soul,<br> like these sweet mornings of spring which I enjoy with my whole heart.</p>
		</div>
		<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-telescope"></i>
					</div>
					<h4 class="heading">Design</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-mobile"></i>
					</div>
					<h4 class="heading">Development</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-pencil"></i>
					</div>
					<h4 class="heading">Branding</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-mobile"></i>
					</div>
					<h4 class="heading">Development</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-telescope"></i>
					</div>
					<h4 class="heading">Design</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-4">
				<div class="service-block-2 text-center">
					<div class="icon-holder">
						<i class="icon-pencil"></i>
					</div>
					<h4 class="heading">Branding</h4>
					<p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, in?                        </p>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- video-call-to-action -->
<section class="video-call-to-action" id="call-to-action">
	<div class="video-bg">
		<video class="fillWidth" loop autoplay>
			<source type="video/mp4" src="img/Airtaxi.mp4"></source>Your browser does not support the video tag. I suggest you upgrade your browser.
		</video>
	</div>
	<div class="dark-overlay"></div>
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 ">
				<div class="video-text-block text-center">
					<h2>Video for better visualization</h2>
					<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.</p>
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- // video-call-to-action -->
<!-- works -->
<div id="works" class="works section">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="title fadeInDown">
					<h2>My Latest Works</h2>
					<p>Hi, i’m Paul Lapkin, Experience Crafter from Canada.</p>
				</div>
				<div class="content">
					<div class="grid row">
						<div class="grid__item col-md-3" data-size="1280x857">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-3" data-size="1280x1280">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-3" data-size="1280x853">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-3" data-size="865x1280">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-6" data-size="1280x1280">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-3" data-size="1280x1280">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
						<div class="grid__item col-md-3" data-size="1280x850">
							<a href="https://www.51qianduan.com/">51前端</a>
						</div>
					</div>
					<!-- /grid -->
					<div class="preview">
						<button class="action action--close">
							<i class="fa fa-times"></i><span class="text-hidden">Close</span>
						</button>
						<div class="description description--preview"></div>
					</div>
					<!-- /preview -->
				</div>
				<!-- /content -->
			</div>
		</div>
	</div>
</div>
<!-- // works -->
<!-- case-study -->
<div id="case-study" class="case-study section">
	<div class="container">
		<div class="title">
			<h2>CASE STUDY</h2>
		</div>
		<div id="case-study-slider" class="case-study">
			<div class="block">
				<div class="col-md-4 col-sm-12 col-xs-12">
					<img class="img-responsive" src="img/work/img-6.jpg" alt="...">
				</div>
				<div class="col-md-8 col-sm-12 col-xs-12">
					<div class="caption">
						<h3>GRAPHICS &amp; PRINT WORK</h3>
						<div class="date">
							<p>
								Categories
							</p>
						</div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.</p>
						<div class="author-img">
							<img src="img/author-img2.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="block">
				<div class="col-md-4 col-sm-5 col-xs-12">
					<img class="img-responsive" src="img/work/img-5.jpg" alt="...">
				</div>
				<div class="col-md-8 col-sm-7 col-xs-12">
					<div class="caption">
						<h3>PRODUCTS</h3>
						<div class="date">
							<p>
								Categories
							</p>
						</div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.</p>
						<div class="author-img">
							<img src="img/author-img1.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div class="block">
				<div class="col-md-4 col-sm-5 col-xs-12">
					<img class="img-responsive" src="img/work/img-4.jpg" alt="...">
				</div>
				<div class="col-md-8 col-sm-7 col-xs-12">
					<div class="caption">
						<h3>Photography</h3>
						<div class="date">
							<p>
								Categories
							</p>
						</div>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.</p>
						<div class="author-img">
							<img src="img/author-img3.jpg" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- // .case-study -->
<section id="call-to-action1" class="testimonial">
<div class="dark-overlay"></div>
<div class="container">
	<div class="title">
		<h2>MY WORKING PROCESS</h2>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div class="testimonial-slider">
				<div>
					<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquipex ea commodo consequat.</p>
					<span>Adam Smith</span>
					<div class="signature">
						<img src="" alt="">
					</div>
				</div>
				<div>
					<p>
					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquipex ea commodo consequat.                                </p>
					<span>Adam Smith</span>
					<div class="signature">
						<img src="" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- contact -->
<div id="contact" class="contact section">
	<div class="container">
		<div class="row">
			<div class="title fadeInDown">
				<h2>Contact With Me</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium nam ab dolor, <br> dignissimos dicta pariatur impedit earum enim quidem laborum.</p>
			</div>
			<div class="col-xs-12 col-sm-8 col-md-8">
				<div  class="contact-form">
					<input type="text" name="name" id="name" placeholder="Name">
					<input type="email" name="email" id="email" placeholder="Email">
					<input type="text" name="web" id="web" placeholder="Web">
					<textarea name="message" id="message" cols="30" rows="10" class="input-message" placeholder="Comment"></textarea>
					<button type="submit"  class="btn btn-theme-color">SEND</button>
				</div>
			</div>
			<div class="col-xs-12 col-sm-4 col-md-4">
				<div class="contact-info">
					<h4>CONTACT INFO</h4>
					<p>Explain to you how all this mistaken idea of denouncing a teachings of the great explorer of the truth</p>
				</div>
				<div class="contact-address">
					<h4>Address</h4>
					<ul>
						<li class="address">Road 35/4,<br>
						Themefisher,Dhaka<br>Bangladesh</li>
						<li class="phone">[ +00 ] 012 000 088</li>
						<li class="email">support@company.com</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- // contact -->
<footer class="footer">
	<div class="conainer text-center wow zoomIn">
		<div class="social-icons clearfix">
			<a class="facebook" href="#">
				<i class="icon-facebook"></i> 
			</a>
			<a class="twitter" href="#">
				<i class="icon-twitter"></i> 
			</a>
			<a class="dribbble" href="#">
				<i class="icon-dribbble"></i> 
			</a>
			<a class="linkedin" href="#">
				<i class="icon-linkedin"></i> 
			</a>
			<a class="googleplus" href="#">
				<i class="icon-googleplus"></i>
			</a>
		</div> 
		<div class="copyright">
			<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
		</div>
	</div>
</footer>
<!--
JavaScripts
========================== -->
<!-- gallery -->
<script>
	(function() {
		var support = { transitions: Modernizr.csstransitions },
			// transition end event name
			transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' },
			transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
			onEndTransition = function( el, callback ) {
				var onEndCallbackFn = function( ev ) {
					if( support.transitions ) {
						if( ev.target != this ) return;
						this.removeEventListener( transEndEventName, onEndCallbackFn );
					}
					if( callback && typeof callback === 'function' ) { callback.call(this); }
				};
				if( support.transitions ) {
					el.addEventListener( transEndEventName, onEndCallbackFn );
				}
				else {
					onEndCallbackFn();
				}
			};
		new GridFx(document.querySelector('.grid'), {
			imgPosition : {
				x : -0.5,
				y : 1
			},
			onOpenItem : function(instance, item) {
				instance.items.forEach(function(el) {
					if(item != el) {
						var delay = Math.floor(Math.random() * 50);
						el.style.WebkitTransition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), -webkit-transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
						el.style.transition = 'opacity .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1), transform .5s ' + delay + 'ms cubic-bezier(.7,0,.3,1)';
						el.style.WebkitTransform = 'scale3d(0.1,0.1,1)';
						el.style.transform = 'scale3d(0.1,0.1,1)';
						el.style.opacity = 0;
					}
				});
			},
			onCloseItem : function(instance, item) {
				instance.items.forEach(function(el) {
					if(item != el) {
						el.style.WebkitTransition = 'opacity .4s, -webkit-transform .4s';
						el.style.transition = 'opacity .4s, transform .4s';
						el.style.WebkitTransform = 'scale3d(1,1,1)';
						el.style.transform = 'scale3d(1,1,1)';
						el.style.opacity = 1;
						onEndTransition(el, function() {
							el.style.transition = 'none';
							el.style.WebkitTransform = 'none';
						});
					}
				});
			}
		});
	})();
</script>



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


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

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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