橙色簡潔風格的英文官網企業網站源碼下載



7 26 9



模板描述:橙色簡潔風格 英文官網 企業網站,橙色簡潔風格的英文官網企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i&amp;subset=latin-ext" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Athiti:200,300,400,500,600,700&amp;subset=latin-ext,thai,vietnamese" rel="stylesheet">

2. 引入JS

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/modernizr.js"></script>
<script src="js/menu.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/typed.js" type="text/javascript"></script>
<script src="js/responsiveslides.min.js"></script>

3. HTML代碼

<!-- banner -->
<div class="main-agile">
	<div class="banner-w3l">
		<!-- header -->
		<div class="header">
			<div class="logo">
				<h1><a href="index.html"><span>B</span>usiness<label>Field</label></a></h1>
			</div>  
			<div class="clearfix"> </div>
		</div>
		<!-- //header -->
		<!-- top-nav -->
		<nav class="cd-stretchy-nav edit-content">
			<a class="cd-nav-trigger" href="#0"> Menu <span aria-hidden="true"></span> </a>
			<ul>
				<li><a href="#home" class="scroll active"><span>Home</span></a></li>
				<li><a href="about.html"><span>About</span></a></li>
				<li><a href="gallery.html"><span>Gallery</span></a></li>   
				<li><a href="typo.html"><span>Typography</span></a></li>
				<li><a href="icons.html"><span>Icons</span></a></li> 
				<li><a href="contact.html"><span>Contact</span></a></li>
			</ul> 
			<span aria-hidden="true" class="stretchy-nav-bg"></span>
		</nav> 
		<!-- //top-nav -->
		<div class="container">
			<div class="agile_banner_info">
				<div class="agile_banner_info1">
					<h3>Welcome To <span>Business</span></h3>
					<div id="typed-strings" class="agileits_w3layouts_strings">
						<p>start your <i>business</i> to complete your dream</p>
						<p>Our <i>business</i> is Your business</p>
						<p>Best Of <i>business</i> Planning advisors & specialist</p>
					</div>
					<span id="typed" style="white-space:pre;"></span>
				</div>
				<div class="banner_agile_para">
					<p>Excepteur sint occaecat cupidatat non proident.</p>
				</div>
				<div class="wrapper-inner-tab-backgrounds">
					<div class="wrapper-inner-tab-backgrounds-first"><a href="single.html"><div class="sim-button button17">Read More</div></a></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- //banner -->	
<!-- welcome -->
<div class="about w3layouts-agileinfo" id="about">
	<div class="container">
		<h3 class="title-w3l"><span>W</span>elcome</h3>
		<div class="about-top w3ls-agile">
			<div class="col-md-6 red">
				<img class="img-responsive" src="images/2.jpg" alt="">
				<div class="about-img">
					<div class="col-md-6 col-xs-6 about-img1">
						<img class="img-responsive" src="images/3.jpg" alt="">
					</div>
					<div class="col-md-6 col-xs-6 about-img2">
						<img class="img-responsive" src="images/4.jpg" alt="">
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-6 come">
				<div class=" about-wel">
					<h5>We provide service since <span>2006</span> with proud!</h5>
					<p>Masagni dolores eoquie int Basmodi temporant, autem vel eum iure reprehend.Unicmquam eius, Basmodi temurer sehsMunim.</p>
					<p>Basmodi temporant, ut laboreas dolore magnam kuyte hend.Unicmquam eius, Basmodi temurer sehsMunim.</p>
						<ul>
							<li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Masagni dolores eoquie oluptd olorem</li>
							<li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Ipsumquia dolor sitamnetase eiuse</li>
							<li><i class="fa fa-hand-o-right" aria-hidden="true"></i>Ipsumquia dolor sitamne adipiscquam</li>
						</ul>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //welcome -->
<!-- middle -->
<div class="testi-mk" id="team">
	<div class="testimonials w3ls-section">
		<div class="container">
			<!--Slider-->	
			<div class="callbacks_container">
				<ul class="rslides" id="slider3">
					<li>
						<div class="prod-w3l w3l-m1">
							<img src="images/k2.png" alt=" "/>
							<h4>Let’s made Your own <span>Business</span></h4>
						</div>
					</li>
					<li>
						<div class="prod-w3l">
						<img src="images/p2.png" alt=" " />
						<h4>Let’s made Your own <span>Dream</span></h4>
					</div>
					</li>
					<li>
						<div class="prod-w3l w3l-m1">
						<img src="images/k3.png" alt=" " />
						<h4>Let’s made Your own <span>Branding</span></h4>
						</div>
					</li>
					<li>
						<div class="prod-w3l w3l-m1">
						<img src="images/p4.png" alt=" " />
						<h4>Let’s made Your own <span>Future</span></h4>
					</div>
					</li>
				</ul>
			</div>
			<!-- //Slider -->
		</div>
	</div>
</div>
<!-- //middle -->
<!-- screen -->
<div class="wthree_about_grid_right">
	<img src="images/k1.png" alt=" ">
</div>
<!-- //screen -->
<!-- services -->
<div class="services" id="services">
	<div class="container">
		<div class="w3_agileits_services_grids">
			<div class="col-md-3 w3_agileits_services_grid">
				<div class="w3_agileits_services_grid_agile">
					<div class="w3_agileits_services_grid_1">
						<i class="fa fa-key" aria-hidden="true"></i>
					</div>
					<h3>Business Branding</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p>
				</div>
			</div>
			<div class="col-md-3 w3_agileits_services_grid">
				<div class="w3_agileits_services_grid_agile">
					<div class="w3_agileits_services_grid_1">
						<i class="fa fa-line-chart" aria-hidden="true"></i>
					</div>
					<h3>Analysis project</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p>
				</div>
			</div>
			<div class="col-md-3 w3_agileits_services_grid">
				<div class="w3_agileits_services_grid_agile">
					<div class="w3_agileits_services_grid_1">
						<i class="fa fa-money" aria-hidden="true"></i>
					</div>
					<h3>Financial Support</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p>
				</div>
			</div>
			<div class="col-md-3 w3_agileits_services_grid">
				<div class="w3_agileits_services_grid_agile">
					<div class="w3_agileits_services_grid_1">
						<i class="fa fa-bullhorn" aria-hidden="true"></i>
					</div>
					<h3>LifeTime Membership</h3>
					<p>Sed ut perspiciatis unde omnis iste natus error sit doloremque laudantium</p>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //services -->
<!-- news -->
<div class="news" id="news">
	<div class="container">
		<h3 class="title-w3l"><span>o</span>ur <span>B</span>log</h3>
		<div class="news-grids">
			<div class="col-md-6 news-wthreegrid">
				<div class="news-grid-left">
					<div class="date-info">
						<h6>June 7th 2017</h6>
						<a href="single.html">Adipiscing elit sed do eiusmod tempor</a>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis unde doloremque laudantium.</p>
						<div class="news-button">
							<a href="single.html">Read More</a>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="news-grid-left">
					<div class="date-info">
						<h6>June 12th 2017</h6>
						<a href="single.html">Minima veniam, quis nostrum ullam</a>
						<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. Sed ut perspiciatis unde doloremque laudantium.</p>
						<div class="news-button">
							<a href="single.html">Read More</a>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<div class="col-md-6 news-wthreegrid">
				<div class="news-agileimg">
					<img src="images/b1.jpg" alt="" />
				</div> 
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
<!-- //news -->
<!-- ad -->
<div class="container">
<!-- 自適應廣告 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1112982054462406"
     data-ad-slot="7771152246"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<!-- /ad -->
<!-- newsletter -->
<div class="footer-top">
	<div class="container">
		<h3 class="title-w3l-2"><span>N</span>ewsLetter</h3>
		<p>New Blog Posts delivered fresh to your inbox.</p>
		<form action="#" method="post">
			<input type="email" placeholder="E-mail" name="email" required="">
			<input type="submit" value="Subscribe">
		</form>
	</div>
</div>
<!-- //newsletter -->
<!-- footer -->
<footer>
	<div class="agileits-w3layouts-footer-top">
		<div class="container">
			<div class="col-md-6 agileits-w3layouts-footer-top-left">
				<p><i class="fa fa-phone" aria-hidden="true"></i> +1 234 567 8901</p>
			</div>
			<div class="col-md-6 agileits-w3layouts-footer-top-left">
				<p><i class="fa fa-envelope" aria-hidden="true"></i> Email :<a href="mailto:[email protected]"> [email protected]</a></p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<div class="agileits-footer-bottom">
		<div class="container">
			<div class="agileits-footer-bottom-grids">
				<div class="col-md-6 footer-bottom-left">
					<h2>About Us</h2>
					<div class="footer-img-grids">
						<div class="footer-img">
							<img src="images/f1.jpg" alt="" />
						</div>
						<div class="footer-img-info">
							<p>Suspendisse potenti. Pellentesque pulvinar tellus at est ullamcorper, at elementum nibh laoreet. Nunc id diam in nulla sollicitudin auctor. Donec elementum felis turpis, vel interdum libero congue non. Mauris non magna convallis</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-3 footer-bottom-right">
					<h5>We are social</h5>
					<div class="agileinfo-social-grids">
						<ul>
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-rss"></i></a></li>
							<li><a href="#"><i class="fa fa-vk"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-3 w3l-footer one tweet footer-bottom-right">
					<h5>Tweets</h5>
					<ul>
						<li>
							<a href="#"><i class="fa fa-twitter"></i>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accus.
							<i>http//example.com</i></a>
							<span>About 15 minutes ago<span>
						</span></span></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class="copyright">
		<div class="container">
			<p>? 2017 Business Field. All rights reserved | Design by <a href="http://www.cqetom.live/">xmoban.cn</a></p>
		</div>
	</div>
</footer>
<!-- //footer -->
<!-- js-scripts -->		
<!-- js -->
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Necessary-JavaScript-File-For-Bootstrap --> 
<!-- //js -->
<!-- menu-js --> 	
<script src="js/modernizr.js"></script> <!-- Modernizr -->	
<script src="js/menu.js"></script> <!-- Resource jQuery -->	
<!-- //menu-js --> 	 
<!-- smooth scrolling -->
<!-- //smooth scrolling -->
<!-- banner-type-text -->
<script>
	$(function(){
		$("#typed").typed({
			// strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
			stringsElement: $('#typed-strings'),
			typeSpeed: 30,
			backDelay: 500,
			loop: false,
			contentType: 'html', // or text
			// defaults to false for infinite loop
			loopCount: false,
			callback: function(){ foo(); },
			resetCallback: function() { newTyped(); }
		});
		$(".reset").click(function(){
			$("#typed").typed('reset');
		});
	});
	function newTyped(){ /* A new typed object */ }
	function foo(){ console.log("Callback"); }
</script>
<!-- //banner-type-text -->
<!-- responsiveslider -->
<script>
	// You can also use "$(window).load(function() {"
	$(function () {
	  // Slideshow 4
	  $("#slider3").responsiveSlides({
		auto: true,
		pager:false,
		nav:false,
		speed: 500,
		namespace: "callbacks",
		before: function () {
		  $('.events').append("<li>before event fired.</li>");
		},
		after: function () {
		  $('.events').append("<li>after event fired.</li>");
		}
	  });
	});
</script>
<!-- //responsiveslider -->
<!-- //js-scripts -->



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 顏色 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 網絡科技 科技公司 網絡科技公司 IT公司 網絡公司 軟件公司 IT軟件公司 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 橙色 寬屏 全屏 滿屏
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子