-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
382 lines (361 loc) · 21.5 KB
/
index.html
File metadata and controls
382 lines (361 loc) · 21.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Programming Knowledge</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./mobile-style.css">
</head>
<body>
<header>
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">
<i class="fas fa-book-reader fa-2x mx-3"></i>Immortals</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-right text-light"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="mr-auto"></div>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">HOME
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">COURSE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">PRICE</a>
</li>
<li class="nav-item dropdown">
<div class="dropdown">
<a href="#" class="nav-link">PAGES</a>
<div class="dropdown-content">
<a href="#">Generic</a>
<a href="#">Element</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container text-center">
<div class="row">
<div class="col-md-7 col-sm-12 text-white">
<h2>Author: Natansh Kapil</h2>
<h1>Programming Knowledge</h1>
<p>
"Any fool can write code that a computer can understand. Good programmers write code that humans can understand."" </p>
<button class="btn btn-light px-5 py-2 primary-btn">
Hello World
</button>
</div>
</div>
</div>
</header>
<main>
<section class="section-1">
<div class="container text-center">
<div class="row">
<div class="col-md-6 col-12">
<div class="pray">
<img src="nanu.jpg" width="800" height="500" alt="Programming" class="" />
</div>
</div>
<div class="col-md-6 col-12">
<div class="panel text-left">
<h1>About Author</h1>
<h2>Mr. Natansh Kapil</h2>
<h3>Front End Developer</h3>
<h5 class="pt-4">
Front End Developer My name is Natansh Kapil, I passed 10th std from KLG Public School, now I am studying Diploma 1st year (CSE) from Quantum University Roorkee. I want to be Software Developer.
</h5>
</div>
</div>
</div>
</div>
</section>
<section class="section-2 container-fluid p-0">
<div class="cover">
<div class="overlay"></div>
<div class="content text-center">
<h1>What is Programming ?</h1>
<p>Computer programming is the process of designing and building an executable computer program <br> to accomplish a specific computing result or to perform a specific task</p>
</div>
</div>
<div class="container-fluid text-center">
<div class="numbers d-flex flex-md-row flex-wrap justify-content-center">
<div class="rect">
<h6>Programming is fun :</h6>
<p>Using Programming, you can create your own games, your personal blog/profile page, a social networking site like Facebook, a search engine like Google. </p>
</div>
<div class="rect">
<h6>The backbone of a Technology Company:</h6>
<p>The backbones of today’s technology companies like Google, Amazon, and many others, are giant computer programs written by a collaboration of thousands of skilled programmers.</p>
</div>
<div class="rect">
<h6>Pretty good salary</h6>
<p> Computer Programmers are paid extremely well almost all across the world. Top programmers in Silicon Valley make millions of dollars every year. Quite a few companies offer to start salaries as high as $100,000 p/y..</p>
</div>
<div class="rect">
<p>Good programmers don’t just know how to code—they know how to wrap their brains around a complex problem and produce efficient code to solve it.</p>
</div>
</div>
</div>
<div class="purchase text-center">
<h1>Development</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
<div class="cards">
<div class="d-flex flex-row justify-content-center flex-wrap">
<div class="card">
<div class="card-body">
<div class="title">
<h3 class="card-title">Web Development
</h3>
</div>
<p class="card-text">
What is Web Development`
</p>
<div class="pricing">
<p>Web development refers to building, creating, and an maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. Web development includes many types of web
content. creation. Web development skills are in high demand worldwide and well paid too – making development a great career option. It is one of the easiest accessible higher paid fields as you do not need a traditional
university. degree to become qualified. It refers in general to the tasks associated with developing websites for hosting via intranet or internet.
</p>
<a href="#" class="btn btn-dark px-5 py-2 primary-btn mb-5">Web
</a>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="title">
<h3 class="card-title">IOS</h3>
</div>
<p class="card-text">
iPhone operating system
</p>
<div class="pricing">
p>iOS application development is the process of making mobile applications for Apple hardware, including iPhone, iPad and iPod Touch. The software is written in the Swift programming language or Objective-C and then deployed to the App Store for users
to download.</p>
<a href="#" class="btn btn-dark px-5 py-2 primary-btn mb-5">IOS</a>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<div class="title">
<h3 class="card-title">Android</h3>
</div>
<p class="card-text">
What is Android Development.
</p>
<div class="pricing">
<p>Android software development is the process by which applications are created for devices running the Android operating system. Google states that "Android apps can be written using Kotlin, Java, and C++ languages"
using the Android software development kit, while using other languages is also possible.An Android developer is responsible for developing applications for devices powered by the Android operating system. Due to
the fragmentation of this ecosystem, an Android developer must pay special attention to the application's compatibility with multiple versions of Android and device types.</p>
<a href="#" class="btn btn-dark px-5 py-2 primary-btn mb-5">Andriod </a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-3 container-fluid p-0 text-center">
<div class="row">
<div class="col-md-12 col-sm-12">
<h1>Download Our App for all Platform</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eum exercitationem alias perspiciatis omnis quod possimus odit voluptatum! Sunt ea quasi praesentium, tenetur doloribus animi obcaecati, sint nemo quae laudantium iusto unde eaque nostrum nobis
voluptatum
</p>
</div>
</div>
<div class="platform row">
<div class="col-md-6 col-sm-12 text-right">
<div class="desktop shadow-lg">
<div class="d-flex flex-row justify-content-center">
<i class="fas fa-desktop fa-3x py-2 pr-3"></i>
<div class="text text-left">
<h3 class="pt-1 m-0">Desktop</h3>
<p class="p-0 m-0">On website</p>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 text-left">
<div class="desktop shadow-lg">
<div class="d-flex flex-row justify-content-center">
<i class="fas fa-mobile-alt fa-3x py-2 pr-3"></i>
<div class="text text-left">
<h3 class="pt-1 m-0">On Mobile</h3>
<p class="p-0 m-0">On Play Store</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section 4 -->
<section class="section-4">
<div class="container text-center">
<h1 class="text-dark">What our Reader's Say about us</h1>
<p class="text-secondary">Lorem ipsum dolor sit amet.</p>
</div>
<div class="team row ">
<div class="col-md-4 col-12 text-center">
<div class="card mr-2 d-inline-block shadow-lg">
<div class="card-img-top">
<img src="web-development.gif" class="img-fluid border-radius p-4" alt="">
</div>
<div class="card-body">
<h3 class="card-title">HTML</h3>
<p class="card-text">
Web development refers to building, creating, and an maintaining websites. It includes aspects such as web design, web publishing, web programming, and database management. Web development includes many types of web content. creation. Web development
skills are in high demand worldwide and well paid too – making development a great career option. It is one of the easiest accessible higher paid fields as you do not need a traditional university. degree to become qualified.
It refers in general to the tasks associated with developing websites for hosting via intranet or internet.
</p>
<!-- -->
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div id="carouselExampleControls" class="carousel slide " data-ride="carousel">
<div class="carousel-inner text-center">
<div class="carousel-item active">
<div class="card mr-2 d-inline-block shadow">
<div class="card-img-top">
<img src="html.jpg" class="img-fluid rounded-circle w-50 p-4" alt="">
</div>
<div class="card-body">
<h3 class="card-title">Web Development Tools</h3>
<p class="card-text">
<p> To build functioning websites efficiently and easily, there are various tools that Web Developers can use.These tools allow them to build well-functioning websites with friendly user interfaces. Some of the
widely used Web Development tools are as follows:
</p>
<h4>
<ul>
<li>GitHub </li>
<li>CodePen </li>
<li>AngularJS </li>
<li>TypeScript</li>
<li> Sketch </li>
<li>JQuery </li>
<li>Sublime Text</li>
<li>Visual stdio code</li>
<li>Bootstrap</li>
<li>Grunt</li>
</ul>
</h4>
</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card d-inline-block mr-2 shadow">
<div class="card-img-top">
<img src="pro.jpg" class="img-fluid rounded-circle w-50 p-4" alt="">
</div>
<div class="card-body">
<h3 class="card-title">web development Languages</h3>
<p>To communicate with other systems and computers and give them necessary instructions, programming languages are used. Developers have a plethora of languages to choose from to do the same.</p>
<h4 class="card-text">
<li>Python</li>
<li>Java</li>
<li>Ruby</li>
<li>JavaScript</li>
<li>Go</li>
<li>CoffeeScript</li>
<li>PHP</li>
<li>Swift</li>
<li>Objective-C</li>
</h4>
<a href="#" class="text-secondary text-decoration-none">Go somewhere</a>
<p class="text-black-50">CEO at Google</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-12 text-center">
<div class="card mr-2 d-inline-block shadow-lg">
<div class="card-img-top">
<img src="boot.jpg" class="img-fluid border-radius p-4" alt="">
</div>
<div class="card-body">
<h2 class="card-title">Bootstrap</h2>
<p class="card-text">
<h3>Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created
by (and for) Twitter.</h3>
<a href="#" class="text-secondary text-decoration-none">Go somewhere</a>
<p class="text-black-50">CEO at Google</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="container-fluid p-0">
<div class="row text-left">
<div class="col-md-5 col-sm-5">
<h4 class="text-light">About us</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum maxime ea similique illum corrupti</p>
<p class="pt-4 text-muted">Copyright ©2019 All rights reserved | This template is made with by
<span> Daily Tuition</span>
</p>
</div>
<div class="col-md-5 col-sm-12">
<h3 class="text-light">Notifications</h3>
<p class="text-muted">For other Updates</p>
<form class="form-inline">
<div class="col pl-0">
<div class="input-group pr-5">
<label for="inlineFormInputGroupUsername2"></label>
<div>
<input type="text" class="form-control bg-dark text-white" id="inlineFormInputGroupUsername2" placeholder="Email">
</div>
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-arrow-right"></i>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-2 col-sm-12">
<h4 class="text-light">Follow Us</h4>
<p class="text-muted">Let us be social</p>
<div class="column text-light">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="./main.js"></script>
</body>
</html>