bootstrap绿色欧美样式仙人掌资讯网页模板代码下载

bootstrap绿色欧美样式仙人掌资讯网页模板代码下载

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Poppins:100,300,500" rel="stylesheet">
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/main.css">

2. 引入JS

<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.nice-select.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/main.js"></script>

3. HTML代码

	<div class="oz-body-wrap">
		<!-- Start Header Area -->
		<header class="default-header">
			<div class="container-fluid">
				<div class="header-wrap">
					<div class="header-top d-flex justify-content-between align-items-center">
						<div class="logo">
							<a href="index.html"><img src="img/logo.png" alt=""></a>
						</div>
						<div class="main-menubar d-flex align-items-center">
							<nav class="hide">
								<a href="index.html">Home</a>
								<a href="generic.html">Generic</a>
								<a href="elements.html">Elements</a>
							</nav>
							<div class="menu-bar"><span class="lnr lnr-menu"></span></div>
						</div>
					</div>
				</div>
			</div>
		</header>
		<!-- End Header Area -->
		<!-- Start Banner Area -->
		<section class="banner-area relative">
			<div class="container">
				<div class="row fullscreen align-items-center justify-content-center">
					<div class="banner-left col-lg-6">
						<img class="d-flex mx-auto img-fluid" src="img/header-img.png" alt="">
					</div>
					<div class="col-lg-6">
						<div class="story-content">
							<h6 class="text-uppercase">From the for User interface</h6>
							<h1>Behind Every <span class="sp-1">Success</span><br>
							There is a <span class="sp-2">Cactus</span></h1>
							<a href="#" class="genric-btn primary circle arrow">Get Started<span class="lnr lnr-arrow-right"></span></a>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- End Banner Area -->
		<!-- Start Video Area -->
		<section class="video-area pt-40 pb-40">
			<div class="overlay overlay-bg"></div>
			<div class="container">
				<div class="video-content">
					<a href="https://www.51qianduan.com/">51前端</a>
					<div class="video-desc">
						<h3 class="h2 text-white text-uppercase">Being unique is the preference</h3>
						<h4 class="text-white">Youtube video will appear in popover</h4>
					</div>
				</div>
			</div>
		</section>
		<!-- End Video Area -->
		<!-- Start about Area -->
		<section class="about-area pt-100 pb-100">
			<div class="container">
				<div class="row align-items-center">
					<div class="col-lg-6">
						<div class="story-content">
							<h2>Brief Information <br>
							About <span>CellOn</span></h2>
							<p class="mt-30">Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline-inappropriate behavior is often laughed off as “boys will be boys,” women face higher conduct standards – especially in the workplace. <br> <br>
							While men’s borderline-inappropriate behavior is often laughed off as “boys will be boys,”
							</p>
							<a href="#" class="genric-btn primary-border circle arrow">View More<span class="lnr lnr-arrow-right"></span></a>
						</div>
					</div>
					<div class="col-lg-6">
						<img class="img-fluid d-flex mx-auto" src="img/about.png" alt="">
					</div>
				</div>
			</div>
		</section>
		<!-- End Team Force Area -->
		<!-- Start Feature Area -->
		<section class="feature-area pt-100 pb-100  relative">
			<div class="overlay overlay-bg"></div>
			<div class="container">
				<div class="row">
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-laptop-phone"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">3 Simple Ways To Save <br> A Bunch Of Money</h2>
								<p>
									Computer users and programmers have become so accustomed to using Windows, even for the changing
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-graduation-hat"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">Baby Monitor <br>Learning Technology</h2>
								<p>
									While most people enjoy casino gambling, sports betting, lottery and bingo playing for the fun and excitemen
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-phone"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">How Does An Lcd
								<br>Screen Work</h2>
								<p>
									It is a good idea to think of your PC as an office. It stores files, programs, pictures. This can be compared to an actual
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-laptop"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">The Skinny On Lcd <br>Monitors</h2>
								<p>
									Computers have become ubiquitous in almost every facet of our lives. At work, desk jockeys spend hours in front of their
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-heart"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">For Women Only Your<br>Computer Usage</h2>
								<p>
									About 64% of all on-line teens say that do things online that they wouldn’t want their parents to know about.   11% of all
								</p>
							</div>
						</div>
					</div>
					<div class="col-lg-4 col-sm-6 d-flex align-items-stretch">
						<div class="single-feature">
							<div class="icon">
								<span class="lnr lnr-screen"></span>
							</div>
							<div class="desc">
								<h2 class="text-uppercase">5 Reasons To Purchase<br> Desktop Computers</h2>
								<p>
									So you have your new digital camera and clicking away to glory anything and everything in sight. Now you want to print
								</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Start Feature Area -->
		<!-- Start faq Area -->
		<section class="faq-area pt-100 pb-100">
			<div class="container">
				<div class="row">
					<div class="counter-left col-lg-3 col-md-3">
						<div class="single-facts">
							<h2 class="counter">5962</h2>
							<p>Projects Completed</p>
						</div>
						<div class="single-facts">
							<h2 class="counter">2394</h2>
							<p>New Projects</p>
						</div>
						<div class="single-facts">
							<h2 class="counter">1439</h2>
							<p>Tickets Submitted</p>
						</div>
						<div class="single-facts">
							<h2 class="counter">933</h2>
							<p>Cup of Coffee</p>
						</div>
					</div>
					<div class="faq-content col-lg-9 col-md-9">
						<div class="single-faq">
							<h2 class="text-uppercase">
								Are your Templates responsive?
							</h2>
							<p>
								“Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline-inappropriate behavior.
							</p>
						</div>
						<div class="single-faq">
							<h2 class="text-uppercase">
								Does it have all the plugin as mentioned?
							</h2>
							<p>
								“Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline-inappropriate behavior.
							</p>
						</div>
						<div class="single-faq">
							<h2 class="text-uppercase">
								Can i use the these theme for my client?
							</h2>
							<p>
								“Few would argue that, despite the advancements of feminism over the past three decades, women still face a double standard when it comes to their behavior. While men’s borderline-inappropriate behavior.
							</p>
						</div>
					</div>
				</div>
			</div>
		</section>
		<!-- Start faq Area -->
		<!-- Start Conatct- Area -->
		<section class="contact-area pt-100 pb-100 relative">
			<div class="overlay overlay-bg"></div>
			<div class="container">
				<div class="row justify-content-center text-center">
					<div class="single-contact col-lg-6 col-md-8">
						<h2 class="text-white">Send Us <span>Message</span></h2>
						<p class="text-white">
							Most people who work in an office environment, buy computer products.
						</p>
					</div>
				</div>
				<form id="myForm" action="mail.php" method="post" class="contact-form">
					<div class="row justify-content-center">
						<div class="col-lg-5">
							<input name="fname" placeholder="Enter your name" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name'" class="common-input mt-20" required="" type="text">
						</div>
						<div class="col-lg-5">
							<input name="email" placeholder="Enter email address" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address'" class="common-input mt-20" required="" type="email">
						</div>
						<div class="col-lg-10">
							<textarea class="common-textarea mt-20" name="message" placeholder="Messege" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Messege'" required=""></textarea>
					</div>
					<div class="col-lg-10 d-flex justify-content-end">
						<button class="primary-btn white-bg d-inline-flex align-items-center mt-20"><span class="mr-10">Send Message</span><span class="lnr lnr-arrow-right"></span></button> <br>
					</div>
					<div class="alert-msg"></div>
					</div>
				</form>
			</div>
		</section>
		<!-- End Conatct- Area -->
		<!-- Strat Footer Area -->
		<footer class="section-gap">
			<div class="container">
				<div class="row pt-60">
					<div class="col-lg-3 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="text-uppercase mb-20">Top Product</h6>
							<ul class="footer-nav">
								<li><a href="#">Managed Website</a></li>
								<li><a href="#">Manage Reputation</a></li>
								<li><a href="#">Power Tools</a></li>
								<li><a href="#">Marketing Service</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="text-uppercase mb-20">Navigation</h6>
							<ul class="footer-nav">
								<li><a href="#">Home</a></li>
								<li><a href="#">Main Features</a></li>
								<li><a href="#">Offered Services</a></li>
								<li><a href="#">Latest Portfolio</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="text-uppercase mb-20">Compare</h6>
							<ul class="footer-nav">
								<li><a href="#">Works & Builders</a></li>
								<li><a href="#">Works & Wordpress</a></li>
								<li><a href="#">Works & Templates</a></li>
							</ul>
						</div>
					</div>
					<div class="col-lg-3 col-sm-6">
						<div class="single-footer-widget">
							<h6 class="text-uppercase mb-20">Quick About</h6>
							<p>
								Lorem ipsum dolor sit amet, consecteturadipisicin gelit, sed do eiusmod tempor incididunt.
							</p>
							<p>
								+00 012 6325 98 6542 <br>
								support@colorlib.com
							</p>
							<div class="footer-social d-flex align-items-center">
								<a href="#"><i class="fa fa-facebook"></i></a>
								<a href="#"><i class="fa fa-twitter"></i></a>
								<a href="#"><i class="fa fa-dribbble"></i></a>
								<a href="#"><i class="fa fa-behance"></i></a>
							</div>
						</div>
					</div>
				</div>
				<div class="footer-bottom d-flex justify-content-between align-items-center flex-wrap">
					<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
					<p class="footer-text m-0">Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://www.51qianduan.com/">51前端</a></p>
					<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
				</div>
			</div>
		</footer>
		<!-- End Footer Area -->
	</div>
		<script src="js/vendor/jquery-2.2.4.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
		<script src="js/vendor/bootstrap.min.js"></script>
		<script src="js/jquery.ajaxchimp.min.js"></script>
		<script src="js/owl.carousel.min.js"></script>
		<script src="js/jquery.nice-select.min.js"></script>
		<script src="js/jquery.magnific-popup.min.js"></script>
		<script src="js/jquery.counterup.min.js"></script>
		<script src="js/waypoints.min.js"></script>
		<script src="js/main.js"></script>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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