白色大气风格响应式吉野家餐厅网页模板



4 12 5



模板描述:白色 大气 响应式 吉野家餐厅 网页模板,白色大气风格响应式吉野家餐厅网页模板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">
	    <header>
		<div class="container-fluid px-lg-5 ">
			<nav class="mnu mx-auto">
                      <label for="drop" class="toggle">Menu</label>
                        <input type="checkbox" id="drop">
                        <ul class="menu">
                            <li class="mr-lg-0 active"><a href="index.html">Home</a></li>
							<li class="mr-lg-0"><a href="#about" class="scroll">About</a></li>
							 <li class="mr-lg-0"><a href="#services" class="scroll">Services</a></li>
							<li class="mr-lg-0"><a href="#news" class="scroll">News</a></li>
                            <li><a href="#contact" class="scroll">Contact</a></li>
                        </ul>
                    </nav>
		</div>
	</header>
         <!-- //Navigation -->
				<div class="style-banner">
					<h1>Vancouver</h1>
					<p class="mt-3">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui </p>
				</div>
		  <div class="clearfix"></div>
      </div>
      <!-- //banner -->
     	 <!-- what we do -->
	 <section class="wedo py-5" id="about">
		<div class="container py-lg-5">
		<h6 class="intr mx-auto">THE INTRODUCTION</h6>
			<div class="text-center">
				<p class="main_p mb-5  text-center mx-auto">Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
				<h2 class="w3_head">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem. </h2>
				<p class="main_p2 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, consectetur ac ipsum Proin ac  </p>
				<div class="whsat_bt text-center mx-auto">
					<a href="single.html" class="btn button-style mt-sm-4 mt-3">Proceed</a>
				</div>
			</div>
	 </div>
	</section>
	 <!-- //what we do -->
<!-- services -->
	<section class="slide-wrapper py-5" id="services">
		<div class="container py-lg-5">
		<h6 class="intr ser mx-auto">THE DETAILS</h6>
		<img src="images/1.jpg" class="img-fluid" alt="">
		<div class="text-center">
			<h3 class="w3_head1 mt-4">Integer porttitor mollisar </h3>
			<p class="main_p3 mt-4 mb-4 text-center mx-auto"> Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
		</div>
			<div class="services">
				<div class="row service_w3top mt-5">
                                <div class="col-lg-6 ser-lt">
                                    <div class="d-flex services-box">
                                        <div class="icon">
                                            <span class="fa fa-comment"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h2>Inagittis Lacg</h2>
                                            <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box ser-midd">
                                        <div class="icon">
                                            <span class="fa fa-image"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Velitdipisc Inagittis</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
									<!-- .Services-box ends here -->
                                    <div class="d-flex services-box bx-4">
                                        <div class="icon">
                                            <span class="fa fa-wrench"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                                <div class="col-lg-6 ser-rgt">
                                    <div class="d-flex services-box bx-1">
                                        <div class="icon">
                                            <span class="fa fa-refresh"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Vulputate Velitdipisc</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                    <div class="d-flex services-box ser-midd bx-2">
                                        <div class="icon">
                                            <span class="fa fa-cog"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <div class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </div>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
									<!-- .Services-box ends here -->
                                    <div class="d-flex services-box bx-3">
                                        <div class="icon">
                                            <span class="fa fa-check"></span>
                                        </div>
                                        <!-- .Icon ends here -->
                                        <span class="service-content">
                                            <h4>Sagittis Lacus</h4>
                                           <p class="serp">
                                                Quisque sagittis lacus eu lorem sodalesd vulputate velitdipisc inagittis lacg enean adipiscing.
                                            </p>
                                        </span>
                                        <!-- .Service-content ends here -->
                                    </div>
                                    <!-- .Services-box ends here -->
                                </div>
                                <!-- .Col ends here -->
                            </div>
                            <!-- .Row ends here -->
							<!-- .Container ends here -->
        </div>
                    <!-- .Services ends here -->
					<div class="ser_bts text-center mx_auto">
						<a href="single.html" class="btn button-style1 mt-sm-5 mt-4 mr-3">Get Started</a>
						<a href="single.html" class="btn button-style2 mt-sm-5 mt-4">More info</a>
					</div>
	</div>
</section>
			<!-- //services -->
<!-- news -->
	<section class="news py-5" id="news">
		<div class="container py-lg-5">
		<h6 class="intr ser1 mx-auto">OUR NEWS</h6>
			<div class="row news-grids pb-lg-5 mt-3 text-center">
						<div class="col-md-4 newsgrid1">
							<img src="images/g7.jpg" alt="news image" class="img-fluid">
							<h4 class="mt-4">Integer porttitor</h4>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut. </p>
							<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1" href="single.html" role="button">Learn More</a>
						</div>
						<div class="col-md-4 mt-md-0 mt-5 newsgrid2">
							<img src="images/g2.jpg" alt="news image" class="img-fluid">
							<h4 class=" mt-4">Integer porttitor</h4>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
							<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1" href="single.html" role="button">Learn More</a>
						</div>
						<div class="col-md-4  newsgrid3">
							<img src="images/g3.jpg" alt="news image" class="img-fluid">
							<h4 class=" mt-4">Integer porttitor</h4>
							<p class="mt-4">Nulla pellentesque mi non laoreet eleifend. Integer porttitor mollisar lorem, at molestie arcu pulvinar ut.</p>
							<a class="btn btn-primary mt-lg-4 mt-3 agile-link-bnr1" href="single.html" role="button">Learn More</a>
						</div>
					</div>		
		</div>
	</section>
<!-- //news -->	
	<!-- contact -->
	 <section class="contact py-5" id="contact">
		<div class="container py-lg-5">
		 <h6 class="intr ser2 mx-auto">CONTACT INFO</h6>
			<div class="text-center">
				<h3 class="w3_head1 text-white">Integer porttitor mollisar lorem </h3>
				<p class="main_p4 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>
							<input type="submit" value="Send">
							<input type="reset" value="Reset">
							<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-home"></span>
									</div>
									<div class="col-9">
									<h6>Address</h6>
										<p>The company name
											<br>5768 Morris Park,
											<br>New York City. </p>
									</div>
								</div>
							</li>
							<li>
								<div class="row">
									<div class="col-3">
										<span class="fa fa-comment"></span>
									</div>
									<div class="col-9">
										<h6>Social</h6>
										<p><a href="#">Facebook.com</a>
											<br><a href="#">twitter.com</a>
											<br><a href="#">dribble.com</a> </p>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-envelope"></span>
									</div>
									<div class="col-9">
									<h6>Email</h6>
										<a href="https://www.51qianduan.com/">51前端</a>
									</div>
								</div>
							</li>
							<li class="mt-5">
								<div class="row">
									<div class="col-3">
										<span class="fa fa-phone"></span>
									</div>
									<div class="col-9">
										<h6>Phone</h6>
										<p>1234567890</p>
									</div>
								</div>
							</li>
						</ul>
				</div>
			</div>
			<div class="cpy-right text-center pt-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

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