Skip to content

Commit 7d70c0b

Browse files
UserUser
User
authored and
User
committed
initial
0 parents  commit 7d70c0b

36 files changed

+11776
-0
lines changed

‎.DS_Store

6 KB
Binary file not shown.

‎css/bootstrap.css

+10,278
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎fonts/SourceSansPro-Bold.ttf

242 KB
Binary file not shown.

‎form.html

+249
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
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>Document</title>
8+
</head>
9+
<body style="background: url('./images/losz.jpeg');">
10+
<style>
11+
body {
12+
margin:0;
13+
padding:0;
14+
font-family: sans-serif;
15+
16+
}
17+
18+
.form {
19+
background-color: red;
20+
}
21+
.login-box {
22+
position: absolute;
23+
top: 50%;
24+
left: 50%;
25+
width: 400px;
26+
padding: 40px;
27+
transform: translate(-50%, -50%);
28+
background: rgba(0,0,0,.5);
29+
box-sizing: border-box;
30+
box-shadow: 0 15px 25px rgba(0,0,0,.6);
31+
border-radius: 10px;
32+
}
33+
34+
.login-box h2 {
35+
margin: 0 0 30px;
36+
padding: 0;
37+
color: #fff;
38+
text-align: center;
39+
}
40+
41+
.login-box .user-box {
42+
position: relative;
43+
}
44+
45+
.login-box .user-box input {
46+
width: 100%;
47+
padding: 10px 0;
48+
font-size: 16px;
49+
color: #fff;
50+
margin-bottom: 30px;
51+
border: none;
52+
border-bottom: 1px solid #fff;
53+
outline: none;
54+
background: transparent;
55+
}
56+
.login-box .user-box label {
57+
position: absolute;
58+
top:0;
59+
left: 0;
60+
padding: 10px 0;
61+
font-size: 16px;
62+
color: #fff;
63+
pointer-events: none;
64+
transition: .5s;
65+
}
66+
67+
.login-box .user-box2 {
68+
position: relative;
69+
}
70+
71+
.login-box .user-box2 input {
72+
width: 100%;
73+
padding: 10px 0;
74+
font-size: 16px;
75+
color: #fff;
76+
margin-bottom: 30px;
77+
border: none;
78+
border-bottom: 1px solid #fff;
79+
outline: none;
80+
background: transparent;
81+
}
82+
.login-box .user-box2 label {
83+
position: absolute;
84+
top:0;
85+
left: 0;
86+
padding: 10px 0;
87+
font-size: 16px;
88+
color: #fff;
89+
pointer-events: none;
90+
transition: .5s;
91+
}
92+
93+
.login-box .user-box2 input:focus ~ label,
94+
.login-box .user-box input:valid ~ label {
95+
top: -20px;
96+
left: 0;
97+
color: #03e9f4;
98+
font-size: 12px;
99+
}
100+
101+
.login-box .user-box input:focus ~ label,
102+
.login-box .user-box input:valid ~ label {
103+
top: -20px;
104+
left: 0;
105+
color: #03e9f4;
106+
font-size: 12px;
107+
}
108+
109+
.login-box form a {
110+
position: relative;
111+
display: inline-block;
112+
padding: 10px 20px;
113+
color: #03e9f4;
114+
font-size: 16px;
115+
text-decoration: none;
116+
text-transform: uppercase;
117+
overflow: hidden;
118+
transition: .5s;
119+
margin-top: 40px;
120+
letter-spacing: 4px
121+
}
122+
123+
.login-box a:hover {
124+
background: #03e9f4;
125+
color: #fff;
126+
border-radius: 5px;
127+
box-shadow: 0 0 5px #03e9f4,
128+
0 0 25px #03e9f4,
129+
0 0 50px #03e9f4,
130+
0 0 100px #03e9f4;
131+
}
132+
133+
.login-box a span {
134+
position: absolute;
135+
display: block;
136+
}
137+
138+
.login-box a span:nth-child(1) {
139+
top: 0;
140+
left: -100%;
141+
width: 100%;
142+
height: 2px;
143+
background: linear-gradient(90deg, transparent, #03e9f4);
144+
animation: btn-anim1 1s linear infinite;
145+
}
146+
147+
@keyframes btn-anim1 {
148+
0% {
149+
left: -100%;
150+
}
151+
50%,100% {
152+
left: 100%;
153+
}
154+
}
155+
156+
.login-box a span:nth-child(2) {
157+
top: -100%;
158+
right: 0;
159+
width: 2px;
160+
height: 100%;
161+
background: linear-gradient(180deg, transparent, #03e9f4);
162+
animation: btn-anim2 1s linear infinite;
163+
animation-delay: .25s
164+
}
165+
166+
@keyframes btn-anim2 {
167+
0% {
168+
top: -100%;
169+
}
170+
50%,100% {
171+
top: 100%;
172+
}
173+
}
174+
175+
.login-box a span:nth-child(3) {
176+
bottom: 0;
177+
right: -100%;
178+
width: 100%;
179+
height: 2px;
180+
background: linear-gradient(270deg, transparent, #03e9f4);
181+
animation: btn-anim3 1s linear infinite;
182+
animation-delay: .5s
183+
}
184+
185+
@keyframes btn-anim3 {
186+
0% {
187+
right: -100%;
188+
}
189+
50%,100% {
190+
right: 100%;
191+
}
192+
}
193+
194+
.login-box a span:nth-child(4) {
195+
bottom: -100%;
196+
left: 0;
197+
width: 2px;
198+
height: 100%;
199+
background: linear-gradient(360deg, transparent, #03e9f4);
200+
animation: btn-anim4 1s linear infinite;
201+
animation-delay: .75s
202+
}
203+
204+
@keyframes btn-anim4 {
205+
0% {
206+
bottom: -100%;
207+
}
208+
50%,100% {
209+
bottom: 100%;
210+
}
211+
}
212+
213+
</style>
214+
<div class="form" style="background-color: red;">
215+
<div class="login-box">
216+
<h2>Login</h2>
217+
<form>
218+
<div class="user-box">
219+
<input type="text" name="" required>
220+
<label>Username</label>
221+
</div>
222+
<div class="user-box">
223+
<input type="text" name="" required>
224+
<label>Email</label>
225+
</div>
226+
<div class="user-box">
227+
<input type="number" name="" required>
228+
<label>Number</label>
229+
</div>
230+
<div class="user-box">
231+
<input type="password" name="" required>
232+
<label>Password</label>
233+
</div>
234+
<div class="user-box">
235+
<input type="password" name="" required>
236+
<label>Confirm password</label>
237+
</div>
238+
<a href="./index.html">
239+
<span></span>
240+
<span></span>
241+
<span></span>
242+
<span></span>
243+
Submit
244+
</a>
245+
</form>
246+
</div>
247+
</div>
248+
</body>
249+
</html>

‎images/.DS_Store

8 KB
Binary file not shown.

‎images/Instagram.svg

+3
Loading

‎images/Youtube.svg

+3
Loading

‎images/amg.png

556 KB
Loading

‎images/as.webp

157 KB
Binary file not shown.

‎images/bmw m3.png

783 KB
Loading

‎images/bmw x5.png

740 KB
Loading

‎images/bmw x6.png

2.35 MB
Loading

‎images/bmw-3-series-sedan-m-automobiles-sp-desktop.jpeg

250 KB
Loading

‎images/cars.png

1002 Bytes
Loading

‎images/cars.webp

98.8 KB
Binary file not shown.

‎images/gelik.png

1.21 MB
Loading

‎images/kisspng-2016-bmw-m2-car-bmw-m3-bmw-m6-bmw-m2-coupe-white-car-5a7495d29b2988.8237928215175899706356.png

1.53 MB
Loading

‎images/light-star.svg

+3
Loading

‎images/line.jpg

638 Bytes
Loading

‎images/log.webp

174 KB
Binary file not shown.

‎images/losz.jpeg

419 KB
Loading

‎images/main6.jpg

32.3 KB
Loading

‎images/menu.svg

+5
Loading

‎images/mers-e63.png

1.16 MB
Loading

‎images/par.webp

230 KB
Binary file not shown.

‎images/toppng.com-bmw-car-2048x1200.png

368 KB
Loading

‎images/zvzxv.jpeg

569 KB
Loading

‎images/zxcv.jpeg

217 KB
Loading

0 commit comments

Comments
 (0)