Hello my dear friends. Today I am bringing up a whole new thing for you. That is today I am going to give you HTML CSS Login Designs With Codes. Most of people develop websites today. We all like to finish sites very quickly. But even for very experienced web developer sometimes it takes time to develop. Specially when we doing the responsive it takes some time. So we would like to keep our code and blocks in very organize way. We all mostly use components to build our sites. Because from that we can reduce time.
Today also I would like to give to login screen designs with source codes. The designs has made with by using bootstrap, HTML and CSS. If you like these designs all you have to do is just copy and paste the codes. For the images you can put your image URL. These components has build with bootstrap 4. Font awesome free library was also used. I really hope these designs will help you. When you using these things please give reference to our site.
User Login – Design 01
HTML code – Design 01
<body>
<div class="container-fluid">
<div class="container container-style">
<div class="text-center pb-4"><h1>Login Form</h1></div>
<div class="text-center"><i class="fas fa-user-circle fa-5x" style="color: #7aa0c1; "></i></div>
<form class="form-style">
<div class="form-group col-lg-12">
<label for="" class="labeld1">Email address</label>
<input type="email" class="form-control input-style-d1" id="" name="" placeholder="Enter email">
</div>
<div class="form-group col-lg-12">
<label for="" class="labeld1">Password</label>
<input type="password" class="form-control input-style-d1" id="" name="" placeholder="Enter password">
</div>
<div class="text-center"><button class="btn btn-primary pl-4 pr-4">Login</button></div>
</form>
</div>
</div>
</body>
CSS code – Design 01
.container-style{
background-color: #e3e4e4;
width:32%;
margin-top: 8rem;
border-radius: 12px;
padding: 1rem;
}
.form-style{
justify-content: center;
}
.input-style-d1{
border: 2px solid #00a1ff;
}
.labeld1{
font-weight: 500;
}
User Login – Design 02
HTML code for – Design 02
<body style="background:linear-gradient(85deg, #281cd4, #ff00b1);">
<div class="container-fluid" style="width: 60%;margin-top: 6rem; margin-bottom: 4rem;">
<div class="row" style="border: 3px solid #80007c;">
<div class="col-lg-6 p-5" style="background-color: #efefef;">
<form>
<h1 class="text-center pb-4">Login Form</h1>
<div class="text-center"><i class="fas fa-user-circle fa-5x" style="color: #7aa0c1;"></i></div>
<div class="form-group col-lg-12">
<label for="" class="labeld1">Email address</label>
<input type="email" class="form-control input-style-d2" id="" name="" placeholder="Enter email">
</div>
<div class="form-group col-lg-12">
<label for="" class="labeld1">Password</label>
<input type="password" class="form-control input-style-d2" id="" name="" placeholder="Enter password">
</div>
<div class="text-center"><button class="btn btn-success pl-4 pr-4" id="" name="">Login</button></div>
</form>
</div>
<div class="col-lg-6" style="background-color: #9c63e6;"></div>
</div>
</div>
</body>
CSS codes – Design 02
.input-style-d1{
border: 2px solid #00a1ff;
}
.labeld1{
font-weight: 500;
}
.input-style-d2{
border: 2px solid #9d00ff;
}
User Login – Design 03
User Login – Design 04
User Login – Design 05
Conclusion
Hope you have liked these awesome HTML CSS Login Designs With Codes. If you like and these were help for you, please don’t forget to comment and share. Please check how to create portfolio gallery also if you like. We will meet again with another nice tutorial. Until goodbye all.
Nice design collection. So much helped.
I’m impressed, I need to say. Actually hardly ever do I encounter a weblog that’s both educative and entertaining, and let me inform you, you have got hit the nail on the head. Your thought is excellent; the issue is one thing that not sufficient persons are talking intelligently about. I’m very pleased that I stumbled throughout this in my search for one thing regarding this.
Thank you for your sincere comment. Keep reading us.
Thank you for some other wonderful post. Where else may just anyone get that type of information in such a perfect means of writing? I’ve a presentation subsequent week, and I’m on the search for such information.
Thank you so much.
I’m not that much of a online reader to be honest but your blogs really nice, keep it up! I’ll go ahead and bookmark your website to come back in the future. All the best
Thank you