current position:Home>HTML final assignment - imitation food recipe website template (HTML + CSS + JavaScript)

HTML final assignment - imitation food recipe website template (HTML + CSS + JavaScript)

2021-08-22 22:54:40 @. code out the future

HTML Final assignment - Imitation food recipe website HTML Templates (HTML+CSS+JavaScript)

Food recipe website template ,DIV+CSS Layout design , Adaptive resolution , compatible PC End and mobile end , A complete set of templates , Including home page 、 A healthy diet 、 Gourmet people 、 Recipes 、 Login, etc. HTML Enterprise website template page .

Effect demonstration

 Insert picture description here
 Insert picture description here
 Insert picture description here
 Insert picture description here

Code implementation

<!DOCTYPE html>
<html lang="zh-CN">
<head>

    <title> Xin Shenghui </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.min.js"></script>
    
    <script src="js/common.js"></script>

</head>
<body>
<header>
	<!--logo-->
	<div class="container-fluid">
		<div class="container logo">
		  <a href="index.html"><img src="images/logo.png" /></a>
		</div>
	</div>
	<!--logo end-->
	
	<!--nav-->
	<div class="nav_all">
		<div class="container-fluid nav_top">
			<div class="container ">
			 <div class="nav_top_left">
			 	<span> The good faith &nbsp;&nbsp;&nbsp;&nbsp;  major  &nbsp;&nbsp;&nbsp;&nbsp;  be responsible for &nbsp;&nbsp;&nbsp;&nbsp;   innovation </span>
			 </div>
			 <div class="nav_top_right">
			 	 <a><span class="glyphicon glyphicon-home" aria-hidden="true"></span> |</a>
			 	 <a><span class="glyphicon glyphicon-user" aria-hidden="true"></span> |</a>
			 	 <a><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>[email protected]&nbsp;&nbsp; |</a>
			 	 <a><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span> 0533-8888 8888</a>
			 </div>
			 <div class="clear"></div>
			</div>
		</div>
		<div class="container-fluid nav_navbar">
			<div class="container">
				<ul class="">
				  <li class="active"><a href="index.html"> home page </a></li>
				  <li><a href="about.html"> Walk into xinshenghui </a></li>
				  <li><a href="news.html"> News and information </a></li>
				  <li><a href="case.html"> Classic case  </a></li>
				  <li><a href="partner.html">  Cooperation and support </a></li>
				  
				</ul>
			</div>
		</div>
	</div>
	<!--nav end-->
</header>

<div class="main">
<!-- Public sidebar -->	
<div class="toolbar">
	<a href="javascript:scroll(0,0)" id="top" class="toolbar-item toolbar-item-top"></a>
<a href="tencent://message/?uin=285772998&Site= Corporate website &Menu=yes" class="toolbar-item toolbar-item-feedback"></a>
 	<a href="###" class="toolbar-item toolbar-item-app"><span class="toolbar-layer"></span></a>
</div>	
<!-- Public sidebar  end-->	
	
<!--banner-->
<div class="container-fluid banner">
	<img src="images/index_06.jpg">
</div>
<!--banner end-->
	
<!--about-->

<div class="container-fluid ">
	<div class="container about">
		<div class="about_left">
			<p>
				<span> Qingdao xinshenghui Decoration Engineering Co., Ltd </span>( Qingdao Zhuohui Decoration Engineering Co., Ltd ) Is a collection of indoor and outdoor decoration design 、 The budget 、 The construction of the 、 A professional decoration company integrating materials . since 2008 Since it was founded in , Always adhere to “ Quality first , Customer first ” Corporate purpose and “ The good faith 、 major 、 be responsible for 、 innovation ” The spirit of enterprise , With “ Quality for survival , Reputation for development ” The corporate philosophy of , With excellent engineering quality and good reputation, it has won universal praise in the industry .</p></br>

<p>10 these years , Under the leadership of Mr. Sun Zisheng, executive director and general manager of the company , With fashionable design 、 Scientific construction 、 Strict management 、 High cost performance , Created the excellent rate of the project 100%、 Customer satisfaction 100% Of “ Two hundred ” Good results .</p></br>

<p> Qingdao xinshenghui Decoration Engineering Co., Ltd. has a number of professional designers with excellent business 、 Construction team and long-term stable cooperation brand product supplier team , Can provide you with “ Tailor made ” Design and construction scheme , as well as “ "One-stop" work style ” service . Just tell us what you need , We will give you a satisfied boutique .</p></br>

<p> Give us a chance , You will have one more sincere friend !</p>
	
		</div>
		<div class="about_video">
			<video width="100%" height="335" controls>
			  <source src="images/xxx.mp4" type="video/mp4">
			  <source src="movie.ogg" type="video/ogg">
			 Your browser does not support it Video label .
			</video>
		</div>
		<div class="clear"></div>
	</div>
</div>
<!--about end-->
	
<!-- Classic case  case-->
<div class="container-fluid ">
	<div class="container case">
		<div class="title">
			<span> Classic case </span>
		</div>
		<div class="row">
		  <div class="col-sm-6 col-md-4 case_img">
		  	<a href="case_context.html">
		  	<div class="case_position">
		  		 <img src="images/index_03.jpg" alt="...">
			      <div class="caption">
			        <p class="name"> Office building  -  Hisense Hitachi </p>
			        <p class="time">2016.10.01  Hisense Hitachi   One of the reception rooms </p>
			      </div>
		  	</div>
		    </a> 
		  </div>
		  <div class="col-sm-6 col-md-4 case_img">
		  	<a href="case_context.html">
		  	<div class="case_position">
		      <img src="images/index_03-03.jpg" alt="...">
		      <div class="caption">
		        <p class="name">  Villa and hardcover  -  Xianggen hot spring villa </p>
			    <p class="time">2017.10.01  Xianggen hot spring villa 57 Number </p>
		      </div>
		    </div>
		    </a> 
		  </div>
		  <div class="col-sm-6 col-md-4 case_img">
		  	<a href="case_context.html">
		  	<div class="case_position">
		      <img src="images/index_05.jpg" alt="...">
		      <div class="caption">
		        <p class="name"> public  -  Silver century exhibition hall </p>
			    <p class="time">2018.10.01  Silver century exhibition hall marine products area </p>
		      </div>
		     </div>
		    </a>
		  </div>
		</div>
	</div>
</div>
<!-- Classic case  end-->

<!-- Information Center -->
<div class="container-fluid ">
	<div class="container news">
		<div class="title">
			<span> Information Center </span>
		</div>
		<div class="row">
		<div class="media_item col-md-6 col-xs-12">
			<div class="media">
			  <div class="media-left">
			    <a href="news_context.html">
			      <img class="media-object" src="images/new1.jpg" alt="...">
			    </a>
			  </div>
			  <div class="media-body">
			    <p class="time">2019.09.01</p>
			    <a href="news_context.html"><p class="name"> Follow the latest news , Meet market challenges and pay attention to the latest developments , Meet market challenges </p></a>
			    <p class="text"> Follow the latest news , Meet market challenges , Follow the latest news , Meet market challenges 
 war , Follow the latest news , Meet market challenges .</p>
			    
			  </div>
			</div>
		</div>
		<div class="media_item col-md-6 col-xs-12">
			<div class="media">
			  <div class="media-left">
			    <a href="news_context.html">
			      <img class="media-object" src="images/new2.jpg" alt="...">
			    </a>
			  </div>
			  <div class="media-body">
			    <p class="time">2019.09.01</p>
			    <a href="news_context.html"><p class="name"> Follow the latest news , Meet market challenges </p></a>
			    <p class="text"> Follow the latest news , Meet market challenges , Follow the latest news , Meet market challenges 
 war , Follow the latest news , Meet market challenges .</p>
			  </div>
			</div>
		</div>
		<div class="media_item col-md-6 col-xs-12">
			<div class="media">
			  <div class="media-left">
			     <a href="news_context.html">
			       <img class="media-object" src="images/new3.jpg" alt="...">
			    </a>
			  </div>
			  <div class="media-body">
			    <p class="time">2019.09.01</p>
			     <a href="news_context.html"><p class="name"> Follow the latest news , Meet market challenges </p></a>
			    <p class="text"> Follow the latest news , Meet market challenges , Follow the latest news , Meet market challenges 
 war , Follow the latest news , Meet market challenges .</p>
			    
			  </div>
			</div>
		</div>
		<div class="media_item col-md-6 col-xs-12">
			<div class="media">
			  <div class="media-left">
			    <a href="news_context.html">
			       <img class="media-object" src="images/new4.jpg" alt="...">
			    </a>
			  </div>
			  <div class="media-body">
			     <p class="time">2019.09.01</p>
			     <a href="news_context.html"><p class="name"> Follow the latest news , Meet market challenges </p></a>
			    <p class="text"> Follow the latest news , Meet market challenges , Follow the latest news , Meet market challenges 
 war , Follow the latest news , Meet market challenges .</p>
			  </div>
			</div>
		</div>
	</div>	
		
		
	</div>
</div>
<!-- Information Center  end-->	

<!-- Cooperation Center  -->
<div class="container-fluid ">
	<div class="container partner">
		<div class="title">
			<span> Cooperation Center </span>
		</div>
		<div class="row">
			<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_07.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_09.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_11.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_13.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_021.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_21.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_22.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_22-11.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_23.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_24.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_26.jpg" alt="...">   
		  	</div>
		  	<div class="col-sm-3 col-md-2 partner_img">		  	
		     <img src="images/index_051.jpg" alt="...">   
		  	</div>
		</div>
		 
	</div>
</div>
<!-- Cooperation Center  end-->	
</div>

<!--footer-->
<footer>
	<div class="container">
		<div class="footer_left">
			<div class="link">
				<a href="about.html"> About us </a>
				<span>  | </span> 
				<a href="contact.html">  Contact us </a>
				<span>  | </span>
				<a href="join.html"> Join us  </a>
				<span>  | </span>
				<a href="#"> Website map  </a>
				<span>  | </span>
			 
			</div>
			<div class="footer_copy">
				<p> 2019  Qingdao xinshenghui Decoration Engineering Co., Ltd </p>
				<p> Address : Laoshan District, Qingdao XX road XXX Number XXXXX building </p>
				<p> Telephone :0532-8888 8888</p>
				<p> Fax :0532-8888 8888</p>
				<p> mailbox :[email protected]</p>
			</div>
		</div>
		<div class="footer_right">
			<img src="images/ewm_34.jpg">
		</div>
		<div class="clear"></div>
	</div>
</footer>
<!--footer end-->

</body>
</html>

Good web effect , How to send links to others ?

1.1 Solve the deployment online ~> Deploy online tools ( Use for free forever )

1. You don't need to buy a server to deploy online , Your connection is accessible all over the world , Here is a necessary artifact for programmers ~
Plugins are integrated with super easy-to-use plug-ins , Download and install for free , Simple and easy to understand , It's an artifact ~ If necessary, it can be found in the article ↓ Xiagong Z Number acquisition

2. Is to do your code effect well , Deploy online , Send links to others , You can let the other party click in through your connection , You can see the effect of your web page , Both computer and mobile terminals are OK ! ( Otherwise, people will send files when they see your web page , The experience is not very good ~)

1.1 Deployment process

 Insert picture description here

1.2 wow ~ Deployment success

wow ~ Deployment success ! Deploy your written page online , People all over the world can access your web page through links ( Free forever )~

 Insert picture description here

front end Zero basic entry to advanced ( video + Source code + Development software + Learning materials + Interview questions ) a full set of ( course )

Suitable for children's shoes from entry to advanced ~
 Insert picture description here


The source code for

* ~ Pay attention to me , Like the blog ~ Every day brings you knowledge !

* 1. See here, just [ give the thumbs-up + Praise + Collection ] Three even Support me , Yours 「 give the thumbs-up , Praise , Collection 」 It's the driving force of my creation .

* 2. Pay attention to me ~ Take you to study every day : Various front-end plug-ins 、3D Cool effect 、 Pictures show 、 Text effect 、 And the whole station template 、 College graduation template 、 Final assignment template 、 etc. ! 「 There are a lot of front end developer , To discuss front end Node knowledge , learn from each other 」!

* 3. We can learn from each other about the above technical issues , can Focus on ↓ Male Z Number Get more source code !

 Insert picture description here

more HTML Final student assignment article

1.HTML The students finish their homework at the end of the term ~html+css+javascript Imitation Dingdang movie online website ( The function is all ready )

2.HTML Final student homework ~html+css+javascript Cat's eye movie online website ( The function is all ready )

3.HTML Final student homework (9 set )html+css+javascript Imitation of Jingdong 、 Tmall 、 clothing 、 Major e-commerce templates ( University graduation project )

HTML Final assignment ( download )

1.web Big homework for the last class at the front end ~html Student information management system template

2.web Big homework for the last class at the front end ~HTML School background user login interface template

3.web Big homework for the last class at the front end ,~ Millet official website vertical classification navigation menu

4.web Big homework for the last class at the front end ~HTML5 College Students' online check-in system response template

5.web Big homework for the last class at the front end ~ Self taught University official website HTML Templates

6.web Big homework for the last class at the front end ~ Xiaomi mall official website home page template

7.web Big homework for the last class at the front end - green IT Technology online education responsive template

8.web Big homework for the last class at the front end ~HTML Website template of education and training institutions

9.web Front end final homework html+css+javascript University Experimental Teaching Demonstration Center HTML Website template

10.web Big homework for the last class at the front end ~HTML5 Website template of responsive children's dance training school

11.web Big homework for the last class at the front end ~ Red education and training studio HTML Website template

[12.HTML Final assignment - Green fruit and vegetable mall shopping network template (HTML+CSS+JavaScript)] (https://blog.csdn.net/ruan365392777/article/details/118080654)

More source code

100 Paragraph confession source code demonstration address

copyright notice
author[@. code out the future],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210822225438242k.html

Random recommended