NiceSnippets.com
Login page design with galaxy background usign bootstrap
This signin page design with galaxy background animation. In this login page you can see username and password. you can also add remember password checkbox. and we can display signin and forgot password link. and the logo of your admin panel or your brand logo.
We allows to free snippets of sign up page design in html , you can download full code of bootstrap signin form example layout. Here in this post i will give you example of bootstrap signup form with animation snippet and you will get simple code of html, css and jquery. In bootstrap login form design with galaxy background snippet i give you three tab with html, css and js, you can easily get code of login form bootstrap animation layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="login-section">
<div class="login-headding">
<img src="/demo/fake_news_icon_1x.png">
<h1>Login</h1>
</div>
<div class="form-part">
<form>
<input type="text" name="Username" placeholder="Username"><br>
<input type="password" name="Password" placeholder="Password"><br>
<div class="clearfix">
<label class="pull-left checkbox-inline"><input type="checkbox"> Remember me</label>
<a href="#" class="pull-right">Sing up?</a>
</div>
<input type="submit" value="Login">
<p><a href="#">Forgot Password?</a></p>
<span>@ Term & Condition 2017</span>
</form>
</div>
</div>
<div id="background">
<div class="login-section" data-parallaxify-range="300"></div>
</div>
</body>
</html>
body{
margin:0px;
background-color: #000;
font-family: 'Barlow Semi Condensed', sans-serif;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
-webkit-background-size: cover;
overflow: hidden;
}
.login-section{
width:30%;
margin:0 auto;
margin-top:100px;
position: relative;
border:2px solid #EB4960;
z-index: 1;
}
.login-headding{
background-color:#EB4960;
text-align: center;
padding:20px 0px 20px 0px;
}
.login-headding img{
width:100px;
height:100px;
border-radius:50%;
margin:-75px 0px 10px 0px;
border:2px solid #EB4960;
}
.login-headding h1{
margin:0px;
color:#fff;
font-size:30px;
}
.form-part{
padding:20px 20px 10px;
background-color:#EBEBEB;
}
input[type=text],[type=password]{
width: 100%;
padding:10px 20px;
margin: 5px 0;
border: 1px solid #ccc;
box-sizing: border-box;
}
input:focus{
border:1px solid #2387DD;
transition:0.5s;
}
input[type=submit] {
width: 100%;
background-color:#EB4960;
color: white;
padding: 10px 20px;
margin:10px 0;
border: none;
cursor: pointer;
font-size:18px;
}
.clearfix{
padding: 10px 0px;
}
.form-part p{
margin: 0px;
text-align: center;
margin-bottom:10px;
}
.form-part p a,.clearfix a{
text-decoration: none;
color:#0093D1;
}
.form-part p a{
font-size:18px;
}
.form-part span{
font-size:13px;
color:#525252;
}
.star{
position: absolute;
top: 300px;
left: 400px;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.75);
box-shadow: 0px 0px 10px rgba(255,255,255,0.75);
}
@media (min-width:320px) and (max-width:640px){
.login-section{
width:80%;
}
}
@media (min-width:768px) and (max-width:1024px){
.login-section{
width:80%;
}
}
$(function(){
$(document).ready(function() {
var i,
size,
color,
width = $(window).width(),
height = $(window).height();
for (i = 1; i <= 150; i++) {
size = Math.ceil(3*Math.random());
$('#background').append('<div class="star" data-parallaxify-range="' + Math.round(100*Math.random()) + '" style="top: ' + Math.round(height*Math.random()) + 'px; left: ' + Math.round(width*Math.random()) + 'px; width: ' + size + 'px; height: ' + size + 'px;"></div>');
}
for (i = 1; i <= 30; i++) {
size = Math.ceil(5*Math.random()) + 2;
$('#background').append('<div class="star" data-parallaxify-range="' + Math.round(400*Math.random()) + '" style="top: ' + Math.round(height*Math.random()) + 'px; left: ' + Math.round(width*Math.random()) + 'px; width: ' + size + 'px; height: ' + size + 'px;"></div>');
}
for (i = 1; i <= 15; i++) {
size = Math.ceil(5*Math.random()) + 5;
color = 'rgba(' + Math.round(256*Math.random()) + ', ' + Math.round(256*Math.random()) + ', ' + Math.round(256*Math.random()) + ', ' + (Math.round(100*Math.random())/100) + ')';
$('#background').append('<div class="star" data-parallaxify-range="' + Math.round(600*Math.random()) + '" style="top: ' + Math.round(height*Math.random()) + 'px; left: ' + Math.round(width*Math.random()) + 'px; width: ' + size + 'px; height: ' + size + 'px; background: ' + color + '; box-shadow: 0px 0px 10px ' + color + ';"></div>');
}
$.parallaxify({
positionProperty: 'transform',
responsive: true,
motionType: 'natural',
mouseMotionType: 'gaussian',
motionAngleX: 80,
motionAngleY: 80,
alphaFilter: 0.5,
adjustBasePosition: true,
alphaPosition: 0.025,
});
$('#foreground').click(function() {
$('#info').animate({ marginLeft: "-150px" }, 700);
});
});
});
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
try {
var pageTracker = _gat._getTracker("UA-41915731-1");
pageTracker._trackPageview();
} catch(err) {}
