forked from Chetan-Chinchulkar/Electronics-Club-Website-IITG
-
Notifications
You must be signed in to change notification settings - Fork 0
/
blogland.html
578 lines (551 loc) · 24.2 KB
/
blogland.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
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
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
<!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.0" />
<title>landing-blog</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
@import url(/style.css);
@font-face {
font-family: msjh;
src: url(/fonts/msjh_0.ttf);
font-style: normal;
}
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap");
body {
color: #ddd;
font-family: "msjh";
}
.landing-container {
display: grid;
grid-template-columns: 3fr auto 1fr;
position: sticky;
top: 0px;
/* border: 5px solid green; */
margin: 5rem auto;
}
.landing-main {
margin: 5px 2rem;
color: #ddd;
}
/* main paras ubuntu font */
span[class="divider"] {
justify-self: center;
display: inline-block;
position: sticky;
top: 0px;
width: 0;
height: 100vh;
}
.divider .divider-bar {
display: inline-block;
border-right: 2px solid rgb(4, 15, 67);
/* border-right: 2px solid rgb(28, 28, 184, 0.4); */
border-radius: 1px;
position: relative;
top: 20vh;
height: 60vh;
}
.landing-sidebar {
/* margin: 5rem auto; */
height: 100vh;
position: sticky;
top: 0px;
overflow-y: scroll;
}
.landing-sidebar::-webkit-scrollbar {
/* width: 1rem; */
border: none;
width: 0px; /*can add scroll bar for blog section but i have removed it*/
}
.landing-sidebar::-webkit-scrollbar-track {
/* color: tomato; */
/* color: #ddd; */
background-color: rgb(4, 15, 67, 0.7);
/* background-color: transparent; */
/* box-shadow: inset 0px 0px 2px; */
border-radius: 5px;
}
.landing-sidebar::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #f15925;
}
.blogcontainer {
/* background-color: blueviolet; */
display: grid;
place-items: center;
text-align: center;
/* border: 2px dashed orange; */
}
.blogcontainer > h2 {
color: #f15925;
font-weight: 400;
font-size: 1.3rem;
width: 60%;
margin: 1rem;
/* margin-bottom: 3rem; */
text-align: center;
justify-self: center;
}
.page-content {
display: grid;
width: 100%;
padding: 0;
margin: 0 auto;
grid-template-columns: 1fr;
}
.card {
max-height: 300px;
justify-self: center;
max-width: 250px;
}
.copy {
line-height: 1.1rem;
font-size: 1rem;
}
.card .content {
font-size: 1rem;
}
@media screen and (max-width: 1000px) {
.card .title {
font-size: 1.2rem;
font-weight: 550;
line-height: 1;
}
.card .content {
padding: 0;
}
}
@media screen and (max-width: 700px) {
span[class="divider"],
.landing-sidebar {
display: none;
}
.landing-container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<!-- ---------------------------menubar---------------------------------- -->
<header>
<div class="logo">
<a href="/index.html">
<img src="/elecclublogo.svg" alt="Logo" />
</a>
</div>
<h1 class="logotext"><a href="/index.html"> Electronics Club</a></h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li><a href="/index.html">Home</a></li>
<li>
<a href="/resources-home.html">Resources</a>
<ul>
<li><a href="#" style="margin-left: 3.75rem;">Digital</a></li>
<li><a href="#" style="margin-left: 3.75rem;">Analog</a></li>
<li><a href="/resources/resources-microcontroller.html" style="margin-left: 2rem;">Microcontroller</a></li>
<li><a href="#">Computer Vision & AI</a></li>
<li><a href="#" style="margin-left: 5rem;">IoT</a></li>
</ul>
</li>
<li>
<a href="/blog-home.html">Blogs</a>
<ul>
<li><a href="/blog-blogs/blog-uncategorised.html" style="margin-left: 0.75rem;">Uncategorised</a></li>
<li><a href="/blog-blogs/blog-core-electronics.html">Core Electronics</a></li>
<li><a href="/blog-blogs/blog-coding.html" style="margin-left: 2.55rem;">Coding</a></li>
<li><a href="/blog-blogs/blog-networking.html" style="margin-left: 1.35rem;">Networking</a></li>
<li><a href="/blog-blogs/blog-hacking.html" style="margin-left: 2.25rem;">Hacking</a></li>
</ul>
</li>
<li><a href="/team.html">Team</a></li>
<li><a href="/alumni.html">Alumni</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span class="navicon"></span>
</label>
</header>
<section class="landing-container">
<!-- ---------------------------------main---------------------------- -->
<div class="landing-main">
<article>
<h1>MAIN HEADING OF BLOG / CATEGORY</h1>
<br />
<!-- ---------------------- This is optional ---------------------- -->
<p>
Intro <br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione at
consequatur, nemo esse molestias ullam magni aliquid deserunt quae
sed minima iure impedit natus quis voluptate debitis maxime, libero
perferendis nulla. Aspernatur non exercitationem, adipisci vero
quae, a delectus veniam commodi aut nulla recusandae quidem!
Obcaecati laborum cumque tempora itaque?
</p>
<!-- -------------------------------------------------------------- -->
<br />
<h1>Blog heading / Sub Heading</h1>
<br />
<!--
Add your blog content, image, code here
-->
<!-- ------------------ Area for blog content ------------------- -->
<p>
Content here <br>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium
quia repudiandae magni, placeat doloribus expedita illum ex optio.
Esse ad perspiciatis sunt optio dicta provident recusandae
reiciendis necessitatibus odio sequi. Eum necessitatibus, quidem
minima ipsum, atque omnis laudantium dolorum dicta, veniam
laboriosam unde asperiores aspernatur quaerat consequatur qui cum
tenetur ut recusandae mollitia at consequuntur. Ut commodi atque,
repudiandae minus quas eum. Non consequatur assumenda provident
expedita perferendis vitae? Quis, illo laudantium tempora itaque
omnis unde! Consequatur, rerum. Iure suscipit, molestiae voluptatem
repellendus perspiciatis eum error possimus pariatur optio culpa
dicta odio impedit ex officia fugit eaque quidem, iusto repellat
unde fugiat eius est mollitia magnam. Saepe aliquid adipisci,
voluptatum reprehenderit placeat ipsa ducimus blanditiis aliquam
asperiores doloribus quia aut et exercitationem quod iste esse
aperiam, perspiciatis vel maiores expedita. Reiciendis repudiandae
omnis nesciunt sed, praesentium excepturi, quis sit sunt, iure fugit
doloribus. Doloribus perspiciatis eveniet quisquam recusandae
suscipit aspernatur rerum, voluptate ducimus dolorum ipsam molestias
vitae illum iure consequatur mollitia culpa dolores quos officia
ipsa similique ad maxime sapiente in illo. Fuga cum molestias in
eveniet, molestiae eaque dolorum amet, vel voluptate nisi excepturi
cupiditate quidem saepe nobis aut nemo. Odit architecto ipsa
accusantium, ratione error voluptate asperiores rem a unde
perferendis maiores est tempora adipisci facere cumque quibusdam
repudiandae atque cupiditate nostrum sequi nemo corporis? Ipsa rem
ea aspernatur harum tempora quia corporis. Eius, illum aliquam, vel
qui velit adipisci culpa molestias exercitationem placeat minima,
tempore repudiandae esse? Nostrum, fugit culpa beatae dolorem
molestias praesentium numquam optio exercitationem fuga libero rerum
eos accusantium dolorum quasi cumque soluta odit a, enim corrupti
ullam fugiat distinctio! Reprehenderit, tempora eaque facere
architecto atque dolorem quis error id voluptas a quisquam deserunt
sed fugit, dolore, neque porro suscipit autem modi possimus! Quod
nam, esse delectus consequatur, laboriosam molestias ratione,
consectetur magnam rem maiores possimus! Voluptate earum fugiat ab
dolor ut accusamus quaerat quas obcaecati corporis, officiis quod
magnam iure, quibusdam quae! Odit doloribus eum accusantium quaerat
alias. Est, ratione. Provident magnam in, sed aliquid possimus
exercitationem perspiciatis doloremque voluptate ipsa quam qui
maxime, incidunt sequi nesciunt neque eaque soluta totam
voluptatibus dolorem pariatur natus. Iure porro, quis in amet
possimus voluptates labore dolorum cumque tenetur fugiat expedita,
natus ex eaque quos assumenda, sint nihil doloremque facere animi
aut veniam vero? Voluptate laborum minus fuga quasi veritatis sequi
voluptas error dolor ducimus sint, ab provident, delectus ipsam
exercitationem id. Modi blanditiis fuga accusantium obcaecati quae,
corrupti necessitatibus et praesentium dolores aspernatur debitis
similique soluta? Modi culpa voluptatum eum temporibus
exercitationem nulla, excepturi earum facere est omnis repellendus
saepe corrupti, quaerat perferendis labore consequuntur expedita
magni a sunt vel obcaecati. Corrupti repellat ipsam aliquam deserunt
recusandae laborum quod in nesciunt accusantium rerum! Eius
distinctio veniam consequatur cum? Consequatur placeat corrupti
minima soluta aliquam nisi maxime ratione aliquid! Cumque aperiam
corporis ab necessitatibus voluptate vero temporibus sequi sint
magni libero? Voluptates corporis officiis porro debitis? Et
consequuntur dolorum ut suscipit distinctio doloribus in quidem
repellat cupiditate, recusandae libero minus voluptatum voluptas aut
fugiat corporis reprehenderit.
</p>
<!-- ------------------------------------------------------------ -->
</article>
</div>
<span class="divider">
<span class="divider-bar"></span>
</span>
<!-- ----------------------aside------------------------ -->
<aside class="landing-sidebar">
<section class="blogcontainer">
<h2>Check out our other posts</h2>
<br />
<!-- background images are added using css nth child -->
<main class="page-content">
<div class="card">
<div class="content">
<h2 class="title">FACE RECOGNITION Door Lock</h2>
<p class="copy">
Are you fed up of losing your room keys? Or are you fed up of remembering which key opens which lock? To solve these problems, we present...
</p>
<a href="/blog-blogs/sidebar/sidebar-facrecog.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">LDR Dot Matrix</h2>
<p class="copy">
In the modern world which is full of advertisement what is better than to provide the world with a cheaper and efficient way of advertisement. What is more impressive...
</p>
<a href="/blog-blogs/sidebar/sidebar-ldr.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">You Can't Beat A Healthy Heart</h2>
<p class="copy">
PARTS OF HEART WAVE : Electrocardiography (ECG or EKG) is the method of recording the electrical activity of heart over a period of...
</p>
<a href="/blog-blogs/sidebar/#">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">NIGAHEIN</h2>
<p class="copy">
A Pupil tracking based room automation system
</p>
<a href="/blog-blogs/sidebar/sidebar-nigahein.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">PHONE DETECTOR</h2>
<p class="copy">
March 24,2019. Current working model About: The basic principle behind the cell phone detector circuit is to detect the RF signals. Illegal use of cell phones in places like exam halls, confidential rooms, petrol bunks...
</p>
<a href="/blog-blogs/sidebar/sidebar-phonedect.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">SMART FARM- ELECTRONICS CLUB, IIT GUWAHATI</h2>
<p class="copy">Just think, life of a hardworking farmer can be made lot more easier and comfortable if he could control his whole farm sitting at his home. So we have come...</p>
<a href="/blog-blogs/sidebar/sidebar-smartfarm.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">WiFi Jammer – Electronics Club IITG</h2>
<p class="copy">NODE MCU What are Jammers? A jammer is a device which can prevent the use of a particular radio frequency by bombarding it with random noise, or in other words, jamming it...</p>
<a href="/blog-blogs/sidebar/sidebar-wifi.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">ELECTRONIC PIANO – Electronics Club IITG</h2>
<p class="copy">Have you ever experienced that when you are in off-mood, someone plays music around you and your mind gets refreshed ? And had a thought to play your own tunes whenever you...</p>
<a href="/blog-blogs/sidebar/sidebar-piano.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">V-Motion</h2>
<p class="copy">
"Virtual music player which plays music according to the movements of hands.It is similar to playing a tune on a keyboard or a guitar where you need to strike different chords.To ease...
</p>
<a href="/blog-blogs/sidebar/sidebar-vmotion.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">Laser communication System – Electronics Club IITG</h2>
<p class="copy">
From where I sit, the future looks very bright for laser communicationsBadri Younes, NASA's deputy associate administrator ...
</p>
<a href="/blog-blogs/sidebar/sidebar-laser.html">
<button class="btn">View</button>
</a>
</div>
</div>
<div class="card">
<div class="content">
<h2 class="title">RTL-SDR application (Weather satellite data)-Electronics Club IITG</h2>
<p class="copy">
What is RTL-SDR? Ever wondered how Wi-Fi, Bluetooth, GSM(Mobile communication & Internet), GPS, Radio, DTH, Satellites work. Well they do so by the usage of electromagnetic...
</p>
<a href="/blog-blogs/sidebar/sidebar-rtl.html">
<button class="btn">View</button>
</a>
</div>
</div>
</main>
</section>
</aside>
</section>
<!-- ----------------------------footer---------------------------------- -->
<section class="footer" data-aos="fade-up" data-aos-duration="500">
<div class="findus"><h2>Find Us</h2></div>
<!-- ---------------------social icons start--------------------- -->
<div class="foot-socials-container">
<div class="facebook footlogo">
<a href="https://www.facebook.com/electronics.iitg" target="_blank">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="facebook-f"
class="svg-inline--fa fa-facebook-f fa-w-10"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"
></path>
</svg>
</a>
</div>
<div class="youtubelogo footlogo">
<a
href="https://www.youtube.com/channel/UClPWjFXGdtjKYjZvulnUViw"
target="_blank"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="youtube"
class="svg-inline--fa fa-youtube fa-w-18"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
fill="currentColor"
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
></path>
</svg>
</a>
</div>
<div class="instagram footlogo">
<a
href="https://www.instagram.com/electronicsclubiitg/"
target="_blank"
>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fab"
data-icon="instagram"
class="svg-inline--fa fa-instagram fa-w-14"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
fill="currentColor"
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
></path>
</svg>
</a>
</div>
</div>
<!-- /* ------------------------------------form start------------------------------- */ -->
<form
id="contact-form"
method="post"
action="form-handler.php"
target="_blank"
>
<div>
<h3>
<svg
aria-hidden="true"
focusable="false"
data-prefix="far"
data-icon="envelope"
class="svg-inline--fa fa-envelope fa-w-16"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
fill="#ddd"
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm0 48v40.805c-22.422 18.259-58.168 46.651-134.587 106.49-16.841 13.247-50.201 45.072-73.413 44.701-23.208.375-56.579-31.459-73.413-44.701C106.18 199.465 70.425 171.067 48 152.805V112h416zM48 400V214.398c22.914 18.251 55.409 43.862 104.938 82.646 21.857 17.205 60.134 55.186 103.062 54.955 42.717.231 80.509-37.199 103.053-54.947 49.528-38.783 82.032-64.401 104.947-82.653V400H48z"
></path>
</svg>
Contact Us
</h3>
<br />
<p>
For any doubts/queries, feel free to contact us at
<span>
<a
href="mailto:electronicsclub@iitg.ac.in"
style="text-decoration: none; color: #f15925"
>
electronicsclub@iitg.ac.in</a
>
</span>
OR drop a message below:
</p>
</div>
<input
type="text"
name="name"
class="form-control"
placeholder="Name (required)"
required
/>
<input
type="email"
name="email"
class="form-control"
placeholder="Email Address (required)"
required
/>
<textarea
name="message"
class="form-control"
placeholder="Message (required)"
required
></textarea>
<button type="submit" class="form-control-submit" value="Submit">
Submit
</button>
</form>
<!-- -----------------------------------footer-footer------------------ -->
<div class="footer-footer">
<div class="techboard">
<a
href="https://iitg.ac.in/stud/gymkhana/technical/index.html"
target="_blank"
>
<img src="/techincal board.svg" alt="Technical Board,IITG" />
</a>
</div>
<div class="Rahul">Developed by Rahul Agrawal</div>
<div class="Kritika">Designed by Kritika Gupta</div>
<div class="Chetan">Re-Designed by Chetan Chinchulkar</div>
<!-- techboard and made by and therecontacts mostly iitgwebmail id -->
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({
// duration: 1000,
// delay: 3,
// offset: 200,
// mirror: true
});
</script>
</body>
</html>