"iV"
Bootstrap 3.3.0 Snippet by Mehmet061

<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 ----------> <div class="container"> <div id="login-box"> <div class="logo"> <img src="http://www.ivent2b.com/NSResources.nsx?r=/docs/doc7313,iv_logoxxx.png" class="img img-responsive img-circle center-block"/> <h1 class="logo-caption">i<span class="tweak">V</span>ent</h1> </div><!-- /.logo --> <div class="controls"> <input type="text" name="Bayi_No" placeholder="Bayi No" class="form-control" /> <input type="text" name="Kullanici_Adi" placeholder="Kullanıcı Adı" class="form-control" /> <input type="text" name="Sifre" placeholder="Kullanıcı Şifresi" class="form-control" /> <button type="button" class="btn btn-default btn-block btn-custom">Giriş</button> <chack </div><!-- /.controls --> </div><!-- /#login-box --> </div><!-- /.container --> <div id="particles-js"></div> <!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>-->
@import url('https://fonts.googleapis.com/css?family=Nunito'); @import url('https://fonts.googleapis.com/css?family=Poiret+One'); body, html { height: 100%; background-repeat: no-repeat; /*background-image: linear-gradient(rgb(12, 97, 33),rgb(104, 145, 162));*/ background:-webkit-linear-gradient(-45deg, #111243 0%,#1b4e95 100%) ; position: relative; } #login-box { position: absolute; top: 0px; left: 50%; transform: translateX(-50%); width: 350px; margin: 0 auto; border: 1px solid #B4B4B4; background: #F4F4F4; min-height: 250px; padding: 20px; z-index: 9999; } #login-box .logo .logo-caption { font-family: 'Poiret One', cursive; color: Black; text-align: center; margin-bottom: 0px; } #login-box .logo .tweak { color: #F87C24; } #login-box .controls { padding-top: 30px; } #login-box .controls input { border-radius: 0px; background: rgb(98, 96, 96); border: 0px; color: white; font-family: 'Nunito', sans-serif; } #login-box .controls input:focus { box-shadow: none; } #login-box .controls input:first-child { border-top-left-radius: 2px; border-top-right-radius: 2px; } #login-box .controls input:last-child { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; } #login-box button.btn-custom { border-radius: 2px; margin-top: 8px; background:#15428b; border-color: #5b87ce; color: white; font-family: 'Nunito', sans-serif; } #login-box button.btn-custom:hover{ -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; transition: all 500ms ease; background: #051c3c; border-color: #5b87ce; } #particles-js{ width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; position: fixed; top: 0px; z-index:1; }
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js", function(){ particlesJS('particles-js', { "particles": { "number": { "value": 80, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#F4F4F4" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "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": "#F4F4F4", "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": "#b61924", "background_image": "", "background_position": "50% 50%", "background_repeat": "no-repeat", "background_size": "cover" } } ); });

Related: See More


Questions / Comments: