-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadvanced_search.html
131 lines (128 loc) · 5.54 KB
/
advanced_search.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!--
CS50W edx curriculum
project0: Search
Created by: Fink62
to do for later:
keep the help text from moving left when making the window smaller
On Google site, it just disappears
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Advanced Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<div class="gNavbar">
<a class="gNavbarItem" href="index.html">Google</a>
</div>
</header>
<main>
<p class="advH1">Advanced Search</p>
<!--
instead of <hr>, Googles is using a div with a bottom border
-->
<div class="advDivider"></div>
<form action="https://www.google.com/search" method="GET" name="f">
<!--
Using a row as placeholder for all elements.
Using divs as placeholders (*Space) for 3 elements inside the row.
Using nested divs for the content fields (*Field) on top of the placeholders.
Using the <span> element for applying monospace to help samples is what I learned from Google :).
Labels and help texts copied from Google's Advanced Search page.
-->
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label style="font-size: 15px">Find pages with...</label>
</div>
</div>
<div class="inputSpace"></div>
<div class="helpSpace">
<div class="helpField">
<span>To do this in the searchbox</span>
</div>
</div>
</div>
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label for="all">all these words:</label>
</div>
</div>
<div class="inputSpace">
<input class="inputField" id="all" type="text" name="as_q">
</div>
<div class="helpSpace">
<div class="helpField">
Type the important words:
<span class="helpSample">tri-colour rat terrier</span>
</div>
</div>
</div>
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label for="this">this exact word or phrase:</label>
</div>
</div>
<div class="inputSpace">
<input class="inputField" id="this" type="text" name="as_epq">
</div>
<div class="helpSpace">
<div class="helpField">
Put exact words in quotes:
<span class="helpSample">"rat terrier"</span>
</div>
</div>
</div>
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label for="any">any of these words:</label>
</div>
</div>
<div class="inputSpace">
<input class="inputField" id="any" type="text" name="as_oq">
</div>
<div class="helpSpace">
<div class="helpField">
Type OR between all the words you want:
<span class="helpSample">miniature OR standard</span>
</div>
</div>
</div>
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label for="none">none of these words:</label>
</div>
</div>
<div class="inputSpace">
<input class="inputField" id="none" type="text" name="as_eq">
</div>
<div class="helpSpace">
<div class="helpField">
Put a minus sign just before words that you don't want:
<span class="helpSample">-rodent, -"Jack Russell"</span>
</div>
</div>
</div>
<div class="formRowSpace">
<div class="labelSpace">
<div class="labelField">
<label for="advSBtn"></label>
</div>
</div>
<div class="inputSpace">
<input class="advSubmitBtn" id="advSBtn" type="submit" value="Advanced Search">
</div>
</div>
</form>
</main>
</body>
</html>