橙色大气形式html企业介绍网页模板代码下载



7 26 9



模板描述:html企业介绍,橙色大气形式html企业介绍网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/templatemo-misc.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/templatemo-main.css">

2. 引入JS

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/jquery.lightbox.js"></script>
<script src="js/custom.js"></script>

3. HTML代码

<div id="home">
	<div class="site-header">
		<div class="top-header">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-sm-6">
						<div class="left-header">
							<span><i class="fa fa-phone"></i>080 080 0990</span>
							<span><i class="fa fa-envelope"></i>info@company.com</span>
						</div> <!-- /.left-header -->
					</div> <!-- /.col-md-6 -->
					<div class="col-md-6 col-sm-6">
						<div class="right-header text-right">
							<ul class="social-icons">
								<li><a href="#" class="fa fa-facebook"></a></li>
								<li><a href="#" class="fa fa-instagram"></a></li>
								<li><a href="#" class="fa fa-twitter"></a></li>
								<li><a href="#" class="fa fa-google-plus"></a></li>
							</ul>
						</div> <!-- /.left-header -->
					</div> <!-- /.col-md-6 -->
				</div> <!-- /.row -->
			</div> <!-- /.container -->
		</div> <!-- /.top-header -->
		<div class="main-header">
			<div class="container">
				<div class="row">
					<div class="col-md-4 col-sm-4 col-xs-6">
						<div class="logo">
							<h1><a href="#" title="Dreri">Compass</a></h1>
						</div> <!-- /.logo -->
					</div> <!-- /.col-md-4 -->
					<div class="col-md-8 col-sm-8 col-xs-6">
						<div class="menu text-right hidden-sm hidden-xs">
							<ul>
								<li><a href="#home">Home</a></li>
								<li><a href="#services">Services</a></li>
								<li><a href="#portfolio">Portfolio</a></li>
								<li><a href="#about">About</a></li>
								<li><a href="#contact">Contact</a></li>
								<li><a href="" class="external">External</a></li>
							</ul>
						</div> <!-- /.menu -->
					</div> <!-- /.col-md-8 -->
				</div> <!-- /.row -->
				<div class="responsive-menu text-right visible-xs visible-sm">
					<a href="#" class="toggle-menu fa fa-bars"></a>
					<div class="menu">
						<ul>
							<li><a href="#home">Home</a></li>
							<li><a href="#services">Services</a></li>
							<li><a href="#portfolio">Portfolio</a></li>
							<li><a href="#about">About</a></li>
							<li><a href="#contact">Contact</a></li>
							<li><a href="" class="external">External</a></li>
						</ul>
					</div> <!-- /.menu -->
				</div> <!-- /.responsive-menu -->
			</div> <!-- /.container -->
		</div> <!-- /.header -->
	</div> <!-- /.site-header -->
</div> <!-- /#home -->
<div class="flexslider">
	<ul class="slides">
		<li>
			<img src="images/banner01.jpg" alt="">
			<div class="flex-caption">
				<h2>Compass Template</h2>
				<span></span>
				<p>Praesent tincidunt neque semper elementum gravida. Donec id euismod magna.<br>Ut erat ligula, malesuada eu quam a, fringilla auctor augue.</p>
			</div>
		</li>
		<li>
			<img src="images/banner02.jpg" alt="">
			<div class="flex-caption">
				<h2>Responsive Mobile</h2>
				<span></span>
				<p>Ea, similique, odit id consectetur est beatae quia dicta officiis ipsam itaque in<br>facilis aliquid quas officia voluptatem repellendus repellat!</p>
			</div>
		</li>
	</ul>
</div>
<div id="services" class="section-cotent">
	<div class="container">
		<div class="title-section text-center">
			<h2>Our Services</h2>
			<span></span>
		</div> <!-- /.title-section -->
		<div class="row">
			<div class="col-md-3 col-sm-6">
				<div class="service-item">
					<div class="service-header">
						<i class="fa fa-umbrella"></i>
						<h3>Clean Design</h3>
					</div>
					<div class="service-description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
					</div>
				</div> <!-- /.service-item -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="service-item">
					<div class="service-header">
						<i class="fa fa-desktop"></i>
						<h3>Fully Responsive</h3>
					</div>
					<div class="service-description">
						<a rel="nofollow" href="" target="_parent">Compass</a> is free responsive website template from templatemo. You can download and use this template for your websites. Please tell your friends about our website. Thank you for visiting us.
					</div>
				</div> <!-- /.service-item -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="service-item">
					<div class="service-header">
						<i class="fa fa-cogs"></i>
						<h3>Easy Editing</h3>
					</div>
					<div class="service-description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
					</div>
				</div> <!-- /.service-item -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="service-item">
					<div class="service-header">
						<i class="fa fa-heart"></i>
						<h3>Fast Support</h3>
					</div>
					<div class="service-description">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, sapiente, saepe, velit, repellendus doloribus blanditiis repudiandae nobis optio quasi nulla aliquam nisi voluptatibus.
					</div>
				</div> <!-- /.service-item -->
			</div> <!-- /.col-md-3 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</div> <!-- /#services -->
<div id="portfolio" class="section-content">
	<div class="container">
		<div class="title-section text-center">
			<h2>Our Portfolio</h2>
			<span></span>
		</div> <!-- /.title-section -->
		<div class="row">
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item1.jpg" alt="Portfolio Item 1">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Design</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item2.jpg" alt="Portfolio Item 2">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Creative</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item3.jpg" alt="Portfolio Item 3">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Design</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item4.jpg" alt="Portfolio Item 4">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Creative</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
		</div> <!-- /.row -->
		<div class="row">
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item5.jpg" alt="Portfolio Item 5">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>HTML CSS</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item6.jpg" alt="Portfolio Item 6">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Mobile</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item7.jpg" alt="Portfolio Item 7">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>HTML CSS</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
			<div class="col-md-3 col-sm-6">
				<div class="portfolio-thumb">
					<img src="images/portfolio/item8.jpg" alt="Portfolio Item 8">
					<div class="overlay">
						<div class="inner">
							<h4><a href="https://www.51qianduan.com/">51前端</a></h4>
							<span>Mobile</span>
						</div>
					</div> <!-- /.overlay -->
				</div> <!-- /.portfolio-thumb -->
			</div> <!-- /.col-md-3 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</div> <!-- /#portfolio -->
<div id="about" class="section-cotent">
	<div class="container">
		<div class="title-section text-center">
			<h2>About Us</h2>
			<span></span>
		</div> <!-- /.title-section -->
		<div class="row">
			<div class="col-md-8">
				<h4 class="widget-title">Company Background</h4>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, ex, amet, quisquam magni quasi modi sint accusamus architecto velit veritatis nobis autem repellat dolore quis atque totam laudantium ab sed impedit beatae esse error culpa voluptatem eius et. <br><br>Aut, nulla, debitis voluptates doloribus quisquam maiores repudiandae nam culpa voluptatibus alias earum magnam numquam. Consectetur, ratione, ipsam totam et nesciunt atque temporibus fuga quos rem deserunt tempore dolore eaque dolorum a doloremque optio nihil pariatur aliquid ex id officiis aliquam sed.</p>
			</div> <!-- /.col-md-3 -->
			<div class="col-md-4 our-skills">
				<h4 class="widget-title">Our Skills</h4>
				<ul class="progess-bars">
					<li>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 90%;">Design 90%</div>
						</div>
					</li>
					<li>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;">HTML CSS 75%</div>
						</div>
					</li>
					<li>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%;">WordPress 85%</div>
						</div>
					</li>
					<li>
						<div class="progress">
							<div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">Marketing 95%</div>
						</div>
					</li>
				</ul>
			</div> <!-- /.col-md-3 -->
		</div> <!-- /.row -->
		<div class="row">
			<div class="our-team">
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<div class="member-img">
							<img src="images/team/member-1.jpg" alt="Tracy">
							<div class="overlay">
								<ul class="social">
									<li><a href="#" class="fa fa-facebook"></a></li>
									<li><a href="#" class="fa fa-twitter"></a></li>
									<li><a href="#" class="fa fa-instagram"></a></li>
								</ul>
							</div> <!-- /.overlay -->
						</div>
						<div class="inner-content">
							<h5>Tracy One</h5>
							<span>Product Developer</span>
							<p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
						</div>
					</div> <!-- /.team-member -->
				</div> <!-- /.col-md-4 -->
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<div class="member-img">
							<img src="images/team/member-2.jpg" alt="Mary">
							<div class="overlay">
								<ul class="social">
									<li><a href="#" class="fa fa-facebook"></a></li>
									<li><a href="#" class="fa fa-twitter"></a></li>
									<li><a href="#" class="fa fa-instagram"></a></li>
								</ul>
							</div> <!-- /.overlay -->
						</div>
						<div class="inner-content">
							<h5>Mary Two</h5>
							<span>Product Designer</span>
							<p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
						</div>
					</div> <!-- /.team-member -->
				</div> <!-- /.col-md-4 -->
				<div class="col-md-4 col-sm-6">
					<div class="team-member">
						<div class="member-img">
							<img src="images/team/member-3.jpg" alt="Julia">
							<div class="overlay">
								<ul class="social">
									<li><a href="#" class="fa fa-facebook"></a></li>
									<li><a href="#" class="fa fa-twitter"></a></li>
									<li><a href="#" class="fa fa-instagram"></a></li>
								</ul>
							</div> <!-- /.overlay -->
						</div>
						<div class="inner-content">
							<h5>Julia Three</h5>
							<span>Product Manager</span>
							<p>Mauris vel lorem non odio accumsan scelerisque. Nullam id augue vel nibh soll.</p>
						</div>
					</div> <!-- /.team-member -->
				</div> <!-- /.col-md-4 -->
			</div> <!-- /.our-team -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</div> <!-- /#about -->
<div id="contact" class="section-cotent">
	<div class="container">
		<div class="title-section text-center">
			<h2>Contact Us</h2>
			<span></span>
		</div> <!-- /.title-section -->
		<div class="row">
			<div class="col-md-7 col-sm-6">
				<h4 class="widget-title">Send a message to us</h4>
				<div class="contact-form">
					<p class="full-row">
						<label for="name-id">Your Name:</label>
						<input type="text" id="name-id" name="name-id">
					</p>
					<p class="full-row">
						<label for="email-id">Email:</label>
						<input type="text" id="email-id" name="email-id">
					</p>
					<p class="full-row">
						<label for="subject-id">Subject:</label>
						<input type="text" id="subject-id" name="subject-id">
					</p>
					<p class="full-row">
						<label for="message">Message:</label>
						<textarea name="message" id="message" rows="6"></textarea>
					</p>
					<input class="mainBtn" type="submit" name="" value="Send Message">
				</div>
			</div> <!-- /.col-md-3 -->
			<div class="col-md-5 col-sm-6">
				<h4 class="widget-title">Our location</h4>
				<div class="map-holder">
					<div class="google-map-canvas" id="map-canvas" style="height: 250px;">
					</div>
				</div> <!-- /.map-holder -->
				<div class="contact-info">
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam, modi, non ducimus nesciunt in commodi similique aliquam omnis ea at!</p>
					<span><i class="fa fa-home"></i>850 In luctus justo vel nisi, Duis mattis 10440</span>
					<span><i class="fa fa-phone"></i>080-080-0990</span>
					<span><i class="fa fa-envelope"></i>info@company.com</span>
				</div>
			</div> <!-- /.col-md-3 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</div> <!-- /#contact -->
<div class="site-footer">
	<div class="container">
		<div class="row">
			<div class="col-md-8 col-sm-8 col-xs-12">
				<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a></p>
			</div> <!-- /.col-md-6 -->
			<div class="col-md-4 col-sm-4 col-xs-12">
				<div class="go-top">
					<a href="https://www.51qianduan.com/">51前端</a>
				</div>
			</div> <!-- /.col-md-6 -->
		</div> <!-- /.row -->
	</div> <!-- /.container -->
</div> <!-- /.site-footer -->
<!---<script type="text/javascript">
	function initialize() {
	  var mapOptions = {
		  scrollwheel: false,
		zoom: 15,
		center: new google.maps.LatLng(13.758468,100.567481)
	  };
	  var map = new google.maps.Map(document.getElementById('map-canvas'),
		  mapOptions);
	}
	function loadScript() {
	  var script = document.createElement('script');
	  script.type = 'text/javascript';
	  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
		  'callback=initialize';
	  document.body.appendChild(script);
	}
	window.onload = loadScript;
</script>--->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 网络科技 科技公司 网络科技公司 IT公司 网络公司 软件公司 IT软件公司 欧美风 欧美 欧洲 美洲 pc+wap 移动+电脑 手机+电脑 简洁 简约 简单 橙色

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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