-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathpost.html
More file actions
356 lines (276 loc) · 15.4 KB
/
post.html
File metadata and controls
356 lines (276 loc) · 15.4 KB
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
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!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>OurSpace</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="./resources/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- ========================================NAVBAR=========================================== -->
<nav class="navbar navbar-expand-lg navbarbg-light">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="images/Blue-White-Simple-Infinity-Line-Logo.png" alt="Logo" width="150" height="150"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="item_form.html">Subscribe</a>
</li>
<!---- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li> -->
</ul>
</div>
</div>
</nav>
<main class="container">
<div class="p-4 p-md-5 mb-4 rounded">
<div class="col-md-6 px-0">
<h1 class="display-4 fst-italic">My Profile</h1>
<p class="lead my-3">Welcome to my space. My name is KB, I am a traveler. I absolutely love fishing, scuba
diving, and making new friends around the world. I am a Harry Potter stan and have read all 7 books. </p>
<p class="lead mb-0"><a href="#" class="text-white fw-bold">Learn more about me...</a></p>
<!-- <div class="col-md-2">
<img class="KB"
src="https://images.pexels.com/photos/11945542/pexels-photo-11945542.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
alt="KB picture">
</div> -->
</div>
</div>
<div class="row mb-2">
<!-----------------------------------Bement Post added------------------------------------------->
<div class="banner">
<header>
<div class="container">
<div class="col-div-12">
<h1 class="heading">Blogs</h1>
</div>
</div>
<div class="clearfix"></div>
</div>
<section>
<br /><br />
<div class="container">
<div class="col-div-8">
<div class="blog-box">
<img src="./images/photo-1527631746610-bca00a040d60.avif">
<div class="overlay">
<div class="content-box">
<span>June 14 2020</span>
<p>Travel</p>
</div>
</div>
</div>
<br />
<div class="blog-box-s">
<img src="./images/photo-1559526324-c1f275fbfa32.avif">
<div class="content">
<p> Social Life</p>
<p>is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.
It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</p>
<br />
<a href="#">[continue Reading ...]</a>
<br /><br />
<p><i class="fa fa-calendar"></i> July 24, 2019 <span>
<i class="fa fa-folder"> Diversity</i></span></p>
</div>
</div>
<div class="blog-box-s" style="margin-left: 35px;">
<img src="./images/photo-1506869640319-fe1a24fd76dc.avif">
<div class="content">
<p>Community</p>
<p>is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged.
It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum.</p>
<br />
<a href="#">[continue Reading ...]</a>
<br /><br />
<p><i class="fa fa-calendar"></i> July 24, 2019 <span>
<i class="fa fa-folder"></i> Worldwide</span></p>
</div>
</div>
<div class="col-div-4">
<div class="blog-box-1">
<img src="./images/photo-1616394585067-d3e824140aa1.avif">
<div class="overlay">
<div class="content-box-1">
<span>April 29 2020</span>
<p>Adventure</p>
</div>
</div>
</div>
<div class="blog-box-1">
<img src="./images/photo-1469571486292-0ba58a3f068b.avif">
<div class="overlay">
<div class="content-box-1">
<span>Jan 14 2022</span>
<p>Our Space</p>
</div>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</section>
<div class="main-content">
<div class="story-gallery">
<div class="story story1">
<img src="/images/upload.png">
<p>Post Story</p>
</div>
<div class="story story2">
<img src="/images/member-1.png">
<p>Alison</p>
</div>
<div class="story story3">
<img src="images/member-2.png">
<p>Jackson</p>
</div>
<div class="story story4">
<img src="images/member-3.png">
<p>Samona</p>
</div>
<div class="story story5">
<img src="images/member-4.png">
<p>John Doe</p>
</div>
</div>
<div class="write-post-container">
<div class="user-profile">
<img src="images/profile.png">
<div>
<small>Public <i class="fa fa-caret-down"></i></small>
</div>
</div>
</div>
</div>
<!-- Card Component Sample Test -->
<form id="postsForm">
<input type="text" placeholder="Title" id="postTitle">
<input type="text" placeholder="Author name" id="authorName">
<input type="date" id="date" name="date">
<input type="text" placeholder="Write a post" id="textP">
<label for="newPostImageUrl">Add Image </label>
<input type="text" id="newPostImageUrl">
<button id="btn" type="submit">Add Post</button>
</form>
<!-- div to display posts -->
<div class="displayPosts"></div>
</div>
</div>
<div class="col">
<div class="col-md-8">
<article class="blog-post">
<h2 class="blog-post-title mb-1">Making Friends Abroad: How to Find Your Community Overseas</h2>
<p class="blog-post-meta">By: Kam</p>
<p>2021-10-22</p>
<p>Let’s face it—the thought of going abroad solo is terrifying. You mean, I have to navigate a foreign land all by myself? Is a thought that could go through your head. And I’m sure you’re also wondering, “how the heck am I supposed to make friends abroad?”
Many times we think we need a partner, family members, or friends to go with us, so that the transition can be smoother, but that’s not always possible.
What if you’re single, or the people you know can’t afford to come? Should that stop you from living life? NOOOOOOOOO.
So, if you have that inner voice urging you to “go abroad and see the world,” then maybe it’s time to let go of the fear of doing it solo. You know why? Because you can always meet people along the way.
And how do you do that, you ask? </p>
<img src="https://www.culturedkam.com/wp-content/uploads/2021/10/pexels-pnw-production-9353432-1024x684.jpg" alt="friends">
<h2>Facebook Groups</h2>
Believe it or not, I’ve met tons of people abroad from Facebook groups.
When I was solo in Vietnam, I posted in a group about my trip and a lady volunteered to show me around town. This made me feel safer on my first solo trip.
When I moved to Thailand, I found communities in Facebook groups for nomads, teachers, and melanated people; all of which helped the transition.
Even if you don’t feel comfortable meeting people online, you can still gain valuable info, like what cool spots to go to, safety measures, events going on in the city, and more. You can always search _________ (your nationality/ethnicity) in _________ (the country). Or solo travelers in _______ (the country).
Always trust your gut and follow your intuition. If you ever feel uncomfortable meeting up, don’t do it.
These are some groups I’m in that have international communities worldwide:
<br>
<br>
<ul>
<li>NOMADNESS</li>
<li>Blackpackers of SouthEast Asia</li>
<li>Americans in Portugal</li>
<li>The Tribe (melanated women in Spain and Portugal)</li>
<li>Brothers and Sisters of Chiang Mai</li>
<li>Black to Portugal</li>
<li>Lisbon Expats and Friends</li>
<li>GoWonder – Female Solo Travel</li>
<li>Lisbon Expats and Friends</li>
<li>Lisbon Expats and Friends</li>
<li>Lisbon Expats and Friends</li>
</ul>
<h2>Meetups</h2>
<p> Most major cities are listed on this site.
It’s a chance to find like-minded individuals or even step out of your comfort zone and take up a new activity. You can search for various hobbies + interests in the city you’re moving to or visiting.
This is an easy way to make new friends because it’ll be an event where there’s many people. That can take off the pressure of meeting someone one on one. </p>
<h2>Dating App </h2>
<p>It might sound strange to use a dating app to make friends abroad, but I guarantee it’s a quick way to meet new people.
Since dating apps have become so normalized, some people don’t use them for romance anymore. People might use it to make new friends and, actually, I have made two great friends from Tinder and one from Hinge.
You can also use Bumble since it has the BFF mode where you can specify that you’re looking for friends. Trust me, lots of foreigners use these apps to make meaningful connections—regardless of if it’s platonic or not.
Visit Places Solo
Just start going places by yourself—the coffee shops, beaches, restaurants, bars, events, wherever. I get it might feel weird + awkward at first, especially in a foreign place, but that’s when you are most approachable.
People are more likely to spark up a conversation with you when you’re by yourself. And after you get over the initial awkwardness, you’ll feel more confident about speaking to new people.
I would encourage you to do this and also start talking to someone else you see that’s solo. </p>
<h2>Couchsurf or WorkAway</h2>
<p>Both sites let you find housing internationally or find people to meet up with. All you have to pay is the membership fee. Couchsurf has a monthly fee of $1.99 and you can find hosts to show you around the city, meet up with for lunch, or if you need to find a place to crash at.
Workaway allows you to do work in exchange for housing—which is perfect for staying in a place long-term solo. There’s also the option to find other travelers in the area that want to meet up.
Every country I’ve visited or lived in, I’ve done these things to make friends abroad. Because of that, I’ve made lifelong connections. Wherever you visit or move to in the world, you are never truly alone. There’s a bunch of people out there that would love to connect and meet you. Just put yourself out there, and you will see.</p>
</article>
<nav class="blog-pagination" aria-label="Pagination">
<a class="btn btn-outline-primary rounded-pill" href="#">Older</a>
<a class="btn btn-outline-secondary rounded-pill disabled">Newer</a>
</nav>
</div>
</div>
</main>
<footer class="text-center">
<div class="wrap">
<div class="creds">
<p>Copyright © 2022 All rights reserved by OurSpace Inc.</p>
</div>
</div>
</footer>
<script src="./js/itemsController.js" type="module"></script>
<script src="./js/index.js" type="module"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
crossorigin="anonymous"></script>
</body>
</html>