Skip to content

Commit efadc45

Browse files
RAHULBAWA777RAHULBAWA777
committed
3D Login form files added
1 parent 4cd1ec4 commit efadc45

File tree

2 files changed

+161
-0
lines changed

2 files changed

+161
-0
lines changed

‎3D login form DENZIX/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>3D login Form</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
12+
13+
<div class="container">
14+
<div class="icon"></div>
15+
<div class="iconName">GITHUB</div>
16+
<div class="forms">
17+
<label>EMAIL</label>
18+
<input type="email" placeholder="Enter Email" />
19+
<label>PASSWORD</label>
20+
<input type="password" placeholder="Enter password" />
21+
<button type="submit">LOGIN</button>
22+
</div>
23+
<a href="https://github.com/RAHULBAWA777">MADE WITH ❤ BY RAHULBAWA</a>
24+
</div>
25+
</body>
26+
</html>

‎3D login form DENZIX/style.css

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
2+
body {
3+
height: 100vh;
4+
margin: 0;
5+
width: 100vw;
6+
7+
background: linear-gradient(300deg, #000000, #342d2d);
8+
background-size: 120% 120%;
9+
display: flex;
10+
align-items: center;
11+
text-align: center;
12+
justify-content: center;
13+
place-items: center;
14+
overflow: hidden;
15+
animation: gradient-animation 12s ease infinite;
16+
}
17+
18+
button {
19+
transition: 0.5s;
20+
color: white;
21+
height: 40px;
22+
margin-top: 20px;
23+
border-radius: 20px;
24+
background: #000000;
25+
cursor: pointer;
26+
box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px white;
27+
font-weight: 900;
28+
}
29+
30+
@keyframes gradient-animation {
31+
0% {
32+
background-position: 0% 50%;
33+
}
34+
35+
50% {
36+
background-position: 100% 50%;
37+
}
38+
39+
100% {
40+
background-position: 0% 50%;
41+
}
42+
}
43+
44+
.container {
45+
position: relative;
46+
width: 400px;
47+
border-radius: 20px;
48+
padding: 40px;
49+
box-sizing: border-box;
50+
height: 500px;
51+
box-shadow: 4px 4px 10px #cbced1, -4px -4px 10px white;
52+
background: #eaedf0;
53+
}
54+
55+
label,
56+
input,
57+
button {
58+
display: block;
59+
width: 100%;
60+
box-sizing: border-box;
61+
padding: 0;
62+
border: none;
63+
outline: none;
64+
}
65+
66+
.icon {
67+
height: 100px;
68+
width: 100px;
69+
background: url("https://image.similarpng.com/thumbnail/2020/07/Github-icon-logo-on-transparent-PNG.png");
70+
background-position: center;
71+
background-size: cover;
72+
background-repeat: no-repeat;
73+
margin: auto;
74+
box-sizing: border-box;
75+
border-radius: 50%;
76+
box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px white;
77+
}
78+
79+
.iconName {
80+
margin-top: 12px;
81+
font-size: 1.8rem;
82+
color: #000000;
83+
letter-spacing: 2px;
84+
}
85+
86+
.forms {
87+
margin-top: 30px;
88+
text-align: left;
89+
}
90+
91+
92+
93+
94+
95+
input::placeholder {
96+
color: rgb(0, 0, 0);
97+
}
98+
99+
input {
100+
background: #ecf0f3;
101+
padding: 10px;
102+
padding-left: 20px;
103+
height: 50px;
104+
font-size: 14px;
105+
border-radius: 50px;
106+
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
107+
}
108+
109+
110+
111+
button:hover {
112+
box-shadow: none;
113+
}
114+
115+
label {
116+
margin-bottom: 4px;
117+
}
118+
119+
120+
a {
121+
position: absolute;
122+
font-size: 8px;
123+
bottom: 0px;
124+
right: 0px;
125+
text-decoration: none;
126+
color: black;
127+
background: #ecf0f3;
128+
padding: 4px;
129+
}
130+
131+
h1 {
132+
position: absolute;
133+
top: 0;
134+
left: 0;
135+
}

0 commit comments

Comments
 (0)