"windows login"
Bootstrap 4.1.1 Snippet by ccela

Post to Facebook Tweet this

<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 ----------> <head> <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> </head> <section> <div></div> <h1>User</h1> <span> <input type="password" placeholder="Password"> </span> </section> <nav> <i class="fa fa-power-off"></i> <i class="fa fa-recycle"></i> <i class="fa fa-wifi"></i> </nav>
body { background:url(https://i.ytimg.com/vi/7XtH-Dpyi18/maxresdefault.jpg); background-size:100vw 100vh; background-repeat:no-repeat; color:#fff; font-family: 'Quicksand', sans-serif; } section { /* background:red; */ width:50%; margin:3% auto; text-align:center; padding:1px } div { width:150px; height:150px; background:#7b7b7b; margin:10% auto 0; border-radius:50%; position:relative } div:after { content:""; width:25%; height:25%; position:absolute; border-radius:50%; border:4px solid #fff; top:20%; left:36% } div:before { content:""; width:70px; height:35px; position:absolute; border-radius:90px 100px 0px 0px; border:4px solid transparent; border-top-color:#fff ; top:48%; left:26%; } input { width:250px; height:25px; padding-left:5px; position:relative; border:2px solid #aaa; outline:0 } span { position:relative } span:after { content:"\f061"; position:absolute; color:red; font-family:'FontAwesome'; top:2px; display:block; background:#324556; right:1px; height:25px; width:28px; color:#fff; padding-top:2px } i { position:absolute; bottom:8px; } i:first-child { right:15px } i:nth-child(2) { right:45px; } i:nth-child(3) { right:80px; bottom:6px; transform:rotate(-45deg) }

Related: See More

Vue Black Dashboard Pro
login-form
Login Form
Bootstrap 4 login from

Questions / Comments: