Categories
Uncategorized

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>

Categories
Uncategorized

How to get background image from wordpress plugin folder?

get background image from wordpress plugin folder

<style>

background-image: url(<?php echo plugin_dir_url(__FILE__);?>images/logoimage.jpg);

</style>

Categories
Uncategorized

How to align center div in div in html ?

align center div in div in html

<html>
<head>
<style>
.outer{
width: 100%;
height: 100vh;
background:red;
}
.container{
width: 35%;
height: 60vh;
background:blue;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

</style>
</head>
<body>
<div class=”outer”>
<div class=”container”>
</div>
</div>

</body>
</html>

OR

<html>
<head>
<style>

.outer{
width: 100%;
    height: 100vh;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;

}
.container{
width: 35%;
height: 60vh;
background:blue;
}

</style>
</head>
<body>
<div class=”outer”>
<div class=”container”>
</div>
</div>

</body>
</html>

Categories
Uncategorized

How to size 100% width and height in html?

size 100% width and height in html


<html>
<head>
<style>

.outer{
width: 100%;
height: 100vh;
background:red;
}

</style>
</head>
<body>
<div class=”outer”>

</div>

</body>
</html>

Categories
Uncategorized

How to remove wordpress footer and header from wordpress plugin page in wordpress?

 remove wordpress footer and header from wordpress plugin page in wordpress


<style>

header#masthead {
    display: none;
}
footer#colophon {
    display: none;
}

</style>

Categories
Uncategorized

how to upload image file in database in php in wordpress?

upload image file in database in php in wordpress

<html>
<head>

<?php


extract($_POST);
global $wpsite;
global $wpdb;
if(isset($_POST[‘submit’])){

/* Upload  Image */
if ( ! function_exists( ‘wp_handle_upload’ ) )
          require_once( ABSPATH . ‘wp-admin/includes/file.php’ );
          $uploadedfile = $_FILES[‘file’];
          $upload_overrides = array( ‘test_form’ => false );
          $movefile = wp_handle_upload( $uploadedfile, $upload_overrides );
          if ( $movefile ) {
              //var_dump( $movefile );
  //echo $movefile[‘url’];
      } else {
             echo “Possible file upload attack!n”;
}

$downloadlink = $movefile[‘url’];
$menutable=$wpdb->prefix.$wpsite.”_menutable”;
$wpdb->insert($menutable, array(‘item_name’ => $itemname, ‘item_type’ => $itemtype, ‘item_catagory’ => $itemcata, ‘meal’ => $meal, ‘price’ => $price, ‘status’ => $status, ‘restaurant_id’ => $restaurantid,’download_link’ => $downloadlink ) );

}
?>

</head>
<body>
<form action=”” method=”post” enctype=”multipart/form-data” >
<input type=”text” name=”restaurantid” placeholder=”restaurant_id”>
<input type=”text” name=”itemname” placeholder=”Item Name”>
<input type=”text” name=”itemtype” placeholder=”Item Type”>
<input type=”text” name=”itemcata” placeholder=”Item Catagory”>
<input type=”text” name=”meal” placeholder=”Meal”>
<input type=”text” name=”price” placeholder=”Price”>
<input type=”text” name=”status” placeholder=”Status”>
<input type=”file” name=”file” id=”file” class=”form-upl”>
<input type=”submit” name=”submit” value=”Submit”>
</form>
</body>
</html>

Categories
Uncategorized

How to use if condition and change on scroll in jqurey?

 use if condition  and change on scroll in jqurey?

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>

$(document).ready(function(){
var $w = $(window).scroll(function(){
    if ( $w.scrollTop() > 1000 ) { 
        alert(“hello”);

     
    } else {
      // …
    }
});
});

</script>

Categories
Uncategorized
use javascript in php or how to redirect on any page in php

<?php

echo ‘<script LANGUAGE=”JavaScript”>window.location.href=”‘.site_url().’/loginform“;</script>’;

?>

Categories
Uncategorized

How to use shortcode in wordpress?

use shortcode in wordpress in function.php or main plugin file


function login_register(){
?>


<div  id=”loginform”>
<form method=”post” action=””>
<h4>Login</h4>
<div class=”border”></div>
<div><span id=”or”>or<span><span id=”full1″> create an account</span></div>
<div class=”wrap-input100 validate-input” data-validate=”Enter username”>
<input class=”input100″ type=”text” name=”username”>
<span class=”focus-input100″ data-placeholder=”Username”></span>
</div>

<div class=”wrap-input100 validate-input” data-validate=”Enter password”>
<input class=”input100″ type=”password” name=”pass”>
<span class=”focus-input100″ data-placeholder=”Password”></span>
</div>

<input type=”submit” name=”login” value=”Submit”>

</form>
</div>

<?php
}
add_shortcode(“loginregister”,”login_register”);

?>

anywhere


<?php

echo do_shortcode(‘[loginregister]’);

?>

Categories
Uncategorized

How to link css,jquery and ajax with all files via one wordpress function?

link css,jquery and ajax with all files via one wordpress function

copy this code in wordpress function.php file or main plugin file?



function ecom_scripts(){

wp_register_script( ‘ecom-script’, plugins_url(‘/js/custom.js’, __FILE__), array( ‘jquery’ ), ”, true );
    wp_localize_script( ‘ecom-script’, ‘myajax’, array( ‘ajax_url’ => admin_url( ‘admin-ajax.php’ ) ) );
    wp_enqueue_script( ‘ecom-script’ );
wp_register_style( ‘ecom-style’, plugins_url(‘/css/stylesheet.css’, __FILE__), true );
    wp_enqueue_style( ‘ecom-style’ );
}
add_action(“wp_enqueue_scripts”,”ecom_scripts”);