Yunlu Valley Senior Operations

Date: 2020-10-24

Author: 19th WY

Tag: Yunlu Valley Senior Assignment

reset.css

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    
    
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    
    
	display: block;
}
body {
    
    
	line-height: 1;
}
ol, ul {
    
    
	list-style: none;
}
blockquote, q {
    
    
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    
    
	content: '';
	content: none;
}
table {
    
    
	border-collapse: collapse;
	border-spacing: 0;
}

page-index.css

.all{
    
    
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	padding: 3% 5% 0 5%;
}
.top-nav{
    
    
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	margin:0 8% 2% 2%;
	
}
.top-nav-left{
    
    
	align-self: flex-start;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.top-nav-left img{
    
    
	width:30%;
	height: 30%;
}
.top-nav-left a{
    
    
	color:black;
	font:bold 20px Georgia, 'Times New Roman', Times, serif;
	text-decoration: none;
}
.top-nav-right{
    
    
	margin-right: 5%;
	align-self:flex-end;
	display: flex;
	flex-direction:row;
	justify-content: space-around;	
}
.top-nav-right-a{
    
    
	margin:0 0 0 20%;
}
.top-nav-right-a a{
    
    
	color:black;
	font:bold 20px Georgia, 'Times New Roman', Times, serif;
	text-decoration: none;
}
.top-nav-right-a a2{
    
    
	color:orange;
	font:bold 20px Georgia, 'Times New Roman', Times, serif;
	text-decoration: none;
}
.title{
    
    
	background-image: url(../img/background.png);
	background-repeat: no-repeat;
	background-size:31.25rem;
	background-position: center;
	margin:5%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.title a{
    
    
	color:black;
	font:bold 30px Georgia, 'Times New Roman', Times, serif;
	text-decoration: none;
	margin-top: 3%;
	margin-bottom: 2%;
}
.title-text{
    
    
	color:#b7b7b7;
	font:15px Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	margin-bottom: 2%;
}
.main-part{
    
    
	background-color:whitesmoke;
	box-shadow: 10px 10px 40px lightgray;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 5%;
	margin-bottom: 3%;
}
.main-part-child{
    
    
	display: flex;
	flex-direction: row;
	margin:3% 4% 0 4%;
	justify-content:space-around;

}
.main-part-photo{
    
    
	margin:2% 2% 2% 2%;
}
.main-part-photo img{
    
    
	width:100%;
	height:70%;
	
}
.main-part-desc{
    
    
	background-color: white;
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	align-items: center;
	padding-bottom: 8%;
}
.main-part-title{
    
    
	color:black;
	font:bold 26px Georgia, 'Times New Roman', Times, serif;
	text-decoration: none;
	padding-top:10%;
	padding-bottom:8%;
}
.main-part-desc-p{
    
    
	color:#b7b7b7; 
	font:13px tahoma; 
	font-style: italic;
	margin-bottom: 5%; 
}
.footer{
    
    
	display:flex;
	flex-direction: column;
	justify-content: center;
}
.tail-line{
    
    
	margin-top: 2%;
	display: flex;
	flex-direction:row;
	justify-content:center;
}
.tail-line img{
    
    
	width:4%;
	height:4%;
	padding:12px;
	border: solid #F5F5F5 2px;
	border-radius: 100px;
	background-color: white;
	transform: translateY(-30px);
	
}
.footer-text{
    
    
	display:flex;
	flex-direction: column;
	justify-content:space-around;
	align-items: center;
	padding-bottom: 1%;
}
.footer-text1{
    
    
	color:black;
	font:bold 20px Georgia, 'Times New Roman', Times, serif;
	font-style: italic;
	padding-top: 1%;
	padding-bottom: 1%;
}
.footer-text2{
    
    
	color:#b7b7b7;
	font:16px tahoma;	
	font-style: italic;	
	padding-bottom: 2%;
}
.footer-imgs{
    
    
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.footer-imgs img{
    
    
	margin:1% 1% 2% 1%;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>MENU</title>
		<!-- 引入reset.css用来清除浏览器的默认样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!-- 引入page-index -->
		<link rel="stylesheet" type="text/css" href="css/page-index.css"/>
	</head>
	<body>
		<div class="all">
			<div class="top-nav">
				<div class="top-nav-left">
					<img src="img/Logo.png" alt="网站logo" />
				    <a href="#">Gratia</a>
				</div>
				<div class="top-nav-right">
					<div class="top-nav-right-a"><a href="#">menu1</a></div>
					<div class="top-nav-right-a"><a2 href="#">menu2</a></div>
					<div class="top-nav-right-a"><a href="#">menu3</a></div>
					<div class="top-nav-right-a"><a href="#">menu4</a></div>
				</div>
			</div>
			<div>
				<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="whitesmoke" SIZE=2>
			</div>
			<div class="title">
				<a href="#">MENU</a>
				<div class="title-text">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
			</div>
			<div class="main-part">
				<div class="main-part-child">
					<div class="main-part-photo">
						<img src="img/Main Dishes.png">
						<div class="main-part-desc">
							<div class="main-part-title">MAIN DISHES</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
					<div class="main-part-photo">
						<img src="img/Soups.png">
						<div class="main-part-desc">
							<div class="main-part-title">SOUPS</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
					<div class="main-part-photo">
						<img src="img/Hamburgers.png">
						<div class="main-part-desc">
							<div class="main-part-title">HAMBURGERS</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
				</div>
				<div class="main-part-child">
					<div class="main-part-photo">
						<img src="img/Desserts.png">
						<div class="main-part-desc">
							<div class="main-part-title">DESSERTS</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
					<div class="main-part-photo">
						<img src="img/Barbecue.png">
						<div class="main-part-desc">
							<div class="main-part-title">BARBECUE</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
					<div class="main-part-photo">
						<img src="img/Salads.png">
						<div class="main-part-desc">
							<div class="main-part-title">SALADS</div>
							<div class="main-part-desc-p">Lorem ipsum dolor sit amet,consectetur adipscing elit</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="tail-line">
					<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="48%" color="whitesmoke" poisition="80% 80%"SIZE=2>
					<img src="img/Logo.png" alt="Logo">
					<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="48%" color="whitesmoke" SIZE=2>
					
					
				</div>
				<div class="footer-text">
					<div class="footer-text1">Gratia Restaurant</div>
					<div class="footer-text2">Copyright 2016. All rights reserved by symu.</div>
					<hr style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="15%" color="whitesmoke" SIZE=3>
				</div>
				<div ></div>
				<div class="footer-imgs">
					<img src="img/FB.png" >
					<img src="img/TR.png" >
					<img src="img/IG.png" >
				</div>
			</div>
		</div>
	</body>
</html>