-
Notifications
You must be signed in to change notification settings - Fork 1
/
Imam-Qatanani-Website.html
217 lines (211 loc) · 14.3 KB
/
Imam-Qatanani-Website.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
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Qatanani Website Description">
<link rel="icon" type="image/png" href="icons/favicon.ico"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.typekit.net/mpp0mgy.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="project.css">
<title>Ali Haider | Imam Qatanani Website</title>
</head>
<body>
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"></span>
<a href="index.html" class="navbar-brand">
Ali Haider
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="index.html#AboutMe" class="nav-link m-2 menu-item nav-active">About</a>
</li>
<li class="nav-item">
<a href="index.html#Experience" class="nav-link m-2 menu-item">Experience</a>
</li>
<li class="nav-item">
<a href="index.html#Projects" class="nav-link m-2 menu-item">Projects</a>
</li>
<li class="nav-item">
<a href="index.html#Contact" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid header">
<div class="row">
<div class="col-12 center-flex title">
<h1>Imam Qatanani Website</h1>
</div>
</div>
<div class="row">
<div class="offset-lg-1 col-lg-10">
<div class="row synopsis">
<div class="col-lg-4">
<h2><u>Client</u></h2>
<h5 class="d-lg-none">Imam Qatanani</h5>
</div>
<div class="col-lg-4">
<h2><u>Date</u></h2>
<h5 class="d-lg-none">June 2021 - July 2021</h5>
</div>
<div class="col-lg-4">
<h2><u>Type</u></h2>
<h5 class="d-lg-none">Website</h5>
</div>
</div>
<div class="row" style="margin-top: 2vh;">
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>Imam Qatanani</h5>
</div>
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>June 2021 - July 2021</h5>
</div>
<div class="col-lg-4 center-flex d-none d-lg-block">
<h5>Website</h5>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid project">
<div class="row d-none d-lg-block">
<div class="col-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Description</h2>
<p>Imam Qatanani has served as the head Imam at the Islamic Center of Passaic County for over 25 years. In his time at one of America’s largest Muslim communities he has written over a thousand articles, produced hundreds of hours of recorded lectures, and written multiple books. As a man dedicated to his cause, he continues to work diligently to help the people of his community.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/Qatanani Description.png" alt="Qatanani Description">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Problem</h2>
<p>As Imam Qatanani’s collection of work continued to grow, so too did the need to organize it into one central place. There was great concern that many of his works were beginning to become untracked, and those who were hoping to benefit from his knowledge online would have to go to great lengths to find what they were looking for. Though the client offered to help sift through the content, it would be my task to find an elegant way to tie it all together.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/Qatanani Problem.png" alt="Qatanani Problem">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Approach</h2>
<p>Due to the vast quantity and the wide variety of material (articles, lectures, sermons, religious injunctions, news, etc.) a dedicated website was the only way to cleanly bring content together across different mediums. A personal website would be easy for users to access and do well to keep content easily presentable. When it came to choosing a platform, Wordpress stood out as the best choice. This was because it was easy to use and would allow the client to freely maintain the project after handoff. </p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/Qatanani Approach.png" alt="Qatanani Approach">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-xl-6 center-flex project-text">
<h2>Outcome</h2>
<p>The website is now live, and content has already begun to be populated. Information is organized and divided across several pages, with multiple sub-sectioning to keep series and classes together. Furthermore, many other necessary features were incorporated throughout development, such as an About page, Contact page functionality, and responsive design principles. Overall, the client is very satisfied with outcome, and feels comfortable adding and making changes as necessary.</p>
</div>
<div class="col-xl-6 center-flex">
<img src="images/Qatanani Outcome.png" alt="Qatanani Outcome">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row d-lg-none">
<div class="col-12">
<div class="mobile-section">
<h2>Description</h2>
<p>Imam Qatanani has served as the head Imam at the Islamic Center of Passaic County for over 25 years. In his time at one of America’s largest Muslim communities he has written over a thousand articles, produced hundreds of hours of recorded lectures, and written multiple books. As a man dedicated to his cause, he continues to work diligently to help the people of his community.</p>
<img src="images/Qatanani Description.png" alt="Qatanani Description">
</div>
<div class="mobile-section">
<h2>Problem</h2>
<p>As Imam Qatanani’s collection of work continued to grow, so too did the need to organize it into one central place. There was great concern that many of his works were beginning to become untracked, and those who were hoping to benefit from his knowledge online would have to go to great lengths to find what they were looking for. Though the client offered to help sift through the content, it would be my task to find an elegant way to tie it all together.</p>
<img src="images/Qatanani Problem.png" alt="Qatanani Problem">
</div>
<div class="mobile-section">
<h2>Approach</h2>
<p>Due to the vast quantity and the wide variety of material (articles, lectures, sermons, religious injunctions, news, etc.) a dedicated website was the only way to cleanly bring content together across different mediums. A personal website would be easy for users to access and do well to keep content easily presentable. When it came to choosing a platform, Wordpress stood out as the best choice. This was because it was easy to use and would allow the client to freely maintain the project after handoff. </p>
<img src="images/Qatanani Approach.png" alt="Qatanani Approach">
</div>
<div class="mobile-section">
<h2>Outcome</h2>
<p>The website is now live, and content has already begun to be populated. Information is organized and divided across several pages, with multiple sub-sectioning to keep series and classes together. Furthermore, many other necessary features were incorporated throughout development, such as an About page, Contact page functionality, and responsive design principles. Overall, the client is very satisfied with outcome, and feels comfortable adding and making changes as necessary.</p>
<img src="images/Qatanani Outcome.png" alt="Qatanani Outcome">
</div>
</div>
</div>
</div>
<div class="container-fluid demo">
<div class="row">
<div class="col-xl-6 offset-xl-3 col-md-8 offset-md-2 col-10 offset-1 center-flex">
<h1>Demo</h1>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/WmsHFPmObYA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h4><a href="https://imamqatanani.com" target="_blank">Project Page</a></h4>
</div>
</div>
</div>
<div class="container-fluid footer">
<div class="row" style="height: 100%;">
<div class="col-lg-4 col-12 center-flex d-none d-lg-block">
© Syed Ali Haider 2021
</div>
<div class="col-lg-4 col-12 center-flex" style="height: 100%;">
<a class="center-flex" target="_blank" href="https://www.linkedin.com/in/syed-a-haider/" rel="noopener">
<img src="icons/linkedin.svg" alt="Linkedin Logo">
</a>
<a class="center-flex" target="_blank" href="https://github.com/syedahaider97" rel="noopener">
<img href src="icons/github.svg" alt="Github Logo">
</a>
</div>
<div class="col-lg-4 col-12 center-flex d-lg-none">
© Syed Ali Haider 2021
</div>
<div class="col-lg-4 col-12 location center-flex">
<a href="https://www.google.com/maps/place/Harrison,+NJ" target="_blank">Harrison, NJ</a>
</div>
</div>
</div>
<img id="ScrollToTop" onclick="topFunction()" src=icons/up-arrow.svg alt="Up Arrow">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<script src="global.js"></script>
<script>
$('.carousel').carousel({
interval: false
})
</script>
</body>
</html>