How To Design - Draggable Sign In Form

Learn how to create Draggable Sign In Form with HTML5, CSS3, and JQuery

How To Create a Draggable Sign In Form

Step 1) Add HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Draggable Sign In Form</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/favicon.png" type="image/png" sizes="16x16">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,600,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

    <!-- Main Content -->
    <div class="container" id="draggable">
        <form action="" method="">
            <div class="input-group">
                <label for="user">Username</label>
                <input type="text" name="" placeholder="Username" id="user" class="form-control" required="" />
            </div>
            <div class="input-group">
                <label for="pass">Password</label>
                <input type="password" name="" placeholder="Password" id="pass" class="form-control" required="" />
                <span><a href="#">Forgot Password?</a></span>
            </div>
            <div class="btn-group">
                <input type="submit" value="Sign in" class="btn" />
            </div>
        </form>
    </div>
    
</body>

</html>

Step 2) Add CSS:

Download all the images which are used in this project.

/*

This is a Sign In Form Design with HTML, CSS, and JQuery. You can freely use it in your project.
It is made with ♥ by Learn Computer Academy. 
Visit our website: www.learncomputer.in

*/

/* Normalization CSS */

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #000;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 0;
    margin: 0;
}
/* Color Variable */

:root {
    --theme-color: #0d77fc;
    --btn-hvr: #085eca;
}
/* Main Content */

.container {
    max-width: 400px;
    background-color: rgba(255, 255, 255, .95);
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .7);
}

.container .input-group {
    padding: 0;
    margin: 0 0 20px 0;
}
/* Input Field Label */

.container .input-group label {
    display: block;
    margin: 0 0 7px 0;
    font-size: 16px;
    color: #222;
    line-height: 1.2;
    font-weight: 700;
}
/* Input Field */

.container .input-group .form-control {
    width: 100%;
    font-family: 'Poppins', sans-serif;
    color: #000;
    padding: 5px 10px;
    margin: 0;
    height: 50px;
    border: 1px solid #ddd;
}
/* Add Background Image in Username Field */

.container .input-group:nth-child(1) .form-control {
    background-image: url('user.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 95% 50%;
}
/* Add Background Image in Username Field when it is FOCUSED */

.container .input-group:nth-child(1) .form-control:focus {
    background-image: url('user-f.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 95% 50%;
    outline: 1px solid var(--theme-color);
}
/* Add Background Image in Password Field */

.container .input-group:nth-child(2) .form-control {
    background-image: url('eye.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 95% 50%;
}
/* Add Background Image in Password Field when it is FOCUSED */

.container .input-group:nth-child(2) .form-control:focus {
    background-image: url('eye-f.svg');
    background-repeat: no-repeat;
    background-size: 18px;
    background-position: 95% 50%;
    outline: 1px solid var(--theme-color);
}
/* Forgot Password */

.container .input-group span a {
    display: inline-block;
    font-size: 13px;
    color: #999;
    padding: 0;
    margin: 7px 0 0 0;
}
/* Sign in Button */

.container .btn-group .btn {
    padding: 10px 18px;
    background-color: var(--theme-color);
    border: none;
    font-size: 18px;
    width: 100%;
    border-radius: 25px;
    color: #fff;
    transition: .3s;
}

.container .btn-group .btn:hover {
    background-color: var(--btn-hvr);
}

Step 3) Add JavaScript:

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<!-- jQuery UI CDN -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- jQuery Code  -->
<script>
    $(function() {
        $("#draggable").draggable();
    });
</script>

Previous Next