/
index.html
189 lines (151 loc) · 8.29 KB
/
index.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
<!DOCTYPE html>
<html>
<head>
<title>My Google Project - The Odin</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<style type="text/css">
body{
margin: 0 auto;
width: 100%;
}
nav ul, nav li {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
width: 100%;
display: inline;
}
/* nav li {
float: right;
position: relative;
}*/
nav a {
color: #000000;
display: block-inline;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-decoration: none;
}
nav .leftnav a{
float:left;
color: #000000;
padding: 15px;
margin-top: 5px;
}
nav .leftnav a:hover {
color: #356ca3;
text-decoration: none;
text-decoration: underline;
}
nav .rightnav a{
float:right;
padding: 15px;
margin-top: 5px;
}
nav .rightnav a:hover {
color: #356ca3;
text-decoration: none;
text-decoration: underline;
}
.logo{
position: relative;
top: 180px;
left:33%;
}
.goosearch{
position: relative;
top: 200px;
left: 35%;
}
.material-icons{
/**/
color:#cccccc;
margin-top: 0;
}
.info{
background-color: #3170d6;
color: #ffffff;
padding: 5px 10px;
border: none;
font-size: 1.2em;
border-radius: 10%;
}
input[type=text]{
width: 500px;
height:40px;
}
input[type=text]:focus {
border: 3px solid #555;
}
input[type=submit]{
width: 150px;
height:30px;
position: relative;
top: 10px;
left: 8%;
}
footer{
position: fixed;
width: 100%;
height:30px;
background-color: #eeeeee;
bottom: 0;
}
footer nav ul {
list-style: none;
width: 100%;
}
footer nav a {
color: #000000;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-decoration: none;
}
footer .footerleft a{
float: left;
}
footer .footerright a{
float: right;
}
</style>
</head>
<body>
<nav>
<ul class="leftnav">
<li><a href="#">About</a></li>
<li><a href="#">Store</a></li>
</ul>
<ul class="rightnav">
<li><a href="#"><button class="btn info">Sign In</button></a></li>
<li><a href=""><i class="material-icons">apps</i></a></li>
<li><a href="#">Gmail</a></li>
<li><a href="#">Images</a></li>
</ul>
</nav>
<a href="#"><img class="logo" src="data:image/png;base64,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" /></a>
<div class="goosearch">
<form action="#">
<input type="text" name="search"><br><br>
<input type="submit" value="Google Search">
<input type="submit" value="I'm Feeling Lucky">
</form>
</div>
<footer>
<nav>
<ul class="footerleft">
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
</ul>
<ul class="footerright">
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">settings</a></li>
</ul>
</nav>
</footer>
</body>
</html>