chasinginfinity.github.io/index.html at master · chasinginfinity/chasinginfinity.github.io · GitHub

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
<html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    </head>
	<body>
		<nav class="grey darken-4">
			<div class="nav-wrapper container">
				<a href="#" class="brand-logo">Chasing Infinity</a>
				<ul id="nav-mobile" class="right hide-on-med-and-down">
					<li><a href="#about">About</a></li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</div>
		</nav>
		<div id="particles-js"></div>
		<div class="container" style="z-index: 999; position: relative; margin-top: 150px; text-align: center;">
			<h2 class="white-text">Welcome !</h2>
		</div>
	</body>
	<footer class="page-footer grey darken-4" style="width: 100%; padding: 0px; position: absolute; z-index: 999; bottom: 0px;">
		<div class="footer-copyright">
			<div class="container">
				2014 Copyright Text
				<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
			</div>
		</div>
	</footer>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script>
		particlesJS("particles-js", {"particles":{"number":{"value":120,"density":{"enable":true,"value_area":1000}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":4,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.8611624036367547,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":5,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":165.60815454552974,"color":"#c5beff","opacity":0.6210305795457366,"width":0.8280407727276486},"move":{"enable":true,"speed":3,"direction":"none","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":true,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":false,"mode":"repulse"},"onclick":{"enable":true,"mode":"repulse"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});

        $(document).ready(function(){
          // Init Carousel
          $('.carousel').carousel({
            dist: 0,
            duration: 1000,
            padding: 50,
          });
          autoplay();
          function autoplay() {
              $('.carousel').carousel('next');
              setTimeout(autoplay, 2000);
          }

          // Init Carousel Slider
          $('.carousel.carousel-slider').carousel({fullWidth:true});

          // Fire off toast
          //Materialize.toast('Hello World', 3000);

          // Init Slider
          $('.slider').slider();

          // Init Modal
          $('.modal').modal();

          // Init Sidenav
          $('.button-collapse').sideNav();
        });

    </script>
    <style type="text/css">
    body {
    	background-color: #000000;
    }
    	#particles-js{ position:absolute; width: 100%; height: 100%; background-image: url(""); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
    }
    </style>

</html>