-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlol.html
337 lines (287 loc) · 11.7 KB
/
lol.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/story.css" />
<!-- Bootstrap -->
</head>
<body>
<div id="story">
<section id="2004" class="blocks">
<div class="header">
<header>
<span> 2004 -</span>
</header>
</div>
<p>
Orkut : Some of you may be knowing about this but this one is for those who don't..
It was (i wrote 'was' Because Orkut Got Shut down in 2014 )a Social media From Google But originally made by Orkut Büyükkökten as individuals project while working on Google as Engineer .
In Orkut messaging friends was done : via the scrapbook or by sending a private message. Scrapbook is like Follower More you Have More You are Famous .
Pages you know in Facebook were called as Community in Orkut !!
Now lets Start</p>
</section>
<section id="2007" class="blocks">
<div class="header">
<header>
<span> 2007 - age (14)</span>
</header>
</div>
<p>
I joined Orkut and Soon became addicted To it -
Sending Scraps All the time 😂 to get more and more scraps.
This was the time when i started copying the image link and sent it to friend's scrapbook !!!
To gather New Scraps I started visiting website Which features scraps for Orkut !!
And some website are still live(Check out www.scrap9.com) as I visted more and more site,
I observed a unique Way to Scraps there are lines of words (Code) which you just have to copy and
paste on your friends Scrapbook.</p>
</section>
<section id="2008" class="blocks">
<div class="header">
<header>
<span> 2008 - (age 15)</span>
</header>
</div>
<p>
Exam Time ✌
After 2 month when I came back I used some image link scraps and code scraps !
soon I started Joining communities to gather more and more Scraps.
There were millions of scrap communities with millions of active member,
where I got some new friends from Brazil, India !!
Soon after that I noticed that some of the scraps that I did post to my friends profile yielded reply with
the same scraps but with some differences like color and size.
Soon that I asked my Friend about how were they able to alter scrap's property,
they answered me that code Scraps can be altered You Just Have To increase the no.
Where you see 'font-size=' and name a color in 'color=' Haha Funny !! ( Yes this is html )
As Time goes I had about 20k Scraps in my profile !! We started experimenting these codes but never google about it!! (I wish if I did) One day, me and Some of My friends Decided to make a Scrapbook community !!
Where we usually Gather Scraps from many different communities and edit its font-size , color, text, and background. Eventually, after a month of hard work ( Copy /paste ) we had about 5k members and 2.3k active members !! And at that time I had about 100k scraps - and little popular as we were the onwer Of a 5k member Community 😂</p>
</section>
<section id="2009" class="blocks">
<div class="header">
<header>
<span> 2009 -</span>
</header>
</div>
<p>
I got offine for 1.5 month (vacation & health issues ) soon I came back I was shocked my friends Have
about 300k + Scraps 😱 Awww !!
I Texted them many time, waiting curiously.
After 1 or 2 hours they came online and said they have a trick to send scraps to all my friends in one click !!
I was shocked OMG How did you Do That -
They Gave me the Code and we had a Pact of no sharing to anyone else😂😂
About 3-5 months after that, we had about 700k Scraps and our community had about 300k + members !!</p>
</section>
<section id="2010" class="blocks">
<div class="header">
<header>
<span> 2010 -</span>
</header>
</div>
<p>
Exam Time Again and Here the twist Came. My parents joined me in a tuition.
After Joining classes, it changed my mind i usally got 1 hour online even rarely
and I was always Busy With Friends (not study i mean Hangouts) !!</p>
</section>
<section id="2011" class="blocks">
<div class="header">
<header>
<span> 2011 -</span>
</header>
</div>
<p>
One day I got bored so i logged in and chatted with those friends and found out that
they were also Busy in their Life . So I just made my mind that all these thing are addictable,
people care about their life not social media account 😂😂 Funny but its a teenager Thinking ✌</p>
After about
</section>
<section id="2012" class="blocks">
<div class="header">
<header>
<span> 2012 -(1st year in college) </span>
</header> </div>
<p>
Hahaha I joined College with stream of Science and IT optional ✌
as i always like Computers but usually i didn't attend any classes !!</p>
</section>
<section id="2014" class="blocks">
<div class="header">
<header>
<span> 2014 -</span>
</header>
</div>
<p>
My sister refused me to give 12th board as
i didn't study anything even I didn't go to college to have a single class ,
I was just busy with friends and Girls (as All teenager Mind )</p>
</section>
<section id="2015" class="blocks">
<div class="header">
<header>
<span> 2015 - (2nd year in college)</span>
</header>
</div>
<p>
Parents Sent me to a Hostel before 8 months of Exams
( Karma More i enjoyed More pain i got - Hate Hostel huh ) 😑
I did study !! Also my fav Subject was IT - but Not Programming at all.
One Fine day in Hostel - I was in Class Room busy with my studies !!
Suddenly a 1 fresher student entered and sat beside me with an IT Book and a note in hand !!
After some time I just grabbed his book to see contents as I love IT and
the second twist was that last few pages of that book I saw The Same code i used to do in orkut !!
As i was in Hostel and where i always miss my Family and independent life : it memorized me alot .
Then i Got to know the code was Named as HTML .</p>
</section>
<section id="2016" class="blocks">
<div class="header">
<header>
<span>2016-</span>
</header>
</div>
<p>
soon after completing my College I made my mind to Build my career in IT sector So I chose BCA (Graduation )
Bachelor of computer applications !!</p>
</section>
<section id="2017" class="blocks">
<div class="header">
<header>
<span>2017-</span>
</header>
</div>
<p>
After my second year Exam - i started 3rd year class , but when i came up with 3rd year syllabus I got
to see HTML Again - it shocked me and as I was Not a Teenager anymore
So that time in my mind was all about job specification I dig into my syllabus also got to know
JavaScript which was the code (trick) that my Brazilian Friend gave me to send scraps to all your friends at one
click and it made me more curios to Know About HTML and JavaScript, so then I started googling !!</p>
</section>
<div id="bottom">
<section class="thoughts">
What is HTML ?
Why it is used ?
What is JavaScript ?
<br><hr>
<br>
And these questions gave me more and more questions ✌
<br>
Like How Website Work ?
What is web technologies ?
What is Hosting ?
Front-end / Back end ?
<br><hr><br>
</section>
<section class="thoughts">
So on .<br>
There were many Professional Web development Course available in web like - Udemy / treehouse
But i took tutorial from Youtube as I Was searching for Free Course / Tutorial !!
<br><hr><br>
And yes i must say in Youtube there were Also many good and interesting tutorial are available :
You must check out these tutor : They are awesome for learning front-end Developer and back-end Developer.
<br>
- Webdev
- Netnijja
<hr><br>
</section>
<section class="thoughts">
Today i Say my self a Beginner as in web development you Always should be Updated To New Technologies and
have willingness to learn new stuff .<br><hr><br>
Now i am planning to have a professional course on HTML / CSS / JS / JQUERY /SQL / REACT - and Have a Verifed Certificate </section>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script>
$( "section.blocks > .header:odd" ).css({ "background":"orange"
,"color":"black"});
$( "section.blocks > .header:even" ).css({ "background-color":"orange"
,"color":"black"});
$( "section.blocks:even" ).css({ "flex-direction":"row-reverse"
,"border": "1px solid orange", "text-align": "left"});
$( "section.blocks:odd" ).css({ "border": "1px solid black","text-align": "right"});
//
// var $blocks_elements = $('.blocks');
// var $window = $('#story');
//
//
// function ifIn_View(){
// var windowHeight = $window.height();
// var windowTop_position = $window.scrollTop();
// var windowBottom = (windowTop_position + windowHeight);
//
//
//
// $.each($blocks_elements,function(){
// var $element = $(this);
// var element_height = $element.outerHeight();
// var elementTop_position = $element.offset().top;
// var elementBottom_position = (elementTop_position + element_height);
//
//
// if ((elementBottom_position >= windowTop_position) && (elementTop_position <= windowBottom)){
// console.log('add');
// $element.addClass('animated bounceInLeft');
//
// }else{
// console.log('remove');
// $element.removeClass('animated bounceOutLeft');
//
// }
//
//
//
// });
//
// }
// $window.on('scroll resize', ifIn_View);
// $window.trigger('scroll');
//
// $("#story").on( 'scroll', function(){
// console.log($(this).scrollTop());
// var height = $(this).scrollTop();
// if ( height > 100 ){
// $("#2007").removeClass("hidden").addClass("animated flip");
// }
// if (height > 250 ){
// $("#2008").removeClass("hidden").addClass("animated flip");
// }
// if (height > 530 ){
// $("#2009").removeClass("hidden").addClass("animated flip");
// }
// if (height > 790 ){
// $("#2010").removeClass("hidden").addClass("animated flip");
// }
// if (height > 950 ){
// $("#2011").removeClass("hidden").addClass("animated flip");
// }
// if (height > 1110 ){
// $("#2012").removeClass("hidden").addClass("animated flip");
// }
// if (height > 1400 ){
// $("#2013").removeClass("hidden").addClass("animated flip");
// }
// if (height > 1500 ){
// $("#2014").removeClass("hidden").addClass("animated flip");
// }
// if (height > 1670 ){
// $("#2015").removeClass("hidden").addClass("animated flip");
// }
// if (height > 1920 ){
// $("#2016").removeClass("hidden").addClass("animated flip");
// }
// if (height > 2040 ){
// $("#2016").removeClass("hidden").addClass("animated flip");
// }
// if (height > 2150 ){
// $("#2017").removeClass("hidden").addClass("animated flip");
// }
//
// $("#2007").show().addClass("come-in");
//
//
// });
</script>
</body>
</html>