HTML5 final assignment: Website - Catering Web Design (HTML+CSS+JS)

Near the end of the term, you are still designing your final homework for HTML web pages. Do you feel the teacher's homework requirements are great? Can't you start HTML web page homework? The total number of pages required is too much? No suitable template? And so on. The problems you want to solve can basically meet your needs in this blog post~

Original HTML+CSS+JS page design, web college students' web design homework source code, this is a good web page production, the picture is smart, and is very suitable for beginners to learn and use.

Introduction to works

1. Introduction to web works: cartoon creativity, responsive layout, website source code! Compatible with pc and mobile terminals, connotation js interaction and ui interaction, including home page, signature food page, investment promotion page, enterprise profile page, contact us page and news page,

2. Editing of web page works: this work is the subject of web page design of students' personal home page, and the code is made of simple student level html+css layout. After downloading the work, you can use any HTML editing software (for example, all editors of DW, HBuilder, NotePAD, vscade, Sublime and Webstorm can be used)

3. Web page work layout: the overall web page layout includes LOGO, navigation and main content layout. There are many layouts of sub pages. The contents of interests and hobbies use the picture list layout. The score page inserts a table. Contact us to set the left alignment using the picture alignment.

4. Web page work technology: CSS is used to make web page background, mouse passing, selected navigation color change effect, underline, etc. A message form is made on the home page, and a form judgment is made simply using JavaScript (the form cannot be empty when submitted)

1, Work demonstration

1. Home page

2. Signature food page

3. Investment promotion page

4. Enterprise profile page

5. Contact us

2, Code directory

3, Code implementation

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="BBQ">
	<title>BBQ world bar BBQ join the official website bar culture BBQ leader </title>
	<meta name="keywords" content="Roast the world,Roast the world bar barbecue,Roast the world to join,Barbecue franchise">
	<meta name="description" content="Roast world bar barbecue is the first pirate themed bar barbecue. Please pay attention to roast world. You can enjoy it here. You can drink and eat meat, rob and socialize here. Roast world bar barbecue joins in. You need to taste and tone. Roast world join in hotline: 4006099517">
	<link rel="shortcut icon" type="image/x-icon" href="img/icon/favicon.ico">

</head>
<body>
<!-- Header -->
<header id="header" class="">
	<div class="container">
		<div class="global-nav">
			<button class="navbar-toggle">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="brand" href="index.html">Roast the world</a>
			<nav class="navbar">
				<ul class="nav">
					<li class="active">
						<a href="index.html" class="home-current">home page</a>
					</li>
					<li class="">
						<a href="food.html">Signature cuisine</a>
					</li>
					<li class="">
						<a href="join.html">Investment promotion</a>
					</li>
					<li class="">
						<a href="profile.html">Enterprise overview</a>
					</li>
					<li class="">
						<a href="about.html">contact us</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</header>
<!--Banner-->
<section class="carousel-top">
	<div class="banner">
		<div class="b-img">
			<a href="#" style="background:url(img/banner/slider-1.jpg) center no-repeat; background-size:cover;"></a>
			<a href="#" style="background:url(img/banner/slider-2.jpg) center no-repeat; background-size:cover;"></a>
		</div>
		<div class="b-list"></div>
		<a class="bar-left" href="#"><em></em></a>
		<a class="bar-right" href="#"><em></em></a>
	</div>
</section>
<!-- Product -->
<section id="greenx" style="background:#c30d23">
	<div class="container">
		<div class="row">
			<div class="item-title" style="padding-bottom:20px;">
				<h1 style="color:#C30d23 "> brand features</h1>

			</div>
			<div class="col-4 ">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-1"></div>
					<div class="item-ellipse">
						<h2>flavor</h2>
						<h3>KOUWEI</h3>
						<p>The taste can only mature after precipitation. The main baking officer project has been studied by Zhongchuang Yongxin (Beijing) Food Science Research Institute for 13 years from raw materials, pickling, stringing, baking and dipping.</p>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-2"></div>
					<div class="item-ellipse">
						<h2>taste</h2>
						<h3>PINWEI</h3>
						<p>Not mediocre, not blindly obedient, not afraid of mistakes and daring to do is the characteristics of the post-90s and post-00s. The main roaster creates his own barbecue shop for the young group from many aspects, such as youth brand story, innovative dish taste and bright packaging.</p>
					</div>
				</div>
			</div>
			<div class="col-4">
				<div class="item item-ellipse">
					<div class="item-pad item-pad-3"></div>
					<div class="item-ellipse">
						<h2>aftertaste</h2>
						<h3>HUIWEI</h3>
						<p>No matter how good the youth is, the more the memories are, the less the taste will be. The main roaster carefully turns the taste of youth into delicious food and keeps it intact. He records the youth in memory for each diner and makes every memory funny and interesting.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- News -->
<section id="philosophy">
	<div class="container">
		<div class="row">
			<div class="item-title" style="padding-bottom:30px">
				<h1>Journalism</h1>
			</div>
			<div class="col-5 item-news">
				<div class="item-lists">
					<div class="news-img"><a href="#"><img src="img/bj/news.jpg" alt=""></a></div>
					<div class="news-text">
						<h4><a href="news-page.html">Chengdu roast world new store opens</a></h4>
						<p>Personalized positioning to create the ultimate experience. The new store is popular in Chengdu. If you want to play, come to roast the world. The reservation phone is 8020113</p>
						<p class="news-large">04-20</p>
						<p>2017</p>
					</div>
				</div>
			</div>
			<div class="col-7 item-axis">
				<div class="item-axis-list clearfix">
					<div class="item-sou">
						<form action="">
							<input  type="text" placeholder="Search for previous articles">
							<i class="icon-sou"></i>
							<button>search</button>
						</form>
					</div>
					<div class="it_expert3">
						<div id="hot_ranks2">
							<ul class="clearfix current" style="display:block">
								<li>
									<a href="news-page.html">
										<div class="axis-time">
											<h4>05-16</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>Roast the world founder to visit 2017 CCTV Lantern Festival Party</h5>
											<p>Personalized positioning to create the ultimate experience. The new store is very popular in Chengdu. If you want to play, come to roast the world. Book at 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-12</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>The tip of your tongue belongs to us during the barbecue season in summer</h5>
											<p>How can barbecue lovers move from roadside stalls to clean halls for barbecue? This is a migration problem of catering habits. To get through the migration channel, first</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-08</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>It is more valuable to be a brand and jump out of the routine</h5>
											<p>A viable brand is like a sponge with internal circulation function for the user group. It constantly absorbs and reacts on itself to become stronger, so as to achieve greater volume</p>
										</div>
									</a>
								</li>

							</ul>
							<ul class="clearfix current" style="display:none">
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>04-01</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>Our original intention is to make entrepreneurs succeed</h5>
											<p>In the surging catering Jianghu, the barbecue world has sprung up, which not only refreshes the standard of the barbecue industry with the strong bar barbecue culture</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-28</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>Denmark has been a little sad recently,</h5>
											<p> There are three fears when eating barbecue in summer. The first is choking smoke, crying, coughing and eating meat together; The second is that the neighbor's bare arms are hot eyes</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-26</h4>
											<span>2017</span>
										</div>
										<div class="axis-title" style="border-bottom:none">
											<h5>Chengdu roast world new store opens</h5>
											<p>Personalized positioning to create the ultimate experience. The new store is very popular in Chengdu. If you want to play, come to roast the world. Book at 010-8020113</p>
										</div>
									</a>
								</li>
							</ul>
							<ul class="clearfix current" style="display:none">
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-22</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>2 Chengdu roast world new store opens</h5>
											<p>Personalized positioning to create the ultimate experience. The new store is very popular in Chengdu. If you want to play, come to roast the world. Book at 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-21</h4>
											<span>2017</span>
										</div>
										<div class="axis-title">
											<h5>Chengdu roast world new store opens</h5>
											<p>Personalized positioning to create the ultimate experience. The new store is very popular in Chengdu. If you want to play, come to roast the world. Book at 010-8020113</p>
										</div>
									</a>
								</li>
								<li>
									<a href="#">
										<div class="axis-time">
											<h4>03-18</h4>
											<span>2017</span>
										</div>
										<div class="axis-title" style="border-bottom:none">
											<h5>Chengdu roast world new store opens</h5>
											<p>Personalized positioning to create the ultimate experience. The new store is very popular in Chengdu. If you want to play, come to roast the world. Book at 010-8020113</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="button-cut">
						<span id="it_awewe" class="it_awewe">
							<a href="javascript:volid(0);" class="cut-up it_expertspan1" id="previous2"></a>
							<a href="javascript:volid(0);" class="cut-dow it_expertspan2" id="next2"></a>
						</span>
					</div>
				</div>
			</div>

		</div>
	</div>
</section>

<!-- Taste -->
<section id="net">
	<div class="container">

		<div class="row">
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-1.png" alt="">
					<h3>Semi finished product output, fast delivery</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-2.png" alt="">
					<h3>High quality producing area and strict quality control</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-3.png" alt="">
					<h3>Complete categories and rich tastes</h3>
				</div>
			</div>
			<div class="col-3">
				<div class="items">
					<img src="img/icon/f-4.png" alt="">
					<h3>Dish innovation, activity iteration</h3>
				</div>
			</div>

		</div>
	</div>
</section>

<!-- Footer -->
<footer id="footer">
	<div class="container">
		<div class="copy">©AUI Material network Beijing ICP Bei 15006025-1
		</div>
		<div class="copy">
			Copyright © 2012-2016 www.a-ui.cn <span>Address: 6 / F, AVIC Plaza, 43 North Third Ring West Road, Haidian District, Beijing</span>
		</div>
	</div>
</footer>

</body>
</html>

4, A complete set of web front-end introduction to advanced (Video + source code + materials + interview) (Tutorial)

A complete set of web front-end zero foundation - Introduction to advanced (Video + source code + development software + learning materials + interview questions) (Tutorial)
Suitable for entry-level to advanced children's shoes ~ send 1000 sets of HTML+CSS+JavaScript template websites

5, Source code acquisition

❉ ~ pay attention to me and praise the blog ~ bring you up knowledge every day!

❉1. See here, with the support of [praise + praise + collection] three companies, your "praise, praise and collection" is the driving force of my creation.

❉ 2. Pay attention to me ~ take you to learn every day: various front-end plug-ins, 3D cool effects, picture display, text effects, whole station templates, college students' Graduation HTML templates, final homework templates, etc! "There are many front-end developers here to discuss front-end Node knowledge and learn from each other"!

Programming VIP

HTML5 final assignment: Website - Catering Web Design (HTML+CSS+JS)

HTML5 final assignment: Website - Catering Web Design (HTML+CSS+JS)

Introduction to works

1, Work demonstration

1. Home page

2. Signature food page

3. Investment promotion page

4. Enterprise profile page

5. Contact us

2, Code directory

3, Code implementation

4, A complete set of web front-end introduction to advanced (Video + source code + materials + interview) (Tutorial)

5, Source code acquisition

6, More HTML final assignment articles

7, More confession source code

8, 150 sets of eckarts big data visualization

Popular Keywords