-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
279 lines (260 loc) · 16.1 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
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
<!DOCTYPE html>
<html>
<head>
<title>Divay Garg | Profile</title>
<meta name="theme-color" content="#212121">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<link href="assets\materialize\css\materialize.css" rel="stylesheet"/>
<link href="assets/css/style1.css" rel="stylesheet"/>
</head>
<body>
<header>
<nav class="grey darken-4" role="navigation">
<div class="nav-wrapper container">
<a href="#!" class="brand-logo">DIVAY GARG</a>
<a href="#" data-activates="mobile-demo" class="button-collapse right"><i class="fa fa-bars" aria-hidden="true"></i></a>
<ul class="right hide-on-med-and-down">
<li class="active"><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="side-nav light-blue accent-3" id="mobile-demo">
<li class="active-state"><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<section class="section sec-1 grey darken-4 white-text">
<div class="container ">
<br>
<h1 class="header center"> Hello World ! </h1>
<br>
<div class="row center valign-wrapper">
<div class="col s8 offset-s2 m4 l4 ">
<img src="assets/img/myPic.jpg" class="circle responsive-img animated fadeIn" alt="My Picture"/>
</div>
<div class="col s12 m8 l8" >
<div class="heading ">
<h3 ><i class="fa fa-chevron-left" aria-hidden="true"></i>
I am <span style="color: #1ABC9C "class="text-change"></span>
<i class="fa fa-chevron-right" aria-hidden="true"></i></h3>
</div>
</div>
</div>
<div class=" white-text center-align animated bounce infinite down">
<a href="#about">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
<div><i class="fa fa-chevron-down" aria-hidden="true"></i></div>
</a>
</div>
</div>
</section>
<section class="section sec-2 blue-grey darken-4" id="about">
<div class="container">
<h1 class="center light-blue-text text-lighten-1">About</h1>
<p class="description light-green-text" style="text-align: justify;">
I am a self-taught Front-End Web-developer.
I am currently pursuing B.Tech in Electronics and Communiction Engg. from Maharaja Agrasen Institute of Technology, Delhi.
Being a student of ECE, I am good in both electronics and web development. I am currently looking for an internship opportunity in web development. I am open to learn new languages and new technology.
<br>
I have learnt front end development from many online resources, especially from freeCodeCamp, which has motivated me for web development because of its interesting projects.
All the projects made are responsive and some front end projects use APIs for functionality. I love simplicity and minimalistic design. I am currently learning angular JS and working on material design.
<br><br>
I love coffee <i class="fa fa-coffee" aria-hidden="true"></i> and pizza.
I am open to meet over coffee and talk on any topic or collaborate on a project.
I am also open for doing non-profit projects.
</p>
<div class="skills-block ">
<h4 class="white-text skills-text"><Skills> </h4>
<div class="row">
<div class="col s6 m4 l4 center" >
<img src="assets/img/html5.png" class="skills html5">
</div>
<div class="col s6 m4 l4 center ">
<img src="assets/img/css.png" class="skills css"/>
</div>
<div class="col s6 m4 l4 center">
<img src="assets/img/js.png" class="skills js"/>
</div>
<div class="row">
<div class="col s6 m4 l4 center" >
<img src="assets/img/bootstrap.png" class="skills bs">
</div>
<div class="col s6 m4 l4 center ">
<img src="http://imgh.us/materializecss.svg" class="skills mcss"/>
</div>
<div class="col s6 m4 l4 center">
<img src="assets/img/cpp1.png" class="skills cpp"/>
</div>
</div>
</div>
<h4 class="white-text skills-text right-align"></Skills> </h4>
</div>
</section>
<section class="section sec-3 grey darken-4 white-text" id="portfolio">
<h1 class="header center">Portfolio</h1>
<br>
<div class="row">
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img src="assets/img/weatherApp.jpg" class="activator" >
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Weather App<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/zwZbYa" target="_blank">Divay / WeatherApp </a><p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Weather App<i class="material-icons right">close</i></span>
<p>This is a weather App which shows current weather based on location using IP address and uses Open Weather API. </p>
<p class="link"><a href="https://codepen.io/divay/full/zwZbYa" target="_blank">Divay / WeatherApp </a><p>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="assets/img/wikipediaViewer.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Wikipedia Viewer<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/qRozbZ" target="_blank">Divay / Wikipedia-Viewer </a></p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Wikipedia Viewer<i class="material-icons right">close</i></span>
<p>This is a wikipedia viewer app which uses wikipedia api to show results,10 results are shown at a time. </p>
<p class="link"><a href="https://codepen.io/divay/full/qRozbZ" target="_blank">Divay / Wikipedia-Viewer </a><p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="assets/img/tributePage.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Tribute Page<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/vmmPqL" target="_blank">Divay / Tribute page </a><p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Tribute Page<i class="material-icons right">close</i></span>
<p>This is tribute page to Ratan Tata which shows his timeline. </p>
<p class="link"><a href="https://codepen.io/divay/full/vmmPqL" target="_blank">Divay / Tribute page </a><p>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="assets/img/surveyForm.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Survey Form<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/QvgdOd" target="_blank">Divay / Survey Form</a><p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Survey Form<i class="material-icons right">close</i></span>
<p> A survey form for FCC challenge used only HTML5 and CSS3 (flexbox model). </p>
<p class="link"><a href="https://codepen.io/divay/full/QvgdOd" target="_blank">Divay / Survey Form</a><p>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="assets/img/randomWallpaper.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Random Wallpaper Generator<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/QdMLWL" target="_blank">Divay / Random Wallpaper </a></p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Random Wallpaper Generator<i class="material-icons right">close</i></span>
<p>This is a random shape generator and creates a wallpaper everytime when a button is pressed or a spacebar is hit</p>
<p class="link"><a href="https://codepen.io/divay/full/QdMLWL" target="_blank">Divay / Random Wallpaper </a><p>
</div>
</div>
</div>
<div class="col s12 m6 l6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="assets/img/randomQuote.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-lighten-5">Random Quote Generator<i class="fa fa-ellipsis-v" aria-hidden="true"></i></span>
<p class="link"><a href="https://codepen.io/divay/full/bgWeym" target="_blank">Divay / Random Quote </a><p>
</div>
<div class="card-reveal grey">
<span class="card-title grey-text text-lighten-5">Random Quote Generator<i class="material-icons right">close</i></span>
<p>A random quote generator which uses api from mashape to fetch a quote from api when a new quote button is pressed</p>
<p class="link"><a href="https://codepen.io/divay/full/bgWeym" target="_blank">Divay / Random Quote </a><p>
</div>
</div>
</div>
</div>
</section>
<section class="section sec-4 blue-grey darken-4" id="contact">
<h1 class="header center white-text"><i class="fa fa-address-card" aria-hidden="true" style="font-size: 36px"></i> Contact</h1>
<div class="container" style="margin-bottom:30px; padding-bottom:10px;">
<div class="card">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="first_name" type="text" class="validate">
<label for="first_name"><i class="fa fa-user-circle-o" ></i> First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Last Name</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email" data-error="wrong" data-success="right"><i class="fa fa-envelope" aria-hidden="true"></i> Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Message</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 center">
<button class="btn waves-effect waves-light" type="submit" name="action">Submit
<i class="fa fa-paper-plane" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="fa fa-commenting" aria-hidden="true"></i>
</a>
<ul>
<li><a class="btn-floating red" href="https://plus.google.com/+DivayGargDG" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a class="btn-floating black darken-1" href="https://github.com/divayg" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a></li>
<li><a class="btn-floating green" href="https://www.freecodecamp.com/divayg" target="_blank"><i class="fa fa-free-code-camp" aria-hidden="true"></i></a></li>
<li><a class="btn-floating grey lighten-2 black-text" href="https://codepen.io/divay/" target="_blank"><i class="fa fa-codepen" aria-hidden="true"></i></a></li>
<li><a class="btn-floating blue" href="https://www.facebook.com/Divay17" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="assets/materialize/js/materialize.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>