-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathHome.html
310 lines (298 loc) · 18.2 KB
/
Home.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
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Fjalla+One|Oswald|Baloo+Chettan|Germania+One|Patua+One|Russo+One' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!--Import materialize.css-->
<!-- <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/> -->
<!-- Compiled and minified CSS -->
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type = "text/javascript" src = "https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<style type="text/css">
body {
height: 100%;
background-image: url("https://thegyaan.com/img/cover.jpg");
background-size: 100%;
}
nav ul li:hover {
background-color: #3f51b5;
}
nav ul li a: hover{
color: #000000;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
}
.sli h3,h5{
font-family: 'Oswald', sans-serif;
font-weight: 900;
}
.waves-effect.waves-brown .waves-ripple {
background-color: #3f51b5;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<nav class="navbar-fixed transparent z-depth 1">
<div class="nav-wrapper">
<a href="#!" class="brand-logo"><img src="https://thegyaan.com/img/the_gyaan_logo.png" style="width:130px;"></a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down ">
<li><a style="color:#ff6f00;" href="#home"><i class="material-icons left">home</i>Home</a></li>
<li><a style="color:#ff6f00;" href="#aboutus"><i class="material-icons left">people</i>About us</a></li>
<li><a style="color:#ff6f00;" href="#contact"><i class="material-icons left">map</i>Contact us</a></li>
<li><a style="color:#ff6f00;" href="#login_modal" class="modal-trigger"><i class="material-icons left">person_add</i>Login/Register</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a style="color:#ff6f00;" href="#home"><i class="material-icons left">home</i>Home</a></li>
<li><a style="color:#ff6f00;" href="#aboutus"><i class="material-icons left">people</i>About us</a></li>
<li><a style="color:#ff6f00;" href="#contact"><i class="material-icons left">map</i>Contact us</a></li>
<li><a style="color:#ff6f00;" href="#login_modal" class="modal-trigger"><i class="material-icons left">person_add</i>Login/Register</a></li>
</ul>
</div>
</nav>
</div>
<!-- Login Structure -->
<div id="login_modal" class="modal modal-fixed-footer black darken-4">
<div class="modal-content">
<div class="row deep-orange-text center-align" style="font-weight: 800;text-transform: uppercase;"><img src="https://thegyaan.com/img/the_gyaan_logo.png" style="width:100px;"><center>Sign in to Gyaan.</center></div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6 offset-s3">
<i class="material-icons prefix white-text">person_pin</i>
<input style="border-bottom: 1px solid #3f51b5;" id="username" type="text" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6 offset-s3">
<i class="material-icons prefix white-text">lock</i>
<input style="border-bottom: 1px solid #3f51b5;"id="password" type="password" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="password">Password</label>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer black white-text">
<label class="indigo-text darken-3" style="text-transform: uppercase;" for="register_button">Not a user? Register here.</label>
<a href="#register_modal" class="modal-close waves-effect waves-brown deep-orange-text btn-flat modal-trigger">Register</a>
<a href="#contact" class="modal-close waves-effect waves-brown deep-orange-text btn-flat">Login</a>
</div>
</div>
<!-- Register Structure -->
<div id="register_modal" class="modal modal-fixed-footer black darken-4">
<div class="modal-content">
<div class="row deep-orange-text center-align" style="font-weight: 800;text-transform: uppercase;"><img src="https://thegyaan.com/img/the_gyaan_logo.png" style="width:100px;"><center>Register to Gyaan.</center></div>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix white-text">account_circle</i>
<input style="border-bottom: 1px solid #3f51b5;" id="first_name" type="text" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="first_name">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix white-text">account_circle</i>
<input style="border-bottom: 1px solid #3f51b5;" id="last_name" type="text" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s9">
<i class="material-icons prefix white-text">mail_outline</i>
<input style="border-bottom: 1px solid #3f51b5;" id="email" type="email" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="email">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix white-text">person_pin</i>
<input style="border-bottom: 1px solid #3f51b5;" id="username" type="text" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix white-text">lock</i>
<input style="border-bottom: 1px solid #3f51b5;" id="password" type="password" class="indigo-text darken-4 validate">
<label class="deep-orange-text" for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix white-text">date_range</i>
<input style="border-bottom: 1px solid #3f51b5;" type="date" class="datepicker indigo-text darken-4">
<label class="deep-orange-text" for="birthdate">Date of Birth</label>
</div>
</div>
<div class="row col s6">
<i class="material-icons prefix white-text">people</i>
<input name="gender" type="radio" id="male" value="male">
<label class="deep-orange-text" for="male">Male</label>
<input name="gender" type="radio" id="female" value="female">
<label class="deep-orange-text" for="female">Female</label>
</div>
</form>
</div>
</div>
<div class="modal-footer black white-text">
<a href="#register_modal" class="modal-close waves-effect waves-brown deep-orange-text btn-flat">Register</a>
</div>
</div>
<div class="row slider sli" id="home" style="width: 60%;">
<ul class="slides">
<li>
<img src="http://www.dvrepublic.com/wp-content/uploads/2018/07/004.jpg" height="100%" width="50%"> <!-- random image -->
<div class="caption left-align">
<h3 class="black-text">All You Need for Teaching and Learning in One Platform</h3>
<h5 class="light grey-text text-lighten-3">Gyaan-is a learning management system (LMS) that has all the tools your institution needs to create engaging content,design lessons,and assess student understanding.</h5>
</div>
</li>
<li>
<img src="https://png.pngtree.com/element_origin_min_pic/16/09/01/2057c81865f2c89.jpg"> <!-- random image -->
<div class="caption right-align">
<h3 class="black-text">An LMS Students and Faculty Will Actually Use</h3>
<h5 class="dark deep-orange-text text-accent-4"> That’s because it’s designed with users in mind</h5>
</div>
</li>
<li>
<img src="https://www.swiftelearningservices.com/wp-content/uploads/2017/03/Swift-HCM-LMS.jpg"> <!-- random image -->
</li>
<li>
<div class="row">
<iframe width="900" height="600" src="https://www.youtube.com/embed/viHILXVY_eU" frameborder="0" allowfullscreen></iframe>
</div>
</li>
</ul>
</div>
<div class="row amber darken-4" style="font-family: 'Russo One', sans-serif;" id="aboutus">
<div class="col s8 offset-s2">
<br><br><h4 class="dark white-text center-align" style="font-family: 'Russo One', sans-serif;">It All Started in the Classroom</h4>
<p class="dark"><br><br><br><br>Three college students<i>—Hemant Upadhyay, Atique Siddhiqui, and Shubham Phansekar</i><br>—saw firsthand how education technology fell short of its promise to improve the learning experience for students and instructors.</h5><br><br><br>They decided to change that by building an LMS aligned with the needs and learning style of education in the real world.</p><br><br><br>
</div>
</div>
<div class="row" style="background-image: url('https://www.schoology.com/sites/default/files/styles/slice_desktop/public/about-page-image-template.jpg');height: 50em;"><br><br><br>
<div class="row" style="border-radius: 50%; width:50%;padding:200px 0;background-color: white; opacity: 0.8;text-align: center;">
<h4 class="center-align" style="font-family: 'Russo One', sans-serif;">Much has Changed but Our Mission's the Same</h4>
<p class="center-align"><strong>Fast forward to today.</strong>
Schoology is now in every corner of the world.<br>
We’ve grown and so has our community, but our mission is just the same.<br>
We’ll continue to advance what's possible in education.</p>
</div>
</div>
<div class="white row" style="height: 65em;">
<h3 class="center-align indigo-text text-darken-4" style="font-family: 'Russo One', sans-serif;"><br><br>Our values</h3>
<div class="section">
<div class="container">
<div class="col s7 push-s5">
<h5><br><br>Passion is the Most Powerful Engine</h5>
<p><strong>Our shared passion</strong> for helping instructors and students have the best education experience possible keeps us focused and drives us to work hard every day.</p>
</div>
<div class="col s5 pull-s7">
<br><br><img src="https://www.schoology.com/sites/all/themes/schoology/assets/images/circle-values-passion.png" width="200">
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="col s7 push-s5">
<h5><br><br>We Learn Every Day</h5>
<p><strong>We strive to stay curious,</strong>listen to those who know, learn something each day, and always be open to new ideas. How could we not?</p>
</div>
<div class="col s5 pull-s7">
<br><br><img src="https://www.schoology.com/sites/all/themes/schoology/assets/images/circle-values-learn.png" width="200">
</div>
</div>
</div>
<div class="section">
<div class="container">
<div class="col s7 push-s5">
<h5><br><br>Innovation is in Our Blood</h5>
<p><strong>After all,</strong> collaboration is the core of what Schoology is about. We believe that the instructors, the students, the parents, the administrators, and the Schoology team are all in this together.
<br><br><br><br></div>
<div class="col s5 pull-s7">
<br><br>
<img src="https://www.schoology.com/sites/all/themes/schoology/assets/images/circle-values-innovation.png" width="200">
</div>
</div>
</div>
</div>
<div class="row" id="contact" style="background-image: url('https://www.schoology.com/sites/default/files/styles/hero_desktop/public/hero-contact.jpg'); width:100%; height: 20em;">
<div class="caption">
<h3 class="white-text center-align" style="font-family: 'Baloo Chettan', cursive;"><br><br>Questions? Get in touch<br><br></h3>
</div>
<div class="white" id="contact">
<div class="white row valign-wrapper" style="height: 20em;">
<div class="section">
<div class="container">
<div class="col s6 center-align"><img src="https://thegyaan.com/img/the_gyaan_logo.png" style="width:130px;"><br><p style="font-family: 'Baloo Chettan', cursive;">Bhavans Campus, Old D N Nagar, Munshi Nagar, Andheri West, Mumbai, Maharashtra 400058</p></div>
<div class="col s6 push-s6">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3769.645933603018!2d72.8339267145253!3d19.123182655457875!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c9d90e067ba9%3A0x16268e5d6bca2e6a!2sBharatiya+Vidya+Bhavan's+Sardar+Patel+Institute+of+Technology!5e0!3m2!1sen!2sin!4v1553451966793" frameborder="0" width="300" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<footer class="indigo darken-3 page-footer">
<div class="container">
<div class="row">
<blockquote class="white-text lighten-4" style="border-left: 5px solid #ffff;">If a man neglects education, he walks lame to the end of his life. <br><i>-Plato</i></blockquote>
</div>
</div>
<div class="divider"></div>
<div class = "footer-copyright">
<div class = "container">
<div class="col s5 push-s7">
<a class="btn-floating waves-effect waves-light pulse green"><i class="material-icons circle green">phone</i></a>
<a class="btn-floating waves-effect waves-light pulse blue" href="http://www.twitter.com"><i class="fa fa-twitter circle blue"></i></a>
<a href="http://www/facebook.com" class="btn-floating waves-effect waves-light pulse blue darken-4"><i class="fa fa-facebook circle blue darken-4"></i></a>
<a href="http://www.linkedin.com" class="btn-floating waves-effect waves-light pulse light-blue darken-4"><i class="fa fa-linkedin circle light-blue darken-4"></i></a>
<a href="http://www.youtube.com" class="btn-floating waves-effect waves-light pulse red accent-4"><i class="fa fa-youtube-play circle red accent-4"></i></a>
</div>
<div class="col s7 pull-s5"><p>© 2019 Rights Reserved by Gyaan.</p></div>
</div>
</div>
</footer>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
// $('.carousel.carousel-slider').carousel({
// fullWidth: true,
// indicators: true
// });
$(document).ready(function(){
$('.slider').slider({
height:500,
});
$('.dropdown-content').dropdown();
$('.button-collapse').sideNav();
$('.modal').modal();
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
format: 'dd/mmm/yyyy'
});
});
</script>
</body>
</html>