Skip to content

Commit fe83dab

Browse files
fliptrailfliptrail
committed
add stats
1 parent 988c182 commit fe83dab

File tree

2 files changed

+317
-1
lines changed

2 files changed

+317
-1
lines changed

‎index.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">
4747
<link rel="canonical" href="https://njackwinterofcode.github.io"/>
4848
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto">
49+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&amp;amp">
50+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
4951
<link rel="stylesheet" href="/materialjs/material.min.css" />
5052
<link rel="stylesheet" href="style.css" />
5153
<script defer src="/materialjs/material.min.js"></script>
@@ -234,6 +236,47 @@ <h3>Timeline</h3>
234236
</table>
235237
<br><br>
236238
<p>Follow NJACK, IIT Patna on <a href="https://www.facebook.com/njack.iitp/" target="_blank">Facebook</a> and <a href="https://twitter.com/njackiitp" target="_blank">Twitter</a>. Join the <a href="https://gitter.im/NWoC/NWoC2018" target="_blank">Gitter</a> channel for updates.</p>
239+
<div class="sectiontitle">
240+
<h3 style="text-align: left">NWoC 2018 Statistics</h3>
241+
</div>
242+
<div id="projectFacts" class="sectionClass">
243+
<div class="fullWidth eight columns">
244+
<div class="projectFactsWrap ">
245+
<div class="item wow fadeInUpBig animated animated" data-number="40" style="visibility: visible;">
246+
<i class="fa fa-code"></i>
247+
<br>
248+
<br>
249+
<p id="number1" class="number">40+</p>
250+
251+
<p>Projects done</p>
252+
</div>
253+
<div class="item wow fadeInUpBig animated animated" data-number="500" style="visibility: visible;">
254+
<i class="fa fa-bug"></i>
255+
<br>
256+
<br>
257+
<p id="number2" class="number">500+</p>
258+
259+
<p>Issues created</p>
260+
</div>
261+
<div class="item wow fadeInUpBig animated animated" data-number="700" style="visibility: visible;">
262+
<i class="fa fa-check"></i>
263+
<br>
264+
<br>
265+
<p id="number3" class="number">700+</p>
266+
267+
<p>Pull Requests</p>
268+
</div>
269+
<div class="item wow fadeInUpBig animated animated" data-number="255" style="visibility: visible;">
270+
<i class="fa fa-university"></i>
271+
<br>
272+
<br>
273+
<p id="number4" class="number">255+</p>
274+
275+
<p>Universities</p>
276+
</div>
277+
</div>
278+
</div>
279+
</div>
237280

238281
<h3>Projects</h3>
239282
<p>NWoC 2018 had over 40 projects to work upon. We had projects ranging from web development to Machine Learning. For the complete list of projects in NWoC 2018, please visit the <a href="/projects.html">Projects</a> page.</p>
@@ -334,4 +377,44 @@ <h4>Tell your friends about NWoC</h4>
334377
</main>
335378
</div>
336379
</body>
380+
<script>
381+
382+
$.fn.jQuerySimpleCounter = function( options ) {
383+
var settings = $.extend({
384+
start: 0,
385+
end: 100,
386+
easing: 'swing',
387+
duration: 400,
388+
complete: ''
389+
}, options );
390+
391+
var thisElement = $(this);
392+
393+
$({count: settings.start}).animate({count: settings.end}, {
394+
duration: settings.duration,
395+
easing: settings.easing,
396+
step: function() {
397+
var mathCount = Math.ceil(this.count);
398+
thisElement.text(mathCount);
399+
},
400+
complete: settings.complete
401+
});
402+
};
403+
404+
405+
$('#number1').jQuerySimpleCounter({end: 40,duration: 3000});
406+
$('#number2').jQuerySimpleCounter({end: 500,duration: 3000});
407+
$('#number3').jQuerySimpleCounter({end: 700,duration: 3000});
408+
$('#number4').jQuerySimpleCounter({end: 255,duration: 3000});
409+
410+
411+
412+
/* AUTHOR LINK */
413+
$('.about-me-img').hover(function(){
414+
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
415+
}, function(){
416+
$('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans');
417+
});
418+
419+
</script>
337420
</html>

‎style.css‎

Lines changed: 234 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -477,4 +477,237 @@ svg {
477477
color:white;
478478
display:inline;
479479
padding:10px;
480-
}
480+
}
481+
482+
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);
483+
484+
/* * {
485+
-webkit-box-sizing: border-box;
486+
-moz-box-sizing: border-box;
487+
box-sizing: border-box;
488+
}
489+
490+
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td {
491+
margin: 0;
492+
padding: 0;
493+
font-size: 13px;
494+
direction: ltr;
495+
} */
496+
497+
.sectionClass {
498+
padding: 20px 0px 50px 0px;
499+
position: relative;
500+
display: block;
501+
}
502+
503+
.fullWidth {
504+
width: 100% !important;
505+
display: table;
506+
float: none;
507+
padding: 0;
508+
min-height: 1px;
509+
height: 100%;
510+
position: relative;
511+
}
512+
513+
514+
.sectiontitle {
515+
background-position: center;
516+
margin: 30px 0 0px;
517+
text-align: center;
518+
min-height: 20px;
519+
}
520+
521+
.sectiontitle h2 {
522+
font-size: 30px;
523+
color: #222;
524+
margin-bottom: 0px;
525+
padding-right: 10px;
526+
padding-left: 10px;
527+
}
528+
529+
530+
.headerLine {
531+
width: 160px;
532+
height: 2px;
533+
display: inline-block;
534+
background: #101F2E;
535+
}
536+
537+
538+
.projectFactsWrap{
539+
display: flex;
540+
margin-top: 30px;
541+
flex-direction: row;
542+
flex-wrap: wrap;
543+
}
544+
545+
546+
#projectFacts .fullWidth{
547+
padding: 0;
548+
}
549+
550+
.projectFactsWrap .item{
551+
width: 25%;
552+
height: 100%;
553+
padding: 50px 0px;
554+
text-align: center;
555+
}
556+
557+
.projectFactsWrap .item:nth-child(1){
558+
background: rgb(16, 31, 46);
559+
}
560+
561+
.projectFactsWrap .item:nth-child(2){
562+
background: rgb(18, 34, 51);
563+
}
564+
565+
.projectFactsWrap .item:nth-child(3){
566+
background: rgb(21, 38, 56);
567+
}
568+
569+
.projectFactsWrap .item:nth-child(4){
570+
background: rgb(23, 44, 66);
571+
}
572+
573+
.projectFactsWrap .item p.number{
574+
font-size: 40px;
575+
padding: 0;
576+
font-weight: bold;
577+
}
578+
579+
.projectFactsWrap .item p{
580+
color: rgba(255, 255, 255, 0.8);
581+
font-size: 18px;
582+
margin: 0;
583+
padding: 10px;
584+
font-family: 'Open Sans';
585+
}
586+
587+
588+
.projectFactsWrap .item span{
589+
width: 60px;
590+
background: rgba(255, 255, 255, 0.8);
591+
height: 2px;
592+
display: block;
593+
margin: 0 auto;
594+
}
595+
596+
597+
.projectFactsWrap .item i{
598+
vertical-align: middle;
599+
font-size: 50px;
600+
color: rgba(255, 255, 255, 0.8);
601+
}
602+
603+
604+
.projectFactsWrap .item:hover i, .projectFactsWrap .item:hover p{
605+
color: white;
606+
}
607+
608+
.projectFactsWrap .item:hover span{
609+
background: white;
610+
}
611+
612+
@media (max-width: 786px){
613+
.projectFactsWrap .item {
614+
flex: 0 0 50%;
615+
}
616+
}
617+
618+
/* AUTHOR LINK */
619+
620+
621+
footer{
622+
z-index: 100;
623+
padding-top: 50px;
624+
padding-bottom: 50px;
625+
width: 100%;
626+
bottom: 0;
627+
left: 0;
628+
}
629+
630+
footer p {
631+
color: rgba(255, 255, 255, 0.8);
632+
font-size: 16px;
633+
opacity: 0;
634+
font-family: 'Open Sans';
635+
width: 100%;
636+
word-wrap: break-word;
637+
line-height: 25px;
638+
-webkit-transform: translateX(-200px);
639+
transform: translateX(-200px);
640+
margin: 0;
641+
-webkit-transition: all 250ms ease;
642+
-moz-transition: all 250ms ease;
643+
transition: all 250ms ease;
644+
}
645+
646+
footer .authorWindow a{
647+
color: white;
648+
text-decoration: none;
649+
}
650+
651+
footer p strong {
652+
color: rgba(255, 255, 255, 0.9);
653+
}
654+
655+
.about-me-img {
656+
width: 120px;
657+
height: 120px;
658+
left: 10px;
659+
/* bottom: 30px; */
660+
position: relative;
661+
border-radius: 100px;
662+
}
663+
664+
665+
.about-me-img img {
666+
}
667+
668+
669+
.authorWindow{
670+
width: 600px;
671+
background: #75439a;
672+
padding: 22px 20px 22px 20px;
673+
border-radius: 5px;
674+
overflow: hidden;
675+
}
676+
677+
.authorWindowWrapper{
678+
display: none;
679+
left: 110px;
680+
top: 0;
681+
padding-left: 25px;
682+
position: absolute;
683+
}
684+
685+
686+
687+
688+
689+
.trans{
690+
opacity: 1;
691+
-webkit-transform: translateX(0px);
692+
transform: translateX(0px);
693+
-webkit-transition: all 500ms ease;
694+
-moz-transition: all 500ms ease;
695+
transition: all 500ms ease;
696+
}
697+
698+
@media screen and (max-width: 768px) {
699+
.authorWindow{
700+
width: 210px;
701+
}
702+
703+
.authorWindowWrapper{
704+
bottom: -170px;
705+
margin-bottom: 20px;
706+
}
707+
708+
footer p{
709+
font-size: 14px;
710+
}
711+
}
712+
713+

0 commit comments

Comments
 (0)