-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (85 loc) · 3.71 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
<!doctype html>
<head>
<meta charset="utf-8">
<title>Breadpaw's Google Homepage</title>
<meta name="description" content="">
<!-- favicon -->
<link rel="icon" type="image/jpg" href="img/person.jpeg">
<!-- Google fonts material -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- <link rel="stylesheet" href="css/styles.css"> -->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<ul>
<li><a href="">Gmail</a></li>
<li><a href="">Images</a></li>
<li>
<a href="">
<div class="dot_background">
<img class="dots" src="img/dots.svg"></img>
</div>
</a>
</li>
<li>
<a href="">
<img class="profile_pic" src="img/person.jpeg" alt="">
<svg class="profile_circle" focusable="false" height="48px" version="1.1" viewBox="0 0 40 40" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="opacity:1.0"><path d="M4.02,28.27C2.73,25.8,2,22.98,2,20c0-2.87,0.68-5.59,1.88-8l-1.72-1.04C0.78,13.67,0,16.75,0,20c0,3.31,0.8,6.43,2.23,9.18L4.02,28.27z" fill="#F6AD01"></path><path d="M32.15,33.27C28.95,36.21,24.68,38,20,38c-6.95,0-12.98-3.95-15.99-9.73l-1.79,0.91C5.55,35.61,12.26,40,20,40c5.2,0,9.93-1.98,13.48-5.23L32.15,33.27z" fill="#249A41"></path><path d="M33.49,34.77C37.49,31.12,40,25.85,40,20c0-5.86-2.52-11.13-6.54-14.79l-1.37,1.46C35.72,9.97,38,14.72,38,20c0,5.25-2.26,9.98-5.85,13.27L33.49,34.77z" fill="#3174F1"></path><path d="M20,2c4.65,0,8.89,1.77,12.09,4.67l1.37-1.46C29.91,1.97,25.19,0,20,0l0,0C12.21,0,5.46,4.46,2.16,10.96L3.88,12C6.83,6.08,12.95,2,20,2" fill="#E92D18"></path></svg>
</a>
</li>
</ul>
</header>
<main>
<div class="logo-container">
<img src="img/googlelogo.png" alt="">
</div>
<div>
<form action="#">
<div class="searchbox">
<div class="searchglass">
<span class="material-icons" style="font-size:20px;">
search
</span>
</div>
<input type="text" name="search" id="">
<div class="microphone">
<span class="material-icons" style="font-size:27px;">
mic
</span>
</div>
</div>
</form>
</div>
<div class="buttons">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
<div class="language-links">
Google offered in: <a href="#">Nederlands</a> <a href="#">Frysk</a>
</div>
</main>
<footer>
<div class="footer-upper">Netherlands</div>
<div class="footer-lower">
<div class='footer-left'>
<ul class="footer-left-list">
<li><a href="#">About</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Business</a></li>
<li><a href="#">How Search works</a></li>
</ul>
</div>
<div class='footer-right'>
<ul class='footer-right-list'>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Settings</a></li>
</ul>
</div>
</div>
<!-- hier komen flex/grid?-->
</footer>
</body>
</html>