-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
162 lines (142 loc) · 6.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="src/style.css" />
<link rel="stylesheet" href="src/index.css" />
<link rel="stylesheet" href="src/header.css" />
<link rel="stylesheet" href="src/footer.css" />
<title>MateMe - Home</title>
<!-- Déclaration of the global variables and initialisation of them (see: https://www.py4u.net/discuss/275309)-->
<script type='text/javascript'>
let cityList = [];
let eventList = [];
</script>
<script src="src/globalVar.js"></script>
</head>
<!-- Start of the body part -->
<body id="index-body">
<div class="container">
<!-- Suggested here to keep the footer at the bottom -->
<header id="navBar-header">
<img id="avatar" src="https://images.unsplash.com/photo-1540331547168-8b63109225b7" />
<div class="brandName">
<a href="index.html">MateMe</a>
</div>
<nav id="dropdown-menu">
<button id="menu-btn">≡</button>
<ul id="menu" class="menu-off">
<li class="menu-list">
<a href="index.html" class="nav-link-header">Home</a>
</li>
<li class="menu-list">
<a href="createevent.html" class="nav-link-header">Create events</a>
</li>
<li class="menu-list">
<a href="contact-us.html" class="nav-link-header">Contact</a>
</li>
</ul>
</nav>
</header>
<!-- inclusion of the header -->
<div class="search-box-div">
<!-- select a city and dates -->
<p class="brandintro">
~ Connect, have fun, find your tribe while you travel ~
</p>
<input class="search-box" type="text" placeholder="Write here the city you're in..">
</div>
<div id="city-section">
<div>
<h2 class="city-section-title">Click on the city you are in!</h2>
</div>
<div class="city-cards">
<!-- Template for the mobile city card -->
<!-- <a class="city-card" href="city.html?city=Paris">
<div class="card-img" style="background-image: url("img/torre-eiffel-3.jpg");">
<h2 class="card-title">City</h2>
</div>
</a> -->
<!-- Template for the large city card -->
<!-- <div class="city-card-large">
<div class="city-card-text-large">
<h2 class="card-title">City</h2>
<a href="city.html?city=Paris">
<button class="button-city">Check the events!</button>
</a>
</div>
<div class="city-card-img-large">
<img class="card-img-large" src="img/torre-eiffel-3.jpg">
</div>
</div> -->
<!-- city cards added here -->
</div> <!-- end of the cards subsection -->
</div> <!-- end of the city section -->
<div class="about-us-section">
<h2>About us</h2>
<p>
The project MateMe was created in response to the need to connect with
other travellers and locals while travelling. The idea is that no matter
where you travel, you will always find a meeting of your interest where
you can exchange experiences, have fun and make new friends.
</p>
<div class="individual-presentation-section">
<div class="individual-card">
<div class="circular-portrait">
<img class="profile-img" alt="portrait" src="https://github.com/Elisa-cf.png?size=300" />
</div>
<div class="individual-card-text">
<h4>Elisa Canyelles</h4>
<p>
Elisa is a travel addict who has lived and travelled in different
parts of the world such as New Zealand, Thailand, Malaysia, Sri
Lanka and Cambodia. "I have been travelling and living in so many
different countries and I have seen the need to connect with
people. That's why MateMe is an excellent platform with which it
is possible to register for an event and even create your own in
just a few minutes."
</p>
</div>
</div>
<div class="individual-card">
<div class="circular-portrait">
<img class="profile-img" alt="portrait" src="https://ca.slack-edge.com/T6SG2QGG2-U02DZNNQZEZ-bbc7a84b80c1-512" />
</div>
<div class="individual-card-text">
<h4>Josh Meyers</h4>
<p>
The experience of living in Australia for more than a year changed
Josh's life. "Arriving in a foreign country where you don't know
anyone can be hard at first. With MateMe it is very easy to
connect with people and quickly create your own community of new
friends."
</p>
</div>
</div>
<div class="individual-card">
<div class="circular-portrait">
<img class="profile-img" alt="portrait" src="https://storage.googleapis.com/quest_editor_uploads/D9ofZpeSsYbpocg7nelEPTinRsP4blyw.jpg" />
</div>
<div class="individual-card-text">
<h4>Pierre van Male</h4>
<p>
Pierre loves travelling when he is on holiday. "With MateMe it is
possible to register for events and include in your holiday a nice
evening where you can meet people and expand your social network."
</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<a href="contact-us.html" class="contact-footer">Contact us</a>
<p class="copyright">Copyright © 2021 WCD. All right reserved</p>
</footer>
<script src="src/index.js"></script>
<script src="src/header.js"></script>
</body>
</html>