-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (106 loc) · 5.13 KB
/
index.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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--Stylesheet-->
<link rel="stylesheet" href="styles.css">
<style>
</style>
<title>Techopedia - Bootstrap</title>
</head>
<body>
<div class="container" style="width: auto;">
<div class="mainDiv">
<!--Code for navigation pane begins here-->
<nav class="navbar navbar-expand-md navbar-light">
<a class="logo" href="index.html">TECHOPEDIA</a>
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Bootstrap.html">Bootstrap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="markdown.html">Markdown</a>
</li>
<li class="nav-item">
<a class="nav-link" href="nodejs.html">Node.JS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="jquery.html">jQuery</a>
</li>
</ul>
</div>
</div>
</nav>
<!--Code for navigation pane ends here-->
<hr class="m5">
<!--Code for introduction content begins here-->
<div class="container">
<h2>TECHOPEDIA - A LEARNING PORTAL OF WEB TECHNOLOGIES</h2><br/>
<font id="bluefont"><p>Web development comes with a huge set of rules and techniques every website developer should know about. If you want a website to look and function as you wish them to, you need to get familiar with web technologies that will help you achieve your goal.</p>
<p>This website presents to you an introduction to some web technologies, namely Bootstrap, Node.js, jQuery and Markdown, with their basic concepts.</p></font>
</div>
<!--Code for introduction content ends here-->
<hr class="m5">
<!--Code for image gallery begins here-->
<div>
<div class="responsive">
<div class="gallery" align="center">
<a target="_blank" href="Bootstrap.html">
<img src="bootstrap.png" alt="Bootstrap">
</a>
<div class="desc">Bootstrap is the most popular CSS framework that is used for developing responsive websites... <em>Click on the icon to read more</em></div>
</div>
</div>
<div class="responsive" align="center">
<div class="gallery">
<a target="_blank" href="jquery.html">
<img src="jquery.png" alt="JQuery">
</a>
<div class="desc">jQuery is an open-source JavaScript library that allows web designers to use the contained tools to implement functionality without writing all of the code for it... <em>Click on the icon to read more</em></div>
</div>
</div>
<div class="responsive" align="center">
<div class="gallery">
<a target="_blank" href="nodejs.html">
<img src="nodejs.png" alt="Node.js">
</a>
<div class="desc">Node.js is an open source, cross-platform runtime environment for developing server-side and networking applications... <em>Click on the icon to read more</em></div>
</div>
</div>
<div class="responsive" align="center">
<div class="gallery">
<a target="_blank" href="markdown.html">
<img src="markdown.png" alt="markdown">
</a>
<div class="desc">Markdown is a basic markup language that is mostly used for simple documents that do not need to look fancy... <em>Click on the icon to read more</em></div>
</div>
</div>
<div class="clearfix"></div>
</div>
<hr>
<!--Code for Image Gallery ends here -->
<!-- Footer -->
<footer align="center">
<div class="container">© Design by: David, John, Steven and Shazna
</div>
</footer>
<!--Bootstrap Javascript-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></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>
</body>
</html>