create professional login form
<html>
<head>
<style>
section.elementor-element.elementor-element-809d463.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.elementor-section.elementor-top-section {
display: none;
}
.elementor-inner {
display: none;
}
.wrapper{
width:100%;
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.wrap{
width:80%;
margin:auto;
}
.full-box{
width: 800px;
background: #fff;
min-height: 500px;
height: 525px;
margin: auto;
box-shadow: 0 30px 60px 0 rgba(0,0,0,.2);
display: flex;
}
.login-left{
width: 55%;
padding: 50px;
position: relative;
}
input.field {
width: 100%;
height: 36px;
border-radius: 4px;
border: 1px solid #c7cfd8;
font-size: 18px;
margin-bottom: 20px;
padding: 6px 12px;
}
input.sub {
width: 100% !important;
border: none !important;
color: #fff !important;
background: #2a870f !important;
outline: none !important;
border-radius: 4px !important;
padding: 10px 0 !important;
font-size: 16px !important;
font-weight:400 !important;
margin:0;
}
.img {
width:200px;
display: table;
margin: 20px auto;
}
.name{
font-size: 20px;
text-align: center;
font-weight: 400;
}
.p{
font-size: 16px;
text-align: center;
font-weight: 400
}
a.web {
text-decoration: none;
color: #4a5b65;
text-align: center;
width: 100%;
display: block;
font-size:18px;
padding:10px;
}
.login-reight {
display: flex;
width: 45%;
padding: 40px 61px 40px 40px;
background: #0a0a0c;
background-image: url(<?php echo plugin_dir_url(__FILE__);?>images/logoimage.jpg);
background-size: cover;
height: 100%;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class=”wrapper”>
<div class=”wrap”>
<div class=”full-box”>
<div class=”login-left”>
<img class=”img” src=”<?php echo plugin_dir_url(__FILE__);?>images/logo.png”>
<h4 class=”name”>Sign In</h4>
<p class=”p”>Need a account? Contact admin</p>
<form action=”” method=”post”>
<input class=”field” type=”email” name=”email” placeholder=”Email”>
<input class=”field” type=”password” name=”password” placeholder=”Password”>
<input class=”sub” type=”submit” name=”submit” value=”Sign in”>
</form>
<a href=”#” class=”web”>Back to Website Homepage</a>
</div>
<div class=”login-reight”>
</div>
</div>
</div>
</div>
</body>
</html>
How to create professional login form in HTML and CSS ?
We provide everything. which are beneficial for website designers and developers. Such as login form, stylish Html/Css tables, PHP, Jquery, WordPress and woo-commerce code/function. which we use in every project. We have designed and developed thousands of websites. Every code and function has been used by us. functions work is working well. If you have any doubts about any code or function then you can contact us for help. We will provide free help in function.
if you want to hire a website designer and developer then you can also contact us. I will provide you professional websites with 5+ years of experience.
How to create professional login form in HTML and CSS ?
Read More Posts
- How to Prevent negative inputs in form input type=“number”?
- How to get previews years from current year in php?
- if jQuery contain and match value then replace with another value on load in jQuery?
- How to create custom wishlist in wordpress without plugin?
- How to get warning when exit browser without saving?