Skip to main content

How to create cool login form with image and login?

 create cool login form with image and login



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

Comments

Post a Comment

Popular posts from this blog

How to use inner html value or data in php from javascript(innerHTML)?

 use inner html value or data in php from javascript(innerHTML)? <html> <body> <p id="demo">use inner html value in php(innerhtml)</p> <script>   var jassi = document.getElementById("demo").innerHTML;   //document.write(jassi); </script> <?php $jassi = '<script>document.write(jassi);</script>'; echo $jassi; ?> </body> </html>
Post a Comment
Read more

How to get store data from WCFM(Best Multi Vendor Marketplace) Plugin?

 Get store data from WCFM(Best Multi Vendor Marketplace) Plugin. global $WCFM, $WCFMmp, $wp, $WCFM_Query, $post; $store_id = ''; if ( isset( $attr['id'] ) && !empty( $attr['id'] ) ) { $store_id = absint($attr['id']); } if (  wcfm_is_store_page() ) { $wcfm_store_url = get_option( 'wcfm_store_url', 'store' ); $store_name = apply_filters( 'wcfmmp_store_query_var', get_query_var( $wcfm_store_url ) ); $store_id  = 0; if ( !empty( $store_name ) ) { $store_user = get_user_by( 'slug', $store_name ); } $store_id    = $store_user->ID; } $user_id = $store_id;  $vendor_data = get_user_meta( $user_id, 'wcfmmp_profile_settings', true ); $street_1 = $vendor_data['address']['street_1']; $street_2 = $vendor_data['address']['street_2']; $city     = $vendor_data['address']['city']; $zip      = $vendor_data['address']['zip&#
Post a Comment
Read more

How to create login with phone number in woocommerce wordpress?

Create login with phone number in woocommerce wordpress. function wooc_extra_register_fields() {?>        <p class="form-row form-row-wide">        <label for="reg_billing_phone"><?php _e( 'Phone', 'woocommerce' ); ?><span class="required">*</span></label>        <input type="text" class="input-text" name="billing_phone" id="reg_billing_phone" value="<?php esc_attr_e( $_POST['billing_phone'] ); ?>" />        </p>            <?php  }  add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );  function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) { if ( isset( $_POST['billing_phone'] ) ) {    $hasPhoneNumber= get_users('meta_value='.$_POST['billing_phone']);    if ( !empty($hasPhoneNumber)) {      $validation_er
Post a Comment
Read more