-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
451 lines (325 loc) · 16.4 KB
/
index.html
File metadata and controls
451 lines (325 loc) · 16.4 KB
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
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<html>
<head>
What goes here
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.css" rel="stylesheet">
<!-- <link href="css/baseRC.css" rel="stylesheet" media="screen">-->
<link href="css/style.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<script>
function yHandler(){
var container = document.getElementById('holder');
var contentHeight = container.offsetHeight;
var yOffset = window.pageYOffset;
var y = yOffset + window.innerHeight;
if(y >= contentHeight && contentHeight < 8500){
//if(y >= contentHeight){
//if(y >= contentHeight){
container.innerhtml += '<div class="row rthree1"><p>check check</p><div class="newData2"><p class="p10">The inner html of this text will dynamically'+
'change after scrolling beyond a certain point.</p></div></div>';
container.innerHTML += '<div class="row rthree2"><div class="col-sm-4 three"><div class="inner-left" style="background-image:'+
'url(image/Balloons.jpg)">Float above all obstacles.</div></div><div class="col-sm-4 three"><div class="center"><p class="p11">There is'+
' no fear in love.<br><br>You can not be held back when your filled with power and an indestructable mind set!</div></div><div class="col-sm-4 hidden-xs three"><div class="inner-right" style="background-image:'+
' url(image/skyR.jpg)">The sky is the limit.</div></div></div>';
container.innerHTML += '<div class="row rthree3"><div class="col-sm-8 three"><div class="inner-big-left"><p class="p12">Battles'+
' are won before ever even taking a step out on the battle field.<br><br>Claim your victory!!!!!!</div></div><div class="col-sm-4'+
' three"><div class="inner-right" style="background-image: url(image/Sbuilding.jpg)">Keep looking up!</div></div></div>';
container.innerHTML += '<div class="row rthree4"><div class="col-sm-4 hidden-xs three"><div class="inner-left"'+
' style="background-image: url(image/sWrestle.jpg)"></div></div><div class="col-sm-8 hidden-xs three"><div class="inner-big-left">'+
'<p class="p12">Deep down inside you know you have no limits. There is nothing that can stop you.<br><br> Set your mind on your future,'+
' move forward and soar into your dreams!! </p></div></div></div>';
container.innerHTML += '<div class="row rthree5"><div id="PicVid"><button onclick="myFunction()"><img src="image/ButtonSkate.jpg">'+
'</div>Life is more exiting when your in motion!!<button onclick="myFunction()"><p class="p13">It often takes a vision to step'+
' forward into the future. What can limit you from dreaming???</p></div>';
container.innerHTML += '<div class="Definition1"><p class="p5">resilient</p><p class="p6">[Def. 1].(n.d.). Oxford-Dictionary Online.'+
'In Oxford-Dictionary. Retrieved December 21. 2014, from <p class="p0">http://www.oxforddictionaries.com/definition/.</p></p>'+
'<p class="p7">1(Of a substance or object) able to recoil or spring back into shape after bending, </p>'+
'<p class="p5">success</p><p class="p6">[Def. 1].(n.d.). Oxford-Dictionary Online. In Oxford-Dictionary. Retrieved December 21. 2014,'+
'from <p class="p0">http://www.oxforddictionaries.com/definition/.</p></p><p class="p7">1The accomplishment of an aim or purpose:</p> </div>';
container.innerHTML += '<div class="row rthree6"><div class="col-sm-8 hidden-xs three"><div class="inner-big-left">'+
'<p class="p11">There is no trying, only doing. By totaly cutting of the possibility of giving up or failing, you willfind'+
' a way to make it happen. <br><br>Your challenge is just one more step in your stairway to success.</p>.</div></div><div class="col-sm-4 hidden-xs three">'+
' <div class="inner-right" style="background-image: url(image/formationHole.jpg)">Check This Out!!!</div></div></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}
window.onscroll = yHandler;
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#fadeText1').delay(1500).fadeIn(500).delay(3500).fadeOut(1500);
$('#fadeText2').delay(8000).fadeIn(1500).delay(4000).fadeOut(1500);
$('#fadeText3').delay(15000).fadeIn(2000).delay(4000).fadeOut(1500);
$('#fadeText4').delay(22000).fadeIn(3000).delay(20000);
});
</script>
<script type="text/javascript">
$(function (){
$("#slides ul").cycle ({
fx: 'fade',
speed: 2000,
timeout: 4000,
prev: '#previous',
next: '#next',
})
})
function show(){
$("#fadeText p").addClass("load");
}
</script>
</head>
<body>
<div id="head">
<p class="titleText">The Positive News</p>
</div>
<!--Navbar -->
<div class="navbar navbar-default ">
<div class="container">
<!--<a class="main-logo pull-left" href="#">Ribbit</a>
<p class="navbar-text pull-right hidden-xs">A Treehouse Project</p> -->
<ul class="list-inline">
<li><a id="modal_trigger" href="#modal">Get Involved</a></li>
<li><a href="riddlesTeam.html">Excersises</a></li>
<li><a href="Games.html">Games</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="sayings.html">Quotes</a></li>
</ul>
</div>
</div><!-- End navbar -->
<div id="containerCircles" class="pull-right">
<div class="img-circle" >B</div>
<div class="img-circle">.</div>
<div class="img-circle" >P</div>
<div class="img-circle" >O</div>
<div class="img-circle" >S</div>
<div class="img-circle">I</div>
<div class="img-circle" >T</div>
<div class="img-circle">I</div>
<div class="img-circle">V</div>
<div class="img-circle">E</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="row rthree3"><div class="col-sm-8 three"><div class="inner-big-leftLargeFirst"><p class="pF">
Welcome to a premium motivational site.</p>
<div id="fadeText">
<p id="fadeText1">Today is your day! This is the day you make everything happen. Its not
about your past, its not about what will happen way in the future.
You are not guaranteed tommorrow. It is about making the most out of your now!!.
How can life get better today!!</p>
<p id="fadeText2">One of the most important ways you can be successful in life is to find meaning in what you are doing.
To live in a way where your
behaviors matter. Where you feeling like you are accomplishing something.
You are not guaranteed tommorrow. It is about making the most out of your now!!.
How can life get better today!!
</p>
<p id="fadeText3">Define what Success is to you.
You may be working in an area with others and have set up your expectation for success, say for example you work in
a job that you get paid to complete projects and your fellow workers also work to complete the same type of projects.
You have set your goal to be the
How can life get better today!!
</p>
<p id="fadeText4">Today is your day! This is the day you make everything happen. Its not
about your past, its not about what will happen way in the future.
You are not guaranteed tommorrow. It is about making the most out of your now!!.
How can life get better today!!</p>
</div>
<div id="DefinitionF">
<p class="p5">success</p><p class="p6">[Def. 1].(n.d.). Oxford-Dictionary Online. In Oxford-Dictionary. Retrieved December 21. 2014,
from <p class="p0">http://www.oxforddictionaries.com/definition/.</p></p>
<p class="p7">1The accomplishment of an aim or purpose:</p>
<h3>Ten things to do to be successful now:</h3>
<p class="p1">
One of the most important ways you can be successful in life is to find meaning in what you are doing. To live in a way where your
behaviors matter. Where you feeling like you are accomplishing something. And one of the most startling things about doing this is:
Anyone can do it. Take Steven hawkins, or ... or...... These are not remarkable people in the sense that they are different from
a regular person. They have just had profound meaning attached to there actions. </p>
</div>
</div></div><div class="col-sm-4 three">
<div class="inner-rightFirst" ">
<div id="art0">art0
<img src="image/headRest.jpg" id="imgT">
<h4>DO YOU REALLY WANT TO SLEEP YOUR LIFE AWAY??</h54\>
<p class="p1">THE SECRET TO BEING SUCCESFUL
Define what Success is to you.
You may be working in an area with others and have set up your expectation for success, say for example you work in
a job that you get paid to complete projects and your fellow workers also work to complete the same type of projects.
You have set your goal to be the top project completer in the company but time and time again another worker continually completes
more projects than you. One day finally you are getting ready to through up your hands and just say I've done all I can to
be the best but keep getting beat out. But instead of labeling yourself as an inferiour employee you come to the realization
that you have been taking more time to get to know other people and have been taking more time with your friends and family off
of work than the person who has been higher numbers. You realize that success to you is really to achieve an incredible amount
of production on the job but also be incredibly successful in relationships.</p>
</div></div></div></div>
<div class="row videoBox1 first">
<h3>Inspiring Videos To Watch!!!</h3>
<div class="row rthree"><div class="col-sm-4"><div class="inner-leftLarge">
<div id="PicVid7a"><button onclick="myFunction7a()"><img src="image/VinceSm1.png" class="img-responsive"></div>
<div id="PicVid8a"><button onclick="myFunction7a1()"><img src="image/PursuitInterviewSm1.png" class="img-responsive"></div>
<div id="PicVid9a"><button onclick="myFunction7a2()"><img src="image/RockyBoardSpeechSm1.png" class="img-responsive"></div>
</div></div>
<div class="col-sm-8 hidden-xs inner-big-right">
<div id="PicVid10a"><button onclick="myFunction7a3()"><img src="image/coachChampLg.png" class="img-responsive"></div>
<div class="frame">Deep down inside you know you have no limits. There is nothing that can stop you.You are an indesructible'+
'force!!Deep down inside you know you have no limits.<div id="PicVid11a"><button onclick="myFunction7a4()"><img src="image/AnyGivenSundaySmall1.png" class="img-responsive">
</div><div id="PicVid12a"> <button onclick="myFunction7a5()"><img src="image/AnyGivenSundaySmall1.png" class="img-responsive"></div>
</div></div></div>
</div>
<div id="holder">
<div class="row rthree1"></div>
<div class="row rthree2"></div>
<div class="row rthree3"></div>
<div class="row rthree5"></div>
<div class="Definition1 first"></div>
<div class="row rthree4"></div>
<div class="row rthree5">
</div>
<div class="row rthree6">
</div>
</div>
<div class="row videoBox">
<h3>Inspiring Videos To Watch!!!</h3>
<div id="PicVid1"><button onclick="myFunction1()"><img src="image/v1Dnz.png" class="img-responsive"></div>
<div id="PicVid2"><button onclick="myFunction2()"><img src="image/v2Cathlete.png" class="img-responsive"></div>
<div id="PicVid3"><button onclick="myFunction3()"><img src="image/v8Coach.png" class="img-responsive"></div>
<div id="PicVid4"><button onclick="myFunction4()"><img src="image/v5cop.png" class="img-responsive"></div>
<div id="PicVid5"><button onclick="myFunction5()"><img src="image/v2Deb.png" class="img-responsive"></div>
<div id="PicVid6"><button onclick="myFunction6()"><img src="image/v4Dr.png" class="img-responsive"></div>
</div>
<div class="row videoBox">
<h3>More Inspiring Videos!!!</h3>
<div id="PicVid1a"><button onclick="Rocky()"><img src="image/RockySm1.png" class="img-responsive"></div>
<div id="PicVid2a"><button onclick="Pursuit()"><img src="image/PursuitSm1.png" class="img-responsive"></div>
<div id="PicVid3a"><button onclick="Sparta()"><img src="image/300SpartaSmall1.png" class="img-responsive"></div>
<div id="PicVid4a"><button onclick="Champion()"><img src="image/CoachChampSm.png" class="img-responsive"></div>
<div id="PicVid5a"><button onclick="AnySunday()"><img src="image/AnyGivenSundaySmall1.png" class="img-responsive"></div>
<div id="PicVid6a"><button onclick="HSathelete()"><img src="image/AthleteSm1.png" class="img-responsive"></div>
</div>
</div>
<!--<script src="http://code.jquery.com/jquery.js"></script>-->
</body>
<div class="footer">The footer goes here.
<p class="p5">resilient</p><p class="p6"><p class="p0">http://www.oxforddictionaries.com/definition/.</p></p>
<p class="p7">1(Of a substance or object) able to recoil or spring back into shape after bending, </p><p class="p5">success</p><p class="p6"> <p class="p0"></p></p>
<ul class="list-inline bottom">
<li><a id="modal_trigger" href="#modal">Contacts</a></li>
<li><a href="riddlesTeam.html">Excersises</a></li>
<li><a href="Games.html">Games</a></li>
<li><a href="articles.html">Articles</a></li>
<li><a href="sayings.html">Quotes</a></li>
</ul>
<p class="p6" style="margin-bottom:0%">All rights reserved copywright@2015</p>
</div>
<body>
<div class="container">
<a id="modal_trigger" href="#modal" class=""></a>
<div id="modal" class="popupContainer" style="display:none;">
<header class="popupHeader">
<span class="header_title">Login</span>
<span class="modal_close"><i class="fa fa-times"></i></span>
</header>
<section class="popupBody">
<!-- Social Login -->
<div class="social_login">
<div class="">
<a href="#" class="social_box fb">
<span class="icon"><i class="fa fa-facebook"></i></span>
<span class="icon_title">Connect with Facebook</span>
</a>
<a href="#" class="social_box google">
<span class="icon"><i class="fa fa-google-plus"></i></span>
<span class="icon_title">Connect with Google</span>
</a>
</div>
<div class="centeredText">
<span>Or use your Email address</span>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" id="login_form" class="btn">Login</a></div>
<div class="one_half last"><a href="#" id="register_form" class="btn">Sign up</a></div>
</div>
</div>
<!-- Username & Password Login form -->
<div class="user_login">
<form>
<label>Email / Username</label>
<input type="text" />
<br />
<label>Password</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="remember" type="checkbox" />
<label for="remember">Remember me on this computer</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><a href="#" class="btn btn_red">Login</a></div>
</div>
</form>
<a href="#" class="forgot_password">Forgot password?</a>
</div>
<!-- Register Form -->
<div class="user_register">
<form>
<label>Full Name</label>
<input type="text" />
<br />
<label>Email Address</label>
<input type="email" />
<br />
<label>Password</label>
<input type="password" />
<br />
<div class="checkbox">
<input id="send_updates" type="checkbox" />
<label for="send_updates">Send me occasional email updates</label>
</div>
<div class="action_btns">
<div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
<div class="one_half last"><a href="#" class="btn btn_red">Register</a></div>
</div>
</form>
</div>
</section>
</div>
</div>
<script type="text/javascript">
$("#modal_trigger").leanModal({top : 200, overlay : 0.6, closeButton: ".modal_close" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#register_form").click(function(){
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
</html>
<script type="text/javascript" src="js/videoTitle.js"></script>
<script src="js/bootstrap.min.js"></script>