Scroll to top

How to create cool login form with image and login?

 create cool login form with image and login

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;

display: flex;
 justify-content: center;
    align-items: center;

width: 800px;
background: #fff;
min-height: 500px;
height: 525px;
margin: auto;
box-shadow: 0 30px 60px 0 rgba(0,0,0,.2);
display: flex;

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;

.img {
display: table;
margin: 20px auto;

font-size: 20px;
text-align: center;
font-weight: 400;

font-size: 16px;
text-align: center;
font-weight: 400
a.web {
text-decoration: none;
color: #4a5b65;
text-align: center;
width: 100%;
display: block;

.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;

<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”>

<a href=”#” class=”web”>Back to Website Homepage</a>
<div class=”login-reight”>

Leave a Reply

Your email address will not be published. Required fields are marked *