紅色簡潔風格的設計公司企業網站源碼下載



5 17 6



模板描述:紅色簡潔風格 設計公司 企業網站,紅色簡潔風格的設計公司企業網站源碼下載html模板下載

代碼結構

1. 引入CSS

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" 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=Montserrat:200,200i,300,400,400i,500,600,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
<link rel="stylesheet" href="css/poposlides.css">
<link rel="stylesheet " href="css/chocolat.css " type="text/css " media="screen ">

2. 引入JS

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/search.js"></script>
<script src="js/jquery.chocolat.js "></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.countup.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. HTML代碼

	<div class="main_agileits" id="page">
		<div class="agile_wthree_nav">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					<h1><a class="navbar-brand" href="index.html"><span><i class="fa fa-magic" aria-hidden="true"></i></span>Exec</a></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="link-effect-8" id="link-effect-8">
						<ul class="nav navbar-nav">
							<li class="active"><a href="index.html">Home</a></li>
							<li><a href="about.html">About</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">Short Codes <b class="caret"></b></a>
								<ul class="dropdown-menu agile_short_dropdown">
									<li><a href="icons.html">Web Icons</a></li>
									<li><a href="typography.html">Typography</a></li>
								</ul>
							</li>
							<li><a href="mail.html">Mail Us</a></li>
						</ul>
					</nav>
				</div>
				<div class="agile_search">
					<!-- cd-search -->
					<div class="cd-main-header">
						<ul class="cd-header-buttons">
							<li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
						</ul>
						<!-- cd-header-buttons -->
					</div>
					<div id="cd-search" class="cd-search agileinfo">
						<form action="#" method="post">
							<input name="Search" type="search" placeholder="Click enter after typing...">
						</form>
					</div>
					<!-- //cd-search -->
				</div>
			</nav>
		</div>
		</nav>
		<div class="s1">
			<h3>Executive Design</h3>
			<p> Lorem Ipsum is simply dummy text of the typesetting industry.</p>
			<div class="w3-button">
				<div class="w3ls-button">
					<a href="single.html" class="hvr-shutter-out-vertical">Read More</a>
				</div>
				<div class="w3l-button">
					<a href="#portfolio" class="hvr-shutter-out-vertical scroll ">Portfolio</a>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="slides-box">
			<ul class="slides">
				<li style="background: url(images/banner.jpg) center">
				</li>
				<li style="background: url(images/banner1.jpg)center"></li>
				<li style="background: url(images/banner3.jpg) center"></li>
				<li style="background: url(images/banner2.jpg)center"></li>
				<li style="background: url(images/banner1.jpg)center"></li>
			</ul>
		</div>
	</div>
	<!-- /banner_bottom_w3ls_agile -->
	<div class="banner_bottom_w3ls_agile">
		<div class="banner_bottom_w3ls_info">
			<h2 class="agile_heading">The very best solution for your business website.</h2>
			<p>Lorem ipsum dolor sit amet, do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
				nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			<div class="agileits-button">
				<a href="single.html" class="read hvr-shutter-out-vertical">Read More</a>
			</div>
		</div>
	</div>
	<!-- //banner_bottom_w3ls_agile -->
	<!-- /services -->
	<div class="agile_services">
		<div class="col-md-6 agile_services_img_wthree">
		</div>
		<div class="col-md-6 agile_inner_grids">
			<h3 class="agile_heading two">Our Services</h3>
			<div class="w3ls-markets-grid_top">
				<div class="col-md-6 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-laptop" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Graphic Design </h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-pencil" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Web Design</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-pied-piper" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5> Branding </h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-6 w3ls-markets-grid">
					<div class="agileits-icon-grid">
						<div class="icon-left">
							<i class="fa fa-camera-retro" aria-hidden="true"></i>
						</div>
						<div class="icon-right">
							<h5>Photography</h5>
							<p>Phasellus dapibus felis elit, sed accumsan arcu gravida vitae. Nullam aliquam erat..</p>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="clearfix"> </div>
	</div>
	<!-- //services -->
	<div class="portfolio-agileinfo" id="portfolio">
		<h3 class="agile_heading">Portfolio</h3>
		<p class="sub_cap">Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
		<div class="agile_inner_info">
			<div class="agile_port_w3ls_info">
				<div class="col-md-6 portfolio-grids_left">
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g1.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g1.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper two">
									<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g2.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g2.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper">
								<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g3.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g3.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper">
									<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
				</div>
				<div class="col-md-6 portfolio-grids_left">
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g5.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g5.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper two">
									<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g4.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g4.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper">
									<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
					<div class="col-md-6 portfolio-grids" data-aos="zoom-in">
						<a href="images/g6.jpg" class="b-link-stripe b-animate-go lightninBox" data-lb-group="1">
								<img src="images/g6.jpg" class="img-responsive" alt="w3ls" />
								<div class="b-wrapper">
									<i class="fa fa-magic" aria-hidden="true"></i>
								</div>
							</a>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- stats -->
	<div class="stats" id="stats">
		<div class="container">
			<div class="agile_inner_info_stats">
				<div class="col-md-3 w3layouts_stats_left w3_counter_grid">
					<i class="fa fa-laptop" aria-hidden="true"></i>
					<p class="counter">45</p>
					<h3>Projects</h3>
				</div>
				<div class="col-md-3 w3layouts_stats_left w3_counter_grid1">
					<i class="fa fa-smile-o" aria-hidden="true"></i>
					<p class="counter">165</p>
					<h3>Members</h3>
				</div>
				<div class="col-md-3 w3layouts_stats_left w3_counter_grid2">
					<i class="fa fa-trophy" aria-hidden="true"></i>
					<p class="counter">563</p>
					<h3>Awards</h3>
				</div>
				<div class="col-md-3 w3layouts_stats_left w3_counter_grid3">
					<i class="fa fa-user" aria-hidden="true"></i>
					<p class="counter">245</p>
					<h3>Investors</h3>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //stats -->
	<!-- /services -->
	<div class="featured_services">
		<div class="container">
			<h3 class="agile_heading">Featured Services</h3>
			<p class="sub_cap">Phasellus dapibus felis elit, sed accumsan arcu gravida vitae.</p>
			<div class="agile_inner_info">
				<div class="col-md-4 w3_agile_services_grid">
					<div class="agile_services_grid">
						<div class="hover06 column">
							<div>
								<figure><img src="images/g2.jpg" alt=" " class="img-responsive"></figure>
							</div>
						</div>
						<div class="agile_services_grid_pos">
							<i class="fa fa-cubes" aria-hidden="true"></i>
						</div>
					</div>
					<h4>Tempus eu turpis</h4>
					<p>Lorem ipsum dolor sit amet, do eiusmod tempor incididunt .Aliquam lacus turpis, lobortis quis dolor sed, dignissim rhoncus
						neque.
					</p>
				</div>
				<div class="col-md-4 w3_agile_services_grid">
					<div class="agile_services_grid">
						<div class="hover06 column">
							<div>
								<figure><img src="images/g3.jpg" alt=" " class="img-responsive"></figure>
							</div>
						</div>
						<div class="agile_services_grid_pos">
							<i class="fa fa-line-chart" aria-hidden="true"></i>
						</div>
					</div>
					<h4>Lobortis quis dolor</h4>
					<p>Lorem ipsum dolor sit amet, do eiusmod tempor incididunt .Aliquam lacus turpis, lobortis quis dolor sed, dignissim rhoncus
						neque.
					</p>
				</div>
				<div class="col-md-4 w3_agile_services_grid">
					<div class="agile_services_grid">
						<div class="hover06 column">
							<div>
								<figure><img src="images/g6.jpg" alt=" " class="img-responsive"></figure>
							</div>
						</div>
						<div class="agile_services_grid_pos">
							<i class="fa fa-cog" aria-hidden="true"></i>
						</div>
					</div>
					<h4>Dignissim rhoncus</h4>
					<p>Lorem ipsum dolor sit amet, do eiusmod tempor incididunt .Aliquam lacus turpis, lobortis quis dolor sed, dignissim rhoncus
						neque.
					</p>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //services -->
	<!-- /testimonials-->
	<div class="agile_testimonials">
		<div class="col-md-6 testmonial_agile_info">
			<h3 class="agile_heading two">What Clients Say</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at placerat ante. Praesent nulla nunc, pretium dapibus
				efficitur in, auctor eget elit. Lorem ipsum dolor sit amet fusce eget erat nunc..</p>
			<div class="agileits-button two">
				<a href="single.html" class="read scroll hvr-shutter-out-vertical">More Details</a>
			</div>
		</div>
		<div class="col-md-6 clients_agile_slider">
			<div id="owl-demo" class="owl-carousel owl-theme">
				<div class="item">
					<div class="agile_tesimonials_content">
						<div class="about-midd-main">
							<img class="agile-img" src="images/t1.png" alt=" " class="img-responsive">
							<h4>Smith Kevin</h4>
							<p> Lorem ipsum adipiscing elit, sed do eiusmod idunt ut labore. sed do eiusmod tempor incididunt.</p>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="agile_tesimonials_content">
						<div class="about-midd-main">
							<img class="agile-img" src="images/t2.png" alt=" " class="img-responsive">
							<h4>Laura Hill</h4>
							<p> Lorem ipsum adipiscing elit, sed do eiusmod idunt ut labore. sed do eiusmod tempor incididunt.</p>
						</div>
					</div>
				</div>
				<div class="item">
					<div class="agile_tesimonials_content">
						<div class="about-midd-main">
							<img class="agile-img" src="images/t3.png" alt=" " class="img-responsive">
							<h4>Thomson Doe</h4>
							<p> Lorem ipsum adipiscing elit, sed do eiusmod idunt ut labore. sed do eiusmod tempor incididunt.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
		<div class="clearfix"> </div>
	</div>
	<!-- //testimonials-->
	<!-- footer -->
	<div class="footer">
		<div class="container">
			<h2><a href="index.html"><i class="fa fa-magic" aria-hidden="true"></i>  Exec</a></h2>
			<h3>Subscribe To Our Newsletter</h3>
			<p class="footer_info_w3ls_agile">Subscribe to our newsletter and we will inform you about newest projects and promotions.</p>
			<form action="#" method="post">
				<input type="email" name="email" placeholder="Your email..." required="">
				<input type="submit" value="Subscribe">
			</form>
			<div class="agileits_w3layouts_nav">
				<div class="agileits_w3layouts_nav_left">
					<ul>
						<li class="active"><a href="index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="icons.html">Icons</a></li>
						<li><a href="mail.html">Mail Us</a></li>
					</ul>
				</div>
				<div class="agileits_w3layouts_nav_right">
					<ul>
						<li><a href="#" class="w3_agile_facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
						<li><a href="#" class="agile_twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_dribble"><i class="fa fa-dribbble" aria-hidden="true"></i></a></li>
						<li><a href="#" class="w3_agile_vimeo"><i class="fa fa-vimeo" aria-hidden="true"></i></a></li>
					</ul>
				</div>
				<div class="clearfix"> </div>
			</div>
			<p>? 2017 Exec. All rights reserved | Design by <a href="http://www.cqetom.live//">xmoban.cn</a></p>
		</div>
	</div>
	<!-- //footer -->
	<script src="js/poposlides.js">
	</script>
	<script>
		$(".slides").poposlides();
	</script>
		<!-- js for portfolio lightbox -->
	<!--light-box-files -->
	<script type="text/javascript ">
		$(function () {
			$('.portfolio-grids a').Chocolat();
		});
	</script>
	<!-- /js for portfolio lightbox -->
	<!-- stats -->
	<script>
		$('.counter').countUp();
	</script>
	<!-- //stats -->
	<!-- start-smooth-scrolling -->
	<script type="text/javascript">
		jQuery(document).ready(function ($) {
			$(".scroll").click(function (event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop: $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!-- start-smooth-scrolling -->
	<!-- here stars scrolling icon -->
	<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>
	<!-- //here ends scrolling icon -->
	<!-- carousel -->
	<script>
		$(document).ready(function () {
			$("#owl-demo").owlCarousel({
				items: 1,
				itemsDesktop: [768, 1],
				itemsDesktopSmall: [414, 1],
				lazyLoad: true,
				autoPlay: true,
				navigation: true,
				navigationText: false,
				pagination: true,
			});
		});
	</script>
	<!-- //carousel -->



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子