-
Notifications
You must be signed in to change notification settings - Fork 0
/
topics.html
434 lines (432 loc) · 20.1 KB
/
topics.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
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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="assets/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>River | Topics</title>
<meta name="description" content="a social media website" />
<meta name="author" content="Sohom Mondal" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<img
src="assets/logo-transperant.svg"
class="navbar-brand"
width="130px"
/>
<!-- Toggler -->
<button
class="navbar-toggler shadow-none border-0"
type="button"
data-bs-toggle="offcanvas"
data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar"
>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Sidebar -->
<div
class="sidebar offcanvas offcanvas-start"
tabindex="-1"
id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
>
<!-- Sidebar Header -->
<div class="offcanvas-header text-white border-bottom bg-black">
<img src="assets/logo-transperant.svg" width="75px" />
<button
type="button"
class="btn-close btn-close-white shadow-none"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<!-- Sidebar Body -->
<div
class="offcanvas-body d-flex flex-column flex-lg-row p-4 p-lg-0 bg-dark"
>
<ul
class="navbar-nav justify-content-center align-items-center fs-5 flex-grow-1 pe-3"
>
<li class="nav-item mx-2">
<a
class="nav-link text-white"
aria-current="page"
href="index.html"
>Home</a
>
</li>
<li class="nav-item mx-2">
<a
class="nav-link active text-white border-bottom"
href="topics.html"
>Topics</a
>
</li>
<li class="nav-item mx-2">
<a class="nav-link text-white" href="community.html"
>Community</a
>
</li>
<li class="nav-item mx-2">
<a class="nav-link text-white" href="about.html">About</a>
</li>
</ul>
<!-- Login/Sign-Up -->
<div
class="d-flex flex-column flex-lg-row justify-content-center align-items-center gap-3"
>
<a
href="login.html"
class="text-black text-decoration-none px-3 py-1 rounded-4 bg-white"
>Login</a
>
<a
href="signup.html"
class="text-white text-decoration-none px-3 py-1 rounded-4 bg-black"
>Sign Up</a
>
</div>
</div>
</div>
</div>
</nav>
<main>
<div class="container" id="topics">
<h2>Topics for you to jump in</h2>
<div class="row gy-3">
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/geopolitics.svg"
class="card-img-top"
alt="Geopolitics"
/>
<div class="card-body">
<h5 class="card-title">Geopolitics</h5>
<p class="card-text">
Geopolitics in today's world is characterized by the rise of
China, the decline of the United States, and the increasing
competition for resources and influence. These trends are
shaping the world order and will have a major impact on the
future.
</p>
<a href="#geopolitics" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img src="assets/food.svg" class="card-img-top" alt="Food" />
<div class="card-body">
<h5 class="card-title">Food</h5>
<p class="card-text">
Food in today's world is facing a number of challenges,
including climate change, population growth, and food
insecurity. These challenges are making it increasingly
difficult to produce enough food to feed everyone.
</p>
<a href="#food" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img src="assets/music.svg" class="card-img-top" alt="Music" />
<div class="card-body">
<h5 class="card-title">Music</h5>
<p class="card-text">
Music in today's world is diverse and ever-changing. New
genres and subgenres are emerging all the time, and technology
has made it easier than ever for musicians to create and share
their music. Music is a powerful force that can bring people
together, express emotions, and inspire change.
</p>
<a href="#music" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/artificial-intelligence.svg"
class="card-img-top"
alt="Artificial intelligence"
/>
<div class="card-body">
<h5 class="card-title">Artificial Intelligence</h5>
<p class="card-text">
AI is rapidly transforming our world, impacting many
industries and aspects of our lives. It is being used to
automate tasks, make predictions, and create new products and
services. AI has the potential to solve some of the world's
biggest challenges, but it also raises ethical concerns.
</p>
<a href="#artificial-intelligence" class="btn btn-primary"
>Jump in!</a
>
</div>
</div>
</div>
</div>
<div class="row gy-3">
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/cricket.svg"
class="card-img-top"
alt="Cricket"
/>
<div class="card-body">
<h5 class="card-title">Cricket</h5>
<p class="card-text">
Cricket is one of the most popular sports in the world, with
over 2.5 billion fans globally. It is particularly popular in
South Asia, England, Australia, and New Zealand.
</p>
<a href="#cricket" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img src="assets/movies.svg" class="card-img-top" alt="Movies" />
<div class="card-body">
<h5 class="card-title">Movies</h5>
<p class="card-text">
In today's world, movies are more accessible than ever before.
We can watch movies in theaters, on streaming services, or
even on our phones and tablets. This has led to a boom in the
number of movies that are being produced each year.
</p>
<a href="#movies" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/football.svg"
class="card-img-top"
alt="Football"
/>
<div class="card-body">
<h5 class="card-title">Football</h5>
<p class="card-text">
In today's world, football is a global phenomenon. The sport
is played and followed by people of all ages, genders, and
social classes. Football is also a very lucrative sport, with
the top players and teams earning millions of dollars each
year.
</p>
<a href="#football" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/web-development.svg"
class="card-img-top"
alt="Web Development"
/>
<div class="card-body">
<h5 class="card-title">Web Development</h5>
<p class="card-text">
In today's world, web development is more important than ever
before. The internet has become an essential part of our
lives, and we use websites for everything from shopping and
banking to staying informed and entertained.
</p>
<a href="#web-development" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
</div>
<div class="row gy-3">
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/physics.svg"
class="card-img-top"
alt="Physics"
/>
<div class="card-body">
<h5 class="card-title">Physics</h5>
<p class="card-text">
Physics is the natural science that studies matter, its
fundamental constituents, its motion and behavior through
space and time, and the related entities of energy and force.
Physics is one of the most fundamental scientific disciplines,
with its main goal being to understand how the universe
behaves.
</p>
<a href="#physics" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/chemistry.svg"
class="card-img-top"
alt="Chemistry"
/>
<div class="card-body">
<h5 class="card-title">Chemistry</h5>
<p class="card-text">
Chemistry is the study of matter and its properties. It is a
branch of natural science that deals with the composition,
structure, properties, and behavior of matter. Chemists study
the composition of matter, the changes that matter undergoes,
and the energy that is released or absorbed during these
changes.
</p>
<a href="#chemistry" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/mathematics.svg"
class="card-img-top"
alt="Mathematics"
/>
<div class="card-body">
<h5 class="card-title">Mathematics</h5>
<p class="card-text">
Mathematics is a fundamental science, and it is one of the
oldest academic disciplines. It has its roots in ancient Egypt
and Babylonia, and it was further developed by the Greeks,
Arabs, and Indians. Mathematics has continued to develop
throughout history, and it is now one of the most important
and influential sciences
</p>
<a href="#mathematics" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-12 mb-4">
<div class="card text-white h-100" style="width: 18rem">
<img
src="assets/biology.svg"
class="card-img-top"
alt="Biology"
/>
<div class="card-body">
<h5 class="card-title">Biology</h5>
<p class="card-text">
Biology is essential for understanding the world around us and
for developing new technologies to improve our lives. For
example, biology has helped us to develop new medicines and
vaccines, to improve agricultural production, and to
understand the impact of human activity on the environment.
</p>
<a href="#biology" class="btn btn-primary">Jump in!</a>
</div>
</div>
</div>
</div>
<h3 class="text-center">More Topics Comming Soon...</h3>
</div>
</main>
<footer>
<div class="container">
<div class="row text-white">
<div class="col-lg-6 col-md-6 col-6 mb-4">
<p>Follow Us On:</p>
<div id="social-media">
<a href="https://twitter.com/"
><svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-twitter-x text-white"
viewBox="0 0 20 20"
>
<path
d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865l8.875 11.633Z"
/></svg
></a>
<a href="https://www.linkedin.com/"
><svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-linkedin text-white"
viewBox="0 0 20 20"
>
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"
/></svg
></a>
<a href="https://www.facebook.com/"
><svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-facebook text-white"
viewBox="0 0 20 20"
>
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"
/></svg
></a>
<a href="https://www.instagram.com/"
><svg
xmlns="http://www.w3.org/2000/svg"
width="30"
height="30"
fill="currentColor"
class="bi bi-instagram text-white"
viewBox="0 0 20 20"
>
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"
/></svg
></a>
</div>
</div>
<div class="col-lg-6 col-md-6 col-6 mb-4">
<p>Copyright © 2023 River. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
crossorigin="anonymous"
></script>
</body>
</html>