"Login"
Bootstrap 4.1.1 Snippet by billionbd

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!-- Include the above in your HEAD tag --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <div class="main" id="particles"> <script> !function(a){function b(b,d){function e(){if(w){$canvas=a('<canvas class="pg-canvas"></canvas>'),v.prepend($canvas),p=$canvas[0],q=p.getContext("2d"),f(); for(var b=Math.round(p.width*p.height/d.density),c=0;b>c;c++){var e=new l;e.setStackPos(c),x.push(e)}a(window).on("resize",function(){h()}),a(document).on("mousemove",function(a){y=a.pageX,z=a.pageY}), B&&!A&&window.addEventListener("deviceorientation",function(){D=Math.min(Math.max(-event.beta,-30),30),C=Math.min(Math.max(-event.gamma,-30),30)},!0),g(),o("onInit")}}function f(){p.width=v.width(), p.height=v.height(),q.fillStyle=d.dotColor,q.strokeStyle=d.lineColor,q.lineWidth=d.lineWidth}function g(){if(w){s=a(window).width(),t=a(window).height(),q.clearRect(0,0,p.width,p.height); for(var b=0;b<x.length;b++)x[b].updatePosition();for(var b=0;b<x.length;b++)x[b].draw();E||(r=requestAnimationFrame(g))}}function h(){for(f(),i=x.length-1;i>=0;i--) (x[i].position.x>v.width()||x[i].position.y>v.height())&&x.splice(i,1);var a=Math.round(p.width*p.height/d.density);if(a>x.length)for(;a>x.length;){var b=new l;x.push(b)}else a<x.length&&x.splice(a); for(i=x.length-1;i>=0;i--)x[i].setStackPos(i)}function j(){E=!0}function k(){E=!1,g()}function l(){switch(this.stackPos,this.active=!0,this.layer=Math.ceil(3*Math.random()),this.parallaxOffsetX=0, this.parallaxOffsetY=0,this.position={x:Math.ceil(Math.random()*p.width),y:Math.ceil(Math.random()*p.height)},this.speed={},d.directionX) {case"left":this.speed.x=+(-d.maxSpeedX+Math.random()*d.maxSpeedX-d.minSpeedX).toFixed(2);break;case"right":this.speed.x=+(Math.random()*d.maxSpeedX+d.minSpeedX).toFixed(2);break; default:this.speed.x=+(-d.maxSpeedX/2+Math.random()*d.maxSpeedX).toFixed(2),this.speed.x+=this.speed.x>0?d.minSpeedX:-d.minSpeedX}switch(d.directionY){case"up": this.speed.y=+(-d.maxSpeedY+Math.random()*d.maxSpeedY-d.minSpeedY).toFixed(2);break;case"down":this.speed.y=+(Math.random()*d.maxSpeedY+d.minSpeedY).toFixed(2);break;default: this.speed.y=+(-d.maxSpeedY/2+Math.random()*d.maxSpeedY).toFixed(2),this.speed.x+=this.speed.y>0?d.minSpeedY:-d.minSpeedY}}function m(a,b){return b?void(d[a]=b):d[a]}function n() {v.find(".pg-canvas").remove(),o("onDestroy"),v.removeData("plugin_"+c)}function o(a){void 0!==d[a]&&d[a].call(u)}var p,q,r,s,t,u=b,v=a(b), w=!!document.createElement("canvas").getContext,x=[],y=0,z=0,A=!navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|mobi|tablet|opera mini|nexus 7)/i),B=!!window.DeviceOrientationEvent, C=0,D=0,E=!1;return d=a.extend({},a.fn[c].defaults,d),l.prototype.draw=function(){q.beginPath(),q.arc(this.position.x+this.parallaxOffsetX, this.position.y+this.parallaxOffsetY,d.particleRadius/2,0,2*Math.PI,!0),q.closePath(),q.fill(),q.beginPath();for(var a=x.length-1;a>this.stackPos;a--){var b=x[a],c=this.position.x-b.position.x, e=this.position.y-b.position.y,f=Math.sqrt(c*c+e*e).toFixed(3);f<d.proximity&&(q.moveTo(this.position.x+this.parallaxOffsetX,this.position.y+this.parallaxOffsetY), d.curvedLines?q.quadraticCurveTo(Math.max(b.position.x,b.position.x),Math.min(b.position.y,b.position.y),b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY): q.lineTo(b.position.x+b.parallaxOffsetX,b.position.y+b.parallaxOffsetY))}q.stroke(),q.closePath()},l.prototype.updatePosition=function(){if(d.parallax){if(B&&!A){var a=(s-0)/60;pointerX=(C- -30)*a+0; var b=(t-0)/60;pointerY=(D- -30)*b+0}else pointerX=y,pointerY=z;this.parallaxTargX=(pointerX-s/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetX+=(this.parallaxTargX-this.parallaxOffsetX)/10, this.parallaxTargY=(pointerY-t/2)/(d.parallaxMultiplier*this.layer),this.parallaxOffsetY+=(this.parallaxTargY-this.parallaxOffsetY)/10}switch(d.directionX){case"left": this.position.x+this.speed.x+this.parallaxOffsetX<0&&(this.position.x=v.width()-this.parallaxOffsetX);break;case"right":this.position.x+this.speed.x+this.parallaxOffsetX>v.width()&& (this.position.x=0-this.parallaxOffsetX);break;default:(this.position.x+this.speed.x+this.parallaxOffsetX>v.width()||this.position.x+this.speed.x+this.parallaxOffsetX<0)&&(this.speed.x=-this.speed.x)} switch(d.directionY){case"up":this.position.y+this.speed.y+this.parallaxOffsetY<0&&(this.position.y=v.height()-this.parallaxOffsetY);break;case"down": this.position.y+this.speed.y+this.parallaxOffsetY>v.height()&&(this.position.y=0-this.parallaxOffsetY);break;default:(this.position.y+this.speed.y+this.parallaxOffsetY>v.height()|| this.position.y+this.speed.y+this.parallaxOffsetY<0)&&(this.speed.y=-this.speed.y)}this.position.x+=this.speed.x,this.position.y+=this.speed.y},l.prototype.setStackPos=function(a){this.stackPos=a} ,e(),{option:m,destroy:n,start:k,pause:j}}var c="particleground";a.fn[c]=function(d){if("string"==typeof arguments[0]){var e,f=arguments[0],g=Array.prototype.slice.call(arguments,1); return this.each(function(){a.data(this,"plugin_"+c)&&"function"==typeof a.data(this,"plugin_"+c)[f]&&(e=a.data(this,"plugin_"+c)[f].apply(this,g))}),void 0!==e?e: this}return"object"!=typeof d&&d?void 0:this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(this,d))})},a.fn[c].defaults={minSpeedX:.1,maxSpeedX:.7,minSpeedY:.1,maxSpeedY:.7, directionX:"center",directionY:"center",density:1e4,dotColor:"#666666",lineColor:"#666666",particleRadius:7,lineWidth:1,curvedLines:!1,proximity:100,parallax:!0,parallaxMultiplier:5,onInit:function(){}, onDestroy:function(){}}}(jQuery), function(){for(var a=0,b=["ms","moz","webkit","o"],c=0;c<b.length&&!window.requestAnimationFrame;++c)window.requestAnimationFrame=window[b[c]+"RequestAnimationFrame"] ,window.cancelAnimationFrame=window[b[c]+"CancelAnimationFrame"]||window[b[c]+"CancelRequestAnimationFrame"];window.requestAnimationFrame|| (window.requestAnimationFrame=function(b){var c=(new Date).getTime(),d=Math.max(0,16-(c-a)),e=window.setTimeout(function(){b(c+d)},d);return a=c+d,e}),window.cancelAnimationFrame|| (window.cancelAnimationFrame=function(a){clearTimeout(a)})}(); $(function(){ $('#particles').particleground({ minSpeedX: 0.4, maxSpeedX: 1.2, minSpeedY: 0.4, maxSpeedY: 1.2, directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges density: 6000, // How many particles will be generated: one particle every n pixels dotColor: '#CF1F46', // noktaların rengi. lineColor: '#D6D6D6', // çizgilerin rengi. particleRadius: 5, // Dot size lineWidth: 1, curvedLines: true, proximity: 120, // How close two dots need to be before they join parallax: false }); }); </script> <style> #particles { width: 100%; height: 100%; overflow: hidden; top: 0; bottom: 0; left: 0; right: 0; position: absolute; z-index: -2; } </style> <div class="container"> <center> <div class="middle"> <div id="login"> <form action="javascript:void(0);" method="get"> <fieldset class="clearfix"> <p ><span class="fa fa-user"></span><input type="text" Placeholder="Username" required></p> <!-- JS because of IE support; better: placeholder="Username" --> <p><span class="fa fa-lock"></span><input type="password" Placeholder="Password" required></p> <!-- JS because of IE support; better: placeholder="Password" --> <div> <span style="width:48%; text-align:left; display: inline-block;"><a class="small-text" href="#">Forgot password?</a></span> <span style="width:50%; text-align:right; display: inline-block;"><input type="submit" value="Sign In"></span> </div> </fieldset> <div class="clearfix"></div> </form> <div class="clearfix"></div> </div> <!-- end login --> <div> <img src = "https://images.vexels.com/media/users/3/144118/isolated/lists/31093a4558d1aa47a6fcec2a174f2754-signo-de-cerveza-de-neon.png"> <div class="clearfix"></div> </div> </div> </center> </div> </div>
@charset "utf-8"; @import url//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); div.main{ background: #0264d6; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #0264d6 1%, #1c2b5a 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,#0264d6), color-stop(100%,#1c2b5a)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #0264d6 1%,#1c2b5a 100%); /* IE10+ */ background: radial-gradient(ellipse at center, #0264d6 1%,#1c2b5a 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0264d6', endColorstr='#1c2b5a',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ height:calc(100vh); width:100%; } [class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif; } /* ---------- GENERAL ---------- */ * { box-sizing: border-box; margin:0px auto; &:before, &:after { box-sizing: border-box; } } body { color: #606468; font: 87.5%/1.5em 'Open Sans', sans-serif; margin: 0; } a { color: #eee; text-decoration: none; } a:hover { text-decoration: underline; } input { border: none; font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; line-height: 1.5em; padding: 0; -webkit-appearance: none; } p { line-height: 1.5em; } .clearfix { *zoom: 1; &:before, &:after { content: ' '; display: table; } &:after { clear: both; } } .container { left: 50%; position: fixed; top: 50%; transform: translate(-50%, -50%); } /* ---------- LOGIN ---------- */ #login form{ width: 250px; } #login, .logo{ display:inline-block; width:40%; } #login{ border-right:1px solid #fff; padding: 0px 22px; width: 59%; } .logo{ color:#fff; font-size:50px; line-height: 125px; } #login form span.fa { background-color: #fff; border-radius: 3px 0px 0px 3px; color: #000; display: block; float: left; height: 50px; font-size:24px; line-height: 50px; text-align: center; width: 50px; } #login form input { height: 50px; } fieldset{ padding:0; border:0; margin: 0; } #login form input[type="text"], input[type="password"] { background-color: #fff; border-radius: 0px 3px 3px 0px; color: #000; margin-bottom: 1em; padding: 0 16px; width: 200px; } #login form input[type="submit"] { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: #000000; color: #eee; font-weight: bold; /* margin-bottom: 2em; */ text-transform: uppercase; padding: 5px 10px; height: 30px; } #login form input[type="submit"]:hover { background-color: #d44179; } #login > p { text-align: center; } #login > p span { padding-left: 5px; } .middle { display: flex; width: 600px; }

Related: See More


Questions / Comments: