-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathabout.html
140 lines (110 loc) · 6.26 KB
/
about.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
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC&display=swap" rel="stylesheet">
<title>Common Grounds</title>
</head>
<body>
<!-- Image and text -->
<nav class="navbar">
<a class="navbar-brand" href="index.html">
<img src="images/LOGO-alt-3-2.gif" id="logo" width="50" height="50" class="d-inline-block align-top" alt="">
Common Grounds
</a>
<div>
<a class="navbar-brand" href="#">
<h3 id="nav-login" class="d-inline-block align-top" alt="">
Find Friends </h3>
</a>
<a class="navbar-brand" href="#">
<h3 id="nav-register" class="d-inline-block align-top" alt="">
Profile</h3>
</a>
</div>
</nav>
<!-- Here start the div for the search bar -->
<div class= "search">
<form id="search-form" action=""> <!-- Form for the input and search -->
<input type="text" placeholder="Search.." id="input-search"> <!-- Id for search input-->
<button type="submit"><i class="fa fa-search" id="btn-search"></i></button> <!-- Id for search button -->
</form></div>
<!-- Container for row with 2 columns for chat and places options -->
<div class = "main-container">
<div class="row">
<!-- column one for chat box -->
<div class = "col-sm-3">
<div class="chat">
<h8 class="chat-header">Chat List</h8>
</div>
<div id ="chat-userName"> Kris Renaldi</div>
<div id ="chat-userName"> Aakash Parikh</div>
<div id ="chat-userName"> Andreas Nicolaou</div>
<div id ="chat-userName"> Garrett Knafey</div>
<div id ="chat-userName"> Zeba Tahreen</div>
</div>
<!-- column two for map and content for search -->
<div class = "col-sm-8">
<div id="googleMap" > <!-- id for google map -->
<p style="text-align: center" > Map goes here</p> <!-- code here is for temporary-->
</div>
<!-- here start a new div under the map which displays the search reasults -->
<div class ="search-result">
<div class= "place-results">
<!--this div hold individual results with images-->
<div id="display-img-content">
<div id="diplay-image-res">
<img src="images/sample-restaurant.jpg" alt="sample image restaurant" id="sample-img"/>
</div>
<div id="display-content-res">
<h8>XYZ Restaurant</h8>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English.</p>
</div>
</div>
<hr>
<div id="display-img-content">
<div id="diplay-image-res">
<img src="images/sample-restaurant.jpg" alt="sample image restaurant" id="sample-img" />
</div>
<div id="display-content-res">
<h8>XYZ Restaurant</h8>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English.</p>
</div>
</div>
<hr>
<!--this div hold individual results with images-->
<div id="display-img-content">
<div id="diplay-image-res">
<img src="images/sample-restaurant.jpg" alt="sample image restaurant" id="sample-img"/>
</div>
<div id="display-content-res">
<h8>XYZ Restaurant</h8>
<p>It is a long established fact that a reader will be distracted by the readable
content of a page when looking at its layout. The point of using Lorem Ipsum is
that it has a more-or-less normal distribution of letters, as opposed to using
'Content here, content here', making it look like readable English.</p>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>