/
index.html
64 lines (58 loc) · 6.78 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reddit Search Clone</title>
<link rel="shortcut icon" href="./static/transparent-reddit-logo-5.png" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stlesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel = "stylesheet" href="./index.css" type="text/css">
</head>
<body>
<div class="container">
<div class="navs">
<div class="logo"><img src="./static/transparent-reddit-logo-5.png" alt="logo"/></div>
<ul class="nav justify-content-center">
<li class="nav-item ">
<div id="search-container">
<form id="search-form" >
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="15" height="15"
viewBox="0 0 172 172"
style=fill:#6468dd><g fill="none" fillRule="nonzero" stroke="none" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" strokeMiterlimit="10" strokeDasharray="" strokeDashoffset="0" fontFamily="none" fontWeight="none" fontSize="none" textAnchor="none" style=mixBlendMode:normal><path d="M0,172v-172h172v172z" fill="none"></path><g fill="rgb(107, 107, 107)"><path d="M74.53333,17.2c-31.59642,0 -57.33333,25.73692 -57.33333,57.33333c0,31.59642 25.73692,57.33333 57.33333,57.33333c13.73998,0 26.35834,-4.87915 36.24766,-12.97839l34.23203,34.23203c1.43802,1.49778 3.5734,2.10113 5.5826,1.57735c2.0092,-0.52378 3.57826,-2.09284 4.10204,-4.10204c0.52378,-2.0092 -0.07957,-4.14458 -1.57735,-5.5826l-34.23203,-34.23203c8.09924,-9.88932 12.97839,-22.50768 12.97839,-36.24766c0,-31.59642 -25.73692,-57.33333 -57.33333,-57.33333zM74.53333,28.66667c25.39937,0 45.86667,20.4673 45.86667,45.86667c0,25.39937 -20.46729,45.86667 -45.86667,45.86667c-25.39937,0 -45.86667,-20.46729 -45.86667,-45.86667c0,-25.39937 20.4673,-45.86667 45.86667,-45.86667z"></path></g></g></svg>
<input
placeholder='search'
id="search-input"
/>
</form>
</li>
</ul>
</div>
<ul class="nav justify-content-end" id="group">
<li class="nav-item" id="list">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 30 30" version="1.1">
<g id="surface191062">
<path id="list-svg" style=" stroke:none;fill-rule:nonzero;fill:rgb(0, 0, 0);fill-opacity:1;" d="M 5 4 C 4.449219 4 4 4.449219 4 5 L 4 9 C 4 9.550781 4.449219 10 5 10 L 10 10 C 10.550781 10 11 9.550781 11 9 L 11 5 C 11 4.449219 10.550781 4 10 4 Z M 15 6 C 14.640625 5.996094 14.304688 6.183594 14.121094 6.496094 C 13.941406 6.808594 13.941406 7.191406 14.121094 7.503906 C 14.304688 7.816406 14.640625 8.003906 15 8 L 25 8 C 25.359375 8.003906 25.695312 7.816406 25.878906 7.503906 C 26.058594 7.191406 26.058594 6.808594 25.878906 6.496094 C 25.695312 6.183594 25.359375 5.996094 25 6 Z M 5 12 C 4.449219 12 4 12.449219 4 13 L 4 17 C 4 17.550781 4.449219 18 5 18 L 10 18 C 10.550781 18 11 17.550781 11 17 L 11 13 C 11 12.449219 10.550781 12 10 12 Z M 15 14 C 14.640625 13.996094 14.304688 14.183594 14.121094 14.496094 C 13.941406 14.808594 13.941406 15.191406 14.121094 15.503906 C 14.304688 15.816406 14.640625 16.003906 15 16 L 25 16 C 25.359375 16.003906 25.695312 15.816406 25.878906 15.503906 C 26.058594 15.191406 26.058594 14.808594 25.878906 14.496094 C 25.695312 14.183594 25.359375 13.996094 25 14 Z M 5 20 C 4.449219 20 4 20.449219 4 21 L 4 25 C 4 25.550781 4.449219 26 5 26 L 10 26 C 10.550781 26 11 25.550781 11 25 L 11 21 C 11 20.449219 10.550781 20 10 20 Z M 15 22 C 14.640625 21.996094 14.304688 22.183594 14.121094 22.496094 C 13.941406 22.808594 13.941406 23.191406 14.121094 23.503906 C 14.304688 23.816406 14.640625 24.003906 15 24 L 25 24 C 25.359375 24.003906 25.695312 23.816406 25.878906 23.503906 C 26.058594 23.191406 26.058594 22.808594 25.878906 22.496094 C 25.695312 22.183594 25.359375 21.996094 25 22 Z M 15 22 "/>
</g>
</svg>
</li>
<li class="nav-item" id="grid">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 24 24" version="1.1">
<g id="surface199160">
<path id="grid-svg" style=" stroke:none;fill-rule:nonzero;fill:rgb(200, 200, 200);fill-opacity:1;" d="M 5 3 C 3.898438 3 3 3.898438 3 5 L 3 9 C 3 10.101562 3.898438 11 5 11 L 9 11 C 10.101562 11 11 10.101562 11 9 L 11 5 C 11 3.898438 10.101562 3 9 3 Z M 15 3 C 13.898438 3 13 3.898438 13 5 L 13 9 C 13 10.101562 13.898438 11 15 11 L 19 11 C 20.101562 11 21 10.101562 21 9 L 21 5 C 21 3.898438 20.101562 3 19 3 Z M 5 13 C 3.898438 13 3 13.898438 3 15 L 3 19 C 3 20.101562 3.898438 21 5 21 L 9 21 C 10.101562 21 11 20.101562 11 19 L 11 15 C 11 13.898438 10.101562 13 9 13 Z M 15 13 C 13.898438 13 13 13.898438 13 15 L 13 19 C 13 20.101562 13.898438 21 15 21 L 19 21 C 20.101562 21 21 20.101562 21 19 L 21 15 C 21 13.898438 20.101562 13 19 13 Z M 15 13 "/>
</g>
</svg>
</li>
</ul>
<div id="results">
<h1>Search Reddit</h1>
</div>
</div>
<script src = "./index.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>