File tree 2 files changed +65
-0
lines changed
2 files changed +65
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > Animated Login Page</ title >
5
+ < link rel ="stylesheet " type ="text/css " href ="style.css ">
6
+ </ head >
7
+ < body >
8
+ < div class ="login-container ">
9
+ < form >
10
+ < h1 > Login</ h1 >
11
+ < input type ="text " placeholder ="Username ">
12
+ < input type ="password " placeholder ="Password ">
13
+ < button type ="submit "> Login</ button >
14
+ </ form >
15
+ </ div >
16
+ </ body >
17
+ </ html >
18
+
Original file line number Diff line number Diff line change
1
+ .login-container {
2
+ display : flex;
3
+ justify-content : center;
4
+ align-items : center;
5
+ height : 100vh ;
6
+ background-color : # f2f2f2 ;
7
+ }
8
+
9
+ form {
10
+ display : flex;
11
+ flex-direction : column;
12
+ align-items : center;
13
+ padding : 40px ;
14
+ background-color : # fff ;
15
+ box-shadow : 0px 0px 10px rgba (0 , 0 , 0 , 0.1 );
16
+ border-radius : 10px ;
17
+ }
18
+
19
+ h1 {
20
+ margin-bottom : 20px ;
21
+ font-size : 24px ;
22
+ font-weight : bold;
23
+ color : # 333 ;
24
+ }
25
+
26
+ input {
27
+ margin-bottom : 20px ;
28
+ padding : 10px ;
29
+ border : none;
30
+ border-radius : 5px ;
31
+ box-shadow : 0px 0px 5px rgba (0 , 0 , 0 , 0.1 );
32
+ }
33
+
34
+ button {
35
+ padding : 10px 20px ;
36
+ background-color : # 333 ;
37
+ color : # fff ;
38
+ border : none;
39
+ border-radius : 5px ;
40
+ box-shadow : 0px 0px 5px rgba (0 , 0 , 0 , 0.1 );
41
+ cursor : pointer;
42
+ transition : background-color 0.2s ease-in-out;
43
+ }
44
+
45
+ button : hover {
46
+ background-color : # 555 ;
47
+ }
You can’t perform that action at this time.
0 commit comments