"Red profile and login panel"
Bootstrap 3.2.0 Snippet by ishwarkatwe

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 href='http://fonts.googleapis.com/css?family=Raleway:400,200' rel='stylesheet' type='text/css'> <div class="container"> <div class="row login_box"> <div class="col-md-12 col-xs-12" align="center"> <div class="line"><h3>12 : 30 AM</h3></div> <div class="outter"><img src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="image-circle"/></div> <h1>Hi Guest</h1> <span>INDIAN</span> </div> <div class="col-md-6 col-xs-6 follow line" align="center"> <h3> 125651 <br/> <span>FOLLOWERS</span> </h3> </div> <div class="col-md-6 col-xs-6 follow line" align="center"> <h3> 125651 <br/> <span>FOLLOWERS</span> </h3> </div> <div class="col-md-12 col-xs-12 login_control"> <div class="control"> <div class="label">Email Address</div> <input type="text" class="form-control" value="admin@gmail.com"/> </div> <div class="control"> <div class="label">Password</div> <input type="password" class="form-control" value="123456"/> </div> <div align="center"> <button class="btn btn-orange">LOGIN</button> </div> </div> </div> </div>
body{ background-color: #2B2B2B; } *{ font-family: 'Raleway', sans-serif; color : #FFF; } div h3 span{ color : #FFF; font-size:14px; } div span { font-weight: 200; } h1{ font-weight: 200; } .login_box{ background: #f32d27; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjZjMyZDI3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjZmY2YjQ1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(45deg, #f32d27 5%, #ff6b45 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#f32d27), color-stop(99%,#ff6b45)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* IE10+ */ background: linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f32d27', endColorstr='#ff6b45',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ width:35%; /* height:70%; */ position:absolute; top:15%; left:32.5%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); } @media (max-width: 767px) { .login_box{ background: #f32d27; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMTAwJSIgeDI9IjEwMCUiIHkyPSIwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjUlIiBzdG9wLWNvbG9yPSIjZjMyZDI3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjZmY2YjQ1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(45deg, #f32d27 5%, #ff6b45 99%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(5%,#f32d27), color-stop(99%,#ff6b45)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* IE10+ */ background: linear-gradient(45deg, #f32d27 5%,#ff6b45 99%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f32d27', endColorstr='#ff6b45',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */ width:90%; height:80%; position:absolute; top:10%; left:5%; -webkit-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54); } } .image-circle{ border-radius: 50%; width: 175px; height: 175px; border: 4px solid #FFF; margin: 10px; } .follow{ background-color:#FC563B; height: 80px; cursor:pointer; } .follow:hover { background-color:#F22F26; height: 80px; cursor:pointer; } .login_control{ background-color:#FFF; padding:10px; } .control { color:#000; margin:10px; } .label { color: #EB4F26; font-size: 18px; font-weight: 500; } .form-control{ color: #000000 !important; font-size: 25px; border: none; padding: 25px; padding-left: 10px; border-bottom: 1px solid #CCC; margin-bottom: 10px; outline: none; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .form-control:focus{ border-radius: 0px; border-bottom: 1px solid #FC563B; margin-bottom: 10px; outline: none; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } .btn-orange{ background-color: #FC563B; border-radius: 0px; margin: 5px; padding: 5px; width: 150px; font-size: 20px; font-weight: inherit; } .btn-orange:hover { background-color: #F22F26; border-radius: 0px; margin: 5px; padding: 5px; width: 150px; font-size: 20px; font-weight: inherit; color:#FFF !important; } .line{ border-bottom : 2px solid #F32D27; } .outter{ padding: 0px; border: 1px solid rgba(255, 255, 255, 0.29); border-radius: 50%; width: 200px; height: 200px; }

Related: See More


Questions / Comments:

Color #FFF in textbox (FireFox)

ThuanNB () - 6 years ago - Reply 0


I've tried to fix the center/vcenter
http://bootsnipp.com/user/s...

andyj115 () - 7 years ago - Reply 0


Nice

Jean Yu () - 7 years ago - Reply 0


Does not work on firefox (37.0.2) in Ubuntu 15.04. Can not see what I was typing in the login box.

Anindya Chatterjee () - 8 years ago - Reply 0


I think you might need to remove the "color" attribute here:


*{
font-family: 'Raleway', sans-serif;
color : #FFF;
}

maxsurguy () - 8 years ago - Reply 0


Hi guys,

I do not think removing the color will change anything. Try to remove the paddings on the .form-control class, then add a height property of 50px. Does the trick on both chrome & firefox.

By the way, nice piece of work !

Cedric () - 8 years ago - Reply 0


Love it!

Rgbskills () - 9 years ago - Reply 0