-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSearch.html
199 lines (183 loc) · 11.1 KB
/
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
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
190
191
192
193
194
195
196
197
198
199
<!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>Search</title>
<!-- Bootstrao cdn -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- style CSS -->
<link rel="stylesheet" href="style.css">
<!-- google font -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap" rel="stylesheet">
<!--Font awsome library-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<!-- header section -->
<header>
<div class="container-fluid">
<div class="position-relative">
<ul class="nav nav-pills d-block d-sm-flex">
<li>
<ul class="center nav nav-pills">
<li><embed src="Assets-20220310T082526Z-001/Assets/Images/group-2.svg" type="image/svg+xml"/></li>
<li><p class="my-2 d-flex text-top"><a class="text-light text-center text-decoration-none fs-1" href="Index.html">[Events]</a></p></li>
</ul>
</li>
<li class="px-2 ms-auto my-0">
<ul class="nav nav-pills mx-auto text-center mb-0 my-1 center">
<li class="invert my-2 fs-5 me-2"><a class="text-light text-center text-decoration-none fs-5" href="Search.html"><i class="fa-solid fa-magnifying-glass"></i></a></li>
<li><p class="my-2 me-4 d-flex text-top d-none d-sm-block"><a class="text-light text-center text-decoration-none fs-5" href="Search.html">Search</a></p></li>
<li class="invert my-2 fs-5 me-2"><a class="text-light text-center text-decoration-none fs-5" href="About.html"><i class="fa-regular fa-user"></i></a></li>
<li><p class="my-2 me-4 d-flex text-top d-none d-sm-block"><a class="text-light text-center text-decoration-none fs-5" href="About.html">About</a></p></li>
<li class="invert my-2 fs-5 me-2"><a class="text-light text-center text-decoration-none fs-5" href="#"><i class="fa-solid fa-rss"></i></a></li>
<li><p class="my-2 me-4 d-flex text-top d-none d-sm-block"><a class="text-light text-center text-decoration-none fs-5" href="#">Blog</a></p></li>
<li class="invert my-2 fs-5 me-2 "><a class="text-light text-center text-decoration-none fs-5" href="#"><i class="fa-solid fa-bars"></i></a></li>
<li><p class="my-2 me-4 d-flex text-top d-none d-sm-block"><a class="text-light text-center text-decoration-none fs-5" href="#">More</a></p></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<!--section book-->
<section class="book container-fluid my-5 bg-light-gray">
<div>
<p class="text-primary-gray fs-4 fw-bold text-center py-3 mx-auto"> Filter by location,host,subject,date,daytime:</p>
</div>
<div class="d-block d-sm-flex mx-auto pb-3 fs-6" >
<div class="centre text-center">
<p class="text-bolder text-left"><strong>Location</strong></p>
<input type="text" name="" id="">
</div>
<div class="centre text-center">
<p class="text-bolder"><strong>Host</strong></p>
<input type="text" name="" id="">
</div>
<div class="d-block d-sm-flex">
<div class="d-flex">
<div class="centre text-center">
<p class="text-bold"><strong>Subject</strong></p>
<input type="text" name="" id="">
</div>
<div class="centre text-center">
<p class="text-bold"><strong>Initial Day</strong></p>
<input type="date" name="" id="">
</div>
</div>
</div>
<div class="d-block d-sm-flex last">
<div class=" d-flex">
<div class="centre text-center" style="width:25%;">
<p class="text-bold"><strong>Final Day</strong></p>
<input type="date" name="" id="">
</div>
<div class="centre text-center" style="width:20%;">
<p class="text-bold"><strong>Daytime</strong></p>
<input type="datetime" name="" id="">
</div>
<button class="bg-primary-blue text-white rounded border-primary-blue mx-2"><strong>Search</strong></button>
<button class="bg-warning text-white border-warning rounded mx-2 text-nowrap"><i class="fa-solid fa-pen-to-square"></i> Clear Filter</button>
</div>
</div>
</div>
</section>
<!--section result-->
<section class="resultat container-fluid">
<p class="text-light-gray d-none d-sm-block fs-4 mb-3 text-center">Search Result Found 7 [Events] Nearby.</p>
<div class="d-block d-sm-flex justify-content-around">
<div class="col my-1">
<figure class="position-relative center">
<img src="Assets-20220310T082526Z-001/Assets/Images/group-2.svg" alt="">
<figcaption class="text-white">
got to [gathering] example
</figcaption>
</figure>
</div>
<div class="col my-1">
<figure class="position-relative center">
<img src="Assets-20220310T082526Z-001/Assets/Images/group-2.svg" alt="">
<figcaption class="text-white">
got to [gathering] example
</figcaption>
</figure>
</div>
<div class="col my-1">
<figure class="position-relative center">
<img src="Assets-20220310T082526Z-001/Assets/Images/group-2.svg" alt="">
<figcaption class="text-white">
got to [gathering] example
</figcaption>
</figure>
</div>
</div>
</section>
<!-- footer section -->
<!-- footer section -->
<footer>
<div class="footer-1 d-none d-sm-block">
<div class="d-flex py-5 mx-auto justify-content-center align-items-center">
<div class="d-flex border border-start-0 border-end-0 border-top-2 border-bottom-2 px-2 align-text-center" style="height: 30%;">
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2 ">HOME</a>
<a href="Search.html" class="text-white fs-4 mx-2 text-decoration-none m-2 ">SEARCH</a>
<a href="About.html" class="text-white fs-4 mx-2 text-decoration-none m-2">ABOUT US</a>
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2">ADVERTISE</a>
</div>
<div class="border border-3 rounded-circle border-white" >
<embed class="invert " style="height:60px" src="Assets-20220310T082526Z-001/Assets/Icones/mapsnavbar_icon.svg" type="image/svg+xml"/>
</div>
<div class="d-flex border border-start-0 border-end-0 border-top-2 border-bottom-2 px-2 " style="height: 30%;">
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2"> FACEBOOK</a>
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2"> TWITTER</a>
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2"> INSTAGRAM</a>
<a href="Index.html" class="text-white fs-4 mx-2 text-decoration-none m-2"> BLOG</a>
</div>
</div>
</div>
<div class="footer-2 d-none d-sm-block">
<div class="mx-3 text-center d-flex justify-content-around">
<span>
<p class="fs-4 fw-bold text-white text-center"> Subscribe</p>
<div class="input-group mb-3 ">
<input type="text" class="form-control bg-dark" placeholder="insert your e-mail here" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text text-white bg-secondary" id="basic-addon2">Send</span>
</div>
</span>
<div class="mx-3 text-center">
<p class="fs-4 fw-bold text-white text-center"> Contact</p>
<p class="fs-6 text-white mb-0">Have a question or sugestion?</p>
<a href="mailto:contact@events.com?subject=Ask Me Anything" class="text-center primary-color fs-6 text-decoration-none sur"><p class="sur">contact@events.com</p></a>
</div>
<div class="mx-3 text-center">
<p class="fs-4 fw-bold text-white text-center"> About</p>
<p class="fs-6 text-white mb-0">[Events] is an online plateform that works to improve and increase social <br>
social life connections, when this nightmare that we are curently living in is over</p><a href="About.html" class="sur text-decoration-none text-primary-color" style="color:primary-color;"><p class="sur">learn more.</p> </a>
</div>
</div>
</div>
<!-- footer-gray -->
<div class="d-grid gap-0 bg-gray-footer-btn">
<button class="btn" type="button">
<div class="d-flex">
<div class=" d-flex my-auto">
<embed class="rso invert mx-2" style="height:3vh" src="Assets-20220310T082526Z-001/Assets/Icones/facebook_icon.svg" type="image/svg+xml"/>
<embed class="rso invert mx-2" style="height:3vh" src="Assets-20220310T082526Z-001/Assets/Icones/twitter_icon.svg" type="image/svg+xml"/>
<embed class="rso invert mx-2" style="height:3vh" src="Assets-20220310T082526Z-001/Assets/Icones/instagram_icon.svg" type="image/svg+xml"/>
<embed class="rso invert mx-2" style="height:3vh" src="Assets-20220310T082526Z-001/Assets/Icones/linkedin_icon.svg" type="image/svg+xml"/>
</div>
<div class=" d-flex ms-auto">
<span><p class="text-light text-center my-2 fs-6"> © 2020 [Events[, Inc.All rights reserved</p></span>
</div>
</div>
</button>
</div>
</div>
</footer>
<!-- JS and Bundle-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>