Hey coders! In this post, I'll explain concepts of this project and also how to configure it for your needs. Do support us by subscribing to us on YouTube. Now, we'll dive into the tutorial. Do also refer to the source code files at the bottom of the page to help you understand even better.

A. CONCEPTS
Basically, the button to open the form is actually a checkbox. When checked, it executes the function of displaying the form over it. When checked we see a container. We split it into 5:
  • Title (Account Login)
  • Input fields of form(Email/phone number & password)
  • Forgot Password Link
  • Submit Button
  • Sign Up Link
In CSS, we then customize these components by giving them classes. Btw, if we reach 1000subs on YouTube, I'll be hosting a free web development course. So, do subscribe at here. Okay, let's see how you can configure this form to make it work for you.

B.CONFIGURATION
In this project we will mainly be changing the form action. This is to make sure you receive the form responses correctly. Here's the most common way to do so.
  • PHP (This involves backend web development -- a whole different topic)
  • Javascript (possible, but people maybe able to view the login id and password by viewing your site source code)
Below is a video tutorial of this project to help you understand even better. Thanks for reading and goodbye! (p.s/source code is below the video)



HTML Code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Popup Login Form | CodingPorium</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <div class="center">
    <input type="checkbox" id="play">
      <label for="play" class="play-btn">Login</label>

    <div class="container">
      <label for="play" class="close-btn fas fa-times" title="close"></label>
        <div class="text">
          Account Login
        </div>
      <form action="/welcome.html">
        <div class="data">
          <label>Email / Phone Number</label>
          <input type="text" required>
        </div>
        <div class="data">
          <label>Password</label>
            <input type="password" required>
        </div>
        <div class="forgot-pass">
          <a href="#">Forgot Password?</a>
        </div>
        <div class="btn">
          <div class="inner"></div>
          <button type="submit">login</button>
        </div>
        <div class="signup-link">
          Not a member? <a href="#">Click to Sign Up</a>
        </div>
      </form>
    <!--Close container div--></div>
 <!--Close center div--> </div>
</body>
</html>


CSS Code: 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #696EFF 10%, #F8ACFF 90%);
}
/*Customize button to activate popup*/
.play-btn{
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #696EFF;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
  transition:0.3s;
}
.play-btn:hover{
  background: #696EFF;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.play-btn, .container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*Customize behavior of button that activates popup*/
input[type="checkbox"]{
  display: none;
}
/*Customize container to store form*/
.container{
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  border-radius:10px;
}
/*Customize container to appear overlay on button*/
#play:checked ~ .container{
  display: block;
}
/*Customize close button of the container*/
.container .close-btn{
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover{
  color: #3498db;
}
/*Customize title in container (e.g. Account Login)*/
.container .text{
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form{
  margin-top: -20px;
}
/*Customize input elements (email field and password field) of form*/
.container form .data{
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label{
  font-size: 18px;
}
form .data input{
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
  border-radius:10px;
}
/*Customize color of input borders when clicked*/
form .data input:focus{
  border-color: #3498db;
  border-bottom-width: 2px;
}
/*Customize forgot password link*/
form .forgot-pass{
  margin-top: -8px;
}
form .forgot-pass a{
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover{
  text-decoration: underline;
}
/*Customize submit button for form*/
form .btn{
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius:10px;
}
form .btn .inner{
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(right, #0061FF, #60EFFF, #0061FF, #60EFFF);
  transition: all 0.4s;
}
form .btn:hover .inner{
  left: 0;
}
form .btn button{
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
/*Customize click to signup link in container*/
form .signup-link{
  text-align: center;
}
form .signup-link a{
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover{
  text-decoration: underline;
}
Tags

Post a Comment

Post a Comment

Previous Post Next Post