Scroll to top
Login form

How to create professional login form in HTML and CSS ?


Notice: Undefined variable: string in /home/u665484253/domains/wpcodekit.com/public_html/wp-content/themes/twentytwenty-child/functions.php on line 61

 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 ?

Get more information

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

Leave a Reply

Your email address will not be published.