Cyberpunk Giriş Paneli.html
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
<div class="cyber-box">
<h2 class="cyber-title">LOGIN</h2>
<div class="field">
<label>USER NAME</label>
<input type="text" class="cyber-input" placeholder="_">
</div>
<div class="field">
<label>PAWSSWORD</label>
<input type="password" class="cyber-input" placeholder="_">
</div>
<button class="cyber-btn">
<span class="cyber-btn__text">LOGIN</span>
</button>
</div>
<style>
:root {
--red: #ff0000;
--black: #000000;
}
.cyber-box {
background: var(--black);
padding: 40px;
width: 320px;
border: 2px solid var(--red);
position: relative;
/* Butondaki gibi asimetrik kesik hatlar */
clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%);
box-shadow: 12px 12px 0px 0px var(--red);
}
.cyber-title {
color: #fff;
font-family: 'Orbitron', sans-serif;
letter-spacing: 4px;
margin-bottom: 30px;
border-left: 5px solid var(--red);
padding-left: 10px;
}
.field {
margin-bottom: 25px;
}
.field label {
display: block;
color: var(--red);
font-size: 10px;
letter-spacing: 2px;
margin-bottom: 8px;
font-weight: bold;
}
.cyber-input {
width: 100%;
background: #111;
border: 1px solid #333;
padding: 12px;
color: #fff;
outline: none;
font-family: monospace;
/* Giriş alanlarına da hafif kesik efekti */
clip-path: polygon(0 0, 100% 0, 100% 80%, 95% 100%, 0 100%);
transition: 0.3s;
}
.cyber-input:focus {
border-color: var(--red);
box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}
/* İstediğin Butonun Formla Uyumlu Hali */
.cyber-btn {
width: 100%;
position: relative;
padding: 15px;
background: var(--black);
color: #fff;
font-family: 'Orbitron', sans-serif;
font-weight: 800;
text-transform: uppercase;
border: 2px solid var(--red);
cursor: pointer;
transition: all 0.2s;
clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
box-shadow: 6px 0px 0px 0px var(--red);
}
.cyber-btn:hover {
background: var(--red);
color: var(--black);
box-shadow: -6px 0px 0px 0px #fff;
}
/* Sağ alt köşe detayı */
.cyber-box::after {
content: 'SEC-88';
position: absolute;
bottom: 5px;
right: 15px;
font-size: 8px;
color: var(--red);
font-family: monospace;
}
</style>