-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (143 loc) · 6.35 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WCFYE</title>
<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=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<div id="navbar">
<a href="index.html"><img src="images/WCFYE_logo2.jpg" alt="WCFYE Logo 2"></a>
<div id="navbar-links">
<a href="/yemen_crisis/"><h4>Yemen Crisis</h4></a>
<div id="projects-dropdown">
<a href="/projects/"><h4 class="center-icon">Projects <i class="fa-solid fa-chevron-down"></i></h4></a>
<div id="dropdown-content">
<a href="/projects/food.html"><h4>Food</h4></a>
<a href="/projects/livelihood.html"><h4>Livelihood</h4></a>
<a href="/projects/education.html"><h4>Education</h4></a>
<a href="/projects/health.html"><h4>Health</h4></a>
</div>
</div>
<a href="/about/"><h4>About</h4></a>
<a href="/get_involved/"><h4>Get Involved</h4></a>
<a href="/get_involved/"><h4 class="button1">Donate Now</h4></a>
</div>
<button id="menu-toggle"><i class="fa-solid fa-bars"></i></button>
</div>
<div id="mobile-navbar">
<div id="mobile-navbar-links">
<a href="/yemen_crisis/"><h4>Yemen Crisis</h4></a>
<div id="projects-dropdown">
<a href="/projects/"><h4 class="center-icon">Projects <i class="fa-solid fa-chevron-down"></i></h4></a>
<div id="dropdown-content">
<a href="/projects/food.html"><h4>Food</h4></a>
<a href="/projects/livelihood.html"><h4>Livelihood</h4></a>
<a href="/projects/education.html"><h4>Education</h4></a>
<a href="/projects/health.html"><h4>Health</h4></a>
</div>
</div>
<a href="/about/"><h4>About</h4></a>
<a href="/get_involved/"><h4>Get Involved</h4></a>
<a href="/get_involved/"><h4 class="button1">Donate Now</h4></a>
</div>
</div>
<div id="home-banner">
<div id="banner-right">
<img src="images/WCFYE_logo3.png" alt="WCFYE Logo 3">
<h2><strong>We work on a wide variety of projects to help the people of Yemen. We urgently ask for your help in these tough times.</strong></h2>
<a href="/get_involved/"><h2 class="button2">Donate Now</h2></a>
</div>
</div>
<div class="red-background">
<h1>What We Strive To Do</h1>
<h3>Protect the rights and wellbeing of EVERY child</h3>
<div id="values">
<div class="value">
<img src="images/global_charity.png" alt="Global Charity">
<h4>Establish the concept of peace and contribute to the protection of human rights</h4>
</div>
<div class="value">
<img src="images/dedicate.png" alt="Dedicate">
<h4>Emergency response to the needs of society in all its sects and segments and providing humanitarian relief</h4>
</div>
<div class="value">
<img src="images/give_love.png" alt="Dedicate">
<h4>Contribute to alleviating the suffering of Yemeni society and provide social services</h4>
</div>
</div>
<a href="/about/"><h2 class="button2">Learn more about WCFYE</h2></a>
</div>
<div class="projects">
<h1 class="red-text">Our Projects</h1>
<h3>A small donation can help a lot of people</h3>
<div class="card-row">
<div class="project-card">
<img src="images/food_project.jpg" alt="Food Project">
<h4 class="red-text"><strong>Food</strong></h4>
<p>Helping feed food-deprived families and children.</p>
<a href="/projects/food.html"><h4 class="button1">Learn More</h4></a>
</div>
<div class="project-card">
<img src="images/livelihood_project.jpg" alt="Livelihood Project">
<h4 class="red-text"><strong>Livelihood</strong></h4>
<p>Empowering Orphan Families and Renewing the Hope.</p>
<a href="/projects/livelihood.html"><h4 class="button1">Learn More</h4></a>
</div>
<div class="project-card">
<img src="images/education_project.jpg" alt="Education Project">
<h4 class="red-text"><strong>Education</strong></h4>
<p>Expanding access to modern educational resources and tools.</p>
<a href="/projects/education.html"><h4 class="button1">Learn More</h4></a>
</div>
</div>
<a href="/projects/"><h2 class="button2">See all our projects</h2></a>
</div>
<div id="home-crisis-banner">
<h1>YEMEN</h1>
<h1 class="red-text">CRISIS</h1>
<h3><strong>According to the United Nations, the situation in Yemen is the world's worst man-made humanitarian disaster</strong></h3>
<a href="#"><h2 class="button2">Donate Now</h2></a>
</div>
<div class="red-background">
<h1>How You Can Help</h1>
<div class="call-to-action">
<a href="/get_involved/"><h2 class="button2">Single Donation</h2></a>
<a href="/get_involved/"><h2 class="button2">Monthly Donation</h2></a>
<a href="/get_involved/"><h2 class="button2">Fundraising</h2></a>
</div>
</div>
<div id="footer">
<div id="footer-left">
<img src="images/WCFYE_logo3.png" alt="WCFYE Logo 3">
<p class="red-text"><em>White Crescent for Dev. & Human Rights</em></p>
<p>WCFYE has been working in the field since 2018, taking all possible measures to protect the lives, rights and saferty of hundreds of thousands of Yemeni people and their children.</p>
</div>
<div id="footer-right">
<h4 class="red-text"><strong>CONNECT WITH US</strong></h4>
<p class="red-text"><em>[email protected]</em></p>
<div class="socials">
<a href="https://wa.me/+967770695047" target="_blank"><i class="fa-brands fa-whatsapp"></i></a>
</div>
</div>
</div>
<script>
button = document.getElementById("menu-toggle")
button.addEventListener("click", function() {
navbar = document.getElementById("mobile-navbar");
if (navbar.style.display === "flex") {
navbar.style.display = "none";
button.style.color = "black";
} else {
navbar.style.display = "flex";
button.style.color = "#C40203";
}
});
</script>
</body>
</html>