白色簡潔風格的律師業務企業網站源碼下載



6 21 8



模板描述:白色簡潔風格 律師業務 企業網站,白色簡潔風格的律師業務企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700" rel="stylesheet">

2. 引入JS

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script type="text/javascript" src="js/numscroller-1.0.js"></script>
<script src="js/SmoothScroll.min.js"></script>
<script src="js/jarallax.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

	<!-- banner -->
	<div class="banner">
		<div class="banner-agileinfo">
			<!-- header -->
			<div class="header">
				<div class="container">
					<div class="logo">
						<h1><a href="index.html">Attorney</a></h1>
					</div> 
					<div class="menu">
						<a href="#" class="navicon"></a> 
						<div class="toggle"> 
							<ul class="toggle-menu">
								<li><a href="index.html" class="active"> Home</a></li>
								<li><a href="about.html"> About</a></li> 
								<li><a href="portfolio.html">Portfolio</a></li> 
								<li><a href="codes.html"> Short Codes</a></li>
								<li><a href="icons.html"> Web Icons</a></li>
								<li><a href="mail.html">Mail Us</a></li>
							</ul>
						</div> 
					</div>   
					<div class="social-w3licon"> 
						<ul class="social_agileinfo">
							<li><a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
							<li><a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
						</ul>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
			<!-- //header --> 
			<!-- banner-text -->
			<div class="banner-w3lstext">  
				<div class="items-group">
					<div class="item agileits-w3layouts">
						<div class="block text main-agileits"> 
							<span class="circleLight"></span> 
							<h3>Need a legal advice </h3>  
							<p>Integer et feugiat elit. Nullam at turpis vel sapien aliquam feugiat vitae vitae mi. Donec scelerisque, justo vel blandit tempor, quam tellus blandit lectus, ut viverra leo velit et quam. </p>
							<h6><span class="glyphicon glyphicon-earphone"></span> +1 555 222 1111 </h6>
						</div> 
					</div> 
				</div>  
			</div>
			<!-- //banner-text -->
		</div>
	</div>
	<!-- //banner --> 
	<!-- banner-bottom --> 
	<div class="banner-w3bottom">
		<div class="container">
			<div class="wthree_banner_grids">
				<div class="col-sm-3 col-xs-3 wthree_banner_grid">
					<i class="fa fa-gavel" aria-hidden="true"></i>
					<h4>customized solution</h4>
				</div>
				<div class="col-sm-3 col-xs-3 wthree_banner_grid">
					<i class="fa fa-money" aria-hidden="true"></i>
					<h4>Minimal Cost</h4>
				</div>
				<div class="col-sm-3 col-xs-3 wthree_banner_grid">
					<i class="fa fa-users" aria-hidden="true"></i>
					<h4>professional team</h4>
				</div>
				<div class="col-sm-3 col-xs-3 wthree_banner_grid">
					<i class="fa fa-clock-o" aria-hidden="true"></i>
					<h4>Quick Results</h4>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div> 
	<!-- //banner-bottom --> 
	<!-- 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 -->
	<!-- about -->
	<div class="about">
		<div class="container"> 
			<div class="w3ls-title"> 
				<h3 class="agileits-title">About us</h3>
			</div>
			<p class="about-w3text">Ut porttitor ut est eu ornare. In metus dui, suscipit at viverra faucibus, accumsan at odio. Duis finibus sollicitudin libero, sed tempor diam euismod sed. Sed interdum odio a finibus gravida. Aliquam tincidunt nisl nec urna euismod, ullamcorper scelerisque magna vulputate. 
			 Duis finibus sollicitudin libero, sed tempor diam euismod sed. Sed interdum odio a finibus gravida. Aliquam tincidunt nisl nec urna euismodl nec. 
			 Duis finibus sollicitudin libero, sed tempor diam euismod sed. Sed interdum odio a finibus gravida. Aliquam tincidunt nisl nec urna euismod, ullamcorper scelerisque magna vulputate. 
			 Duis finibus sollicitudin libero, sed tempor diam euismod sed. Sed interdum odio a finibus gravida. Aliquam tincidunt nisl nec urna euismodl nec.</p>
			<div class="services-row-agileinfo">
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-book hi-icon" aria-hidden="true"></span>
					<h5>Cum soluta nobis</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div>
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-clone hi-icon" aria-hidden="true"></span>
					<h5>Soluta vum nobis</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div>
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-heart-o hi-icon" aria-hidden="true"></span>
					<h5>Nobis cum soluta</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div> 
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-mortar-board hi-icon" aria-hidden="true"></span>
					<h5>Nulla ultricies</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div>
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-bookmark-o hi-icon hi-icon" aria-hidden="true"></span>
					<h5>Sed interdum</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div>
				<div class="col-sm-4 col-xs-4 services-w3grid">
					<span class="fa fa-thumbs-o-up hi-icon" aria-hidden="true"></span>
					<h5>Aliquam tinci</h5>
					<p>Itaque earum rerum hic a sapiente delectus finibus gravida</p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
		 </div>
	</div>
	<!-- //about -->
	<!-- wthree-slid -->
	<div class="wthree-slid"> 
		<div class="col-sm-6 col-xs-4 wthree-slid-left"> 
		</div>
		<div class="col-sm-6 col-xs-8 wthree-slid-right"> 
			<h4>Working Hours:</h4>
			<h5><b>Mon–Sat:</b> 8:00 a.m – 11:00 p.m <br>
				<b>Sunday: </b> 10 a.m – 12 p.m  
			</h5>
			<!-- Stats --> 
			<div class="stats-info agileits-w3layouts">
				<h3>Nulla ultricies nunc et lorem semper quis accumsan dui aliquam aucibus sagittis placerat quis accumsan</h3>
				<div class="col-sm-4 col-xs-4 stats-grid">  
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='57000' data-delay='.5' data-increment="5">57000</div>
					<h6>Happy Clients</h6>
				</div> 
				<div class="col-sm-4 col-xs-4 stats-grid"> 
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='8000' data-delay='.5' data-increment="5">8000</div>
					<h6>Projects</h6> 
				</div>
				<div class="col-sm-4 col-xs-4 stats-grid">  
					<div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='225' data-delay='8' data-increment="1">225</div>
					<h6>Awards</h6>
				</div>
				<div class="clearfix"></div>
			</div>  
			<!-- //Stats -->  
		</div> 
		<div class="clearfix"> </div>
	</div>
	<!-- wthree-slid --> 
	<!-- testimonials -->
	<div class="testimonials">
		<div class="container"> 
			<div class="w3ls-title"> 
				<h3 class="agileits-title">Testimonials</h3>
			</div>
			<div class="wthree_testimonial_grids">
				<div class="col-md-6 wthree_testimonial_grid_left">
					<div class="w3ls_testimonial_grid_left_grid">
						<div class="col-xs-4 agileinfo_testimonials_left">
							<img src="images/t1.jpg" alt=" " class="img-responsive" />
							<h4>John Crisp</h4>
							<p>Client</p>
						</div>
						<div class="col-xs-8 agileinfo_testimonials_right">
							<div class="agileits_testimonials_right_grid">
								<p>Donec euismod consequat mi, pretium volutpat nibh tempor nec. 
									Quisque id justo sagittis iaculis.</p>
							</div>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="w3ls_testimonial_grid_left_grid w3l_testimonial_grid_left_grid">	
						<div class="col-xs-8 agileinfo_testimonials_right agileits_w3layouts_farm_man">
							<div class="agileits_testimonials_right_grid w3_testimonials_right_grid">
								<p>Cras et sapien vitae leo egestas fermentum. Sed condimentum dolor a quam 
									egestas commodo.</p>
							</div>
						</div>
						<div class="col-xs-4 agileinfo_testimonials_left">
							<img src="images/t2.jpg" alt=" " class="img-responsive" />
							<h4>Thomus Carl</h4>
							<p>Client</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 wthree_testimonial_grid_right">
					<h3><span>500+ </span>projects Completed <br>Successfully</h3>
					<p>Pellentesque magna quam, rutrum a luctus quis, ultrices eget metus. 
						Curabitur ornare pulvinar erat, non commodo velit venenatis nec. 
						Phasellus at malesuada sem, porta volutpat turpis.</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //testimonials -->
	<!-- footer-top -->  
	<div class="footer-agiletop">
		<div class="container"> 
			<div class="col-md-8 w3agile_hire_left">
				<h4>We are always ready to help you. There are many ways to contact us</h4>
				<p>Excepteur sint occaecat cupidatat non proident, sunt.</p>
			</div>
			<div class="col-md-4 w3agile_hire_right">
				<a href="mail.html" class="wthree-more w3more1 nina" data-text="hire me"> 
					<span>h</span><span>i</span><span>r</span><span>e</span> <span>m</span><span>e</span>
				</a> 
			</div>
			<div class="clearfix"> </div>   
		</div>
	</div>
	<!-- //footer-top -->   
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="col-md-4 w3layouts_footer_grid">
				<h2>Follow <span>Us</span></h2>
				<ul class="social_agileinfo">
					<li><a href="#" class="w3_facebook"><i class="fa fa-facebook"></i></a></li>
					<li><a href="#" class="w3_twitter"><i class="fa fa-twitter"></i></a></li>
					<li><a href="#" class="w3_instagram"><i class="fa fa-instagram"></i></a></li>
					<li><a href="#" class="w3_google"><i class="fa fa-google-plus"></i></a></li>
				</ul>
			</div>
			<div class="col-md-8 w3layouts_footer_grid">
				<form action="#" method="post">
					<input type="email" name="Email" placeholder="Email..." required="">
					<input type="submit" value="">
				</form>
				<ul class="w3l_footer_nav">
					<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="icons.html">Web Icons</a></li>
					<li><a href="mail.html">Mail Us</a></li>
				</ul>
				<p>? 2017 Attorney. All Rights Reserved | Design by <a href="http://www.cqetom.live//" target="_blank">xmoban.cn</a></p>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
	<!-- //footer -->   
	<!-- menu-js -->
	<script>
		$('.navicon').on('click', function (e) {
		  e.preventDefault();
		  $(this).toggleClass('navicon--active');
		  $('.toggle').toggleClass('toggle--active');
		});
	</script> 
	<!-- //menu-js -->
	<!-- Progressive-Effects-Animation-JavaScript -->  
	<!-- //Progressive-Effects-Animation-JavaScript --> 
	<!-- jarallax -->  
	<script src="js/SmoothScroll.min.js"></script> 
	<script src="js/jarallax.js"></script> 
	<script type="text/javascript">
		/* init Jarallax */
		$('.jarallax').jarallax({
			speed: 0.5,
			imgWidth: 1366,
			imgHeight: 768
		})
	</script>  
	<!-- //jarallax --> 
	<!-- start-smooth-scrolling --> 
	<script type="text/javascript" src="js/easing.js"></script>	
	<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){		
					event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
				});
			});
	</script>
	<!-- //end-smooth-scrolling -->	 
	<!-- smooth-scrolling-of-move-up -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			*/
			$().UItoTop({ easingType: 'easeOutQuart' });
		});
	</script>
	<!-- //smooth-scrolling-of-move-up -->   
	<!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->



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


熱門標簽: 行業 企業 公司 工廠 分類 響應式 自適應 設備 風格 企業 行業 公司 工廠 bootstrap bootstrap自適應 bootstrap響應式 pc+wap 移動+電腦 手機+電腦 簡潔 簡約 簡單 寬屏 全屏 滿屏 律師 律師事務所 律師所 法律
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子