黄色简洁风格响应式清新厨师食谱企业网站模板



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

11 41 14



模板描述:黄色 简洁风格 响应式 清新厨师食谱。整站宽屏满屏展示效果。鼠标移动在图片区域或者文字区域上有放大效果和展开效果。最底部部分带有自动反动和滚动效果,鼠标移动上之后,停止移动和滚动效果。适用清新厨师食谱

代码结构

1. 引入CSS

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/css/skills/progressbar.css">
<link rel="stylesheet" href="assets/css/skills/style.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/teamslide.css" />
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/css/skills/progressbar.css">
<link rel="stylesheet" href="assets/css/skills/style.css">
<link rel="stylesheet" href="assets/css/fonticons.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/teamslide.css" />
<link rel="stylesheet" href="assets/css/plugins.css" />
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css" />

2. 引入JS

<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/jquery.easypiechart.min.js"></script>
<script src="assets/js/jquery.mixitup.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/css/skills/inview.min.js"></script>
<script src="assets/css/skills/progressbar.js"></script>
<script src="assets/css/skills/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="assets/js/gmaps.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/jquery.easypiechart.min.js"></script>
<script src="assets/js/jquery.mixitup.min.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>
<script src="assets/css/skills/inview.min.js"></script>
<script src="assets/css/skills/progressbar.js"></script>
<script src="assets/css/skills/main.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="assets/js/gmaps.min.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/main.js"></script>

3. HTML代码

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Home</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!--Google fonts Link-->
<!--For Plugins external css-->
<!--Theme custom css -->
<!--Theme Responsive css-->
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<!--[if lt IE 8]>
	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://www.51qianduan.com/" target="_blank">51前端</a> to improve your experience.</p>
<![endif]-->
<header id="main_menu" class="header navbar-fixed-top">            
	<div class="main_menu_bg">
		<div class="container">
			<div class="row">
				<div class="nave_menu">
					<nav class="navbar navbar-default" id="navmenu">
						<div class="container-fluid">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#home">
									<img src="assets/images/logo.png"/>
								</a>
							</div>
							<!-- Collect the nav links, forms, and other content for toggling -->
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav navbar-right">
									<li><a href="#home">Home</a></li>
									<li><a href="#choose">Recipes</a></li>
									<li><a href="#portfolio">Gallery</a></li>
									<li><a href="#about"> About us</a></li>
									<li><a href="#blog">Blog</a></li>
									<li><a href="#contact">Contact</a></li>
									<li>
										<a href="#"  data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
											<span class="fa fa-search"></span></a>
										<ul class="dropdown-menu">
											<li>
												<form class="navbar-form" role="search">
													<div class="form-group">
														<input type="text" class="form-control" placeholder="Search">
													</div>
												</form>
											</li>
										</ul>
									</li>
								</ul>
							</div>
						</div>
					</nav>
				</div>	
			</div>
		</div>
	</div>
</header> <!--End of header -->
<section id="home" class="home">
	<div class="overlay">
		<div class="container">
			<div class="row">
				<div class="col-sm-12 ">
					<div class="main_home_slider">
						<div class="single_home_slider">
							<div class="main_home wow fadeInUp" data-wow-duration="700ms">
								<h1>COOKING SCHOOL FREE LEARNING HUB</h1>
								<p class="subtitle">graphicsdrawer.com</p>
								<div class="home_btn">
									<a href="" class="btn btn-primary">LEARN MORE</a>
								</div>
							</div>
						</div>
						<div class="single_home_slider">
							<div class="main_home wow fadeInUp" data-wow-duration="700ms">
								<h1>COOKING SCHOOL FREE PSD TEMPLATE</h1>
								<p class="subtitle">graphicsdrawer.com</p>
								<div class="home_btn">
									<a href="" class="btn btn-primary">LEARN MORE</a>
								</div>
							</div>
						</div>
						<div class="single_home_slider">
							<div class="main_home wow fadeInUp" data-wow-duration="700ms">
								<h1>COOKING SCHOOL FREE PSD TEMPLATE</h1>
								<p class="subtitle">graphicsdrawer.com</p>
								<div class="home_btn">
									<a href="" class="btn btn-primary">LEARN MORE</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="service" class="service">
	<div class="container">
		<div class="row">
			<div class="service_border_raund text-center"></div>
			<div class="main_service_area sections text-center">
				<div class="head_title text-center">
					<h2>what we do?</h2>
					<div class="separator"></div>
				</div>
				<div class="col-sm-4">
					<div class="single_service">
						<div class="single_service_icon">
							<img src="assets/images/service.png" alt="" />
						</div>
						<h3>HAMBURGERS</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, at ullamcorper turpis gravida nec. 
							Praesent eu ultrices nunc.</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="single_service">
						<div class="single_service_icon">
							<img src="assets/images/service2.png" alt="" />
						</div>
						<h3>muffins</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, at ullamcorper turpis gravida nec. 
							Praesent eu ultrices nunc.</p>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="single_service">
						<div class="single_service_icon">
							<img src="assets/images/service3.png" alt="" />
						</div>
						<h3>salt and pepper</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, at ullamcorper turpis gravida nec. 
							Praesent eu ultrices nunc.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="choose" class="choose greenbackground">
	<div class="container">
		<div class="row">
			<div class="main_choose_area sections text-center">
				<div class="lesson_title">                      
					<p>why choose cooking TEMPLATE?</p>
				</div>
				<div class="main_choose_content">
					<div class="single_choose_content">
						<div class="singel_choose_img">
							<img src="assets/images/choose.png" alt="" />
						</div>
						<h2>BECAUSE WE HAVE SKILLS</h2>
						<p>Suspendisse ac nulla eros. Vestibulum elementum placerat erat ac maximus. 
							Aliquam quis nisi quis arcu dapibus ornare. Donec vel ex urna. Ut in odio ultricies 
							mauris fringilla placerat commodo in augue. Integer at eros quam. Fusce ac lorem vehicula, 
							rutrum velit pharetra, euismod nunc. Cum sociis natoque penatibus et magnis dis parturient
							montes, nascetur ridiculus mus.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="portfolio" class="portfolio">
	<div class="container">
		<div class="row">
			<div class="main_mix_content text-center sections">
				<div class="head_title">
					<h2>OUR PORTFOLIO</h2>
				</div>
				<div class="main_mix_menu">
					<ul>
						<li class="btn btn-primary filter" data-filter="all">FISH</li>
						<li class="btn btn-primary filter" data-filter=".cat1">MEAT</li>
						<li class="btn btn-primary filter" data-filter=".cat2">OLIVE OIL</li>
						<li class="btn btn-primary filter" data-filter=".cat3">SPANISH</li>
						<li class="btn btn-primary filter" data-filter=".cat4">TOP 10</li>
					</ul>
				</div>
				<div id="mixcontent" class="mixcontent">
					<div class="col-md-4 mix cat1 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf1.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 mix cat2 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf2.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 mix cat1 cat4 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf3.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 mix cat3 cat4 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf4.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 mix cat4 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf5.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-4 mix cat1 cat2 no-padding">
						<div class="single_mixi_portfolio">
							<img src="assets/images/pf1.jpg" alt="" />
							<div class="mixi_portfolio_overlay">
								<div class="overflow_hover_text">
									<h2>INGREDIENTS</h2>
									<p>ARE IMPORTANT FOR COOKING ?</p>
									<a href=""><i class="lnr lnr-plus-circle"></i></a>
								</div>
							</div>
						</div>
					</div>
					<div class="portfolio_btn_area">
						<a href="" class="btn btn-md">LOAD MORE</a>
					</div>
					<div class="gap"></div>
				</div>
			</div>                     
		</div>
	</div>
</section> <!-- End of portfolio two Section -->        
<section id="newsletter" class="newsletter text-center">
	<div class="container">
		<div class="row">
			<div class="main_newsletter sections">
				<div class="col-sm-12">
					<div class="single_newsletter_head">
						<h2>JOIN OUR NEWSLETTER</h2>
						<p>Suspendisse ac nulla eros. Vestibulum elementum placerat erat ac maximus. 
							Aliquam quis nisi quis arcu dapibus ornare. Donec vel ex urna. Ut in odio ultricies
							mauris fringilla placerat commodo in augue. </p>
					</div>
					<div class="single_sewsletter_content">
						<div class="row">
							<div class="col-sm-8 col-sm-offset-2">
								<div class="form-group">
									<input type="text" class="form-control" name="name" placeholder="first name" required="">
									<input type="submit" value="SUBSCRIBE" class="btn btn-primary"/>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="about" class="about">
	<div class="container">
		<div class="row">
			<div class="main_about sections">
				<div class="head_title text-center">
					<h2>WHAT ABOUT FRUITS?</h2>
					<div class="separator"></div>
				</div>
				<div class="main_about_content_area">
					<div class="single_about_left_img">
						<img src="assets/images/ab.jpg" alt="" />
					</div> 
					<!-- bar 1 -->
					<div class="col-sm-8 col-sm-offset-4">
						<div class="single_about_right_content">
							<div class="demo4">
								<div class="right_single_about_skill">
									<div class="right_about_top_cotent">
										<div class="right_about_top_img">
											<img src="assets/images/s_ab1.png" alt="" />
										</div>
										<div class="right_about_top_content">
											<h3>COOKCING BOOK</h3>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, 
												at ullamcorper turpis gravida nec. Praesent eu ultrices nunc.</p>
										</div>
									</div>
									<div class="right_about_bottom_cotent">
										<!-- bar 1 -->
										<div class="progress-bar4" data-percentage="76%">
											<h4 class="progress-title-holder">
												<span class="progress-number-wrapper">
													<span class="progress-number-mark">
														<span class="percent"></span>
														<span class="down-arrow"></span>
													</span>
												</span>
											</h4>
											<div class="progress-content-outter">
												<div class="progress-content"></div>
											</div>
										</div> 
									</div>
								</div>
								<div class="right_single_about_skill">
									<div class="right_about_top_cotent">
										<div class="right_about_top_img">
											<img src="assets/images/s_ab2.png" alt="" />
										</div>
										<div class="right_about_top_content">
											<h3>COOKCING BOOK</h3>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, 
												at ullamcorper turpis gravida nec. Praesent eu ultrices nunc.</p>
										</div>
									</div>
									<div class="right_about_bottom_cotent">
										<!-- bar 2 -->
										<div class="progress-bar4" data-percentage="43%">
											<h4 class="progress-title-holder">
												<span class="progress-number-wrapper">
													<span class="progress-number-mark">
														<span class="percent"></span>
														<span class="down-arrow"></span>
													</span>
												</span>
											</h4>
											<div class="progress-content-outter">
												<div class="progress-content"></div>
											</div>
										</div>
									</div>
								</div>
								<div class="right_single_about_skill">
									<div class="right_about_top_cotent">
										<div class="right_about_top_img">
											<img src="assets/images/s_ab3.png" alt="" />
										</div>
										<div class="right_about_top_content">
											<h3>COOKCING BOOK</h3>
											<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc, 
												at ullamcorper turpis gravida nec. Praesent eu ultrices nunc.</p>
										</div>
									</div>
									<div class="right_about_bottom_cotent">
										<!-- bar 3 -->
										<div class="progress-bar4" data-percentage="92%">
											<h4 class="progress-title-holder">
												<span class="progress-number-wrapper">
													<span class="progress-number-mark">
														<span class="percent"></span>
														<span class="down-arrow"></span>
													</span>
												</span>
											</h4>
											<div class="progress-content-outter">
												<div class="progress-content"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>   
					</div>
				</div>
			</div>                    
		</div>
	</div>
</section>
<section id="blog" class="blog">
	<div class="container">
		<div class="row">
			<div class="col-sm-10 col-sm-offset-1">
				<div class="main_blog_area text-center sections">
					<div class="head_title">
						<h2>LATEST FROM BLOG</h2>
						<div class="separator"></div>
						<p>Suspendisse ac nulla eros. Vestibulum elementum placerat erat ac maximus. 
							Aliquam quis nisi quis arcu dapibus ornare. Donec vel ex urna. Ut in odio 
							ultricies mauris fringilla placerat commodo in augue. </p>
					</div>
					<div class="main_blog_content">
						<ul class="main_blog">
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
							<li class="single_blog_content">
								<h4>READ THIS FIRST</h4>
								<h6><i class="fa fa-clock-o"></i> 4 day ago</h6>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur convallis nunc.</p>
								<div class="separator3"></div>
								<p class="blog_love"><i class="fa fa-heart-o"></i> 12</p>
							</li>
						</ul>
					</div>
					<div class="blog_btn">
						<a href="" class="btn btn-primary">VIEW ALL POSTS</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="testimonial" class="testimonial greenbackground">
	<div class="container">
		<div class="row">
			<div class="main_testimonial sections">
				<div class="head_title text-center">
					<p>PEOPLE IMPRESSIONS</p>
				</div>
				<div class="col-md-12" data-wow-delay="0.2s">
					<div class="carousel slide" data-ride="carousel" id="quote-carousel">
						<!-- Bottom Carousel Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#quote-carousel" data-slide-to="0" class="active">
								<img class="img-responsive " src="assets/images/team1.jpg" alt="">
							</li>
							<li data-target="#quote-carousel" data-slide-to="1">
								<img class="img-responsive" src="assets/images/team1.jpg" alt="">
							</li>
							<li data-target="#quote-carousel" data-slide-to="2">
								<img class="img-responsive" src="assets/images/team1.jpg" alt="">
							</li>
							<li data-target="#quote-carousel" data-slide-to="3">
								<img class="img-responsive" src="assets/images/team1.jpg" alt="">
							</li>
						</ol>
						<!-- Carousel Slides / Quotes -->
						<div class="carousel-inner text-center">
							<!-- Quote 1 -->
							<div class="item active">
								<blockquote>
									<div class="row">
										<div class="col-sm-8 col-sm-offset-2">
											<p class="impress">IMPRESSED ABOUT OUR THEME? </p>
											<div class="whiseparator"></div>
											<small>Someone famous</small>
										</div>
									</div>
								</blockquote>
							</div>
							<!-- Quote 2 -->
							<div class="item">
								<blockquote>
									<div class="row">
										<div class="col-sm-8 col-sm-offset-2">
											<p class="impress">IMPRESSED ABOUT OUR THEME? </p>
											<div class="whiseparator"></div>
											<small>Someone famous</small>
										</div>
									</div>
								</blockquote>
							</div>
							<!-- Quote 3 -->
							<div class="item">
								<blockquote>
									<div class="row">
										<div class="col-sm-8 col-sm-offset-2">
											<p class="impress">IMPRESSED ABOUT OUR THEME?</p>
											<div class="whiseparator"></div>
											<small>Someone famous</small>
										</div>
									</div>
								</blockquote>
							</div>
							<!-- Quote 4 -->
							<div class="item">
								<blockquote>
									<div class="row">
										<div class="col-sm-8 col-sm-offset-2">
											<p class="impress">IMPRESSED ABOUT OUR THEME?</p>
											<div class="whiseparator"></div>
											<small>Someone famous</small>
										</div>
									</div>
								</blockquote>
							</div>
						</div>
						<!-- Carousel Buttons Next/Prev -->
						<!-- <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
						 <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>-->
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="counter" class="counter">
	<div class="container-fluid">
		<div class="row">
			<div class="main_counter sections">
				<div class="single_left_counter_bg">
					<div class="col-sm-12 col-xs-12">
						<div class="single_counter_left">
							<h2>OUR <br /> NUMBERS <br /> OF COOKING</h2>
							<p>salt and pepper</p>
						</div>
					</div>
				</div>
				<div class="col-sm-7 col-xs-12">
					<div class="single_counter_right_area text-center">
						<div class="row">
							<div class="col-sm-4 ">
								<div class="single_counter_right">
									<i class="fa fa-comments-o"></i>
									<h2 class="statistic-counter">423</h2>
									<p>COMMENTS</p>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="single_counter_right">
									<i class="fa fa-life-ring"></i>
									<h2 class="statistic-counter">1,423</h2>
									<p>RECIPES</p>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="single_counter_right">
									<i class="fa fa-heart-o"></i>
									<h2 class="statistic-counter">423</h2>
									<p>LOVERS</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<section id="contact" class="footer_widget">
	<div class="container">
		<div class="row">
			<div class="main_widget">
				<div class="row">
					<div class="col-sm-4  col-xs-12">
						<div class="single_widget wow fadeIn" data-wow-duration="800ms">
							<h4 class="footer_title">CONTACT</h4>
							<div class="separator4"></div>
							<ul>
								<li><a href=""><i class="fa fa-envelope"></i> [email protected]</a></li>
								<li><a href=""><i class="fa fa-phone"></i> 0123 456 789 0112</a></li>
								<li><a href=""><i class="fa fa-map-marker"></i> Greenplatz Ben 29, Germany 60435</a></li>
								<li><a href=""><i class="fa fa-fax"></i> (0012) 654 356 445</a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-4 col-xs-12">
						<div class="single_widget wow fadeIn" data-wow-duration="800ms">
							<h4 class="footer_title">LATEST NEWS</h4>
							<div class="separator4"></div>
							<div class="footer_gellary">
								<img src="assets/images/fg1.jpg" alt="" />
								<img src="assets/images/fg2.jpg" alt="" />
								<img src="assets/images/fg3.jpg" alt="" />
								<img src="assets/images/fg4.jpg" alt="" />
								<img src="assets/images/fg5.jpg" alt="" />
								<img src="assets/images/fg6.jpg" alt="" />
								<img src="assets/images/fg7.jpg" alt="" />
								<img src="assets/images/fg8.jpg" alt="" />
							</div>
						</div>
					</div>
					<div class="col-sm-4 col-xs-12">
						<div class="single_widget wow fadeIn" data-wow-duration="800ms">
							<div class="footer_logo">
								<img src="assets/images/footerlogo.png" alt="" />
							</div>
							<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in egestas lectus. 
								Etiam tempor odio tellus, at bibendum neque faucibus quis. Sed vel facilisis elit. </p>
							<p>Nullam fringilla pharetra diam non accumsan. Morbi eget aliquam mauris. 
								Etiam vehicula efficitur mi.</p>
							<a class="weblink" href="#">#</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<footer id="footer" class="footer">
	<div class="container">
		<div class="main_footer">
			<div class="row">
				<div class="col-sm-6 col-xs-12">
					<div class="copyright_text">
						<p class=" wow fadeInRight" data-wow-duration="1s">Copyright &copy; 2021.Company name All rights reserved.</p>
					</div>
				</div>
				<div class="col-sm-6 col-xs-12">
					<div class="footer_socail">
						<a href=""><i class="fa fa-facebook"></i></a>
						<a href=""><i class="fa fa-twitter"></i></a>
						<a href=""><i class="fa fa-google-plus"></i></a>
						<a href=""><i class="fa fa-rss"></i></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- START SCROLL TO TOP  -->
<div class="scrollup">
	<a href="#"><i class="fa fa-chevron-up"></i></a>
</div>
<!--This is link only for gmaps-->
<!---<script>
	var map = new GMaps({
		el: '.ourmaps',
		scrollwheel: false,
		lat: -12.043333,
		lng: -77.028333
	});
</script>--->
<style>
.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
</style>
<div class="copyrights">
	Collect from <a href="http://www.51qianduan.com/"  title="网站模板">模板之家</a>
	<a href="https://www.51qianduan.com/"  title="查字典">查字典</a>
</div>
</body>
</html>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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