-
Notifications
You must be signed in to change notification settings - Fork 0
/
landingpage.html
132 lines (115 loc) · 5.83 KB
/
landingpage.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
<html>
<head>
<script src="https://kit.fontawesome.com/b7f18fe09b.js" crossorigin="anonymous"></script>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: #000000;
text-shadow: black;
text-align: center;
scroll-behavior: smooth;
}
.featurebox {
max-width: 500px;
background-color: white;
-webkit-text-fill-color: rgb(0, 0, 0);
padding: 50px;
line-height: 25px;
border-radius: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 25px;
width: auto;
margin: auto;
margin-top: 25px;
}
.featurebox:hover {
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
margin-top: 35px
}
.button {
text-decoration: none;
position: sticky;
top: 0;
overflow: visible;
-webkit-text-fill-color: #4ca4bf;
padding: 20px;
margin: 10px;
border-radius: 20px;
outline: 1.5px solid#4ca4bf;
background: white;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
}
.button:hover {
background-color: #4ca4bf;
-webkit-text-fill-color: white;
transition-duration: 500ms;
}
.logo {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
width: 500px;
height: 500px;
}
.logo:hover {
margin-top: 50px;
transition-duration: 5s;
font-size: 10px;
}
.description {
font-size:1.15rem;
line-height: 30px;
width: auto;
margin:auto;
max-width: 75%;
}
.description:hover {
transition-duration: 10s;
}
</style>
</head>
<body>
<header>
<img class="logo" src="images/refugeepal-logo.png">
<div class="allbuttons">
<a href="https://refugee-pal.vercel.app/" class="button" target="_blank"><b><i class="fa-solid fa-house" style="padding: 5px; font-size: 20px;"></i> Go to Refugee Pal</b></a>
<a href="https://github.com/chubbiloo/Refugee-Pal" class="button" target="_blank"><b><i class="fa-brands fa-github"style="padding: 5px; font-size: 20px;"></i>Our Github</b></a>
<a href="https://refugee-pal.vercel.app/inspiration.html" class="button" target="_blank"><b><i class="fa-solid fa-lightbulb"style="padding: 5px; font-size: 20px;"></i>Inspiration and About the Creators</b></a>
<a href="https://refugee-pal.vercel.app/Judges.html" class="button" target="_blank"><b><i class="fa-solid fa-user-tie"style="padding: 5px; font-size: 20px;"></i>Logbook and more for Judges</b></a>
</div>
<h1 style="padding: 10px;"><strong>Empathize, Navigate, Sustain: Supporting refugees</strong></h1>
<p><b>2023 Innovation fair: </b>by Ali Soufi and Antony Zhang </p>
</header>
<main>
<p class="description">Our web application provides essential resources and support to refugees settling in British Columbia. With features like language accessibility, healthcare information, and a directory of useful locations, we aim to make the transition to their new home as smooth and stress-free as possible. By empowering refugees, we are building a brighter future for all.</p>
<div class="featurebox">
<h2 style="-webkit-text-fill-color:#4ca4bf"><i class="fa-solid fa-layer-group" style="color: #4ca4bf;"></i> Features:</h2>
<ul>
<li><i class="fa-solid fa-database"style="padding: 5px; font-size: 20px;"></i> <b>Digital Resource Hub: </b>Access a wealth of information, useful links, and other resources to support your journey, including topics on employment, healthcare, rent, and more.</li>
<br>
<li><i class="fa-solid fa-map"style="padding: 5px; font-size: 20px;"></i> <b>Map Embed Feature: </b>Quickly find and discover nearby locations of importance with our interactive map, including religious places, refugee support centers, and more.</li>
<br>
<li><i class="fa-solid fa-user-doctor"style="padding: 5px; font-size: 20px;"></i> <b>Connect with Professionals: </b>Connect with healthcare professionals effortlessly, with a directory of available professionals sorted by language and profession, breaking language barriers in healthcare.</li>
<br>
<li><i class="fa-solid fa-hand-holding-heart"style="padding: 5px; font-size: 20px;"></i> <b>Accessibility for All: </b>Benefit from a user-friendly interface, multilingual support, and other accessibility features that make navigating your new life as simple and stress-free as possible.</li>
</div>
</ul>
<div class="featurebox">
<h2 style="-webkit-text-fill-color:#4ca4bf"><i class="fa-solid fa-layer-group" style="color: #4ca4bf;"></i>Upcoming features:</h2>
<ul>
<li><i class="fa-solid fa-play"style="padding: 5px; font-size: 20px;"></i> <b>Expanded Audio Guides: </b>An improved database of audio guides in multiple languages, providing even more information and customization options.</li>
<Br>
<li><i class="fa-solid fa-users"style="padding: 5px; font-size: 20px;"></i> <b>User Accounts: </b>Sign up and create an account, enjoy a personalized user journey and greater interactivity with the platform.</li>
<br>
<li><i class="fa-solid fa-user-nurse"style="padding: 5px; font-size: 20px;"></i> <b>Support for Supporters: </b> Not just for refugees, but for everyone seeking to support, including doctors, settlement workers, and citizens.</li>
<Br>
<li><i class="fa-solid fa-comments"style="padding: 5px; font-size: 20px;"></i> <b>Q&A Chat Threads: </b>Ask questions and get answers from professionals, such as settlement workers, in a structured and organized manner, reducing the workload of settlement workers.</li>
<br>
<li><i class="fa-solid fa-heart"style="padding: 5px; font-size: 20px;"></i> <b>Connect with Community: </b>Find and interact with members of your religious or ethnic community, or even other refugees, fostering a sense of belonging and community.</li>
</ul>
</div>
</main>
</body>
</html>