-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (75 loc) · 5.53 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
<!DOCTYPE html>
<html lang="en-CA">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta title="Homepage">
<meta name="author" content="Antony Zhang & Ali Soufi">
<meta name="description" content="About the creators of Refugee Pal">
<link rel="icon" type="image/x-icon" href="images/refugeeicon.png">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/c8e5706a2f.js" crossorigin="anonymous"></script>
</head>
<style>
main {
background-color:whitesmoke;
}
</style>
<body>
<header>
<nav id="navbar">
<div class="left">
<a class="refugeepalheader navLink" href="index.html"><i class="fa-solid fa-hand-holding-heart" style="font-size: 2rem; color: white;"></i><em> Refugee Pal</em></a>
</div>
<div class="right">
<a href="guides.html" class="navLink"><i class="fa-solid fa-file-audio"></i> Guides</a>
<a href="category.html" class="navLink"><i class="fa-solid fa-layer-group"></i>Digital Resources</a>
<a href="connectwithprofessional.html" class="navLink"><i class="fa-solid fa-user-tie"></i>Professionals
<a href="find.html" class="navLink"><i class="fa-solid fa-map-location-dot"></i> Find</a>
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>
</nav>
<script>
const navbar = document.querySelector("#navbar");
const sticky = navbar.offsetTop;
window.onscroll = function() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
};
</script>
</header>
<main>
<img src="images/refugeepalbanner.png" alt="main banner" class="refugeepalbanner">
<div id="gradBackground">
<div class="search-container">
<input type="text" placeholder="Search...">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<a class="map-button2" href="find.html"><i class="fa-solid fa-map-location-dot" style="font-size: 20px; color: #4ca4bf; margin-left: 0px; "></i> Go to Map</a>
</div>
<div class="mainContainer">
<a href="category.html" class="mainLeftLink one" id="employment" onClick="localStorage.setItem('categoryRedir', 'Employment')">Employment<br><i class="fa-solid fa-briefcase" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink one" id="english" onClick="localStorage.setItem('categoryRedir', 'Learn English')">Learn English<br><i class="fa-solid fa-language" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></i></a>
<a href="category.html" class="mainLeftLink one" id="food" onClick="localStorage.setItem('categoryRedir', 'Housing')">Housing<br><i class="fa-solid fa-house" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink two" id="worship" onClick="localStorage.setItem('categoryRedir', 'Culture & Community')">Culture & Community<br><i class="fa-solid fa-group-arrows-rotate" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink two" id="socialServices" onClick="localStorage.setItem('categoryRedir', 'Settlement')">Settlement<br><i class="fa-solid fa-passport" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink two" id="financial" onClick="localStorage.setItem('categoryRedir', 'Financial')">Financial<br<i class="fa-solid fa-money-check-dollar" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink three" id="women" onClick="localStorage.setItem('categoryRedir', 'Medical')">Healthcare<br><i class="fa-solid fa-notes-medical" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
<a href="category.html" class="mainLeftLink three" id="family" onClick="localStorage.setItem('categoryRedir', 'Legal Services')">Legal Services<br><i class="fa-solid fa-gavel" style="display: flex; justify-content: center; margin: auto; margin-top: 25px; font-size: 175px; color: #4ca4bf;"></i></a>
</div>
<div id="bottomBar">
<a href="https://github.com/chubbiloo/Refugee-Pal">GitHub</a>
<a href="https://projectboard.world/ysc/project/refugee-pal-a-novel-app-supporting-refugees">ProjectBoard</a>
<span>Made with ❤ by Antony Zhang and Ali Soufi, 2023</span>
</div>
</main>
</body>
</html>