Skip to content

Commit d87df08

Browse files
s-ayush2903s-ayush2903
authored
Merge pull request #96 from Vishal-raj-1/master
adding icons in contact page
2 parents 9c4dd97 + 89a766f commit d87df08

File tree

2 files changed

+184
-89
lines changed

2 files changed

+184
-89
lines changed

‎contact.html‎

Lines changed: 111 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<meta charset="utf-8">
1515
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1616
<title>Contact | NJACK Winter of Code</title>
17-
17+
1818
<meta name="description" content="NWoC is a program that helps students understand the paradigm of Open Source contribution and gives them real world software development experience." />
1919
<meta NAME="Keywords" CONTENT="Njack,winter,code,nwoc,iit,iitp,patna,indian institute of technology">
2020
<!-- Schema.org markup for Google+ -->
@@ -30,7 +30,7 @@
3030
<meta name="twitter:creator" content="@njackiitp">
3131
<!-- Twitter summary card with large image must be at least 280x150px -->
3232
<meta name="twitter:image:src" content="https://njackwinterofcode.github.io/nwocLogo.jpg">
33-
33+
3434
<!-- Open Graph data -->
3535
<meta property="og:title" content="NJACK Winter of Code" />
3636
<meta property="og:type" content="article" />
@@ -50,14 +50,13 @@
5050
<link rel="stylesheet" href="style.css" />
5151
<script defer src="/materialjs/material.min.js"></script>
5252
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
53-
53+
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
5454
<script type="text/javascript">
5555
$(document).ready(function() {
5656
$('.nwoc-drawer-item').click(function() {
5757
$( '.mdl-layout__drawer, .mdl-layout__obfuscator' ).removeClass( 'is-visible' );
5858
});
59-
});
60-
</script>
59+
</script>
6160
</head>
6261
<body>
6362
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--no-desktop-drawer-button">
@@ -80,7 +79,6 @@
8079
</nav>
8180
</div>
8281
</header>
83-
8482
<div class="mdl-layout__drawer nwoc-drawer">
8583
<div class="nwoc-close-button-div">
8684
<button class="mdl-button mdl-js-button nwoc-close-button nwoc-drawer-item">
@@ -97,96 +95,124 @@
9795
<a class="mdl-navigation__link nwoc-menu-item" href="/timeline.html">Timeline</a>
9896
</nav>
9997
</div>
100-
101-
<main class="mdl-layout__content">
102-
<div class="nwoc-content">
103-
<h3>NJACK</h3>
104-
<div class="mdl-grid nwoc-manuals">
105-
<div class="mdl-cell mdl-cell--4-col">
106-
<img src="/images/njack-logo.jpg" class="nwoc-contact"/>
107-
</div>
108-
<div class="mdl-cell mdl-cell--8-col mdl-cell--hide-phone">
109-
<p>Email: <a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
110-
<p>Email: <a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
111-
<p>Facebook: <a href="https://facebook.com/njack.iitp" target="_blank">https://www.facebook.com/njack.iitp</a></p>
112-
<p>Gitter Chat: <a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank">https://gitter.im/NJACKWinterOfCode/NWoC2020</a></p>
113-
<p>Twitter: <a href="https://twitter.com/njackiitp" target="_blank">https://twitter.com/njackiitp</a></p>
114-
<p>GitHub: <a href="https://github.com/Njack-IITP" target="_blank">https://github.com/Njack-IITP</a></p>
115-
</div>
116-
<div class="mdl-cell mdl-cell--8-col mdl-cell--hide-tablet mdl-cell--hide-desktop">
117-
<p>Email: <a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
118-
<p>Email:<br><a href="mailto:[email protected]" target="_blank">[email protected]</a>, <a href="mailto:[email protected]" target="_blank">[email protected]</a></p>
119-
<p>Facebook:<br><a href="https://facebook.com/njack.iitp" target="_blank">https://www.facebook.com/njack.iitp</a></p>
120-
<p>Gitter Chat:<br><a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank">https://gitter.im/NJACKWinterOfCode/NWoC2020</a></p>
121-
<p>Twitter:<br><a href="https://twitter.com/njackiitp" target="_blank">https://twitter.com/njackiitp</a></p>
122-
<p>GitHub:<br><a href="https://github.com/Njack-IITP" target="_blank">https://github.com/Njack-IITP</a></p>
123-
</div>
124-
98+
<main class="mdl-layout__content">
99+
<div class="nwoc-content">
100+
<h3 class="contact-heading">NJACK</h3>
101+
<div class="mdl-grid nwoc-manuals">
102+
<div class="mdl-cell mdl-cell--4-col">
103+
<img src="/images/njack-logo.jpg" class="nwoc-contact" />
104+
</div>
105+
<div class="mdl-cell mdl-cell--8-col mdl-cell--hide-phone social-links">
106+
<a href="mailto:[email protected]" target="_blank"><i class="far fa-envelope"></i></a>
107+
<a href="https://twitter.com/njackiitp" target="_blank"><i class="fab fa-twitter"></i></a>
108+
<a href="https://facebook.com/njack.iitp" target="_blank"><i class="fab fa-facebook-f"></i></a>
109+
<a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank"><i class="fab fa-gitter"></i></a>
110+
<a href="https://github.com/Njack-IITP" target="_blank"><i class="fab fa-github"></i></a>
111+
<a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope-square"></i></a>
112+
</div>
113+
<div class="mdl-cell mdl-cell--8-col mdl-cell--hide-tablet mdl-cell--hide-desktop social-links">
114+
<a href="mailto:[email protected]" target="_blank"><i class="far fa-envelope"></i></a>
115+
<a href="https://twitter.com/njackiitp" target="_blank"><i class="fab fa-twitter"></i></a>
116+
<a href="https://facebook.com/njack.iitp" target="_blank"><i class="fab fa-facebook-f"></i></a>
117+
<a href="https://gitter.im/NJACKWinterOfCode/NWoC2020" target="_blank"><i class="fab fa-gitter"></i></a>
118+
<a href="https://github.com/Njack-IITP" target="_blank"><i class="fab fa-github"></i></a>
119+
<a href="mailto:[email protected]" target="_blank"><i class="fas fa-envelope-square"></i></a>
125120
</div>
126121

127-
<h3>NWoC 2020 Organizing Committee</h3>
128-
<div class="mdl-grid nwoc-manuals">
129-
<div class="mdl-cell mdl-cell--6-col">
130-
<img src="https://avatars2.githubusercontent.com/u/56556919?s=400&u=ec3c32f3153368768726c092423cfc3b0fa69ff9&v=4" class="nwoc-contact"/>
131-
<p style="margin-top:8px">Ayush Shrivastava<br><a href="https://github.com/s-ayush2903" target="_blank">@s-ayush2903</a>
132-
<br><a href="https://www.facebook.com/stvayush">Facebook</a></p>
122+
</div>
123+
124+
<h3 class="contact-heading">NWoC 2020 Organizing Committee</h3>
125+
<div class="mdl-grid nwoc-manuals">
126+
<div class="mdl-cell mdl-cell--6-col">
127+
<img
128+
src="https://avatars2.githubusercontent.com/u/56556919?s=400&u=ec3c32f3153368768726c092423cfc3b0fa69ff9&v=4"
129+
class="nwoc-contact" />
130+
<p>Ayush Shrivastava</p>
131+
<div class="social-links member-links">
132+
<a href="https://github.com/s-ayush2903" target="_blank"><i class="fab fa-github"></i></a>
133+
<a href="https://www.facebook.com/stvayush"><i class="fab fa-facebook-f"></i></a>
133134
</div>
134-
<div class="mdl-cell mdl-cell--6-col">
135-
<img src="https://avatars1.githubusercontent.com/u/54908624?s=400&u=62e7d21699fa602487b27ff790a4afa5f7b1f723&v=4" class="nwoc-contact"/>
136-
<p style="margin-top:8px">Ankit Das<br><a href="https://github.com/Ankit7Das" target="_blank">@Ankit7Das</a>
137-
<br><a href="https://m.facebook.com/profile.php?id=100006183317301">Facebook</a></p>
135+
</div>
136+
<div class="mdl-cell mdl-cell--6-col">
137+
<img
138+
src="https://avatars1.githubusercontent.com/u/54908624?s=400&u=62e7d21699fa602487b27ff790a4afa5f7b1f723&v=4"
139+
class="nwoc-contact" />
140+
<p>Ankit Das</p>
141+
<div class="social-links member-links">
142+
<a href="https://github.com/Ankit7Das" target="_blank"><i class="fab fa-github"></i></a>
143+
<a href="https://m.facebook.com/profile.php?id=100006183317301"><i class="fab fa-facebook-f"></i></a>
138144
</div>
139-
<div class="mdl-cell mdl-cell--6-col">
140-
<img src="https://avatars1.githubusercontent.com/u/54908756?s=400&u=67daa7738f89aa91806c866250a8196fba42ca24&v=4" class="nwoc-contact"/>
141-
<p style="margin-top:8px">Mehuli Pal<br><a href="https://github.com/Mehulipal" target="_blank">@Mehulipal</a>
142-
<br><a href="https://www.facebook.com/pmehuli">Facebook</a></p>
145+
</div>
146+
<div class="mdl-cell mdl-cell--6-col">
147+
<img
148+
src="https://avatars1.githubusercontent.com/u/54908756?s=400&u=67daa7738f89aa91806c866250a8196fba42ca24&v=4"
149+
class="nwoc-contact" />
150+
<p>Mehuli Pal</p>
151+
<div class="social-links member-links">
152+
<a href="https://github.com/Mehulipal" target="_blank"><i class="fab fa-github"></i></a>
153+
<a href="https://www.facebook.com/pmehuli"><i class="fab fa-facebook-f"></i></a>
143154
</div>
144-
<div class="mdl-cell mdl-cell--6-col">
145-
<img src="https://avatars1.githubusercontent.com/u/56231576?s=400&u=2ec922ab0327973905c73b70b3e4bbdd6f3c9012&v=4" class="nwoc-contact"/>
146-
<p style="margin-top:8px">Priyanka Sachan<br><a href="https://github.com/Priyanka-Sachan" target="_blank">@Priyanka-Sachan</a>
147-
<br><a href="https://www.facebook.com/priyanka.sachan.77964201">Facebook</a></p>
155+
</div>
156+
<div class="mdl-cell mdl-cell--6-col">
157+
<img
158+
src="https://avatars1.githubusercontent.com/u/56231576?s=400&u=2ec922ab0327973905c73b70b3e4bbdd6f3c9012&v=4"
159+
class="nwoc-contact" />
160+
<p>Priyanka Sachan</p>
161+
<div class="social-links member-links">
162+
<a href="https://github.com/Priyanka-Sachan" target="_blank"><i class="fab fa-github"></i></a>
163+
<a href="https://www.facebook.com/priyanka.sachan.77964201"><i class="fab fa-facebook-f"></i></a>
148164
</div>
149-
<div class="mdl-cell mdl-cell--6-col">
150-
<img src="./assets/profile/madhur.jpg" class="nwoc-contact"/>
151-
<p style="margin-top:8px">Madhur Malpani<br><a href="https://github.com/madris112" target="_blank">@madris112</a>
152-
<br><a href="https://www.facebook.com/madhur.nilu">Facebook</a></p>
165+
</div>
166+
<div class="mdl-cell mdl-cell--6-col">
167+
<img src="./assets/profile/madhur.jpg" class="nwoc-contact" />
168+
<p>Madhur Malpani</p>
169+
<div class="social-links member-links">
170+
<a href="https://github.com/madris112" target="_blank"><i class="fab fa-github"></i></a>
171+
<a href="https://www.facebook.com/madhur.nilu"><i class="fab fa-facebook-f"></i></a>
153172
</div>
154173
</div>
174+
</div>
155175

156-
<h3>NWoC Advisory Committee</h3>
157-
<div class="mdl-grid nwoc-manuals">
158-
<div class="mdl-cell mdl-cell--6-col">
159-
<img src="https://avatars2.githubusercontent.com/u/43786728?s=400&v=4" class="nwoc-contact"/>
160-
<p style="margin-top:8px">Ashwani Yadav<br><a href="https://github.com/ashwaniYDV" target="_blank">@ashwaniYDV</a>
161-
<br><a href="https://www.facebook.com/ashwani.yadav9499">Facebook</a></p>
176+
<h3 class="contact-heading">NWoC Advisory Committee</h3>
177+
<div class="mdl-grid nwoc-manuals">
178+
<div class="mdl-cell mdl-cell--6-col">
179+
<img src="https://avatars2.githubusercontent.com/u/43786728?s=400&v=4" class="nwoc-contact" />
180+
<p>Ashwani Yadav</p>
181+
<div class="social-links member-links">
182+
<a href="https://github.com/ashwaniYDV" target="_blank"><i class="fab fa-github"></i></a>
183+
<a href="https://www.facebook.com/ashwani.yadav9499"><i class="fab fa-facebook-f"></i></a>
162184
</div>
163-
<div class="mdl-cell mdl-cell--6-col">
164-
<img src="https://avatars3.githubusercontent.com/u/42909612?s=460&v=4" class="nwoc-contact"/>
165-
<p style="margin-top:8px">Anmol Chaddha<br><a href="https://github.com/chanmol1999" target="_blank">@chanmol1999</a>
166-
<br><a href="https://www.facebook.com/anmol.chaddha.125">Facebook</a></p>
185+
</div>
186+
<div class="mdl-cell mdl-cell--6-col">
187+
<img src="https://avatars3.githubusercontent.com/u/42909612?s=460&v=4" class="nwoc-contact" />
188+
<p>Anmol Chaddha</p>
189+
<div class="social-links member-links">
190+
<a href="https://github.com/chanmol1999" target="_blank"><i class="fab fa-github"></i></a>
191+
<a href="https://www.facebook.com/anmol.chaddha.125"><i class="fab fa-facebook-f"></i></a>
167192
</div>
168193
</div>
169-
170194
</div>
171-
<footer>
172-
<svg viewBox="0 0 120 28">
173-
<defs>
174-
<filter id="goo">
175-
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
176-
<feColorMatrix in="blur" mode="matrix" values="
195+
196+
</div>
197+
<footer>
198+
<svg viewBox="0 0 120 28">
199+
<defs>
200+
<filter id="goo">
201+
<feGaussianBlur in="SourceGraphic" stdDeviation="1" result="blur" />
202+
<feColorMatrix in="blur" mode="matrix" values="
177203
1 0 0 0 0
178204
0 1 0 0 0
179205
0 0 1 0 0
180206
0 0 0 13 -9" result="goo" />
181-
<xfeBlend in="SourceGraphic" in2="goo" />
207+
<xfeBlend in="SourceGraphic" in2="goo" />
182208
</filter>
183209
<path id="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
184210
</defs>
185-
211+
186212
<use id="wave3" class="wave" xlink:href="#wave" x="0" y="-2" ></use>
187213
<use id="wave2" class="wave" xlink:href="#wave" x="0" y="0" ></use>
188-
189-
214+
215+
190216
<g class="gooeff" filter="url(#goo)">
191217
<circle class="drop drop1" cx="20" cy="2" r="8.8" />
192218
<circle class="drop drop2" cx="25" cy="2.5" r="7.5" />
@@ -200,7 +226,7 @@ <h3>NWoC Advisory Committee</h3>
200226
<circle class="drop drop4" cx="3" cy="4.4" r="8.8" />
201227
<circle class="drop drop5" cx="7" cy="4.1" r="7.5" />
202228
<circle class="drop drop6" cx="10" cy="4.3" r="9.2" />
203-
229+
204230
<circle class="drop drop1" cx="1.2" cy="5.4" r="8.8" />
205231
<circle class="drop drop2" cx="5.2" cy="5.1" r="7.5" />
206232
<circle class="drop drop3" cx="10.2" cy="5.3" r="9.2" />
@@ -213,7 +239,7 @@ <h3>NWoC Advisory Committee</h3>
213239
<path id="wave1" class="wave" d="M 0,10 C 30,10 30,15 60,15 90,15 90,10 120,10 150,10 150,15 180,15 210,15 210,10 240,10 v 28 h -240 z" />
214240
</g>
215241
</g -->
216-
242+
217243
</svg>
218244
<div class = "footer-text2">
219245
<div>
@@ -226,10 +252,9 @@ <h3>NWoC Advisory Committee</h3>
226252
<li><a href="https://github.com/Njack-IITP/" target="_blank">GitHub</a></li>
227253
</ul>
228254
</div>
229-
</div>
230-
<!-- <div>done with fun - by &copy;<a href="www.chaba.de">Uwe Chardon</a></div> -->
231-
</footer>
232-
<!-- <footer class="mdl-mini-footer">
255+
<!-- <div>done with fun - by &copy;<a href="www.chaba.de">Uwe Chardon</a></div> -->
256+
</footer>
257+
<!-- <footer class="mdl-mini-footer">
233258
<div class="nwoc-footer">
234259
<div class="mdl-mini-footer__left-section">
235260
<div class="mdl-logo">© NJACK, IIT Patna 2020</div>
@@ -242,8 +267,9 @@ <h3>NWoC Advisory Committee</h3>
242267
</div>
243268
</div>
244269
</footer> -->
245-
246-
</main>
247-
</div>
248-
</body>
249-
</html>
270+
271+
</main>
272+
</div>
273+
</body>
274+
275+
</html>

‎style.css‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ h2,h3 {
5050

5151
a {
5252
color: #1976D2;
53+
text-decoration: none;
5354
}
5455

5556
.nwoc-header {
@@ -363,10 +364,78 @@ a {
363364
margin: 0 auto;
364365
}
365366

367+
/* Contact Page Start Here */
366368
.nwoc-contact {
367369
width: 160px;
368370
}
369371

372+
.contact-heading{
373+
text-align: center;
374+
}
375+
376+
.nwoc-contact + p {
377+
margin-top: 15px;
378+
margin-bottom: 0;
379+
font-size: 18px;
380+
text-align: center;
381+
}
382+
383+
img.nwoc-contact{
384+
display:block;
385+
width: 50%;
386+
margin: 0 auto;
387+
}
388+
389+
.social-links{
390+
display: flex;
391+
flex-wrap: wrap;
392+
justify-content: center;
393+
align-items: center;
394+
}
395+
396+
.social-links a{
397+
font-size: 1.5em;
398+
padding: 12px;
399+
background-color: white;
400+
border: 2px solid rgb(167, 218, 233);
401+
border-radius: 50%;
402+
margin: 4px;
403+
transform: scale(1);
404+
transition: all 0.1s ease;
405+
}
406+
407+
.member-links a{
408+
font-size: 16px;
409+
padding: 8px;
410+
}
411+
412+
.social-links a:hover{
413+
transform: scale(1.1);
414+
border: 2px solid rgb(129, 204, 227);
415+
}
416+
417+
.fa-facebook-f{
418+
color: #3b5998;
419+
margin: 1px .3em;
420+
}
421+
422+
.fa-twitter{
423+
color: #1DA1F2;
424+
}
425+
426+
.fa-github{
427+
color: black;
428+
}
429+
430+
.fa-gitter{
431+
color: #35dd02;
432+
margin: 1px 2px;
433+
}
434+
435+
.fa-envelope{
436+
color: #ca6363;
437+
}
438+
370439
@media screen and (max-width: 960px) {
371440
.nwoc-landing-header {
372441
height: 570px;
@@ -507,9 +576,9 @@ svg {
507576
transform-box: fill-box;
508577
transform-origin: 50% 100%;
509578
}
510-
.drop1 {
579+
/* .drop1 {
511580
512-
}
581+
} */
513582
.drop2 {
514583
animation-delay: 3s;
515584
animation-duration:3s;
@@ -766,8 +835,8 @@ footer p strong {
766835
}
767836

768837

769-
.about-me-img img {
770-
}
838+
/* .about-me-img img {
839+
} */
771840

772841

773842
.authorWindow{

0 commit comments

Comments
 (0)