<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>home page</title>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
<style>
a:link, a:visited {
background-color: #fE7272;
color: white;
padding: 14px 25px;
border-radius: 30px;
text-align: center;
text-decoration: none;
display: inline-block;
}
body{
overflow-x: hidden;
overflow-y: auto;
}
#logo1 {
position:absolute;
top:50px;
left: 0px;
}
#logo2 {
position:absolute;
top:50px;
right: 0px;
}
#background {
background-image: url("background.jpg");
height: 750px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.select-box {
border-radius: 2px;
padding: 10px;
font-family: sans-serif;
font-size: 18px;
color: #60666d;
}
#slogon {
padding-bottom: 40px;
font-size: 60px;
color: white;
font-family: "Indie Flower", cursive;
}
.button {
border-radius: 30px;
width: 150px;
height: 60px;
font-size: 20px;
background-color: #FE7272;
border: none;
color: white;
text-align: center;
}
#text {
text-align: center;
margin: auto;
position: absolute;
top: 25%;
left: 0;
right: 0;
bottom: 0;
}
#welcome {
text-align: center;
margin: auto;
position: absolute;
top: 75%;
left: 0;
right: 0;
bottom: 0;
}
#welcome1 {
font-family: Brush Script MT, Brush Script Std, cursive ;
font-size: 400%;
color: lightblue;
}
#welcome2 {
font-family: fantasy;
font-size: 200%;
color: #FFBD33;
}
#rec1{
text-align: center;
margin: auto;
position: absolute;
top: 100%;
left: 0;
right: 0;
bottom: 0;
font-family: Comic Sans MS;
color: #F6603F;
border: 10px inset #72B2F3;
}
#rec2{
text-align: center;
margin: auto;
position: absolute;
top: 140%;
left: 0;
right: 0;
bottom: 0;
font-family: Comic Sans MS;
color: #F6603F;
border: 10px inset #72B2F3;
}
#rec3{
text-align: center;
margin: auto;
position: absolute;
top: 180%;
left: 0;
right: 0;
bottom: 0;
font-family: Comic Sans MS;
color: #F6603F;
border: 10px inset #72B2F3;
}
</style>
</head>
<body>
<div id="background">
<div style="float:right;">
<a href="/svn/2019/s1/wdc/group/login.html">login</a>
<a href="/register.html">register</a>
</div>
<div id="text">
<div id="slogon">
Explore the Best Restaurant
</div>
<div id="search">
<label class="date">
<input type="date"
name="date"
value="2019-05-18"
min="2019-05-18"
class="calendar"
data-value-pre-filled="false"
data-default-date="2019-05-18"
data-show-no-specific-date-control=""
autocomplete="off"
id="Date-search-bar" />
</label>
<select class="select-box">
<option value="breakfast">breakfast</option>
<option value="lunch">lunch</option>
<option value="dinner">dinner</option>
</select>
<select class="select-box">
<option value="1">1 people</option>
<option value="2">2 people</option>
<option value="3">3 people</option>
<option value="4">4 people</option>
<option value="5">5 people</option>
<option value="6">6 people</option>
<option value="7">7 people</option>
<option value="8">8 people</option>
<option value="9">9 people</option>
<option value="10">10 people</option>
<option value="11">11 people</option>
<option value="12">12 people</option>
</select>
<input type="text" placeholder="Search..." class="select-box">
<button value="search" class="button">search</button>
</div>
</div>
</div>
<div id="welcome">
<img id= "logo1" src="logo.png" alt="logo" style="width:300px; height:250px;">
<img id= "logo2" src="logo.png" alt="logo" style="width:300px; height:250px;">
<h2 id="welcome1">Welcome to Indulge</h2>
<p id="welcome2">Haven't decide of anything to eat yet? Just slide down and you'll see more recommendations!</p>
</div>
<div id="rec1">
<h1>Popular Restaurants</h1>
<div>
<img src="sushi.png" alt="restaurant pic" style="max-height: 200px; max-width: 250px;"><br>
<a href="search.html">Japanese restaurant</a>
</div>
</div>
<div id="rec2">
<h1>Popular Dishes</h1>
<p>Here will list the popular dishes</p>
</div>
<div id="rec3">
<h1>Restaurants Nearby</h1>
<p>Here will list the restaurants which are near the current location</p>
</div>
</body>
</html>
全屏幕本来是这样的
缩小就挤在一起了
