Skip to content

Pull Request for Hacktoberfest #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Pull Request for Hacktoberfest #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8c3f5c0
Particle JS added
da9ish May 19, 2017
2988f35
UI
da9ish Jun 7, 2017
e77eb06
UI Update
da9ish Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Resources/Login UI.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/Main UI.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/SignUp UI.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/UI.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Resources/UI.psd
View file
Open in desktop
Binary file not shown.
22 changes: 22 additions & 0 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
body{
margin: 0;
padding: 0;
}

#particles-js{
width: 100%;
height: 100%;
background-color: #121212;
background-image: url('');
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}

.particles-js-canvas-el{
position: absolute;
}

.landing{
z-index: 1;
}
10 changes: 7 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- meta for responsiveness -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- favicon -->
Expand All @@ -15,7 +16,7 @@
<meta name="theme-color" content="#141414" />
<style type="text/css">
.main-wrapper{
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("workspace.jpg");
/*background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("workspace.jpg");*/
background-position: center;
background-size: cover;
min-height: 100vh;
Expand All @@ -27,9 +28,9 @@
</head>
<body>

<div class="container-fluid main-wrapper valign-wrapper">
<div id="particles-js" class="container-fluid main-wrapper valign-wrapper">

<div class="valign row">
<div class="valign row landing">
<div class="row center-align ">
<img src="logo.jpg" class="circle responsive-img z-depth-5">
</div>
Expand All @@ -48,6 +49,9 @@ <h3 class="center-align white-text">
</div>
</div>

<script type="text/javascript" src="js/particles.js"></script>
<script src="js/app.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
</body>
</html>
133 changes: 133 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */

/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */

particlesJS.load('particles-js', 'particles.json', function() {
console.log('particles.js loaded - callback');
});


/* Otherwise just put the config content (json): */

particlesJS('particles-js',

{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"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": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"config_demo": {
"hide_card": false,
"background_color": "#12121",
"background_image": "",
"background_position": "50% 50%",
"background_repeat": "no-repeat",
"background_size": "cover"
}
}

);
Loading