绿色欧美样式bootstrap多肉植物种植网页模板代码下载



4 13 5



模板描述:绿色 欧美 bootstrap 多肉植物种植 网页模板 代码下载,绿色欧美样式bootstrap多肉植物种植网页模板代码下载html模板下载

代码结构

1. 引入CSS

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/fontawesome-all.min.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">

2. HTML代码

      <div class="header-outs" id="header">
	    <header>
		<div class="container-fluid px-lg-5 ">
		 <div class="hedder-up">
                  <h1><a class="navbar-brand" href="index.html">Herb</a></h1>
               </div>
			<nav class="mnu mx-auto">
                      <label for="drop" class="toggle">Menu</label>
                        <input type="checkbox" id="drop">
                        <ul class="menu">
                            <li class="mr-lg-4 mr-3 active"><a href="index.html">Home</a></li>
							 <li class="mr-lg-4 mr-3"><a href="#about" class="scroll">About</a></li>
							<li class="mr-lg-4 mr-3"><a href="#services" class="scroll">Services</a></li>
							 <li class="mr-lg-4 mr-3"><a href="#more" class="scroll">More</a></li>
							<li class="mr-lg-4 mr-3"><a href="#news" class="scroll">News</a></li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                        </ul>
                    </nav>
		</div>
	</header>
         <!--banner -->
        <div class="baner-text text-center">
				<h2 class="mx-auto">Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</h2>
				<p class="mx-auto mt-4 pt-2">porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est</p>
				<a class="btn btn-primary mt-lg-5 mt-3 agile-link-bnr scroll" href="#about" role="button">Get Started</a>
			</div>
         <div class="clearfix"></div>
      </div>
      <!-- //banner -->
<!-- news -->
<section class="news py-5" id="about">
	<div class="container py-lg-5">
		<div class="row news-grids py-lg-4 text-center">
			<div class="col-md-6 newsgrid1">
				<img src="images/g1.jpg" alt="news image" class="img-fluid">
				<div class="new-tp">
					<h4 class=" mt-4">Integer porttitor mollisar lorem, at molestie arcu pulvinar</h4>
					<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
					<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1 scroll" href="#services" role="button">Learn More</a>
				</div>
			</div>
			<div class="col-md-6 mt-md-0 mt-5 newsgrid2">
				<img src="images/g2.jpg" alt="news image" class="img-fluid">
				<div class="new-tp">	
					<h4 class=" mt-4">Pellentesque mi non laoreet eleifend. Integer porttitor</h4>
					<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. pellentesque mi non laoreet eleifend porttitor mollisar</p>
					<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1 scroll" href="#services" role="button">Learn More</a>
				</div>
			</div>
		</div>	
	</div>
</section>
<!-- //news -->	
<!-- ban_bottom -->	
<section class="ban_bottom py-5">
	<div class="container py-lg-5">
		<div class="ban_bottom_top row my-lg-5">
			<div class="col-lg-9 ban_bottom_left">
				<h3>Pellentesque mi non laoreet eleifend Integer porttitor</h3>
			</div>
			<div class="col-lg-3 ban_bottom_right">
				<a class="btn btn-primary agile-link-bnr2 scroll" href="#news" role="button">Get Started</a>
			</div>
		</div>
	</div>
</section>
<!-- //ban_bottom -->
<!-- offer -->
    <section class="offer-wthree py-lg-5 py-3" id="services">
        <div class="container  py-sm-5">
		<h3 class="heading text-capitalize text-center"> porttitor mollisar lorem, at molestie arcu </h3>
           <p class="subs mt-4 text-center mx-auto">Integer porttitor mollisar lorem, at molestie arcu pulvinar ut non laoreet</p> 
			<div class="row head-row-home text-center pt-5">
                <div class="col-lg-12 mx-auto">
                    <div class="row">
                        <div class="col-lg-4 col-sm-6 my-sm-4 mt-4">
                            <div class="home-grid">
                                <span class="fa fa-info-circle" aria-hidden="true"></span>
                                <h4 class="home-title my-3">why choose us</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 my-4">
                            <div class="home-grid">
                                <span class="fa fa-arrows-alt" aria-hidden="true"></span>
								<h4 class="home-title my-3">what we do</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 my-lg-4 mb-4 mx-auto">
                            <div class="home-grid">
                                <span class="fa fa-users" aria-hidden="true"></span>
                                <h4 class="home-title my-3">explore versatile</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <div class="home-grid">
                                <span class="fa fa-backward" aria-hidden="true"></span>
                                <h4 class="home-title my-3">why we are unique</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 mt-sm-0 mt-4">
                            <div class="home-grid">
                                <span class="fa fa-bookmark" aria-hidden="true"></span>
                                <h4 class="home-title my-3">how we do</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 mx-auto mt-lg-0 m">
                            <div class="home-grid">
                                <span class="fa fa-home" aria-hidden="true"></span>
                                <h4 class="home-title my-3">become a member</h4>
                                <p> Pellentesque in ipsum id orci porta dapibus roined magna orem ipsum dolor sit
                                    ame.</p>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- //offer -->
<!-- ban_bottom -->	
<section class="ban_bottom1 py-5" id="more">
	<div class="container py-lg-5">
		<div class="ban_bottom_top text-center">
			<h3>Pellentesque mi non laoreet eleifend Integer porttitor</h3>
			<a class="btn btn-primary agile-link-bnr2 mt-5 scroll" href="#about" role="button">View More</a>
		</div>
	</div>
</section>
<!-- //ban_bottom -->
<!-- news -->
	<section class="news py-5" id="news">
		<div class="container py-lg-5">
		<h3 class="heading text-capitalize text-center"> porttitor mollisar lorem, at molestie arcu </h3>
		<p class="subs mt-4 text-center mx-auto">Integer porttitor mollisar lorem, at molestie arcu pulvinar ut non laoreet</p>
				<div class="row news-grids py-lg-5 mt-3 text-center">
						<div class="col-md-4 newsgrid1">
							<img src="images/g3.jpg" alt="news image" class="img-fluid">
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
						</div>
						<div class="col-md-4 mt-md-0 mt-5 newsgrid2">
							<img src="images/g4.jpg" alt="news image" class="img-fluid">
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
						</div>
						<div class="col-md-4  mt-md-0 mt-5 newsgrid3">
							<img src="images/g6.jpg" alt="news image" class="img-fluid">
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
						</div>
					</div>
						<div class="text-center mx-auto">
							<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1" href="index.html" role="button">Learn More</a>
						</div>
		</div>
	</section>
<!-- //news -->	
	<!-- contact -->
	 <section class="contact py-5" id="contact">
		<div class="container py-lg-5">
			<div class="text-center">
				<h3 class="heading text-capitalize text-center"> porttitor mollisar lorem, at molestie arcu </h3>
				<p class="subs mt-4 mb-4 pt-2 text-center mx-auto">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. Proin ac fermentum est. Cras mi ipsum,</p>
			</div>
			<div class="row contact-top">
				<div class="col-lg-6 contact_grid_right">
					<form action="#" method="post">
						<div class="row contact_top">
							<div class="col-sm-6">
								<input type="text" name="Name" placeholder="Name" required="">
							</div>
							<div class="col-sm-6">
								<input type="email" name="Email" placeholder="Email" required="">
							</div>
						</div>	
							<textarea name="Message" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>
							<button type="submit" class="btn" >Send Message</button>
							<button type="reset" class="btn" >Clear Form</button>
							<div class="clearfix"> </div>
					</form>
				</div>
				<div class="col-lg-6 contact_grid_left">
					<ul class="list-unstyled">
							<li>
								<div class="row">
									<div class="col-3">
										<span class="fa fa-facebook"></span>
									</div>
									<div class="col-9">
										<a href="#">facebook.com</a>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="col-3">
										<span class="fa fa-twitter"></span>
									</div>
									<div class="col-9">
										<a href="#">twitter.com</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-instagram"></span>
									</div>
									<div class="col-9">
										<a href="#">instagram.com</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-dribbble"></span>
									</div>
									<div class="col-9">
										<a href="#">dribbble.com</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-linkedin"></span>
									</div>
									<div class="col-9">
										<a href="#">linkedin.com</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-pinterest"></span>
									</div>
									<div class="col-9">
										<a href="#">pinterest.com</a>
									</div>
								</div>
							</li>
						</ul>
				</div>
			</div>
			<div class="cpy-right text-center py-5">	
				<p>Copyright &copy; 2019.Company name All rights reserved.<a href="https://www.51qianduan.com/">51前端</a>
				</p>
			</div>
		</div>
	</section>
	 <!-- //contact -->



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


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 植物花草 植物 花草 植物园 花草市场 园艺 企业 行业 公司 工厂 bootstrap bootstrap自适应 bootstrap响应式 pc+wap 移动+电脑 手机+电脑 绿色 简洁 简约 简单 大气 霸气

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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